React Native Maps with Redux: Choppy region changes

user_3829638 0
Viewed 1124

Using the following:

  • React-Native-Maps (AirBnB - 0.16.4)
  • Redux

I'm a bit confused on how to update my state.map.region. I have both manual as well as automated (animateToCoordinate) actions that trigger state changes. I'm not sure whether to use onRegionChange, onRegionChangeComplete, or onMapReady to update the current region associated with my map. So far all the combinations I have tried resulted in choppy animations in which the map jumps back to a previous state (region).

What has been working best so far, is to update a local variable with the new region at onRegionChange and onRegionChangeComplete, and then dispatch that change on onMapReady. .. But still this is not ideal and choppy.

It almost seems as if onRegionChangeComplete is called too early.

react-native-maps redux react-native javascript
3 Answers

What eventually fixed this for me was setting the intialRegion in the MapView component rather than the region. Once I added initialRegion and removed region the choppy animations were no longer an issue.

user_38296380

I set the MapView's region to be derived from the state and then use onRegionChangeComplete to trigger setState which re-renders the map. On controlled drag and drop like moves it works well, however when dragging the map and letting it go it will slide until it stops. It seems that in this particular case onRegionChangeComplete fires multiple times which triggers multiple setState calls which is not always pretty visually, but it has been the closest thing i could get to with making it working on iOS.

user_32167910

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

user_32073900
Related