React Native Video by Example - All Issues Resolved
Free article submittion
Fady Soliman

Everything you need to know about React Native Video

With Code Snippets

If you are a mobile application developer, skilled in React Native, then it’s highly likely you needed to add a video player in your app.


In this post, we will create a demo app with two examples using two different React Native plugins to play a video with a fully controlled video player in a single application.


A fully working React Native app will be created in this post from scratch and we will add two different React Native Video plugins and use them separately step by step handling most if not all of the issues you might have encountered using the most common plugins online.




The React Native video plugins that will be used in this post are:


  1. React Native Video.
  2. React Native Video Player.
  3. React Navigation.


Both plugins will be used in the demo app, and we will go through the issues of each of them, explain all the pros and cons and when to favor one over the other.


This post will approach a working React Native Video through the following steps

  1. Create a brand new React Native Project.
  2. Using React Native Video plugin.
  3. The video is still playing in the background although, the screen is navigated away.
  4. Using React Native Video Player plugin.


A Working React Native Application Code is Attached to this Post

Before we start digging into the react native world and adding a working video player, it’s important to mention that a fully working React Native project code is attached to this post. Scroll down to the bottom of this post until you reach the “Attachments” section and feel free to download the project code and run it.


To successfully run the app, you should navigate to the root directory with your terminal first then type in the command yarn install to install all node modules dependencies, then finally run react-native run-ios to launch the app on your iPhone simulator.


First, Create a brand new React Native Project

In this post, it’s important to mention that we will “not” use Expo. Instead, a new React Native app project will be created using the vanilla react-native init command.


To start creating the app, run the following command in your terminal


react-native init ReactNativeVideo


The previous command will create a new React Native app and will automatically install CocoaPods. If CocoaPods installation failed for any reason, then run the following command to install them manually


cd ./ReactNativeVideo/ios && pod install


For more details about creating the React Native project and the issues that you might experience with CocoaPods, we encourage you to read this section.


Once your React Native app creation becomes a success, then it’s time to dive into adding the video to your app.


Second, Using React Native Video Plugin

To add the React Native video plugin to your app, make sure that your terminal is navigated to the project root directory and run the following command.


yarn add react-native-video


Once the previous command runs successfully, it’s important to re-install the pod file again by running the following command


cd ios && pod install


Once installing the pod file is a success, you are ready to consume the added video plugin.


As the plugin documentation says, the first step is to import the plugin as shown below


import Video from react-native-video


Then, add the <Video> component to the render() function of your component as shown below


Calling Video Component from react-native-video

Code is attached to this post in the attachments section



The previous video component code consumes the following props:


  1. source: the URL of the video that will be played in the app. In this case, we saved the URL in a separate file called Constants (shown below) because, it will be reused in other components and plugins. Feel free to code it your own way.
  2. ref: saves a reference of the video player for future use in other parts of the component.
  3. onBuffer: an event that is fired every time a network buffering is triggered.
  4. onError: an event that is fired in case of errors.
  5. controls: to show the player controls like the play, pause … etc.
  6. style: to apply styling to the video player, in this case, it’s as simple as adding flex: 1 so that the video player fits the width of the mobile device screen.


A quick snap of the Constants file is as follows.


Video URL in constants

Code is attached to this post in the attachments section



The video is still playing in the background, although the screen is navigated away


A common issue with the React Native Video plugin is if you play the video, then navigate away to another screen on your app, the video will still play in the background and the main problem with the React Native Video plugin is that it does not provide any methods to either pause or stop the video and here comes the bottleneck.


To fix that, we did a work around that is not desirable but actually “works”.


We will make use of react navigation to work around the issue mentioned earlier. Run the following command to install react navigation and the pods one shot.


install react-navigation && pod install
Installing React Navigation


If you’re not familiar with react navigation, we encourage you to check the documentation and just pick the minimal setup required to build a working stack navigation in your app. We will not go through that setup but feel free to download the fully working application code attached in the attachments section at the end of this post.


Now, back to the video component, to fix the video playing the background using react navigation you can add the following code to your component.


React Navigation work around to fix the video playing in background

Code is attached to this post in the attachments section



The work around is simple… If the React Navigation willFocus event is fired in the componentDidMount, this means that the component has been loaded onto the screen. We used this event because componentDidMount does not fire if the component is navigated to by the back button but this event works in this case.


Once the event is fired, then the showVideo set to true in the local state and it’s important to unsubscribe the event in the componentWillUnmount.


Then modify your component code to look like the following


Putting it all together with the react navigation trick

Code is attached to this post in the attachments section


The above code modifications are summarized as follows:


  1. We added a button to simulate navigating away from the current screen, and once the button is clicked, the state showVideo is set to false.
  2. We isolated the <Video> plugin in a separate function and added a check to show the video only in case the showVideo is set to true.


It’s now clear that the work around will only show the player in case the component is active on the screen and vice versa in case the component is navigated away.


The struggle was tangible and clear and although we could work around the earlier issue, this will not solve the problem if we needed to pause the video programmatically for example.


Not mentioning that the React navigation fix was not that desirable React Native best practice although, it worked.


That’s why we will provide another video plugin that will have most of those issues resolved implicitly and with cleaner code.


Using React Native Video Player

The React native video player plugin is actually a wrapper to the react native video. You can’t use react native video player without installing the React native video plugin in your app.


Assuming you have installed react native video, to install react native video player, please run the following command.


installing react-native-video-player using yarn


As shown above, react-native-video-player also uses react-native-vector-icons. Once you install the plugins, you should do a little trick to avoid a possible error that will appear on your screen where the video player is being called. The error should be something like:


“Unrecognized font family - Material Icons”



Unrecognized font family Material Icons


To fix that issue, you should first link your plugins in your iOS project by running the following command then re-install the pod file.


react-native link && cd ios && pod install



Now, it’s safe to call the video player in your component without issues. To do that, we encapsulated the player in a reusable component for a cleaner code and best practices. The reusable component should look like the following.


Reusable component calling react-native-video-player

Code is attached to this post in the attachments section



In the above component, we added the video player along with three buttons: Stop, Pause and Resume as this plugin provides some useful methods to call to handle all those video functionalities.


Although, the react-native-video-player documentation provides a stop() function, we found an issue with it, which is, although the stop button is tapped, the video seeks to the zero position but actually replays again without being stopped and to fix that we did the following:


  1. We replaced the stop() function with a seek(0) and a pause() but that did not actually stop the video too.
  2. The fix was to encapsulate the seek(0) in a setTimeout function and that did the trick. It’s still not the best practice, but the overall outcome is far cleaner that the react-native-video plugin’s case above.


Now, to consume the reusable component, your code will be as simple as the following.


Calling the reusable component VideoPlayerWrapper

Code is attached to this post in the attachments section



React native video player also provides some nice features like the pause on press and the full screen on long press which we found those functions useful for a better user experience with videos.


Feel free to go through the documentation of each plugin and check the offerings of each one and code them the way that best fit your app and requirements.


If you still find unsolvable issues, then please share them in the comments, and we will be happy going through all of them.


Attachments

You can download the full application React Native project code here.


Related Posts

About The Author

Fady Soliman

An experienced, resourceful and highly motivated IT professional, with a proven record of success in both Stack Development and Software Architecture. Possesses a wealth of transferable skills, including outstanding interpersonal, problem solving and staff management abilities. A capable organizer, quick to grasp – and make good use of – new ideas and information, and reliable and conscientious in all he takes on.

Did you find this helpfull?

Leave your Comment

Sponsored Posts
Create a Sponsored Blog Post
Cheap SEO Backlink