React Native - Router

React Native - Navigation

Navigation is a core part of almost any mobile application. In React Native, the most widely adopted solution for navigation is React Navigation. It’s a standalone library that provides a comprehensive suite of navigators (stack, tab, drawer, etc.).

Step 1: Install React Navigation

First, install the core library and essential dependencies. If you’re using Yarn:

yarn add @react-navigation/native react-native-screens react-native-safe-area-context

Or with npm:

npm install @react-navigation/native react-native-screens react-native-safe-area-context

For this tutorial, we’ll demonstrate stack navigation. Install the stack navigator:

yarn add @react-navigation/stack

Or with npm:

npm install @react-navigation/stack

If you’re using a bare React Native project (created with react-native init), you also need to link these native dependencies. For iOS, navigate to your ios directory and run pod install.

Step 2: Create Screen Components

Let’s create two simple screen components: HomeScreen and DetailsScreen.

HomeScreen.js:

<html>
 <body>
  <p>
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    &lt;View style={styles.container}&gt;
      &lt;Text style={styles.text}&gt;Home Screen&lt;/Text&gt;
      &lt;Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
      /&gt;
    &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 20, marginBottom: 20 },
});

export default HomeScreen;
  </p>
 </body>
</html>

DetailsScreen.js:

<html>
 <body>
  <p>
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

function DetailsScreen({ route, navigation }) {
  // Get params passed from HomeScreen
  const { itemId, otherParam } = route.params;
  return (
    &lt;View style={styles.container}&gt;
      &lt;Text style={styles.text}&gt;Details Screen&lt;/Text&gt;
      &lt;Text style={styles.text}&gt;itemId: {JSON.stringify(itemId)}&lt;/Text&gt;
      &lt;Text style={styles.text}&gt;otherParam: {JSON.stringify(otherParam)}&lt;/Text&gt;
      &lt;Button title="Go to Details... again!" onPress={() => navigation.push('Details', { itemId: Math.floor(Math.random() * 100) })} /&gt;
      &lt;Button title="Go to Home" onPress={() => navigation.navigate('Home')} /&gt;
      &lt;Button title="Go back" onPress={() => navigation.goBack()} /&gt;
    &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  text: { fontSize: 18, marginBottom: 10 },
});

export default DetailsScreen;
  </p>
 </body>
</html>

Step 3: Configure the Navigator in App.js

Now, set up the navigation structure in your main App.js file.

App.js:

<html>
 <body>
  <p>
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen'; // Assuming HomeScreen.js is in the same directory
import DetailsScreen from './DetailsScreen'; // Assuming DetailsScreen.js is in the same directory

const Stack = createStackNavigator();

function App() {
  return (
    &lt;NavigationContainer&gt;
      &lt;Stack.Navigator initialRouteName="Home"&gt;
        &lt;Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} /&gt;
        &lt;Stack.Screen name="Details" component={DetailsScreen} /&gt;
      &lt;/Stack.Navigator&gt;
    &lt;/NavigationContainer&gt;
  );
}

export default App;
  </p>
 </body>
</html>

Output: The app will start on the ‘Home’ screen. Tapping the ‘Go to Details’ button will navigate to the ‘Details’ screen, passing parameters. The ‘Details’ screen will display these parameters and offer buttons to navigate further or go back. React Navigation automatically provides a back button in the header on the ‘Details’ screen.

React Navigation is very powerful and offers many features like tab navigation, drawer navigation, custom headers, and deep linking. For comprehensive documentation and more examples, visit the React Navigation official website.