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