Create Video Detail Screen

Define the VideoDetailScreen

Before we can add the Navigation packages we need somewhere to Navigate to, so we need to create the Video Detail Screen. It will have a background image, video title, video description and eventually a play & back button.

• Create a new file under the screens folder called VideoDetailScreen.tsx.
• Open the file and import React, and the necessary components from 'react-native'. In this case we'll need ImageBackground, Text, View, and StyleSheet.
• Create an arrow function called VideoDetailScreen and export it.
• Add a return statement to VideoDetailScreen that contains ImageBackground tags, which will be the parent element.
• Add a source prop to ImageBackground and hard code it to {uri: 'placeholder'},
• Add two Text elements inside ImageBackground, one for title and one for description. Add the text, "Video Title", to the first element, and "Video Description", to the other.

import React from 'react';
import {ImageBackground, Text, View, StyleSheet} from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
       source={{
        uri: 'placeholder',
      }}>
      <Text>Video Title</Text>
      <Text>Video Description</Text>
    </ImageBackground>
  );
};

export default VideoDetailScreen;

Add Styling

Let's add some styling.

• Create a StyleSheet called styles and add it after the VideoDetailScreen arrow function.
• Add image, screenContainer, videoTitle, videoDescription styles to the StyleSheet with the following values.

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 40,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 20
  },
});

• Add the styles to their respective elements.

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>Video Title</Text>
      <Text style={styles.videoDescription}>Video Description</Text>
    </ImageBackground>
  );
  
};

Here is what the VideoDetailScreen.tsx code should look like:

import React from 'react';
import { ImageBackground, Text, View, StyleSheet } from 'react-native';

const VideoDetailScreen = () => {
  return (
    <ImageBackground
      source={{
        uri: 'placeholder',
      }}
      imageStyle={styles.image}
      style={styles.screenContainer}>
      <Text style={styles.videoTitle}>Video Title</Text>
      <Text style={styles.videoDescription}>Video Description</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    opacity: 0.2
  },
  screenContainer: {
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    padding: 10
  },
  videoTitle: {
    fontSize: 50,
    color: 'white',
    fontWeight: '700'
  },
  videoDescription: {
    color: 'white',
    fontSize: 30
  }
});

export default VideoDetailScreen;

Update Index File in Screens Folder

The last step is to add this screen to the index.ts file in the screens folder.

• Open index.ts in the screens folder.
• Add VideoDetailScreen to the import and export statements.

The updated index.ts file should look like this:

import LandingScreen from './LandingScreen';
import VideoDetailScreen from './VideoDetailScreen';

export {
    LandingScreen,
    VideoDetailScreen
}

Next