Why React native map initialRegion is not working?

Question

When I present my map it never loads the initRegion somewhy, it always starts with the african region. The loading that is visible in the gif is coming from an API call, and I stop it when the get request was succesfull.

Heres my code:

const [mapRegion, setMapRegion] = useState(null);

    const getLocation = async ()=>{
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert(
          'Whoops!',
          'Az alkalmazás nem kapott hely információ engedélyt. Ezt könnyen orvosolhatod telefonod beállításiban. \n\nSzeretnéd most bekapcsolni?',
          [
            {text: 'Igen', onPress: () => openSettings()},
            {text: 'Nem', style: 'cancel'},
          ],
          { cancelable: true }
        )
        return;
      }

      let location = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Highest, maximumAge: 10000}); //accuracy: Location.Accuracy.Highest, maximumAge: 10000
      setUserPosition(location);

      let mapRegion = {
        latitude:location.coords.latitude,
        longitude:location.coords.longitude,
        latitudeDelta: .01,
        longitudeDelta: .01}

      setMapRegion(mapRegion)
    }

    useEffect(() => {
      getLocation()
    }, []);
 return(  


    <View style={styles.container}>
        <MapView style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={mapRegion}
        initialRegion={{latitude:47.090417,longitude:19.234115,latitudeDelta: 5,longitudeDelta: 5}}
        showsUserLocation={true}
        showsCompass={true}
        >
        </MapView>
</View>
)

Answer 1

Turns out if you use some kind of loading in your code, then initRegion does not work: Before:

if(loading){
return(
<LoadingScreen/>
)}
else{
return(
<Mapview
initRegion
/>
)}

After:

return(
<View style={...}>
{loading ? <LoadingScreen/> : null}

<Mapview
initRegion={coords}
/>
<View/>
)