Stack Navigator

Let's create a simple React Native app with two screens using the Stack Navigator from React Navigation.

First, make sure you have React Navigation installed:

Now, let's create two screens: HomeScreen and DetailsScreen.

Now, let's set up navigation in our App.js using the Stack Navigator:

We set up a basic Stack Navigator using React Navigation.

Let's break down what each part does:

Step 1

import statements: Import necessary modules from React and React Navigation, as well as custom screen components (HomeScreen and DetailsScreen).

Step 2

Create a stack navigator using createNativeStackNavigator().

Step 3

Define the App component, which renders the navigation container and the stack navigator.

Step 4

Return the NavigationContainer component, which wraps the entire navigation structure.

Step 5

Within the NavigationContainer, define the Stack.Navigator component, which contains the stack of screens.

Step 6

Add screens to the stack using Stack.Screen components. Each screen has a unique name and is associated with a component.