React Native Video (Extension)

A wrapper library for react-native-video that provide great video experience for user.

• support fullscreen mode for both iOS & Android
• auto rotate video
• lightweight
• able to use with react-navigation (see example)
• icon & color configurable
• written in typescript
• works with Mux

Currently, comes with 2 styles

| Youtube | Facebook | | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | | |

Installation

yarn add react-native-video react-native-video-extension

or

npm install --save react-native-video react-native-video-extension

Usage

Basic

import React from 'react';
import { View } from 'react-native';
import { YoutubePlayer } from 'react-native-video-extension';
// or use facebook player style
// import { FacebookPlayer } from "react-native-video-extension";

function Screen() {
  return (
    <View>
      <YoutubePlayer
        mode="auto-fit"
        source={{
          uri: 'https://stream.mux.com/Tyu80069gbkJR2uIYlz2xARq8VOl4dLg3.m3u8',
        }}
      />
    </View>
  );
}

See the full code

Note: each screen should have only one type of player!

More examples

• SafeArea
• ScrollView
• FlatList
• StackNavigation
• MuxData

API

YoutubePlayer, FacebookPlayer

| PropName | type | required | default | description | | :-----------: | ---------------------------------- | :------: | :------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | mode | "auto-fit" | "contain" | ✅ | | auto-fit : When rotate device or enter fullscreen manually, the video will display on the orientation that it fit the device the most contain : In fullscreen, the video will always display the same orientation as user. | | initialPaused | boolean | | false | pause video on mount | | initialMuted | boolean | | false | mute video on mount | | aspecRatio | number | "portrait" | "landscape | | portrait | the ratio of the video when it is not in fullscreen mode note: landscape is 16:9, portrait is 3:4 | | customIcon | object | | material icons | override default icon | | renderToolbar | (fullscreen) => ReactNode | | | render something at the top (inside video), such as Title, Share button, More action |

mode detail

| Auto Fit | Contain | | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | | |

customIcon example

import { Image } from 'react-native';

<YoutubePlayer
  mode="auto-fit"
  source={{
    uri: 'https://stream.mux.com/Tyu80069gbkJR2uIYlz2xARq8VOl4dLg3.m3u8',
  }}
  customIcon={{
    fullscreenIcon: (
      <Image
        src={require('../your-assets/fullscreen-icon.png')}
        style={{ width: 24, height: 24 }}
      />
    ),
    // exitFullscreenIcon: <SomeIcon />,
    // playIcon,
    // pauseIcon,
    // replayIcon,
    // forwardIcon,
    // refreshIcon,
    // volumeOffIcon,
    // volumeUpIcon,
  }}
/>;

ScreenContainer

React Context that provide state of the video, useful when you want to do some fancy thing. In this example, we need to disable scroll gesture in ScrollView while we are in fullscreen mode or dragging the thumb in the seeker.

import { ScreenContainer, FacebookPlayer } from 'react-native-video-extension';

function App() {
  return (
    <ScreenContainer>
      {({ fullscreen, seeking }) => {
        return (
          <SafeAreaView
            style={{ flex: 1, backgroundColor: fullscreen ? '#000' : '#fff' }}
          >
            <ScrollView
              scrollEnabled={!fullscreen && !seeking}
              style={{ flex: 1 }}
              contentContainerStyle={{ flex: fullscreen ? 1 : 0 }}
            >
              {/* some header goes here */}
              <FacebookPlayer
                source={{
                  uri:
                    'https://stream.mux.com/Tyu80069gbkJR2uIYlz2xARq8VOl4dLg3.m3u8',
                }}
                mode="contain"
              />
              {/* some content goes here */}
            </ScrollView>
          </SafeAreaView>
        );
      }}
    </ScreenContainer>
  );
}

| name | value | description | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------ | | fullscreen | false | "PORTRAIT" | "LANDSCAPE-LEFT" | "LANDSCAPE-RIGHT" | if not false, it provide the device orientation while in fullscreen mode | | seeking | boolean | whether the thumb in seeker is dragging or not | | loading | boolean | if true, video is not ready to play | | consoleHidden | boolean | if true, the controls is displaying (ex, play, forward, replay, seeker, ...) | | isLandscape | boolean | if true, the loaded video has naturalSize = "landscape" |

If you want to hook into the context in other component, use useVideoCtx like this.

import { useEffect } from 'react';
import { View, Text } from 'react-native';
import { useVideoCtx } from 'react-native-video-extension';

// This component must be rendered inside ScreenContainer only!
function Awesome() {
  const { fullscreen } = useVideoCtx();
  useEffect(() => {
    if (fullscreen) {
      // Logger.send('fullscreen', 'uid)
      // just an example, I have no idea what I just wrote
    }
  }, [fullscreen]);
  return (
    <View>
      <Text>{fullscreen ? 'Wow' : ''}</Text>
    </View>
  );
}

Integration

By default, this extension works without additional libraries, but the experience is not perfect.

Lock to Portrait

One thing to improve is to lock the screen to "Portrait" mode before entering fullscreen.

Install react-native-orientation-locker (follow instruction here)

// in app.tsx or the file that renders video
// ...other import
import {
  connectOrientationLib,
  YoutubePlayer,
} from 'react-native-video-extension';
import Orientation from 'react-native-orientation-locker';

connectOrientationLib(Orientation);

function Screen() {
  // ... code that render <YoutubePlayer />
}

That's it, try to restart the metro & simulator. navigate to the screen and press ⌘ + ←. The video should enter fullscreen automatically.

Provide insets for some devices

Ex, iPhone 11 up has notch & spacing at the top, bottom or left,right. We can improve the experience by rendering the video in safe area.

Install react-native-safe-area-context (follow instruction here)

// in app.tsx or the file that renders video
// ...other import
import { connectUseInsets, YoutubePlayer } from 'react-native-video-extension';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

connectUseInsets(useSafeAreaInsets);

function Screen() {
  // ... code that render <YoutubePlayer />
}

Restart the metro & simulator, you should see the difference like the image below.

| Before | After | | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | | |

Incoming Feature

Take a look at MVP project board