Chapter 5: Navigation

Welcome back to our React Native journey. So far, we've covered the basics of components, JSX, state, props, and handling events. Now, it's time to take your app to the next level by adding navigation.

Navigation allows users to move between different screens in your app, creating a more interactive and dynamic experience. In this chapter, we'll explore how to set up navigation in React Native using React Navigation.

5.1 Setting Up React Navigation

First, let's install React Navigation and its dependencies. Open your terminal and run the following commands:

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

Next, you need to install the required native dependencies:

npx expo install react-native-screens react-native-safe-area-context

Now, let's set up the basic structure for navigation.

5.2 Basic Stack Navigation

Stack navigation is one of the most common types of navigation. It allows you to navigate between screens in a stack-like fashion, where each new screen is pushed onto the stack.

Create a new file called App.js and add the following code:

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

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

const Stack = createStackNavigator();

const 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;

In this example, we create a simple app with two screens: HomeScreen and DetailsScreen. The HomeScreen has a button that navigates to the DetailsScreen. We use createStackNavigator to create the stack navigator and NavigationContainer to wrap our navigation structure.

5.3 Passing Data Between Screens

Often, you'll need to pass data between screens. Let's see how to do that with React Navigation.

Modify the HomeScreen component to include some data to pass:

const HomeScreen = ({ navigation }) => {
  const data = {
    itemId: 42,
    otherParam: 'Anything you want here',
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', data)}
      />
    </View>
  );
};

Now, update the DetailsScreen to receive and display this data:

const DetailsScreen = ({ route }) => {
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
};

Here, we use the route prop to access the parameters passed from the HomeScreen.

5.4 Adding Tab Navigation

Besides stack navigation, you might also want to implement tab navigation. Let's set up a simple tab navigator.

First, install the necessary dependencies:

npm install @react-navigation/bottom-tabs

Now, modify your App.js to include tab navigation:

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

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

const SettingsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
};

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

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

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

export default App;

In this example, we create a tab navigator with two tabs: Home and Settings. The Home tab contains a stack navigator with two screens: HomeScreen and DetailsScreen.

Navigation is a fundamental aspect of building mobile apps, and React Navigation makes it easy to implement various types of navigation in your React Native app. We've covered stack navigation, passing data between screens, and adding tab navigation.

In the next chapter, we'll dive into fetching data in React Native, helping you integrate APIs and handle asynchronous operations.

Keep coding!