react-native-fullscreen-video

A full-screen video component on top of react-native-video


One of the main issues of react-native-video is making video full-screen on Android. To solve this issue, I've made this package that acts as a full-screen video component.

Installation

To install react-native-fullscreen-video, you can use install from git or use a javascript package manager (e.g. npm or yarn).

+ To install from git (master branch):
~~~~
$ npm install git+https://github.com/mostafa/react-native-fullscreen-video.git
~~~~
+ To install using a javascript package manager, simply run this command (in this case we've used npm):
~~~~
$ npm install --save react-native-fullscreen-video
~~~~

Example

A simple app is provided as an example.

Usage

Although not mandatory, you can use react-native-router-flux to define a scene containing this component and then pass the necessary arguments, so that the component plays the video. The example app looks like this:

~~~~
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Scene, Router } from 'react-native-router-flux';
import FullScreenVideo from 'react-native-fullscreen-video';
import MainView from './app/mainview';

export default class example extends Component {
render() {
return (



key="fullscreenVideo"
component={FullScreenVideo}
hideNavBar={true}
duration={1} />


);
}
}

AppRegistry.registerComponent('example', () => example);
~~~~

~~~~
import { Actions } from 'react-native-router-flux';
...
{ Actions.fullscreenVideo({src: ""}) }} />
...
~~~~

By tapping on the TouchableOpacity component (or your own desired component), the full-screen video component would slide in and play the video in full-screen.

Limitation(s)

1. FIXED Your app should be locked in portrait orientation, for this component to work. Your app no longer needs to be locked in portrait orientation.
2. I haven't tested it with any other routing/navigation package, other than react-native-router-flux.
3. Not all properties are supported right now for the internal video component.
4. It doesn't contain any player controls.

Contribution

Contribution is always welcome!

License

MIT