Create the Landing Screen
Open Beta Documentation Amazon offers this technical
documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback
and iterates on the features. For the most current feature information, see the Release
Notes.
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.