Create a Video Streaming App using React-Native

Last Updated : 23 Jul, 2024

React-Native is an open-source JavaScript framework used to broaden cross-platform packages i.e., you may write code in React-Native and publish it as an Android or IOS app. In this article, we will build a Video Streaming app using React-Native. The app will run on both Android and IOS.

Preview of final output: Let us have a look at how the final application will look like.

Prerequisites

Approach to create Video Streaming App:

In the app, we use two screens. Home Screen and Video Player Screen. The home screen takes the video URL and plays it in the video player screen. To play the video we use the expo-av package. You can input any mp4 video URL that is live in the internet. The app will fetch the URL and play the video. This is how our basic video streaming app works.

Steps to Create Video Streaming App:

Step 1: Create a React Native app by using this command:

npx create-expo-app VideoStreamingApp

Step 2: Navigate to our project through this command:

cd VideoStreamingApp

Step 3: Install the required dependencies using the following command

npm install @react-navigation/native @react-navigation/stack expo-av

Project Structure:

Video-Streaming-Structure — Project Structure

The updated dependencies in package.json will look like this

"dependencies": {
    "expo-av": "~13.2.1",
    "expo-camera": "~13.2.1",
    "expo-status-bar": "~1.4.4",
    "expo-permissions": "~14.1.1",
    "@expo/vector-icons": "^13.0.0",
    "expo-media-library": "~15.2.3",
    "react-native-paper": "4.9.2",
    "expo-document-picker": "~11.2.2",
    "react-native-screens": "~3.20.0",
    "@react-navigation/stack": "^6.3.20",
    "@react-navigation/native": "6.0.0",
    "react-native-gesture-handler": "~2.9.0",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "react-native-safe-area-context": "4.5.0"
}

Example: Write the code in respective files

JavaScript

// App.js  import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; import VideoPlayer from './VideoPlayer';  const Stack = createStackNavigator();  const App = () => { 	return ( 		<NavigationContainer> 			<Stack.Navigator 				initialRouteName="Home" 				screenOptions={{ headerShown: false }} 			> 				<Stack.Screen name="Home" component={HomeScreen} /> 				<Stack.Screen name="VideoPlayer" component={VideoPlayer} /> 			</Stack.Navigator> 		</NavigationContainer> 	); };  export default App;

JavaScript

// HomeScreen.js  import React, { useState } from 'react'; import { View, Text, TextInput, Pressable } from 'react-native'; import { styles } from './styles';  const HomeScreen = ({ navigation }) => { 	const [videoUrl, setVideoUrl] = useState('');  	const handlePlayVideo = () => { 		navigation.navigate('VideoPlayer', { videoUrl }); 	};  	return ( 		<View style={styles.container}> 			<Text style={styles.heading}>GeeksForGeeks</Text> 			<Text style={styles.heading}>Video Streaming App</Text> 			<TextInput 				style={styles.input} 				placeholder="Enter Video URL" 				onChangeText={(url) => setVideoUrl(url)} 				value={videoUrl} 			/> 			<Pressable 				onPress={handlePlayVideo} 				style={({ pressed }) => [ 					styles.button, 					{ 						backgroundColor: pressed ? '#1e8449' : '#2ecc71', 					}, 				]} 			> 				<Text style={styles.buttonText}>Play Video</Text> 			</Pressable> 		</View> 	); };  export default HomeScreen;

JavaScript

// VideoPlayer.js  import React from 'react'; import { View, Text } from 'react-native'; import { Video } from 'expo-av'; import { styles } from './styles';  const VideoPlayer = ({ route }) => { 	const { videoUrl } = route.params;  	return ( 		<View style={styles.container}> 			<Text style={styles.heading}>Video Player</Text> 			<Video 				source={{ uri: videoUrl }} 				style={styles.video} 				useNativeControls 			/> 		</View> 	); };  export default VideoPlayer;

JavaScript

// styles.js  import { StyleSheet } from "react-native";  export const styles = StyleSheet.create({ 	container: { 		flex: 1, 		justifyContent: 'center', 		alignItems: 'center', 		padding: 16, 	}, 	heading: { 		fontSize: 24, 		fontWeight: 'bold', 		marginBottom: 20, 		color: '#228B22', 	}, 	input: { 		height: 40, 		width: '100%', 		borderColor: '#228B22', 		borderWidth: 1, 		marginBottom: 20, 		paddingLeft: 10, 	}, 	button: { 		flexDirection: 'row', 		alignItems: 'center', 		backgroundColor: '#228B22', 		padding: 10, 		borderRadius: 5, 	}, 	buttonText: { 		color: 'white', 		marginLeft: 10, 	}, 	video: { 		width: 300, 		height: 300, 	}, });

You can use any of the below two methods to run the app

Method 1: Open the terminal and enter the following command to run the app

npx expo start

Now download the Expo Go app from the Apple App Store (For iOS) or Google Play Store (For Android) to run the app.

Method 2: You can use emulator or connect computer to your device using USB and run the below command

To run on Android:

npx react-native run-android

To run on Ios:

npx react-native run-ios

Output:

Create a Video Player App using React-Native

sainaveen_bhukya

Improve

Article Tags :

Create a Video Streaming App using React-Native

Prerequisites

Approach to create Video Streaming App:

Steps to Create Video Streaming App:

Similar Reads