react native - react-native-maps performance slow on iOS

Question

this is the first time I have integrated the Google Map on iOS using react-native-maps. I am able to show the Google Map on iOS by following step by step in this link:

react-native-maps with Google Map on iOS

Then, the new problem appear that the performance of the map is terrible (I cannot move a map).

UPDATE

Here is my code:

The region will be saved in state:

constructor(props) {
    super(props);

    this.state = {
        region: {
            latitude: 10.762622,
            longitude: 106.660172,
            latitudeDelta: 0.0100,
            longitudeDelta: 0.0100,
        },
    }
}

Here is the code to show the map:

render() {
    return (
        <View style={styles.container}>
            <View
                style={styles.mapContainer}>
                <MapView
                    provider={PROVIDER_GOOGLE}
                    style={styles.map}
                    region={this.state.region}
                    showsUserLocation={true}
                    onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
                >
                </MapView>
            </View>
        </View>
    )
}

onRegionChangeComplete(region) {
    console.log("region", region);
    this.setState({region: region});
}

These code work fine on Android, but I am not able to move the map on iOS

Please let me know if you have any ideas to solve this problem. Thank you in advance!

Answer 1

So, there are a couple of things I don't like about the code that I think could be bothering you:

1. Using the Google Provider in iOS: Is it installed? Working correctly? I usually use the default iOS map because I am guessing is more optimized.
2. You are using console.log() in the onRegionChange which could be executed a lot of times. I had some iOS performance issues in Debug because I was using a lot of console.log() in the render method which was slowing the emulator.
3. It seems the region is pointing to a region in the state and you are updating the region again when is moving.

So, I would try this:

• Remove the console.log or make sure is not logging a lot inside XCode.
• Replace region for initialRegion in the map. No need to keep updating it. Just save it in another variable if you want.
• Remove the provider prop to see if the regular iOS MapKit works.

Also, keep in mind MapView has some props to actually disable the scrolling but I assume you already tried that.