React Navigation

REACT NAVIGATION
React Navigation's native stack navigator provides a way for your app to transition between
screens and manage navigation history.
React Navigation is made up of some core utilities and those are then used by navigators to
create the navigation structure in your app.
Detailed information on installing the necessary components for using React Navigation is
available at the link https://reactnavigation.org/docs/getting-started/
 CREATING A NATIVE STACK NAVIGATOR​
createNativeStackNavigator is a function that returns an object containing 2 properties: Screen
and Navigator. Both of them are React components used for configuring the navigator. The
Navigator should contain Screen elements as its children to define the configuration for routes.

NavigationContainer is a component which manages our navigation tree and contains the
navigation state. This component must wrap all navigators structure. Usually, we'd render this
component at the root of our app, which is usually the component exported from App.js.
 REACT NAVIGATION
• Stack.Navigator is a component that takes route configuration as its children
with additional props for configuration and renders our content.
• Each Stack.Screen component takes a name prop which refers to the name of
the route and component prop which specifies the component to render for the
route. These are the 2 required props.
• To specify what the initial route in a stack is, provide an initialRouteName as
the prop for the navigator.
• To specify screen-specific options, we can pass an options prop to
Stack.Screen, and for common options, we can pass screenOptions to
Stack.Navigator
• navigation.navigate('RouteName') pushes a new route to the native stack navigator
if it's not already in the stack, otherwise it jumps to that screen.
 PAGES FOLDER
Add a pages folder. Create files in the folder as shown in the screenshot:
APP.JS
Replace code in App.js file
APP.JS
APP.JS
DETAILSSCREEN.JS
Put the code in the DetailsScreen.js file
HOMESCREEN.JS
Put the code in the HomeScreen.js file
HOMESCREEN.JS
PROFILESCREEN.JS
Put the code in the ProfileScreen.js file
SETTINGSSCREEN.JS
Put the code in the SettingsScreen.js file
SETTINGSSCREEN.JS