'Is it possible to use the useContext hook to pass a function from a parent to a child component without a cycle?
I am attempting to use pass my AuthContext function from my App.js file to my login.js.
My App.js file simplified to the relevant code.
export const UserContext = createContext();
export default function App() {
const authContext = useMemo(
Function
);
const Drawer = createDrawerNavigator();
return (
<NavigationContainer>
<UserContext.Provider value={authContext}>
<Drawer.Navigator>
<>
<Drawer.Screen
name="Identification"
component={Identification}
/>
</>
</Drawer.Navigator>
</UserContext.Provider>
</NavigationContainer>
);
My identification.js file that connects App.js to login.js.
const Identification = () => {
const Stack = createStackNavigator();
return (
<Stack.Navigator >
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false, title: "Login"}}
/>
<Stack.Screen
name="Registration"
component={Registration}
options={{headerShown: false}}
/>
</Stack.Navigator>
)
}
export default Identification
The relevant code for login.js
import React, { useContext } from 'react'
import { UserContext } from '../App.js'
const Login = ({navigation}) => {
const {signIn} = useContext(UserContext)
Do to using React-navigation I am unable to directly pass functions from my App.js function to login.js. I attempted to use useContext but I received a warning I was using the following cycle.
Require cycle: App.js -> screens/identification.js -> identification/login.js -> App.js
I don't want to just suppress the warning, but this was the only way I could find to pass AuthContext down.
My question is twofold
Is there a way to useContext without having to import UserContext from App.js?
If there is not, is there any other way I can pass down a function since I can't utilize props?
I tried react navigation initial params but they don't accept nonserialized values like functions.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
