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
calledscreens
, and within it create a file calledLandingScreen.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.