useEffect(() => {
    const interval = setInterval(async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        setIsLoaded(true);
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setGeoPos((prevState:position) => ({
        ...prevState,
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      }));
      setIsLoaded(true);
    }, 500); 
    return () => clearInterval(interval);
  }, []); 

I have this code that fetches the geo position and sets it to a state and then sets the isloaded to true

if (!isLoaded) {
    return (
      <View
        style={{flex:1, alignItems: "center", justifyContent: 'center',}}
      >
        <ActivityIndicator size={"large"} style={{marginBottom: 10,}}></ActivityIndicator>
      </View>
    )
};

This code runs before the main return statement, this shows the activityIndicator until the isLoaded state is true.

The main issue is that I don't understand why the display keeps showing the activity indicator, it doesn't seems to be changing to its loaded state.

By the way, I've used these two exact codes on other components so I don't think the code itself is the main issue imo