Navigating React Native: A Comprehensive Guide

What is React Navigation?

React Navigation is a standalone library that enables you to implement navigation functionality in your React Native application. It’s written in JavaScript and doesn’t directly use native navigation APIs on iOS and Android, allowing for maximum customization and easier debugging.

Getting Started with React Navigation

To get started with React Navigation, you’ll need to install the library and its dependencies. You can do this using npm or yarn:

npm install @react-navigation/native

Next, create a new navigation stack by importing the createNativeStackNavigator function from @react-navigation/native and executing it:

import { createNativeStackNavigator } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

Navigating Between Screens

To navigate between screens, you’ll need to create a navigation container and wrap your screens in it. You can do this by importing the NavigationContainer component from @react-navigation/native and wrapping your screens in it:

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

const App = () => {
  return (
    <NavigationContainer>
      {/* Your screens go here */}
    </NavigationContainer>
  );
};

Using the useNavigation Hook

React Navigation also provides a useNavigation hook that gives functional components access to the navigation object and allows them to trigger navigation actions programmatically. You can use this hook to navigate between screens without having to pass the navigation props down manually:

import { useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const navigation = useNavigation();

  return (
    {/* Your screen content goes here */}
  );
};

Passing Parameters to Screens

You can pass parameters to screens by putting them in an object as a second parameter to the navigation.navigate function:

navigation.navigate('About', { param: 'value' });

You can then read the parameters in the screen component using the route.params object:

const AboutScreen = ({ route }) => {
  const param = route.params.param;

  return (
    <p>Param: {param}</p>
  );
};

Additional Resources

For more information and examples, be sure to check out the official documentation.