as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

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.

Copied to clipboard.


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

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:

Copied to clipboard.

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.