Navigating Between Screens with React Native

by
Tiempo de lectura: 3 minutos

Reading Time: 3 minutes

In React Native, each screen is a stackable object that is added to the top of the stack. This means that if we open a screen and then close it, the screen that appears is the previously opened screen.

To manage screens, we will use the react-navigation plugin (https://reactnative.dev/docs/navigation).

First, we install the necessary dependencies:

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens
npm install react-native-safe-area-context

Remember that if we add the –save command to npm install, we can add it to the dependencies file.

If you want to directly add these libraries to the package.json file, copy this:

 "react-native-screens": "~3.11.1",
 "react-native-safe-area-context": "4.2.4",
 "@react-navigation/native": "^6.0.2",
 "@react-navigation/native-stack": "^6.1.0",

Once installed, we can start testing how to navigate between screens.

First, let’s create the navigation tree inside the App.js component (the first screen).

import React from "react";
import { View, StyleSheet } from "react-native";

// Navigation libraries
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// Import screens (not created yet)
import Login from './screens/Login';
import Menu from './screens/Menu';

// Create the navigation tree
const Stack = createNativeStackNavigator();

// Create a component called App
const App = () => {

    return (
        <View style={styles.container}>
    
            <NavigationContainer>
                <Stack.Navigator >
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{ title: 'Login' }}
                    />
                    <Stack.Screen name="Menu" component={Menu} />
                </Stack.Navigator>
            </NavigationContainer>
        </View>)
};

// Export the component
export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Let me explain the code I added.

First, we import the necessary libraries to use navigation:

// Navigation libraries
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Once imported, we create the Stack variable where we will add the different screens we are going to navigate through:

const Stack = createNativeStackNavigator();

And now we are going to add the different screens that we can navigate to within the view itself. They will not be displayed; only the first one we specify will be displayed, and the rest will be hidden until we open them from the code.

   <NavigationContainer>
                <Stack.Navigator >
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{ title: 'Login' }}
                    />
                    <Stack.Screen name="Menu" component={Menu} />
                </Stack.Navigator>
            </NavigationContainer>

This structure has a <NavigationContainer> where we add the <Stack.Navigator> and inside it, the different screens, <Stack.Screen> here we have to add all the screens of the app so that we can navigate between them.

The attributes of Stack.Screen that I added are:

  • name: Indicates the navigable name of the screen, I put Login and when we want to open it, we have to call Login.
  • component: we indicate the .js file of the screen that we have imported (if we use TypeScript, it is done in the same way).
  • options: we can add, for example, a title that the screen itself will display at the top.

Now let’s create two screens inside the screen directory (Creating a Screen with React Native):

Login.json

import React from "react";
import { View, Text, Button } from "react-native";

const Login = ({navigation}) => {
    return (
        <View>

            <Text >Login</Text>
            <Button
                title="Log In"
                onPress={() =>
                    navigation.navigate('Menu')
                }
            />

        </View>
    )
};

export default Login;

Let me explain this code:

In the view’s render part, we receive the {navigation} parameter, where we will receive the navigation object since this screen is part of the app’s navigation tree.

To change screens, we have to use navigation.navigate(“Menu”). We use “Menu” because it is the name we specified in the name attribute of the Stack.Screen tag created earlier in App.js

                <Stack.Screen name="Menu" component={Menu} />

Now we can create the Menu.js screen inside the Screens directory.

import React from "react";
import { View, Text, Button } from "react-native";

const Menu = ({navigation}) => {
    return (
        <View>

            <Text >Menu</Text>
            <Button
                title="Press to go back to login"
                onPress={() =>
                    navigation.navigate('Login')
                }
            />

        </View>
    )
};

export default Menu;

With these two screens created, we can switch between them by pressing the buttons.

Post Views: 0

Leave a Comment