Create a Video Streaming App using React-Native

// 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;

// 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;

// 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;

// 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,
	},
});