React Native: How to configure reactnavigation?

React Navigation is one of the most well-known navigation libraries available for React Native. In this article, I will discuse how to get started using React Navigation in a React Native application.

Installation ReactNavigation

Install the required packages vai (npm or yarn) in your React Native project:

npm install @react-navigation/native
OR
yarn add @react-navigation/native

Install Stack Navigator

npm install @react-navigation/stack
OR
yarn add @react-navigation/stack

Installing dependencies into a bare React Native project

npm install react-native-gesture-handler react-native-screens react-native-safe-area-context
OR
yarn add react-native-gesture-handler react-native-screens react-native-safe-area-context

React Native navigation example:
Now create new “screens” directory in application root directory.
Then you need to create some screen files like HomeScreen.js and LoginScreen.js in screens directory. Or If you have already some screens than skip new screen creation

HomeScreen.js.

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <View style={styles.viewContainer}>
                        <Text style={{fontSize: 16, fontWeight: 'bold', marginBottom: 20}}>ExtendFeature APP Home Screen</Text>
                        <Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    scrollView: {
         flexGrow: 1,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    scrollViewModal: {
        flexGrow: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    mainContainer: {
         flex: 1,
         width: '100%',
         backgroundColor: '#e7ebf1',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
    },
    viewContainer: {
         flex: 1,
         width: '100%',
         justifyContent: 'center',
         alignItems: 'center',
    },
});

export default HomeScreen;

LoginScreen.js

import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';

const LoginScreen = ({ navigation }) => {

    return (
        <SafeAreaView style={styles.safeAreaContainer}>
            <ScrollView contentContainerStyle={styles.scrollView}>
                <View style={styles.mainContainer}>
                    <View style={styles.viewContainer}>
                        <Text style={{fontSize: 16, fontWeight: 'bold', marginBottom: 20}}>ExtendFeature APP Login Screen</Text>
                        <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    scrollView: {
         flexGrow: 1,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'flex-start',
    },
    scrollViewModal: {
        flexGrow: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    mainContainer: {
         flex: 1,
         width: '100%',
         backgroundColor: '#e7ebf1',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
    },
    viewContainer: {
         flex: 1,
         width: '100%',
         justifyContent: 'center',
         alignItems: 'center',
    },
});

export default LoginScreen;

Now, open App.tsx file form React Native application directory and you need to wrap the whole app in NavigationContainer.

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//Import some screens
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';

// Initialized all Navigator
const Stack = createStackNavigator();

export function BeforeLoginNavigation(){
return (
    <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}

const App = () => {
  return (
        <NavigationContainer>
            <BeforeLoginNavigation />
        </NavigationContainer>
  );
}

export default App;

Done, now run your app using following command:

npx react-native run-android

Your app is ready with two screens and move between screen by click button (Go to Login and Go to Home). More details Stack Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Related Articles

Related Articles

Recent Posts

Categories

Important Links