Create the Landing Screen

Define the LandingSceeen

Now let's add the Header and Video components to a screen called LandingScreen.

• Create a new folder under src called screens, and within it create a file called LandingScreen.tsx.

src/
├── screens/
│   └── LandingScreen.tsx
└── App.tsx

• Import React, and the Header and VideoCard components in LandingScreen.tsx
• Create and export a component called "LandingScreen", which returns the Header and VideoCard components.
• Wrap the components in an empty fragment.

The LandingScreen.tsx code should look like this:

import * as React from 'react';
import Header from '../components/Header';
import VideoCard from '../components/VideoCard';

const LandingScreen = () => {
  return (
    <>
      <Header />
      <VideoCard />
    </>
  );
};

export default LandingScreen;

Render the LandingScreen

Now that we have our LandingScreen defined, we need to update the app to use it.

• Open App.tsx and import the LandingScreen.
• Remove the import statements for Header and VideoCard, as they are now rendered in the LandingScreen screen.
• Remove the Header and VideoCard components and the empty tags in the return statement, and replace them with the LandingScreen.

The App.tsx file should now look like this:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import LandingScreen from './screens/LandingScreen';

export const App = () => {
  return (
    <View style={styles.container}>
      <LandingScreen />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#232F3E',
  },
});

Note that you won't notice any visual changes as we have just moved the components into a screen.

Next