as

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

Video Details Screen Navigation

Render Video Data

Now that we are passing data to VideoDetailsScreen, let's render the data.

  • Open VideoDetailScreen.tsx.
  • In the parameter list for the VideoDetailScreen component, destructure navigation and route, declaring them as type any.
const VideoDetailScreen = ({ navigation, route }: any) => {
  // Code for VideoDetailScreen
}
  • Define a new variable to capture the video from the route.
const video = route.params.video;
  • Update the source prop for ImageBackground, setting it to {{ uri: video.imgURL }}.

<ImageBackground
  source={{ uri: video.imgURL }}
  imageStyle={styles.image}
  style={styles.screenContainer}
>

  • Replace "Video Title" and "Video Description" in the Text components with {video.title} and {video.description}.
<Text style={styles.videoTitle}>{video.title}</Text>
<Text style={styles.videoDescription}>{video.description}</Text>

Add the Navigation Buttons

Let's add in the buttons and wire up them up to allow Navigation.

  • Import the Button component we created.
  • Under the two text fields add a View.
  • Give the View a style prop of buttonContainer and add the following style to the style sheet:

 buttonContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 30,
    width: '18%',
  },
  • Within the View add the two Button components.
  <View style={styles.buttonContainer}>
    <Button/>
    <Button/>
  </View>

For the first Button:

  • Set the buttonText prop to be "Watch Button"
  • Set the pressFunction prop to be empty for now. In the next section we will set it to navigate to the new VideoPlaybackScreen
<Button
  buttonText="Watch Now"
  pressFunction={() => {} }
/>

For the second Button component:

  • Set the buttonText prop to be "Back"
  • Set the pressFunction prop to be {() => navigation.goBack()}. This will send us back to the LandingScreen, the previous screen in the stack.
<Button
  buttonText="Back"
  pressFunction={() => navigation.goBack()}
/>

The VideoDetailScreen.tsx code should look like this:

Copied to clipboard.


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

const VideoDetailScreen = ({navigation, route}: any) => {
  const video = route.params.video;

  return (
    <ImageBackground
      source={{uri: video.imgURL}}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>{video.title}</Text>
      <Text style={styles.videoDescription}>{video.description}</Text>
      <View style={styles.buttonContainer}>
        <Button
          buttonText="Watch Now"
          pressFunction={() =>
            navigation.navigate('VideoPlaybackScreen', {
              videoURL: video.videoURL,
            })
          }
        />
        <Button buttonText="Back" pressFunction={() => navigation.goBack()} />
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    opacity: 0.2,
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
  },
  videoTitle: {
    fontSize: 50,
    color: 'white',
    fontWeight: '700',
    margin: 30,
  },
  videoDescription: {
    color: 'white',
    fontSize: 30,
    margin: 30,
  },
  buttonContainer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: 30,
    width: '18%',
  },
});

export default VideoDetailScreen;

  • Refresh the app and verify that you see the background image, title, and description.
  • Verify you can go back to the LandingScreen when you select the "Back" button. We'll test the "Watch Now" button in the next section.