react-native-media-tools v0.3.2

react-native-media-tools

It's a lib to facilitate the construction of a media player for react-native with react-native-video

Getting started

Install react-native-video

$ yarn add react-native-media-tools

Usage

import MediaPlayer from 'react-native-media-tools';

const App = () => (
	<MediaPlayer
		source={your_amazing_media}
		width={320}
		height={200}
	/>
)

Props

This lib supports almost all react-native-video props, because some are used internally by media players.\ Unsupported props: controls, muted, paused

type

Defines what type of media player will be rendered. Default: video

Component Props

errorScreenComponent

Allows you to replace the error screen. List of props received on component: Property | Type | Description --- | --- | --- reload | function | Function to reload media.

Example of a valid component:

export default ErrorScreen = ({reload}) => (
	<View>
		<Text>
			ERROR TRYING TO PLAY THE MEDIA
		</Text>
		<TouchableOpacity 
			onPress={reload}
		>
			<Text>
				Reload
			</Text>
		</TouchableOpacity>
	</View>
)

initialPlayComponent

Allows you to replace the home screen with the play button. List of props received on component: Property | Type | Description --- | --- | --- togglePause | function | Function to toggle vídeo play or pause;

export default InitialPlay = ({togglePause}) => (
	<View>
		<TouchableOpacity 
			onPress={togglePause}
		>
			<Text>
				Play
			</Text>
		</TouchableOpacity>
	</View>
)

loadingComponent

Allows you to replace the loading screen. This component does not receive any props.

export default Loading = () => (
	<View>
		<ActivityIndicator size='large'/>
	</View>
)

controlBarComponent

Allows you to replace the control bar of media player. List of props received on component:

export default ControlBar = ({
	togglePause, 
	toggleMute, 
	reload, 
	paused, 
	muted, 
	currentTimeFormatted
}) => (
	<View>
		<TouchableOpacity
			onPress={togglePause}
		>
			<Text style={styles.icon}>
				{paused ? 'play' : 'pause'}
			</Text>
		</TouchableOpacity>
		<Text>
			{currentTimeFormatted}
		</Text>
		<TouchableOpacity
			onPress={toggleFullScreen}
		>
				{fullscreen ? 'exit_fullscreen' : 'enter_fullscreen'}
		</TouchableOpacity>
	</View>
)