Skip to content
Go to file


Failed to load latest commit information.
Latest commit message
Commit time


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

npm version FOSSA Status

npm License: MIT

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.

FOSSA Status



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+
  • 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


Two example apps are created to demonstrate how to use this package.

First one is a simple app that uses no special setup for navigation/routing and state management.

In the second example, react-native-router-flux is used to make two scenes and switch between them using the provided routing functions (Actions).

Usage with no-setup

Simply define a view with flex set to 1 containing FullScreenVideo component:

import React, { Component } from 'react';
import { View } from 'react-native';
import FullscreenVideo from 'react-native-fullscreen-video';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={{flex: 1}}>
        <FullscreenVideo src={{uri: "<video-url>"}} />

Usage with react-native-router-flux

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 (
        <Scene key="root">
          <Scene key="main" component={MainView} initial={true} hideNavBar={true} />
            duration={1} />

AppRegistry.registerComponent('example', () => example);
import { Actions } from 'react-native-router-flux';
<TouchableOpacity onPress={() => { Actions.fullscreenVideo({src: "<video-url>"}) }} />

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.


  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. FIXED I haven't tested it with any other routing/navigation package, other than react-native-router-flux. No special routing/navigation is needed, the component works independently.
  3. Not all properties are supported right now for the internal video component.
  4. It doesn't contain any player controls.


Contribution is always welcome!



You can’t perform that action at this time.