React Native Animated Loop start callback

Question

I am struggling with React Native Animations here. The outcome is simple, I have an Animated.Image which I want to spin.
All good, until I want to loop thru the animation for n times and do something when it stops.
I have the following code .

Animated.loop(
  Animated.timing(this.state.spin, {
    toValue: 360,
    duration: 1000,
    easing: Easing.linear,
    useNativeDriver: true,
  }), {
    iterations: 3
  }
).start(() => {
  console.log('done');
});

It spins 3 times as per loop iteration but no callback was fired when animation ends.

Here the Expo which replicates this: https://snack.expo.io/S1PjnfB9-

soutot · Accepted Answer · 2017-09-12 06:34:40Z

2

Try the code below

Animated.loop(
  Animated.timing(this.state.spin, {
    toValue: 360,
    duration: 1000,
    easing: Easing.linear,
    useNativeDriver: true,
  }), {
    iterations: 3
  }
).start(event => {
    if (event.finished) {
      console.log('finished');
    }
  });

I just added a check on the event response.

Hope it helps.

answered Sep 12, 2017 at 6:34

soutot

3,6511 gold badge23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BogdanD Over a year ago

Nope... Still does`t work. The callback function is not called on end event.

BogdanD · Accepted Answer · 2017-09-12 08:52:15Z

1

Found the answer.
It seems that if you take out useNativeDriver it works as it should be, and the callback is called.
This is weird...

answered Sep 12, 2017 at 8:52

BogdanD

1752 silver badges8 bronze badges

1 Comment

ablian Over a year ago

I am encounting a situation at where after I add one line : userNativeDriver :true, the Callback will be called once.

Collectives™ on Stack Overflow

React Native Animated Loop start callback

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related