How to Pass Props to Screens via Context Provider in React Navigation 5

How to Pass Props to Screens via Context Provider in React Navigation 5

React Context with React Navigation

There are different ways you might pass additional props (data) down to multiple screens in React navigation, but the recommended way is to use React Context and wrap the navigator with a context provider, passing the props data to the screens. In this lesson, you’ll learn how to pass props to screens using React Context Provider.

Please note that this lesson focuses on how to, not what is. This means that we will not go into theory, but will focus on how to wire things up.

Create the React Context

Create React Context in a separate file because we will import it in multiple files. I named the file navcontext.js with the following content:

// navcontext.js

import React from 'react';

export const ThemeContext = React.createContext({ mode: 'light' });

Notes:

  • You pass any data of your choice to createContext(). The data passed is the default value argument. In this example, I passed an object but you can pass a string, the choice is yours.
  • The default value argument is only used when a component does not have a matching Provider above it in the tree.

With that done, we are ready to use the ThemeContext context in any component.

Setup the navigation

You can set up the navigation where you see fit. In this demo, I will do that in the entry point of the application, the App.js file:

// App.js

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

import { ThemeContext } from './src/common/context/navcontext';
import HomeScreen from './src/screens/HomeScreen';

function App() {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <ThemeContext.Provider value={{ mode: 'dark' }}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name='Home' component={HomeScreen} />
        </Stack.Navigator>
      </ThemeContext.Provider>
    </NavigationContainer>
  );
}

export default App;

Notes:

  1. We import ThemeContext created earlier
  2. Pass the props data using the value prop of ThemeContext.Provider. This kinda overrides the default value we set at ThemeContext with createContext()
  3. Wrap the navigator with a context provider from the ThemeContext

With that done, we are ready to access props passed in the navigation setup via the ThemeContext context in any component added in the navigation setup.

Notes:

Other components not added in the navigator can still make use of the ThemeContext, but in that case, the value they get is the default value set with createContext()

Create the screen components that receive the props

This is the component for the screen we added to the navigation container. We can import ThemeContext into this component and access the data passed down via the context:

// HomeScreen.js

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { ThemeContext } from '../common/context/navcontext';

function HomeScreen() {
  const themeContext = useContext(ThemeContext);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: themeContext.mode === 'dark' ? '#333' : '#fff',
      }}
    >
      <Text
        style={{
          color: themeContext.mode === 'dark' ? '#fff' : '#333',
          fontSize: 24,
        }}
      >{`Home Screen in ${themeContext.mode} mode`}</Text>
    </View>
  );
}

export default HomeScreen;

When to use Context

Ideally, you want to use React Context for “global” data, shared between multiple components.

A good example is an app where user can select their preferred theme – light or dark mode. You want to style the different components in the app based on the user-selected theme mode.

To dig deeper into React Context, take a look at the official documentation. Drop a comment in the box below.

Happy coding!

 

Leave a Reply

Your email address will not be published. Required fields are marked *