CODEWITHSUNDEEP
javascriptiosgoogle-mapsreact-nativereact-native-maps
Luong Truong
Luong Truong

Reputation: 2153

react native - react-native-maps initialRegion not work

I integrated Google Map for iOS device using react-native-maps. I have a problem that initialRegion does not work after I re-render the map.

My application contain only 2 component: MapView from react-native-maps and a Button. Click on the button to show or hide the map.

Here is my code:

render() {
    return (
        <View style={styles.mapContainer}>
            {this.renderMap()}
            <TouchableOpacity
                onPress={this.onButtonPress.bind(this)}
                style={styles.showMapButtonContainer}>
                <Text style={styles.showMapButtonText}>Show and Hide Map</Text>
            </TouchableOpacity>
        </View>
    );
}

renderMap() {
    if (this.state.showMap) {
        return (
            <MapView
                provider={PROVIDER_GOOGLE}
                style={styles.map}
                initialRegion={{
                    latitude: 37.78825,
                    longitude: -122.4324,
                    latitudeDelta: LATITUDE_DELTA,
                    longitudeDelta: LONGITUDE_DELTA,
                }}
                cacheEnabled={true}
                onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
            >
            </MapView>
        );
    } else {
        return <View style={styles.map}/>;
    }
}

onButtonPress() {
    this.setState({
        showMap: !this.state.showMap,
    })
}

onRegionChangeComplete(region) {
    console.log("new region", region)
}

First time load map, everything work perfectly. However, when I hide the map and show it again by clicking on the button it render a random region:

{ 
  longitude: 0,
  latitudeDelta: 0.0004935264587338631,
  latitude: 0,
  longitudeDelta: 0.00027760863304138184 
}

I tried cacheEnabled equal true and false but no help. Please let me know if you have any suggestion. Thank you in advance!

Upvotes: 0

Views: 2789

Answers (1)

Nisarg Thakkar
Nisarg Thakkar

Reputation: 1547

When you First time load the page it will call initialRegion and when you hide show the map it will not again call initialRegion function because map is already loaded before so you need to call function on hide/show method and set initialRegion by the following method

this.map.setNativeProps({ region });

or 

this.map.animateToRegion({
       latitude: this.props.latitude,
       longitude: this.props.longitude,
       longitudeDelta: LONGITUDE_DELTA ,
       latitudeDelta: LATITUDE_DELTA
}, 1)}

And you need to take add ref={ref => { this.map = ref; } } as follow so in funcation you get this.map as reference

         <MapView                   
                ref={ref => { this.map = ref; } }                 
                initialRegion={{
                  latitude: 37.78825,
                  longitude: -122.4324,
                  latitudeDelta: LATITUDE_DELTA,
                  longitudeDelta: LONGITUDE_DELTA,
                }}
                 onRegionChangeComplete={(region) => { **somefuncation** } }            
          >

Upvotes: 1

Related Questions