'Async Function not recognize in React Native
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 >
);
Solution 1:[1]
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;
Solution 2:[2]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Fapi |

