React-Native Navigation

Syntax

React-Native Navigation is a library that allows for easy navigation between screens in a React Native application.

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

Example

In this example, we have created a simple navigation stack with three screens: HomeScreen, DetailsScreen, and ProfileScreen.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Welcome to the Home Screen</Text>
      <Button
        title="Go to Details Screen"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Welcome to the Details Screen</Text>
      <Button
        title="Go to Profile Screen"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>Welcome to the Profile Screen</Text>
    </View>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Output

When the app is loaded, the user will see the HomeScreen. Clicking the "Go to Details Screen" button will navigate the user to the DetailsScreen, where they will see a "Go to Profile Screen" button. Clicking that button will navigate them to the ProfileScreen.

Explanation

React-Native Navigation allows for easy navigation between screens in a React Native application. With React-Native Navigation, a navigation stack can easily be defined using the createStackNavigator function, and screens can be added to the stack using the Stack.Screen component.

Once screens have been added to the navigation stack, users can navigate between them by using functions like navigate, goBack, and push.

React-Native Navigation also provides features like tab navigation and drawer navigation.

Use

React-Native Navigation is used to define and navigate between screens in a React Native application.

React-Native Navigation is typically used in conjunction with React-Native Router Flux or other similar libraries for advanced navigation.

Important Points

• React-Native Navigation requires installation of several dependencies, including @react-navigation/native, @react-navigation/stack, and react-native-reanimated.

• React-Native Navigation allows for screen options to be defined for each screen, including headers, titles, styles, and more.

• React-Native Navigation is highly customizable, allowing for the creation of complex navigation patterns and animations.

Summary

React-Native Navigation is a powerful library for defining and navigating between screens in a React Native application. With easy stack-based navigation and support for advanced features like tab navigation and drawer navigation, React-Native Navigation is a must-have for any serious React Native developer.