https://github.com/charliesbot/react-native-media-controls
A sweet UI component to manipulate your media. Strongly typed.
https://github.com/charliesbot/react-native-media-controls
controls react-native typescript video video-controls
Last synced: 2 months ago
JSON representation
A sweet UI component to manipulate your media. Strongly typed.
- Host: GitHub
- URL: https://github.com/charliesbot/react-native-media-controls
- Owner: charliesbot
- License: mit
- Created: 2016-06-29T17:49:21.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2023-06-21T10:27:41.000Z (almost 3 years ago)
- Last Synced: 2025-08-11T19:45:58.098Z (10 months ago)
- Topics: controls, react-native, typescript, video, video-controls
- Language: TypeScript
- Homepage:
- Size: 27.9 MB
- Stars: 187
- Watchers: 6
- Forks: 107
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-media-controls
A sweet UI component to manipulate your media. Strongly typed using Typescript.
## Installation
```bash
// install package
yarn add react-native-media-controls
// install react-native-slider, as this is a dependency of this library
yarn add react-native-slider
```
## Usage
```js
// Require the module
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
const App = () => {
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const [isFullScreen, setIsFullScreen] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [paused, setPaused] = useState(false);
const [playerState, setPlayerState] = useState(PLAYER_STATES.PLAYING);
// ... ... ...
// ... ... ...
return (
I'm a custom toolbar
);
};
```
## Props
| Prop | Type | Optional | Default | Description |
|--------------|----------|----------|------------------------|----------------------------------------------------------------------|
| mainColor | string | Yes | rgba(12, 83, 175, 0.9) | Change custom color to the media controls |
| isLoading | boolean | Yes | false | When is loading |
| isFullScreen | boolean | Yes | false | To change icon state of fullscreen |
| fadeOutDelay | number | Yes | 5000 | Allows to customize the delay between fade in and fade out transition|
| progress | number | No | | Current time of the media player |
| duration | number | No | | Total duration of the media |
| playerState | number | No | | Could be PLAYING, PAUSED or ENDED (take a look at constants section) |
| onFullScreen | function | Yes | | Triggered when the fullscreen button is pressed. If not provided, the fullscreen icon is not displayed |
| onPaused | function | No | | Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED) |
| onReplay | function | Yes | | Triggered when the replay button is pressed |
| onSeek | function | No | | Triggered when the user released the slider |
| onSeeking | function | Yes | | Triggered when the user is interacting with the slider |
| showOnStart | boolean | Yes | true | controls the visibility of the controls during the initial render |
## Constants
```js
PLAYING,
PAUSED,
ENDED,
```
## Example
Refer to the example folder to find an implementation of this project