react-native-maps: [Android] Map with region controlled as state won't let you move the map

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.52.2 react: 16.2.0 react-native-maps: 0.19.0

Works on iOS target platform 9.0 (Apple Maps, have not tried Google Maps) Does not work on Android, tried multiple versions including 6.0 emulator and a 8.1.0 Pixel 2

Steps to Reproduce

react-native init <projectName>
Install RN Maps according to the instructions
Test a non controlled map (aka uses initialRegion instead of region) to confirm everything is installed correctly. It will work. (see master branch of repo referenced in reproducible demo section)
Change the map into a controlled map (using region and onRegionChange)
Run on an Android device or emulator. You will see that when you try to move the map around the whole map jitters and makes it impossible to move around
(optional) Test the same code on iOS (Apple Maps) it will work fine

Expected Behavior

I would have expected to be able to move the map around like normal on Android. This example is taken straight out of the Readme and has worked for me perfectly on another project that is running on older RN and RN Maps (RN 0.48.4, RN Maps: 0.16.4).

Actual Behavior

Whenever you try to move the map the whole map jitters and doesn’t move at all. Sometimes you can get very small movements to work but it is not usable. It almost seems as if the updates to the state are not happening in sync with the dragging of your finger making it just bounce back and forth.

This is only an issue on Android not iOS.

Reproducible Demo

https://github.com/techwes/rn-maps-playground/tree/issue-map-move

The repo above I just created to play around with RN Maps and confirm this issue was not due to some of my other code. The branch linked above has the code that reproduces the issue. The master branch is actually a version that works (just to prove I didn’t mess up the installation).

You will notice that this code is the same as “Using a MapView while controlling the region as state” section of the readme, but it doesn’t work on Android

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 33 (6 by maintainers)

Most upvoted comments

I think i understand why… whenever you move, you trigger the onRegionChange, which then sets the position back to what it was… which is expected behaviour based on your code. If you use onRegionChangeComplete instead, you should be able to keep moving. Then, only when you release, you might see a little “jitter”.

Unless I completely misunderstood your issue :p

+26

markmssd on Jan 26, 2018

I’m closing this issue because it seems like incorrect usage instead of an actual bug. stackoverflow seems like a better place for such discussion.

salah-ghanim on Mar 6, 2019

I believe that this is still a problem on Android. At least the example from the Readme is broken.

I noticed that iOS is implementing a feature that prevents onRegion callbacks to fire when programmatically updating the region ([AirMap ignoreRegionChanges]) while Android seems to be missing that part completely.

stigi on Apr 17, 2019

@rafetkhallaf I have been able to sidestep this issue in both a pure naive and an expo (SDK 25) app using the suggestion from @alvelig which is to:

not use the region prop (only use initialRegion aka don’t control the region with state)
keep track of the region in the state via onRegionChanged
use animateTo to change the region when needed.

Have you tried this method? I think it actually should be the preferred way to go.

So I would like to get back to the matter of either fixing this issue, or making the documentation clear this is not an issue. It seems from earlier conversation that controlling region with state does have its use cases but generally is not a best practice (because it causes this issue). If that is indeed the case, then we can close this issue by making the documentation clear. Otherwise, we should actually fix it so controlling the region as state works as it used to. The documentation updating is something I would be happy to do. Fixing the library however is outside of the current time I have to commit (since I have yet to contribute or even browse the inner workings of this library and have very little time to do so)

techwes on Mar 11, 2018

<MapView style={styles.map} region={this.state.mapRegion} showsUserLocation={true} followUserLocation={true} onRegionChange={() => this.onRegionChange()}> <MapView.Marker coordinate={{ latitude: (this.state.lastLat ) || -36.82339, longitude: (this.state.lastLong ) || -73.03569, }} title="Hello" description="Hello d" onPress={() => alert("hello re")} > <View> <Text style={{color: '#000'}}> { this.state.lastLong } / { this.state.lastLat } </Text> </View> </MapView.Marker> </MapView>

i tried using fat arrow function and it worked.

onRegionChange={() => this.onRegionChange()}>

problem was with whenever region changes it call backs immidiately, because of it when i try to drag my map pointer it shakes and then i use this call back function and it works perfect.

Lavkushwaha on Sep 17, 2018

Had the same problem because the Readme pointed me to the onRegionChange when having the region as state.

jakoblorz on May 19, 2019

Removing region = {this.state.region} from MapView solved this for me.

aryalprakash on Nov 12, 2018

Exactly, the issue is expecting the map to pan fluently while controlling it’s region with setState(), as map render() might take more time than you expect to change the region.

alvelig on Feb 13, 2018