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
androute
, 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
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.