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: [email protected]
• By Github: https://github.com/tyhour