React Native Media Controls

Overview

The react-native-media-controls is a UI component designed to enhance media manipulation within a React Native application. This component, which is typed using Typescript, offers various features to control media playback with ease and efficiency.

Features

• mainColor: Customize the color of the media controls.
• isLoading: Indicates when the media is loading.
• isFullScreen: Toggle fullscreen mode for the media player.
• fadeOutDelay: Customizable delay for fade-in and fade-out transitions.
• progress: Displays the current time of the media player.
• duration: Shows the total duration of the media.
• playerState: Indicates the state of the player (PLAYING, PAUSED, or ENDED).
• onFullScreen: Triggered when the fullscreen button is pressed.
• onPaused: Triggered when the play/pause button is pressed.
• onReplay: Triggered when the replay button is pressed.
• onSeek: Triggered when the user releases the slider.
• onSeeking: Triggered when the user interacts with the slider.
• showOnStart: Controls the visibility of the controls during the initial render.

Installation

To install the react-native-media-controls component in your React Native project, you can follow these steps:

1. Install the package using npm:

   npm install react-native-media-controls
   

2. Import the component in your file:

   import MediaControls from 'react-native-media-controls';
   

3. You can now use the MediaControls component in your application.

Summary

The react-native-media-controls component is a valuable addition to React Native applications, offering a range of features for seamless media manipulation. With customizable options for colors, playback states, and interactions, this component provides a user-friendly interface for controlling media playback.