React Navigation 5 Tab.Navigator 在 Tab.Screens 之间发送令牌

Question

I am struggling to pass token from one Tab.Screen to another Tab.screen

I am using Tab.Navigator inside Stack.Navigator

<Stack.Screen name="Auth"/> component navigates to <Tab.Screen name="Map"/> and sends token there:

props.navigation.replace("BottomTabs", {screen: "Map", params: {token: token}});

To this point everything is fine, but now I have two Tabs <Tab.Screen name="Map"/> and <Tab.Screen name="List"/> . I need to pass token from Map component to List component by pressing navigation Tab. I cannot pass it like before with props.navigation.replace/navigate or anything like this.

Maybe someone could help me find a proper way to pass data between one tab screen to another? Thanks!

Answer 1

U can store the data in Context and get It. or u can pass the data by navigate("Route",{param}) and get it in other class by route.param. Or u can send data as a props.

Answer 2

Ok, I found what seems the best solution in my case: https://dev.to/efearas/how-to-usecontext-and-set-value-of-context-in-child-components-in-3-steps-3j9h

I create context file auth-context.js :

import React from 'react';

export const AuthContext = React.createContext();

I create token hook in App.js and wrap it on like this:

import { AuthContext } from "./auth-context.js";

function AppNavigator() {
  const [token, setToken] = useState(null);
  return (
    <AuthContext.Provider value={[token, setToken]}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Auth">
          <Stack.Screen
            name="BottomTabs"
            component={BottomTabs} // this separate navigator has my map and list components and they also get token in this way
          />
          <Stack.Screen
            name="Auth"
            component={Auth}
          />
          <Stack.Screen
            // other components which I don't want to have in BottomTabs
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>

In my auth.js component, I setToken :

import { AuthContext } from "../auth-context.js";

export default function Auth(props) {

    const [token, setToken] = useContext(AuthContext);

    useEffect(() => {
        (async () => {
            const token = await AsyncStorage.getItem('token')
            if (token)
                setToken(token);
                props.navigation.replace("BottomTabs", {screen: "Map"});
        })()
    }, []);

here, for example, it tries to get token from AsyncStorage and if it does, it set it to Context Hook (if I can call it this way) and then navigates to Map screen (which is on child Tab.Navigator). Anyway, this is just my project complexity with React Navigation 5. :)

When the token is set, you can access it in other components in the same manner:

import { AuthContext } from "../auth-context.js";

....

const [token, setToken] = useContext(AuthContext);

Disclaimer: I am far from an expert, so my solution may not be the prettiest, but it works for me and I hope the answer to my struggles will help someone else too :).

If anyone sees what could be done better, please add your answer. Thanks all!