!Publish Package
!NPM

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 |
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| !image | !image |

Installation

``bash
yarn add react-native-video react-native-video-extension
`

or

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

Usage

$3

`tsx
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 (

mode="auto-fit"
source={{
uri: 'https://stream.mux.com/Tyu80069gbkJR2uIYlz2xARq8VOl4dLg3.m3u8',
}}
/>

);
}
`

See the full code

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

$3

- SafeArea
- ScrollView
- FlatList
- StackNavigation
- MuxData

API

$3

| 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 |
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| !Auto Fit | !Contain |

customIcon example

`tsx
import { Image } from 'react-native';

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

$3

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.

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

function App() {
return (

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


);
}}

);
}
`

| 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.

`tsx
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 (

{fullscreen ? 'Wow' : ''}

);
}
`

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)

`tsx
// 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
}
`

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)

`tsx
// 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
}
``

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

| Before | After |
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| !image | !image |

Incoming Feature

Take a look at MVP project board