Vitalie Rotaru
Vitalie Rotaru

Reputation: 1

OnMapReady not working consistently on MapView

I am developing a mobile app (with Expo 52.0.18) where I am showing a list of trips. When you open a trip, a map should load with the markers on it (using react-native-maps 1.18.0).

The map works fine when opening first 3-4 trips and then for 2-3 trips does not load the markers. I noticed that when this happens, the onMapReady function is not called although the mapRef is assigned and the map is shown on the screen.

Here is the MapComponent that I am using:

import React, { useState, useEffect, useRef } from "react";
import { StyleSheet } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import SvgMarker from "./SvgMarker";

const MapComponent = ({routePlaces, area}) => {
    let timer = null;
    const mapRef = useRef();
    const [focused, setFocused] = useState(false);

    useEffect(() => {
            timer = setTimeout(focusMap, 500);
            return () => clearTimeout(timer);
        }, []);

    const focusMap = () => {
        !!area && !!mapRef && !focused && mapRef.current?.animateToRegion(area);
        setFocused(true);
    };

    return (
        <MapView
            ref={mapRef}
            // provider={PROVIDER_GOOGLE}
            style={styles.map}
            initialRegion={{
                latitude: 37,
                longitude: -87,
                latitudeDelta: 10,
                longitudeDelta: 10
            }}
            onMapReady={(e) => {
                console.log(e);
                focusMap();
            }}
        >
            {
               focused && routePlaces.filter(p => p.stopover).map((p, index) => {
                    return (
                    <Marker 
                        key={index}
                        coordinate={{
                            latitude: p.latitude,
                            longitude: p.longitude
                        }}
                    >
                        <SvgMarker label={index + 1}/>
                    </Marker>
                    );
                })
            }
        </MapView>
    );
};

const styles = StyleSheet.create({
    map: {
        width: '100%',
        height: 350
    },
    marker: {
       padding: 10
    }
});

export default  MapComponent;

Note: I am using the timer to focus the map when the onMapReady is not firing, so obviously if the issue is solved the timer is not of use anymore.

The problem is not in the props provided, because for the same trip the map is sometimes loaded correctly (with markers) and some other times does not show the markers.

I think that one of the possible reasons is that in DEV mode, Expo uses its own GoogleMaps credentials, so perhaps there is a rate limiter or some latency.

All suggestions are highly appreciated as I am new to RN and still figuring out the basics.

Upvotes: 0

Views: 70

Answers (0)

Related Questions