Calling function after animation ended in react-native-maps

Question

region: new MapView.AnimatedRegion({
        longitude: 4.70821527747714,
        latitudeDelta: 1.384276459048536,
        latitude: 43.31340937725116,
        longitudeDelta: 2.066803805399701,
      });
....................
....................
this.state.region
    .timing({
      latitude: region.latitude._value,
      longitude: region.longitude._value,
      latitudeDelta: 0.5,
      longitudeDelta: 0.5,
    })
    .start();

this.setState({
  zoomLevel: 8,
  regionUpdated: true,
});

This is what I used in react-native.

I want to call the setState function after animation ended. But now, it's called during the animation.

I think it will be great if animation function is promise function. But I am not sure.

How can I solve this problem?

user_2925604 · Answer

The timing function returns an Animated value instance. Animated's start method accepts a completion callback that will be called when the animation is done. So you can do it like this:

this.state.region.timing(config).start(() =>
  this.setState({
    zoomLevel: 8,
    regionUpdated: true,
  }),
);

Refs:

https://facebook.github.io/react-native/docs/animated.html#working-with-animations https://github.com/airbnb/react-native-maps/blob/master/lib/components/AnimatedRegion.js#L140

Calling function after animation ended in react-native-maps

1 Answers