React Native Video Fullscreen

With controls and orientation handling for android and ios

I was trying to implement Video component in react-native but every library has it’s pros and cons specially regarding support for video-controls in android and IOS platform plus fullscreen support ,and to handle situation when orientation is locked i.e app runs on portrait mode only , It was little hard to give a full screen support on both platform with same codebase so i used features of library (react-native-video-controls) and (react-native-orientation-locker) and added my own code to make it platform independent for fullscreen support in android ios both with same code which supports orientation too.

Let’s Start

First install react-native-video , react-native-video-controls and react-native-orientation-locker

We’ll need these three libraries to setup video component in our app

npm install react-native-video
npm install react-native-orientation-locker
npm install react-native-video-controls
and then link them using react-native link

For using more functionalities and functions of these libraries or manual installation , as these libraries are highly customizable and provides other features you can explore their repositories according to your need.

itsnubix/react-native-video-controls

react-native-community/react-native-video

wonday/react-native-orientation-locker

Insights of these libraries and why we are using them(Pros and Cons)

1.react-native-video
additional-library:react-native-orientation-locker (for android)

PROS

• Good for ios
• Auto handle everything in ios
• Provides Video Controls in ios
• and handle screen orientation by itself in ios

Cons

• Not possible to add any control like volume control in ios when switched to fullscreen
• In IOS doesn’t provide any support when switched to full screen as control moves to native
• Doesn’t Provide controls in Android
• Don’t handle full screen in android
• And don’t support orientation change if locked
• We need to customize and create everything in android

2. react-native-video-controls
PROS

• Wrapper upon react-native-video
• provides control on ios and android both
• Good for both ios and android

CONS

• Don’t provide orientation support in both ios and android(but we can implement our own)
• Don’t provide fullscreen feature (but we can implement our own)

3. react-native-orientation-locker
This library is must in both of cases to unlock the orientation and lock the orientation according to our need.
From this we can unlock orientation on a particular screen
and we can strict to show potrait mode on overall app .

Enough discussion now let’s start implementation

First configure react-native-orientaiton

iOS

Add the following to your project’s AppDelegate.m:

+#import "Orientation.h"
@implementation AppDelegate
// ...
+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [Orientation getOrientation];
+}
@end

Android

Add following to android/app/src/main/AndroidManifest.xml

<activity
        ....
+       android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
          ....
      </activity>

Implement onConfigurationChanged method (in MainActivity.java)

// ...
+import android.content.Intent;
+import android.content.res.Configuration;
public class MainActivity extends ReactActivity {
+   @Override
+   public void onConfigurationChanged(Configuration newConfig) {
+       super.onConfigurationChanged(newConfig);
+       Intent intent = new Intent("onConfigurationChanged");
+       intent.putExtra("newConfig", newConfig);
+       this.sendBroadcast(intent);
+   }
    // ......
}

Add following to MainApplication.java (This will be added automatically by auto link. If not, please manually add the following )

//...
+import org.wonday.orientation.OrientationPackage;
    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
+      packages.add(new OrientationPackage());
      return packages;
    }
//...

Second if your app is for portrait mode only

You need to lock your app for portrait mode for other screen lock it in componentdidmount or useEffect in hooks like this.

You can write this in app.js if you want to lock in whole app or particular screen.

import Orientation from 'react-native-orientation-locker';
useEffect(() =>{
Orientation.lockToPortrait();
},[]);

Now next step is to make video-component-view ui

Let’s Create a model component to open video in a model

This code in parent view will detect the screen orientation as

We've used onLayout event in parent <View> to detect changes in layout or orientation
In this event we update the width and height of device that we store in state
and then we detect if there's any change then we call detectOrientation function

Overall Implementation

Here we are done folks that’s all we need to do. Please comment if you face any difficulty.
Complete Code is here with implementation
https://github.com/rishisahu20/react-native-video-fullscreen-control.git

Thanks.