'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

  1. Is there a way to useContext without having to import UserContext from App.js?

  2. 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