I have been learning React Native through a course that is not using version 6, and has deprecated usage of Context / Provider mechanisms.

As a result, I am unable to upgrade my code to work with the latest good practices.

Here is the overview of what I am trying to do.

const App = (props) => {
  const isAuth = true;

  return (
    <AuthProvider>
      <NavigationContainer>
        {isAuth && <MainStackScreens />}
        {!isAuth && <LoginStackScreens />}
      </NavigationContainer>
    </AuthProvider>
  );
};

Basically I want to replace my isAuth variable with an access to the state communicated by AuthProvider (and use the token!), which is what it is intended for I believe.

Reading further documentation, I realized that thanks to the Provider it is indeed possible to have access to the state throughout the application with an import of the Context provided to any child. However, I don't understand how to have access to it right there in the App.js on my NavigationContainer.

Could you help?

Some additional resources...

My Provider is imported in the App.js like this :

import { Provider as AuthProvider } from './context/AuthContext'; 

and defined like this :

    import createDataContext from "./createDataContext";
    import AsyncStorage from '@react-native-async-storage/async-storage';
    
    const authReducer = (state, action) => {
        switch(action.type) {
            case 'add_error': 
                return {...state, errorMessage: action.payload}
            case 'token_stored':
                return { errorMessage:'', token: action.payload}
            case 'logout':
                return { token:null, errorMessage:''}
            default:
                return state;
        }
    } ;
    
    const signup = (dispatch) => async ( {username, email, password}) => { // some code } ;
    
    
    const signin = (dispatch) => async ( {username, password}) => { // some code } ;
    
    
    export const { Provider, Context} = createDataContext(
        authReducer,
        {signin, signup},
        { token: null, errorMessage: '' }
    );

The createDataContext is defined like this :

import React, { useReducer } from "react";

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

CodePudding user response：

Create another screen

return (
    <AuthProvider>
      <NavigationContainer>
        <Screens />
      </NavigationContainer>
    </AuthProvider>
  );

Screens = () = >
// get auth from context
return (
    <>
        {isAuth && <MainStackScreens />}
        {!isAuth && <LoginStackScreens />}
    </>
  );