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

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.

​Add VideoPlaybackScreen to Stack.Navigator

​Navigate to VideoPlaybackScreen