Launch VideoPlaybackScreen

Add VideoPlaybackScreen to Stack.Navigator

Now that we have a VideoPlayback screen we need to add it to our Stack.Navigator so that we can access it as part of our Navigation.

• Open App.tsx.
• Import the VideoPlaybackScreen from screens

import { LandingScreen, VideoDetailScreen, VideoPlaybackScreen} from './screens';

• Add a new Stack.Screen called VideoPlaybackScreen and set it to render the new VideoPlaybackScreen component.

<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name='LandingScreen' component={LandingScreen}/>
  <Stack.Screen name='VideoDetailScreen' component={VideoDetailScreen}/>
  <Stack.Screen name='VideoPlaybackScreen' component={VideoPlaybackScreen}/>
</Stack.Navigator>

Navigate to VideoPlaybackScreen

Now we can launch our VideoPlaybackScreen when we click on the "Watch now button"

• Open VideoDetailScreen.tsx
• Update the pressFunction of the "Watch Now" button to navigate to the VideoPlayerScreen
• Give the navigation a prop of videoURL and set it to the value of videoURL

 <Button
    buttonText="Watch Now"
    pressFunction={() => navigation.navigate('VideoPlaybackScreen', { videoURL: video.videoURL })}
 />

Launch VideoPlaybackScreen

Now that we are passing data to VideoPlaybackScreen, let's display it.

• Open VideoPlaybackScreen.tsx.
• Add the navigation and route props to the screen { navigation, route }: any.

const VideoPlaybackScreen = ({ navigation, route }: any) => {

• Set the Text to route.params.videoURL.

<Text style={styles.playerPlaceholder}>{route.params.videoURL}</Text>

The updated code in VideoPlaybackScreen.tsx should look like this:

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {Button} from '../components';

const VideoPlaybackScreen = ({navigation, route}: any) => {
  return (
    <View style={styles.playerContainer}>
      <Text style={styles.playerPlaceholder}>{route.params.videoURL}</Text>
      <View style={styles.buttonContainer}>
        <Button buttonText="Back" pressFunction={() => navigation.goBack()} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  playerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonContainer: {
    width: 100,
    position: 'absolute',
    top: 10,
    left: 10,
  },
  playerPlaceholder: {
    color: 'white',
    fontSize: 30,
  },
});

export default VideoPlaybackScreen;

Congratulations! You've successfully completed the Vega Video App tutorial! 🎉 Your Vega app now has the essential functionality to display and play videos with proper navigation between screens. You've built a solid foundation for a video streaming application.

Head over to the next page to see how you can continue your Vega journey.

Next