How to Play Video in a React Native App

Incorporating video playback within your React Native app will help keep your users engaged. You can develop engaging experiences with your app that is full of media, such as social media, e-learning, or streaming media apps. Video playback is quite straightforward in your React Native app with the help of a library like react-native-video or expo-av.

This guide will give you the steps to video playback in your app, with more focus on react-native-video for its powerful feature set and ease of learning to work with.

Steps to Play Video in React Native App

Step 1: Installing react-native-video

You can install it using npm or yarn:

npm install react-native-video

or

yarn add react-native-video

For iOS, navigate to your iOS directory and run:

pod install

Step 2: Implementing the Video Component

Now, import the Video component and use it within your app.

import React, { useState, useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Video from 'react-native-video';

const App = () => {
  const videoRef = useRef(null);
  const [paused, setPaused] = useState(true);
  const togglePlayback = () => {
    setPaused(!paused);
  };

  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }} // Replace with your video URL or local asset
        style={styles.videoPlayer}
        paused={paused}
        resizeMode="contain" // or "cover", "stretch"
        onBuffer={() => console.log('Buffering...')} // Callback for buffering events
        onError={(error) => console.error('Video error:', error)} // Callback for errors
      />
      <Button title={paused ? 'Play' : 'Pause'} onPress={togglePlayback} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  videoPlayer: {
    width: '90%',
    height: 200,
    marginBottom: 20,
  },
});

export default App;

Conclusion

With react-native-video, adding video playback to your React Native project is extremely simple. The react-native-video library has a stable and excellent feature set for beginning developers and more experienced developers — everything from video playback to a full-featured custom video player.

Whether it be a tutorial, media streaming app, or social platform, video can improve your user profile and enhance your app experience like nothing else.

FAQ

1. Is it possible to embed a video from YouTube or Vimeo?

You won’t be able to embed the video directly from YouTube or Vimeo to your app without using the YouTube API or Vimeo API, or a third-party library (like react-native-youtube-iframe) to embed the video.

2. Is it possible to add custom video controls?

Yes! You can always hide the built-in controls and create your own UI with state and the event props of the video.

3. Can I use subtitles with react-native-video?

Yes, it supports subtitles and captions with the textTracks prop.