I know this is common to asks but I'm facing a weird problem. In my react native app I just want to call a function within the file but it seems it returns an error, under my functionOne after this will returns functionTwo but it gives me an error. Need help

[ReferenceError: Can't find variable: functionTwo]

Updated: The functionOne indicates to reset PinCode and then it Logout the googleSignIn since it has functionTwo(); inside functionOne and the functionTwo indicates logout of googleSignIn

I put those functions inside <AuthContext.Provider> because I want to reuse or called the function everywhere on screens just like a global function/variable

Updated : AuthProvider.js

return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        functionOne: async () => {
          try {
            await deleteUserPinCode();
            await resetPinCodeInternalStates();
            functionTwo();   //this returns an error --------------------------------
          } catch (e) {
            console.log(e);
            console.log("Please contact administrator");
          }
        },

        functionTwo: async () => {
          try {
            GoogleSignin.configure({});
            await GoogleSignin.revokeAccess();
            await GoogleSignin.signOut();
            setUser({ user: null });
            AsyncStorage.setItem('userPrivilege', '');
            await auth().signOut();
            console.log("sa try");
          } catch (e) {
            console.log(e);
            console.log("Please contact administrator");
          }
        },
      }
      } >
      {children}
    </AuthContext.Provider >
  );

Updated this is what I've tried latest but it returns me also the error

Can't find variable:functionOne

  functionOne = async (e) => {
    try {
      await deleteUserPinCode();
      await resetPinCodeInternalStates();
      functionTwo();
    } catch (e) {
      console.log(e);
      console.log("Please contact administrator");
    }
  };
  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        functionOne: this.functionOne,
        
        functionTwo: async () => {
          try {
            GoogleSignin.configure({});
            await GoogleSignin.revokeAccess();
            await GoogleSignin.signOut();
            setUser({ user: null });
            AsyncStorage.setItem('userPrivilege', '');
            await auth().signOut();
            console.log("sa try");
          } catch (e) {
            console.log(e);
            console.log("Please contact administrator");
          }
        },
      }
      } >
      {children}
    </AuthContext.Provider >
  );

CodePudding user response：

Try this way

class AppProvider extends React.Component {
  
  const functionOne = async (e) => {
    try {
      ....
    } catch (e) {
      ....
    }
  };
  
  const functionTwo = async (e) => {
    try {
      ....
    } catch (e) {
      ....
    }
  };

  render() {
    return (
      <AppContext.Provider
        value={{
          ....
          functionOne: this.functionOne,
          functionTwo: this.functionTwo,
        }}
      >
     {children}
     </AppContext.Provider>
    );
  }
}
export default AppProvider;

CodePudding user response：

You can change the way you declare your functions to

async function functionOne(){}

and the same for the other one. At least that works for me.