This is an original fork of React Native Media Controls (Not actively maintained)

Installation

npm i @freakycoder/react-native-media-controls

Usage

You can check the example for a fully working example

// Require the module
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

  render() {
    return (
      <View style={styles.container}>
        <Video
          volume={0.0}
          resizeMode="cover"
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          paused={this.state.paused}
          style={styles.mediaPlayer}
          onProgress={this.onProgress}
          onLoadStart={this.onLoadStart}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          source={{ uri: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
        />
        <MediaControls
          mainColor="orange"
          onSeek={this.onSeek}
          onReplay={this.onReplay}
          onPaused={this.onPaused}
          onSeeking={this.onSeeking}
          duration={this.state.duration}
          toolbar={this.renderToolbar()}
          isLoading={this.state.isLoading}
          onFullScreen={this.onFullScreen}
          progress={this.state.currentTime}
          playerState={this.state.playerState}
        />
      </View>
    );
  }

Props

| Prop | Type | Optional | Default | Description | | ------------ | -------- | -------- | ---------------------- | ----------------------------------------------------------------------------------------------------- | | toolbar | node | Yes | | Add a custom view on the top of the controls | | mainColor | string | Yes | rgba(12, 83, 175, 0.9) | Change custom color to the media controls | | isLoading | bool | Yes | false | When is loading | | isFullScreen | bool | Yes | false | To change icon state of fullscreen | | 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 | | 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 |

Constants

  PLAYING,
  PAUSED,
  ENDED,

Future Plans

• [ ] Refactoring (Coming Soon!)
• [ ] Better README (Coming Soon!)
• [ ] Better Example (Coming Soon!)
• [ ] More Customizable Options
• [ ] Typescript Challenge!

License

React Native Media Controls Library is available under the MIT license. See the LICENSE file for more info.