Oops! An error occurred: Invalid hook call. Hooks can only be called inside the body of a function component. There are several reasons why this might have happened:
- You could have incompatible versions of React and the renderer (e.g., React DOM)
- Your code might not be following the Rules of Hooks
- There could be multiple copies of React in the same application
I'm currently working on implementing location permission in a React Native project using expo CLI.
Below is the function I've created:
function OfferScreen({ navigation }: { navigation: any }) {
// STATE VARIABLES FOR FETCHING DATA
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const value = new Animated.Value(1);
// FETCHING DATA
useEffect(() => {
fetch("https://fidness.net/WSExchange/getListActiveProspectus")
.then((response) => response.json())
.then((json) => {
setData(json);
setLoading(false);
})
.catch((error) => {
alert(
"Erreur avec le chargement des offres, veuillez réessayer ultérieurement!"
);
setLoading(false);
});
// GEOLOCATION TEST
// STATE FOR GEOLOCATION
const [location, setLocation] = useState<any | null>(null);
const [hasPermission, setHasPermission] = useState<any | null>(null);
useEffect(() => {
(async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
setHasPermission(status === "granted");
let location = await Location.getCurrentPositionAsync({});
})();
}, []);
}
export default OfferScreen;
Here's the target function in my tab bar as well:
<Tab.Screen // TAB SCREEN OFFER
options={
{ headerShown: false }
}
name={"Offres"}
component={Offers}/>
By the way, everything works fine when I remove the location permission code.