Navigation Between Login, Signup, and Home Screens

In my previous blog, I explained how you organize welcoming screens in your React-Native project. In this blog, I will show you how you can navigate from one screen to another by adding a link to each screen.

Let’s begin with setting up straightforward navigation actions, so each screen
allows the user to jump to another as follow:

• When you are on the LoginScreen: you can navigate to both the HomeScreen and CreateAccountScreen.
• When you are on the HomeScreen: you can navigate to LoginScreen.
• When you are on the CreateAccountScreen: you can navigate to the LoginScreen.

Remember from the previous blog we are using the react-navigation-stack package which will carry down a navigation prop to each of your screens. We will be adding some buttons to direct the user between these screens.

//LoginScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const LoginScreen = ({ navigation }) => {
    return (
        <View>
            <Text>LoginScreen</Text>
            <Button title="Log in"
                    onPress={() => navigation.navigate('Home')}
            />
            <Button title="Create account"
                    onPress={() =>
                        navigation.navigate('CreateAccount')}
            />
        </View>
    );
}
export default LoginScreen;

Here, we receive the navigation prop and we use it to navigate to HomeScreen when you click Log in, or to navigate to CreateAccountScreen when you click Create Account.

The same thing goes for the other two actions and here is how they will look like:

//HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
    return (
        <View>
            <Text>HomeScreen</Text>
            <Button title="Log out"
                    onPress={() => navigation.navigate('Login')}
            />
        </View>
    );
}
export default HomeScreen;
//CreateAccountScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';
const CreateAccountScreen = ({ navigation }) => {
    return (
        <View>
            <Text>CreateAccountScreen</Text>
            <Button title="Log in"
                    onPress={() => navigation.navigate('Login')}
            />
        </View>
    );
}
export default CreateAccountScreen;

Hope this simple navigation action example helped you in your frontend application, especially by using react-navigation-stack package that helped in moving from one screen to another. If you have anything you would like to add, please comment below.