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>

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.

Build a Vega Video App

Video Details Screen Navigation

Render video data

Add the navigation buttons

​Render video data

​Add the navigation buttons

Render video data

Add the navigation buttons