How can I use context with React Navigation?

How can I use context with React Navigation?

You can use React's Context API to manage state across your navigation structure. Would you like a code example?

Yes, please provide a code example.

Sure! First, create a context using React.createContext(). Then, wrap your navigation container with the context provider. Here's a simple example:

const MyContext = React.createContext();

const App = () => {
  return (
    <MyContext.Provider value={{ user: 'John Doe' }}>
      <NavigationContainer>
        {/* Your navigators go here */}
      </NavigationContainer>
    </MyContext.Provider>
  );
};

You can then access the context in your screens using useContext(MyContext).

What if I need to update the context value?

You can use a state variable to manage the context value. Update the context value using a function that modifies the state. Here's an example:

const MyContext = React.createContext();

const App = () => {
  const [user, setUser] = useState('John Doe');

  return (
    <MyContext.Provider value={{ user, setUser }}>
      <NavigationContainer>
        {/* Your navigators go here */}
      </NavigationContainer>
    </MyContext.Provider>
  );
};

Now you can call setUser to update the user value from any component.