react-navigation

What is react-navigation?

React Navigation is a popular library for routing and navigation in React Native applications. It provides a way to navigate between different screens and manage the navigation state in a React Native app.

What are react-navigation's main functionalities?

Stack Navigator

The Stack Navigator allows you to transition between screens and manage navigation history. It is similar to a stack of cards where each new screen is placed on top of the previous one.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

Tab Navigator

The Tab Navigator allows you to create a tab-based navigation where users can switch between different screens by tapping on tabs at the bottom of the screen.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

Drawer Navigator

The Drawer Navigator provides a side menu navigation where users can swipe from the side of the screen to open a drawer containing navigation options.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import NotificationsScreen from './NotificationsScreen';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

Other packages similar to react-navigation

react-router-native

React Router Native is a version of React Router that works with React Native. It provides a similar API to React Router for web applications, allowing you to define routes and navigate between screens. Compared to React Navigation, React Router Native is more similar to traditional web routing and may be more familiar to developers with a web background.

README

The README file is missing