Warning: This package use for react native typescript templates (.tsx) only. This package for personal use.
using yarn:
yarn add react-native-video-release
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
Using yarn:
yarn add @types/react-native-video @types/react-native-vector-icons @types/react-native-keep-awake
Using npx:
npx pod-install
- 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.
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.
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;
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;
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 |
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 |
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 : "" } |
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 |
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
This project is licensed under the MIT License.
- By Email: phaityhour@gmail.com
- By Github: https://github.com/tyhour