How to update use context variable from child component in react native

Question

I am using useMemo and useContext hooks to store state of login and logout in my react native application.

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

and context js file looks like below:

import React from "react";

export const AuthContext = React.createContext();

I wanted to update the showBottomNavigation(which is there in the useMemo object) from child component.

I'm new to these concepts, any suggestion how to update the showBottomNavigation and use it.

score 0 · Answer 1 · answered Jun 03 '21 at 15:38

You can use a state to change the value. Your child component can change the state, which in turn can change the value of context.

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);

  const [bottomNavigation, setBottomNavigation] = useState(false);
  
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={...authContext,showBottomNavigation:bottomNavigation }>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
        <Text onPress={()=>setBottomNavigation(true)}>Change Bottom Nav</Text>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

OnPress on text element we are changing the state information, how do we update from child component? — Pioter, Jun 03 '21 at 16:11
Text element is the child component. You can replace it with some arbitrary component and pass it `setBottomNavigation`. Then that component can change the state whenever it wants. — Tayyab Mazhar, Jun 04 '21 at 06:15

How to update use context variable from child component in react native

1 Answers1