AuthContext data update issue with react native - reactjs

Question

I created a Context object named AuthContext to hold user information on the application. After I get the user information with this Context object and do the necessary operations, I save the information with the AsnycStore and direct it to the Main.js page. but sometimes I need to change this information. I created a file named API/index.js and wrote a function that can re-login according to the user's status. when I run this function it will need to trigger a function under the AuthContext I created but I can't call the function in the AuthContext
AuthContext.js
import AsyncStorage from '#react-native-async-storage/async-storage';
import React, { createContext, useEffect, useState } from 'react';
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
//const [test, setTest] = useState("test tuta");
const [userToken, setUserToken] = useState(null);
const [userInfo, setUserInfo] = useState(null);
const [isLoading, setIsLoading] = useState(null);
const [guest, setGuest] = useState(null)
const login = (userInfo) => {
setIsLoading(true);
setUserToken(userInfo.kullanici_id);
setUserInfo(userInfo);
AsyncStorage.setItem("userToken", JSON.stringify(userInfo.kullanici_id));
AsyncStorage.setItem("localUserInfo", JSON.stringify(userInfo));
setIsLoading(false)
}
const isGuest = () => {
setIsLoading(true);
setGuest(true);
AsyncStorage.setItem("guest", "true");
setIsLoading(false)
}
const test= ()=>{ //I will call this function in API/index.js
console.log("test log")
}
const logout = () => {
setIsLoading(true);
setUserToken(null);
setUserInfo(null);
setGuest(null);
AsyncStorage.removeItem("userToken");
AsyncStorage.removeItem("localUserInfo");
AsyncStorage.removeItem("guest")
setIsLoading(false)
}
const isLoggedIn = async () => {
try {
setIsLoading(true);
let userToken = await AsyncStorage.getItem("userToken");
setUserToken(userToken);
let userInfo = await AsyncStorage.getItem("localUserInfo");
setUserInfo(JSON.parse(userInfo));
console.log("------------- userlocal")
console.log(userInfo);
setIsLoading(false);
} catch (e) {
console.log("isLoggenIn error ${e}")
}
}
const isGuestIn = async () => {
try {
setIsLoading(true);
let guestToken = await AsyncStorage.getItem("guest");
setGuest(guestToken);
setIsLoading(false);
} catch (e) {
console.log("isLoggenIn error ${e}")
}
}
useEffect(() => {
isLoggedIn(),
isGuestIn()
}, [])
return (
<AuthContext.Provider value={{ login, logout, isLoading, userToken, guest, isGuest,userInfo,deneme }}>
{children}
</AuthContext.Provider>
)
}
API/index.js
import AsyncStorage from "#react-native-async-storage/async-storage";
import axios from "axios";
import { useContext } from "react";
import { BASE_URL } from "../config";
import { AuthContext,AuthProvider } from "../context/AuthContext";
export const oturumKontrol = async () => {
const { test} = useContext(AuthContext);
test(); //Im using test function inside AuthContext
console.log("oturum kontrol")
}
Error
Possible Unhandled Promise Rejection (id: 0):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
How can I access the function inside the AuthContext?

Answer 1

You cannot use hooks in normal functions. They must be used in functional components at top level.
You can pass the function from the hook as an argument to another function and use it like that.
//SomeComponent where you want to call oturumKontrol
const { test} = useContext(AuthContext); // get function
//call this on press or in useEffect
const handleTest = async () => {
await oturumKontrol(test) //pass function
}
export const oturumKontrol = async (test) => {
test(); //call function
console.log("oturum kontrol")
}
Make sure that you pass test function in your AuthContext first