Video player with React Native. Part 1: Expo (2023)

Video player with React Native. Part 1: Expo (1)

Nowadays there are plenty of solutions to build an application for a mobile platform. If we are talking about the technology that feels native (uses native UI components), our company has successful experience in building React Native applications. And now we decided to check other similar solutions that are built on top of React Native.

We are going to review it in a series of two articles. This is the first one, where we will touch on Expo. Expo is quite popular and is even recommended in Getting Started guide for React Native. But it differs a lot. Here we will go through the process of building an app with Expo and then make technology comparison based on the results.

We want to build a video catalog app where a user can go through the list of videos, choose and watch a video. We are covering only a client part of the application here. Our big technology targets of exploration are Expo and TypeScript.

You can try out final product here.

Here we are going to go through the process of building an app from scratch. The process is divided into steps. Each step results in a fully functional app that you can run. The code is available here. Also, the first commits in the repository are corresponding to the steps in this article.

By the way, I will use iPhone simulator for development. But it’s almost the same instruction for Android emulator or physical mobile device.


First, we need to initialize the project.

(Video) React Native - Video Player with Caching using Expo (Part 1/6)

  1. Install Expo
  2. Create the project: expo init expo-video-catalogue-demo
  3. Start it: yarn ios

Now we have an empty Expo app that runs on a simulator and shows text: Open up App.js to start working on your app!

Add TypeScript

Then we need to add TypeScript support. There is a good instruction on how to do this. So we will just follow it. You can check the resulting code here. Don’t forget to restart the app.

Now app works as before but we have support for TypeScript in src folder.

Build a home screen

Let’s start to add real features. First thing is the home screen with a list of videos.

  1. Add landscape orientation. Change in app.json:
"orientation": "landscape"

2. Use fixtures to fake API call for now.

Add fixture file for the list of videos:

Add fixture API that gets this list of videos:

3. Add carousel package:

yarn add react-native-snap-carousel

4. Add screen itself. Add the main component, then its parts VideoCarousel and PreviewSlide.

(Video) How to Add Videos to your Expo React Native Apps - Video File in Source Code and URL

5. Add Spinner. It is used during API calls when there is no content yet.

6. To connect Home screen with app change code in App.tsx:

Check the full code for this step here. Now our app should look similar to the image. It shows some information on video previews and allows to scroll through the list.

Video player with React Native. Part 1: Expo (2)

Build a video screen

The next step is to play a video.

  1. Use fixtures for video.

Add fixture to show video:

Add one more method to fixture API to get a video:

2. Add dependencies.

(Video) React Native - Video Player with Caching using Expo (Part 0/6)

Add a custom video player package. We forked @expo/videoplayer package to add a top bar with the back button and title. And also to update dependencies as it had a quite old Expo version.

yarn add

Add a router to switch between home screen and video player smoothly.

yarn add react-native-router-flux

3. Replace App component with AppRouter

4. Add video screen Playback .

This version of the app allows to choose a video, watch and use typical controls for the player. When a video is over it should switch to the next one.

Video player with React Native. Part 1: Expo (3)

Add real API

The last thing is to use real API.

  1. Add library to make requests
yarn add apisause

2. Add our API service api.ts

(Video) LCRN EP17 - Online Learning App (Part 3) - React Native UI | Video Player

3. To use this service we need to replace FixtureApi in Playback and Home components:

import api from '../../services/api'

That’s all — the app is done!

To publish an app we need to create an account on Then run command expo publish. Once it’s published, we can open it on our iOS or Android device. Also, any Android user can open our app inside Expo Client immediately. Our app is here.

Based on our experience with developing this app we can now make a comparison with React Native.


  1. Easy to get started and set up a project. You don’t need to do much initial configuration, install studio/IDE or even simulator.
  2. Rich Expo SDK. The standard library has all kinds of things like using the camera, accelerometer, maps, location tracking, analytics, etc. You don’t need to install external packages, link native modules for Android and iOS.
  3. Works both on iOS and Android. You don’t need Mac to develop for iOS. If it works on one platform then it works on the other one too.
  4. Simplified configure. Configurations that you would typically prepare inside of your Xcode / plist files or Android studio / xml files are handled through app.json
  5. A convenient way to develop on the device. You can run your local app on any of your devices or in a simulator. No need for wires. It’s all done through Expo app.
  6. The built-in way to share with testers. Instead of having to sign up several external testers through iTunes connect, you can easily have them to download the Expo client app and immediately have a working version on their phone. Now it’s true for Android only though.


  1. You can’t use native modules with Expo. Must stick to supported SDK’s.
  2. The standard library is limited. It is big but still doesn’t have all APIs like Bluetooth, WebRTC, FaceDetector, ARKit or Payments. Also, it has much fewer implementations. I.e. we needed a video player but there is only one player implementation in Expo and it’s quite old. On the contrary, you can find 5 different in React Native for sure.
  3. Less flexibility compared to React Native Core. Expo hides a lot of complexity behind and this results in fewer options for configuration.
  4. No matter how fast the development team is, they will always be a bit behind React Native Core. Because Expo is built on top of React Native.
  5. Bigger app size. The size for an Expo app on iOS is approximately 33mb (download), and Android is about 20mb. This is because Expo includes a bunch of APIs regardless of whether or not you are using them.

Additional features

Furthermore, there are other features of Expo that were not explored in this article, like:

  • Deliver to the App Store or Google Play. Expo has a set of features that should greatly simplify the process of delivering an app to the store and sending updates. It’s especially useful for App Store as it has a quite complicated process of accepting your app.
  • Eject to ExpoKit. If Expo doesn’t provide access to a native module or API then you can eject and use ExpoKit instead. It has fewer features than Expo and it’s still not pure React Native.

To summarize, in our opinion, Expo is a good choice for you in the next cases:

  • It’s your first React Native app. You won’t have information overload and plenty of errors to fix. Also, you will see the only JavaScript code and no iOS/Android internals.
  • You need to prototype/deliver quickly. I think all process from setup to the store should be fast and much simpler than with React Native.
  • You don’t need native modules or Expo has good support/recent updates for features you need. I recommend to check it beforehand very carefully. In the case of our test app, it was not exactly the case: we had to fork the video player library to satisfy our needs.

But if you’re planning on long-term development, the feature list is obscure and you need the ability to make serious customizations then React Native looks much better.

Our company has got React Native experience and set up good process/pipelines for development, found and resolved some bugs/complications along the way. And in our case Expo doesn’t give that many conveniences to switch but introduces too many constraints.

In the next article, we will explore another cross-platform technology — ReactXP. Stay tuned!

(Video) Play Video In Landscape And Portrait Mode Using React Native Expo Application || Android & iOS || JS


Does React Native video work with Expo? ›

After project creation, we can now import the Video component. The Video component is a component from expo-av that displays a video in line with the other UI elements in your app, so to use the Video component we should install expo-av first.

Is Expo Better than React Native? ›

It helps you from the creation to distribution of your React Native apps. Remember, when you are coding in Expo, you still write React Native code. But with the support of the Expo CLI and Expo Client on your smartphone. It is better to use Expo CLI if you are new to app development.

Is Expo good for React Native? ›

If you are given a project that needs rapid development, and you have picked React Native to build the cross-platform app, Expo is the best fit for you. With Expo, you can build and deploy React Native apps for both iOS and Android with ease. With Expo, you will never touch any native iOS or native Android code.

How do you use video player in React Native? ›

React Native Video Library to Play Video in Android and IOS
  1. React Native Play Video. 1.1 Loading Overlay. 1.2 Play / Pause. 1.3 Seek. ...
  2. To Play a Video in React Native. 2.1 Video component. 2.2 MediaControls Component.
  3. To Make a React Native App.
  4. Installation of Dependencies.
  5. CocoaPods Installation.
  6. Code. 6.1 App.js.

How do you use Expo media library? ›

You can configure expo-media-library using its built-in config plugin if you use config plugins in your project (EAS Build or expo run:[android|ios] ). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.

How do I see the length of a video in react-native? ›

Get the file path of the media from react-native-image-picker option. Sending the path to the meta-data package. Getting back the meta-data which also includes video duration. Finally using condition to do whatever I want to do.

Should I learn React Native or Expo? ›

If you have a project requiring rapid development and have chosen React Native to build cross-platform applications, then Expo is for you. Through Expo, you can quickly develop and deploy React Native applications for iOS and Android.

Do companies use Expo? ›

126 companies reportedly use Expo in their tech stacks, including Voypost, tools, and useinsider.

Is React Native Expo free? ›

Expo is a free and open-source toolchain built around React Native that helps you build cross-platform mobile apps using Javascript/Typescript and of course React.

How play mp4 react-native? ›

import Video from 'react-native-video'; import { TRAININGVIDEO, USER_LOGIN } from '../../images'; const deviceHeight = Dimensions. get('window'). height; export default class TrainingAndGuide extends Component { constructor(props) { super(props) this.
  1. javascript.
  2. reactjs.
  3. react-native.
  4. ecmascript-6.
  5. react-native-video.
17 May 2021

How do I show video preview in react-native? ›

Inside your code, import the component by adding:
  1. import VideoPreview from 'react-native-video-preview';
  2. import com. github. ...
  3. . addPackage(new VideoPreviewPackage())
  4. <VideoPreview source={{ uri: '' }} // Can be a URL or a local file. style={styles.

How do you play youtube in react-native? ›

Youtube Player In React Native | React Native Course #9

What are the limitations of React Native Expo? ›

One of the biggest drawbacks of Expo is that you're unable to drop down to native code, meaning using native SDKs for third party integrations won't work. A lot of services provide an SDK for Android and iOS. But when you're using Expo this will not work.

Can we use Expo for production? ›

Your project will always run in either development or production mode. By default, running your project locally with npx expo start runs it in development mode, whereas a published project (with eas update ), or any standalone app, will run in production mode.

Is Expo good for app development? ›

With Expo, you can easily and rapidly publish updates to your app through the app. Because there is no native code, you do not need to publish every update to the app store. It is a fantastic tool that comes in handy when developing and testing software quickly.

How do I access my camera in react native? ›

Setting up the Camera in a React Native App

Nothing fancy here. You just have to import the core React Native components such as View and Alert as well as RNCamera from react-native-camera . Then, create a class component App that is going to render the JSX that uses a hardware camera on the device's screen.

How do I save a file to a device folder using Expo and react native? ›

on Android
  1. get MEDIA_LIBRARY permissions from the user. ...
  2. use the expo-media-library to convert the local file to an “asset”
  3. find the “album” (aka folder) where you want to transfer the “asset” to, or create the “album” if it doesn't exist.
  4. move the “asset” to the “album”
10 Nov 2020

How do I add permissions in Expo? ›

To solve this, add the android. permissions key in your app.
  1. See expo. android. ...
  2. Apps using dangerous or signature permissions without valid reasons may be rejected by Google. Ensure you follow the Android permissions best practices when submitting your app.
  3. All available Android Manifest. permissions.

How do I show video in React? ›

To play video in React, you need to use the HTML video element, specify a source of the video and its type. Along with these required attributes, you can provide additional properties to customize the video player.

How do I find the length of a video in HTML? ›

To display the duration in a pretty fashion, you'll need to use parseInt and modulus ( % ): // Assume "video" is the video node var i = setInterval(function() { if(video. readyState > 0) { var minutes = parseInt(video. duration / 60, 10); var seconds = video.

How do you get the current time in React player? ›

In React, this can be achieved by using the onTimeUpdate event. Knowing currentTime, we need to parse the value and format it using the str_pad_left function.

Can we use Expo AV IN react-native CLI? ›

If you create a bare React Native project through expo-cli by running expo init and choosing a Bare template, your project will have react-native-unimodules installed and configured for you. You can run this project by using react-native run-ios or react-native run-android rather than expo start .

How do you add a video to react JS? ›

To play video in React, you need to use the HTML video element, specify a source of the video and its type. Along with these required attributes, you can provide additional properties to customize the video player.

How do I make a custom video in react-native? ›

create a VideoPlayer. js component and replace this code. import React, { useRef } from 'react';import { View, StyleSheet, Dimensions } from 'react-native';import { Video } from 'expo-av';const { height, width } = Dimensions.

How do you call API in react-native Expo? ›

How to Make REST API Calls in React Native
  1. Setting Up the Project. Expo. App.js.
  2. Subscribe to the API. Sign Up For a Free Account on RapidAPI. Subscribe to the Quotes API.
  3. Call API with fetch.
  4. Call API with Axios.
  5. Add Styling.
20 Apr 2021

How do I know what version of Expo I have? ›

You can check your Node version by running the Node -v command on your terminal. Expo offers a command-line interface called Expo CLI. It is used to test the app while it's being developed either in iOS or Android.

How do I embed a Youtube video in Nextjs? ›

Approach: To add our Youtube video we are going to use the react-youtube package. The react-youtube package helps us to add Youtube videos anywhere in our app. So first, we will install the react-youtube package and then we will add a youtube video on our homepage. Project Structure: It will look like this.


1. #3 - Reading Audio Files From Device - Music Player With Expo React Native - Part 1
(Full Stack Niraj)
2. #1 React Native: Video Player || Part 1 || Getting Internal Media Files
(aditya kumar)
3. Using WebGL in React Native! Graphics Part: 1
4. React Native - Video Player with Caching using Expo (Part 2/6)
(UA Studios)
5. How to Play YouTube Video in React Native - Expo
6. React Native Tutorial for Beginners - Build a React Native App
(Programming with Mosh)
Top Articles
Latest Posts
Article information

Author: Tish Haag

Last Updated: 09/04/2023

Views: 6693

Rating: 4.7 / 5 (67 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Tish Haag

Birthday: 1999-11-18

Address: 30256 Tara Expressway, Kutchburgh, VT 92892-0078

Phone: +4215847628708

Job: Internal Consulting Engineer

Hobby: Roller skating, Roller skating, Kayaking, Flying, Graffiti, Ghost hunting, scrapbook

Introduction: My name is Tish Haag, I am a excited, delightful, curious, beautiful, agreeable, enchanting, fancy person who loves writing and wants to share my knowledge and understanding with you.