How To Use Routing with React Navigation in React Native

React Navigation is a popular library for routing and navigation in React Native applications. It provides a variety of navigators that can be used to create common navigation patterns, such as stack navigation, tabbed navigation, and drawer navigation.

To use React Navigation routing in React Native, you will first need to install the react-navigation package. You can do this with the following command:

npm install react-navigationCopy

Once the package is installed, you can use React Navigation routing in your application.

Creating a Stack Navigator

The most common type of navigator is the stack navigator. A stack navigator is a stack of screens where users can navigate between screens by pushing and popping them from the stack.

You can use the createStackNavigator() function to create a stack navigator. This function takes an object as its argument, which contains the configuration for the navigator. The configuration object should include a list of routes, where each route is an object with the following properties:

• Name: The name of the route. This is the name that you will use to navigate to the route.
• Component: The component should be rendered when the user navigates to the route.

For example, the following code creates a stack navigator with two routes:

import { createStackNavigator } from 'react-navigation';
const StackNavigator = createStackNavigator({
  Home: {
    name: 'Home',
    component: HomeScreen,
  },
  Details: {
    name: 'Details',
    component: DetailsScreen,
  },
});Copy

Navigating to a New Screen

You can use the navigate() method on the navigation prop to navigate to a new screen. The navigation prop is passed to all screen components in a stack navigator.

To navigate to the Details screen, you can use the following code:

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <Button onPress={() => navigation.navigate('Details')}>
      Go to Details
    </Button>
  );
};Copy

Going Back

To go back to the previous screen in the stack, you can use the goBack() method on the navigation prop.

To go back from the Details screen to the Home screen, you can use the following code:

const DetailsScreen = () => {
  const navigation = useNavigation();
  return (
    <Button onPress={() => navigation.goBack()}>
      Go Back
    </Button>
  );
};Copy

Passing Data Between Screens

Using the params prop, you can pass data between screens in a stack navigator. The params prop is an object that can be passed to a screen when it is navigated.

To pass data to the Details screen, you can use the following code:

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <Button onPress={() => navigation.navigate('Details', { name: 'John Doe' })}>
      Go to Details
    </Button>
  );
};Copy

To access the data passed to the screen, you can utilize the useRoute() hook. The useRoute() hook returns an object that contains information about the current route, including the params prop.

The following code shows how to access the name param that was passed to the Details screen:

const DetailsScreen = () => {
  const route = useRoute();
  const name = route.params.name;
  return (
    <Text>Hello, {name}!</Text>
  );
};Copy

Conclusion

React Navigation is a powerful library for routing and navigation in React Native applications. It provides a variety of navigators that can be used to create common navigation patterns, such as stack navigation, tabbed navigation, and drawer navigation.

In this article, we have covered the basics of using React Navigation routing in React Native, including creating a stack navigator, navigating to a new screen, returning to the previous screen, and passing data between screens.