React Native Video With Landscape Orientation

react native video flip

In a previous post, we explained how to add and set up a video player in your React Native application. This time around, we’ll show you how to add full-screen landscape orientation to your video player.

Before we start with React Native Video 

Keep in mind that the project files are in the initial post mentioned above. This post will pick up from where we left off on that article. We will use a new library to control our mobile screen orientation called ‘React Native Orientation Locker’.

Note: This demo was made with React Native version 63.3. The following setup applies only to React Native versions higher than 60.0. The setup instructions for older versions can be found on the official library documentation.

Let’s setup Orientation Locker

First of all, you’ll need to add the library to the project using one of the following commands in your terminal:

  • yarn add react-native-orientation-locker

  • npm i react-native-orientation-locker

For iOS devices, you’ll need to run the following command on Mac inside the ‘iOS’ project folder:

  • pod install

Next, you’ll need to manually modify some Android and iOS files to add some lines of code following the instructions below.

iOS setup

For iOS, you will need to modify the following file:

AppDelegate.m file


Link: AppDelegate.m

 

Android setup

For Android, you will need to modify the following file:

MainActivity.java


Link: MainActivity.java

 

MainApplication.java

Note: these changes should appear automatically, but if they don’t, you should make them yourself.


Link: MainApplication.java

 

Final changes

Now it’s time to make some changes to the VideoPlayer.js file.

It should look something like this:


Link: VideoPlayer.js

As you can see, there is a new useState hook to check if the video player is in full-screen mode. The ‘onFullScreen’ function will be triggered when the user presses the full-screen button or when they exit full-screen mode.

Finally, some styles must be added to fix the video player view on full-screen mode. These styles must also be taken into account when our React Native application has a top or bottom navigation bar, or both.

Player preview with and without React Native Video landscape orientation

react native video example

Bonus: lock your React Native Video orientation on portrait mode

Sometimes, you may want to keep your application from being used in landscape mode. This can be easily done by taking advantage of the ‘React Native Orientation Locker’ library we installed before.

In iOS, however, the best way of doing this is with Xcode, so we will see both alternatives.

Portrait mode for Android devices

On the App.js file, you need to import the React Native Orientation Locker library and then import the following line of code:

  • Orientation.lockToPortrait();

That’s it, the file should look something like this:


Link: App.js

 

Portrait mode for iOS devices

You don’t need to install anything to do this, just follow these steps:

  • Open the project on Xcode

  • Go to the project’s main folder

  • Go to ‘general’

  • Under ‘Deployment Info’ leave ‘Portrait’ checked

Run the application again from Xcode and the changes should be added.

Final thoughts on React Native Video with Landscape Orientation

Adding a landscape orientation to your video player drawer is simple thanks to the React Native Orientation Locker library. With this library, you can also set your entire project application to portrait mode or get full control over when you want something to be seen in landscape orientation.

Leave a Reply