The SafeAreaProvider will help us to keep our content inside the notches and status bar. It will not let any overlay that's why it's called "safe area"
After adding this we will add a view folder where we'll have all our views.
```javascript
mkdirviews
cdviews
```
Now create a new folder with the name "timetable-view" and add the following three files in it with right extensions.
Now, we need to wrap the whole app in `NavigationContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
```
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
```
After that create your screen stack inside `App.js`:
```
import * as React from 'react';
...
import { createNativeStackNavigator } from '@react-navigation/native-stack';
...
const Stack = createNativeStackNavigator();
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Timetable"
component={TimetableView}
options={{
headerShown: false
}}/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
}
```
Now you can add as many views inside `Stack.Navigator` by using `Stack.Screen` for example now we create a new view so that we can use navigation to navigate between screens.
Create a view same as we did in last chapter and then add it in `Stack.Navigator` like this:
```
...
<Stack.Screen
name="TimetableDetail"
component={TimetableDetailView}
options={{
title: 'Overview',
headerStyle: styles.headerStyle,
headerTintColor: headerTintColor,
headerTitleStyle: styles.headerTitleStyle
}}/>
```
Also add the styles to support the above mentioned screen
