CODEWITHSUNDEEP
javascriptreact-nativereduxreact-native-maps
kardolus
kardolus

Reputation: 173

React Native Maps with Redux: Choppy region changes

Using the following:

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.

Upvotes: 3

Views: 1189

Answers (3)

aryalprakash
aryalprakash

Reputation: 340

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

Upvotes: 0

kardolus
kardolus

Reputation: 173

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.

Upvotes: 3

Vee6
Vee6

Reputation: 1577

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.

Upvotes: 2

Related Questions