Photo by on Zach Meaney Unsplash I have recently been working with the library to integrate videos within the app. I must say, this is a very impressive library from the react native community with lots of contributors and users. react-native-video Key Features Some of the key features of this library include: Local and remote files playback support. Selection of audio and text tracks with captions. Configurable rate (increase or decrease speed of video). Audio playback when the app is running in the background. External playback. And ofcourse support for both iOS and Android devices. These features make this library a solid pick for video streaming in react native apps. Setup The setup for both iOS and Android is quite simple. Run the following command to install the react-native-video package npm install --save react-native-video Link react-native-video library with both the iOS and Android dependencies react-native link react-native-video With these two commands you are all set and ready to start coding your video component. Getting Started with using <Video> component I have created a which will be used to render the video. Anytime we want the video to stream within this application, we could use the . VideoComponent.js VideoComponent You can observe that the method invokes the component from the react-native-video library. renderVideo() <Video> For this component to render we would need to provide the source of the video and a style for the player to playback within our app. In the example below we are providing a mp4 file from the assets folder and a basic style for the player. All other props that come with the are optional and configured based on our needs. <Video> Now our is ready and we can invoke this from the any page/screen. For our example, I am going to invoke this from the file which is the starter page of our app. VideoComponent App.js The methods invokes the <VideoComponent /> and with that we are all set to get this running. render() Run the code for either iOS or android //iOSreact-native run-ios // Androidreact-native run-android The emulator now opens up with the video streaming within the app. Gif showing the emulator streaming video Useful Props Once we have the basic video streaming integrated, we can play around with the props that come with this library. We can increase or decrease volume, mute the audio, ensure audio playback when the app is backgrounded, select audio/text tracks etc.. One thing to note is the new addition of the prop. In our example I have set it to “ ”. This is specific to iOS devices and refers to the hardware silent switch on the user’s device. If you do notice that the video is streaming without any audio on the device, the device silent switch maybe enabled. You could override it and set the prop to “ ” ignoreSilentSwitch obey ignore Keep in mind that setting the to may not be the ideal solution since it would not make the users happy. ignoreSilentSwitch “ignore” Remote File Playback In the previous example we saw a file playing back from the local assets folder. It is simple to integrate the same library to stream videos from a remote url as well. Modify the source to pull the video from a url instead as shown below. source={{uri: '<REMOTE URL>'}} For more information on the library checkout the documentation on . Hope you enjoy integrating video streaming into your react native app. github This story was originally published in www.adhithiravichandran.com For more tutorials and articles follow me on twitter @ and also visit my blog AdhithiRavi www.adhithiravichandran.com

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Video Streaming in Your React Native App

Too Long; Didn't Read

Company Mentioned

Adhithi Ravichandran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Video Streaming in Your React Native App

Too Long; Didn't Read

Company Mentioned

Adhithi Ravichandran

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES