Реагировать на ошибку «LongitudeDelta» собственных карт на Android после рендеринга карты

Question

Я использую MapView, предлагаемый React native maps, и он отлично работает в iOS, но в Android он дает мне LongitudeDelta ошибку после первого рендеринга карты, здесь есть скриншот ошибки:

Я пытался сгенерировать Apk и протестировать его в рабочем состоянии, но он продолжает зависать.

Обновление: я обнаружил эту открытую проблему, связанную с моей https://github.com/react-native-community/react-native-maps/issues/3088

вот фрагмент кода:

import React, { useState, useEffect, useRef, useContext } from 'react';
import { View, Text, Image, ActivityIndicator } from 'react-native';
import {  InputField} from '../../../GlobalReusableComponents/TextFields';
import { Button } from 'react-native-elements';
import MapView from 'react-native-maps';
import useReverseGeocoding from '../../../context/useReverseGeocoding';
import usePrevious from '../../../context/usePrevious';
import MainTabContext from '../../../context/MainTabContext';
import { buttonStyles } from '../../../globalStyles/styles';
import EStyleSheet from 'react-native-extended-stylesheet';

const SetLocationOnMapScreen = (props) => {
    const { t, locale } = props.screenProps;
    const {
        getCurrentLocationAsync
    } = useContext(MainTabContext);
    const [isMapReady, setIsMapReady] = useState(false);
    const [latitude, setLatitude] = useState(useContext(MainTabContext).userLatitude);
    const [longitude, setLongitude] = useState(useContext(MainTabContext).userLongitude);
    const [latitudeDelta, setLatitudeDelta] = useState(0.025);
    const [longitudeDelta, setLongitudeDelta] = useState(0.025);
    const [reverseGeocodingApi, reverseGeocodingdata, isReverseGeacodingDone, reverseGeocodingErrorMessage] = useReverseGeocoding();
    const prevLatitude = usePrevious(latitude);
    const prevLongitude = usePrevious(longitude);
    let mapRef = useRef(null);

    useEffect(() => {
        getYourCurrentLocation();
    },
    [])

    useEffect(() => {
        if((prevLatitude !== latitude && prevLatitude !== undefined) && (prevLongitude !== longitude && prevLatitude !== undefined)){
            reverseGeocodingApi({
                latitude,
                longitude
            });
        }
    },
    [latitude, longitude])

    const onMapReady = () => {
        if(!isMapReady) {
            setIsMapReady(true);
        }
    };

    const getYourCurrentLocation = async () => {
        await getCurrentLocationAsync();
        if(latitude !== null && longitude !== null){
            animateToRegion({
                latitude,
                longitude
            });
        }
    }

    const onRegionChangeComplete = (selectedRegion) => {
        setLatitude(selectedRegion.latitude);
        setLongitude(selectedRegion.longitude);
        setLatitudeDelta(selectedRegion.latitudeDelta);
        setLongitudeDelta(selectedRegion.longitudeDelta);
    }

    const animateToRegion = (currentLocation) => {
        mapRef.current.animateToRegion(currentLocation, 1000);
        setLatitude(currentLocation.latitude);
        setLongitude(currentLocation.longitude);
    }

    const onNextButtonPress = () => {
        props.navigation.state.params.setSelectedValue({
            location: reverseGeocodingdata.length !==0? reverseGeocodingdata[0].formatted_address : '',
        lat: latitude,
        long: longitude
        });
        props.navigation.pop(2);
    }

    const _renderMapWithFixedMarker = () => {
        if(latitude !== null && longitude !== null){
            return (
                <View style={{flex: 1}}>
                    <MapView
                        ref={mapRef}
                        onMapReady={onMapReady}
                        style={styles.map}
                        initialRegion={{
                            latitude,
                            longitude,
                            latitudeDelta,
                            longitudeDelta
                        }}
                        onRegionChangeComplete={(selectedRegion) => onRegionChangeComplete(selectedRegion)}
                    />
                    <View style={styles.pinBadge}>
                        <Text
                            style={{color: EStyleSheet.value('$primaryDarkGray')}}
                        >
                            Move to choose Location
                        </Text>
                    </View>
                    <View style={styles.markerFixed}>
                        <Image style={styles.marker} source={require('../../../assets/pin.png')} />
                    </View>
                </View>

            );
        }
        return (
            <View style={styles.activityIndicatorContainer}>
                <ActivityIndicator style={styles.activityIndicator}/>
            </View>
        );
    }

    return (
        <View style={styles.container}>
            <View 
                pointerEvents='none'
                style={styles.inputFieldContainer}
            >
                <InputField
                    maxLength={35}
                    placeholder='Selected Address'
                    value={isReverseGeacodingDone && reverseGeocodingdata.length !== 0? reverseGeocodingdata[0].formatted_address : 'Loading ...'}
                />
            </View>
            {_renderMapWithFixedMarker()}
            <View style={styles.bodyContainer}>
                <View style={styles.buttonContainer}>
                    <Button
                        title="Confirm Your Location"
                        buttonStyle={buttonStyles.button}
                        onPress={() => onNextButtonPress()}
                    />
                </View>
            </View>
        </View>
    );
}

SetLocationOnMapScreen.navigationOptions = ({navigation}) => {
    return {
        title: 'Select Location'
    }; 
};

export default SetLocationOnMapScreen;

const styles = EStyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '$primaryBackgroundColor'
    },
    inputFieldContainer: {
        backgroundColor: '$secondaryBackgroundColor', 
        paddingVertical: 20,
        paddingHorizontal: 20
    },
    activityIndicatorContainer: {
        flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center'
    },
    activityIndicator: {
        alignSelf: 'center'
    },
    map: {
        flex: 1
    },
    pinBadge: {
        position: 'absolute',
        paddingVertical: 10,
        paddingHorizontal: 15,
        top: '38%',
        alignSelf: 'center',
        borderRadius: 25,
        backgroundColor: '$primaryBackgroundColor',
        shadowColor: '#acaeb4',
        shadowOffset: {
            width: 0,
            height: 3,
        },
        shadowOpacity: 0.5,
        shadowRadius: 5,

        elevation: 5
    },
    markerFixed: {
        left: '50%',
        marginLeft: -10,
        marginTop: -6,
        position: 'absolute',
        top: '50%'
    },
    marker: {
        width: 20, 
        height: 41
    },
    bodyContainer: {
        marginHorizontal: 20
    },
    buttonContainer: {
        position: 'absolute', 
        bottom: 20,
        width: '100%'
    }
})

и вот версии версий:

"axios": "^0.19.0",
"expo": "~36.0.0",
"i18n-js": "^3.5.0",
"native-base": "^2.13.8",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-maps": "^0.26.1",
"react-native-tab-view": "^2.11.0",
"react-native-tabs": "^1.0.9",
"react-native-web": "~0.11.7",
"react-navigation": "4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",
"react-redux": "^6.0.0",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"