Skip to main content

Router

In React Native, there are several packages for managing routing and navigation. The most prominent among them are React Navigation and React Native Navigation.

1. React Navigation​

React Navigation is among the most popular navigation libraries in React Native.

Advantages​

  • Implemented in JavaScript, ensuring good compatibility across various platforms.
  • Easy customization.
  • Active community support.

Installation​

npm install @react-navigation/native

There are various navigator types such as Stack, Tab, Drawer. Here's an example of StackNavigator:

npm install @react-navigation/stack

Usage​

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

const Stack = createStackNavigator();

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

2. React Native Navigation​

React Native Navigation is a router library based on native modules and developed by Wix.

Advantages​

  • Since it's based on native modules, it offers better performance.
  • Utilizes native UI components for rendering, enabling smoother animations.

Installation​

npm install react-native-navigation

Then, connect the native module.

Usage​

import { Navigation } from 'react-native-navigation';

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Details', () => DetailsScreen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home'
            }
          }
        ]
      }
    }
  });
});

Both libraries have their own sets of advantages and disadvantages. It's essential to choose the appropriate library based on the project requirements and preferences.