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:

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.

Next