react-native-video-release

Warning: This package use for react native typescript templates (.tsx) only. This package for personal use.

1. Installing

using yarn:

yarn add react-native-video-release

2. Install dependencies

Using yarn:

yarn add react-native-video @react-native-community/slider @openspacelabs/react-native-zoomable-view react-native-paper react-native-vector-icons @react-native-async-storage/async-storage react-native-keep-awake react-native-orientation-locker react-native-fullscreen-chz @react-navigation/native

3. Install types for dependencies

Using yarn:

yarn add @types/react-native-video @types/react-native-vector-icons @types/react-native-keep-awake

4. IOS Install dependencies

Using npx:

npx pod-install

5. Please follow document of dependencies

• React Native Video
• React Native Paper
• React Native Vector Icons
• React Native Orientation Locker
• React Native Fullscreen CHZ
• React Navigation

react-native-video-release was custom from react-native-video package by Brent Vatne.

Overview

This package support current play history too. Now we're not support with cache storage but we work with video buffing quality (Android only). Enjoy with our customization, get new experience and fast performance from now. Thanks.

Example Usages

For VideoPlayer can use multiple videos

import React from "react";
import { View,Text } from "react-native";
import {VideoPlayer, useFullScreen } from 'react-native-video-release';

const Example = () => {
  const { getFullScreen } = useFullScreen();

  return (
    <View style={{ flex: 1 }}>
        <VideoPlayer
            navigationRef={navigationRef}
            source={[
              {
                title: 'This is my video 1',
                url: 'https://www.w3schools.com/html/mov_bbb.mp4',
                },
              },
              {
                title: 'This is my video 2',
                url: 'https://www.w3schools.com/html/mov_bbb.mp4',
                },
              },
            ]}
        />

         {/* check full screen (When full screen all content will be hidden)  */}
        {!getFullScreen && (
            <Text>This is content</Text>
        )}
    </View>
  );
};
export default Example;

For VideoMiniPlayer can use only one video

import React from "react";
import { View,Text } from "react-native";
import {VideoMiniPlayer, useFullScreen } from 'react-native-video-release';

const Example = () => {
  const { getFullScreen } = useFullScreen();

  return (
    <View style={{ flex: 1 }}>
        <VideoMiniPlayer
            navigationRef={navigationRef}
            source={{
                title: 'This is my video 1',
                url: 'https://www.w3schools.com/html/mov_bbb.mp4',
                },
              }}
        />

         {/* check full screen (When full screen all content will be hidden)  */}
        {!getFullScreen && (
          <Text>This is content</Text>
        )}
    </View>
  );
};
export default Example;

VideoPlayerProps

Props	Type	Description	Default
navigationRef	ref	This navigation use for go back with React Navigation	undefined
pauseOnNavigate	boolean	pause video on navigate to new screen	true
source	VideoItem[]	Video items you want to play (Allow multiple videos)	required
initialIndex	number	Which video you want to play	0
options	OptionProps	Show control on your video	{}
disablePanOnInitialZoom	boolean	Disable on video zoom or not (it effect when full screen)	false
minimumTrackTintColor	string	Color code of minimum track color	'#f05a28'
thumbTintColor	string	Color code of thumb color	'#f05a28'
backgroundColor	string	Background color of container and video	'#1e1a1d'
titleColor	string	Title color of video	'#f6f6f6'
playbackHistory	boolean	If you want to playback history of your video	false
videoHeight	number	You can set height of your video (only work on portrait)	height of 1280 x 720 Ratio
videoWidth	number	You can set width of your video (only work on portrait)	full width
videoHeightRatio	number	You can set height ratio of your video (only work on portrait)	720 Ratio
videoWidthRatio	number	You can set width ratio of your video (only work on portrait)	1280 Ratio
VideoProperty	Inherited VideoProperty props...	You can use property from react-native-video also time	any

VideoMiniPlayerProps

Props	Type	Description	Default
navigationRef	ref	This navigation use for go back with React Navigation	undefined
pauseOnNavigate	boolean	pause video on navigate to new screen	true
source	VideoItem	Video item you want to play (Only one video)	required
options	OptionProps	Show control on your video	{}
minimumTrackTintColor	string	Color code of minimum track color	'#f05a28'
thumbTintColor	string	Color code of thumb color	'#f05a28'
backgroundColor	string	Background color of container and video	'#1e1a1d'
titleColor	string	Title color of video	'#f6f6f6'
playbackHistory	boolean	If you want to playback history of your video	false
videoHeight	number	You can set height of your video (only work on portrait)	height of 1280 x 720 Ratio
videoWidth	number	You can set width of your video (only work on portrait)	full width
videoHeightRatio	number	You can set height ratio of your video (only work on portrait)	720 Ratio
videoWidthRatio	number	You can set width ratio of your video (only work on portrait)	1280 Ratio
VideoProperty	Inherited VideoProperty props...	You can use property from react-native-video also time	any

VideoItemProps

Props	Type	Description	Default
title	string	Title of video	""
url	string	Url of your video	""
thumbnail	{ url : string }	Thumbnail Image url of your video	{ url : "" }

OptionsProps

Props	Type	Description	Default
showFullScreenButton	boolean	Show full screen button	true
showVolumeButton	boolean	Show volume button	true
showResizeButton	boolean	Show resize button	true
showProgressBar	boolean	Show progress bar duration	true
showDuration	boolean	Show duration time	true
showTitle	boolean	Show title of video	true
showPoster	boolean	Show poster before load video	true
showBackButton	boolean	Show back button (Portrait)	false
showNextButton	boolean	Show next button (VideoPlayer only)	true
showPreviousButton	boolean	Show previous button (VideoPlayer only)	true
showReplayNextButton	boolean	Show replay next button (VideoPlayer only)	true
showReplayPreviousButton	boolean	Show replay previous button (VideoPlayer only)	true
showSpeedButton	boolean	Show speed button (VideoPlayer only)	true
showSettingButton	boolean	Show setting button (VideoPlayer only)	true
showRepeatButton	boolean	Show repeat button (VideoPlayer only)	true

Hooks for layout

useFullScreen()

Use inside your body component only

import React from "react";
import { View, Text } from "react-native";
import { useFullScreen } from "react-native-video-release";

const Example = () => {
  const { width, height, screen, getFullScreen } = useFullScreen();

  return (
    <View style={{ flex: 1 }}>
      <Text>This is full screen: {getFullScreen}</Text>
    </View>
  );
};
export default Example;

• width (number): width of screen without notch header or footer
• height (number): height of screen without notch header or footer
• screen { width , height } (number): screen with notch header or footer
• getFullScreen (boolean): check your screen is full screen or not

License

This project is licensed under the MIT License.

Contact Me

• By Email: [e-mail]
• By Github: https://github.com/tyhour