Video Details Screen Navigation
 Open Beta Documentation Amazon offers this technical
    documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback
    and iterates on the features. For the most current feature information, see the Release
    Notes.
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 navigationandroute, declaring them as typeany.
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 sourceprop 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 buttonContainerand 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:
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.


