react-native-video-release v1.0.2

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

VideoMiniPlayerProps

VideoItemProps

OptionsProps

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: phaityhour@gmail.com
• By Github: https://github.com/tyhour