React Native Video With Landscape Orientation
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 and use the library React Native Orientation Locker.
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
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
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 Landscape
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.
