I am new to react native and so this question might seem trivial question. It has got more to do with passing functions as parameters and I am confused about the fat arrow function vs passing a function as direct parameter. I am using Animated.View for my animation and I wrote a generic function for animating values as follows:

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = onAnimEndCallback !== undefined;
  Animated.timing(stateName, {
    toValue: newStateValue,
    duration: 3000
  }).start(
      hasCallback ? this.onAnimEndCallback() : null;
  );
}

Here you can pass the stateName to animate and newState and with optional callback. The problem I am facing is how to pass callback as it requires a fat arrow function to be passed as parameter.

I think there are multiple ways to call this function (all differing in the way callback function is passed).

1. animateToFadeState(this.state.abc, 1, () => {this.myFunction()})
2. animateToFadeState(this.state.abc, 1, this.myFunction())
3. animateToFadeState(this.state.abc, 1, () => this.myFunction())
4. animateToFadeState(this.state.abc, 1, this.myFunction)

None of these seem to be working, as my callback is getting called immediately when the animation starts. I don't quite understand what is wrong here and am not sure of the difference between passing function vs fat arrow function.

I am new to react native and so this question might seem trivial question. It has got more to do with passing functions as parameters and I am confused about the fat arrow function vs passing a function as direct parameter. I am using Animated.View for my animation and I wrote a generic function for animating values as follows:

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = onAnimEndCallback !== undefined;
  Animated.timing(stateName, {
    toValue: newStateValue,
    duration: 3000
  }).start(
      hasCallback ? this.onAnimEndCallback() : null;
  );
}

Here you can pass the stateName to animate and newState and with optional callback. The problem I am facing is how to pass callback as it requires a fat arrow function to be passed as parameter.

I think there are multiple ways to call this function (all differing in the way callback function is passed).

1. animateToFadeState(this.state.abc, 1, () => {this.myFunction()})
2. animateToFadeState(this.state.abc, 1, this.myFunction())
3. animateToFadeState(this.state.abc, 1, () => this.myFunction())
4. animateToFadeState(this.state.abc, 1, this.myFunction)

None of these seem to be working, as my callback is getting called immediately when the animation starts. I don't quite understand what is wrong here and am not sure of the difference between passing function vs fat arrow function.

• javascript
• animation
• react-native
• callback

3 Answers 3

I am using Animated like this:

The callback is inside the start() parameter with an arrow function

Animated.timing(this.state.xValue, {
            toValue: footerHeightPosition,
            duration: MILLISECOND_ANIMATION_DURATION,
            asing: Easing.back(),
        }).start(() => {
            //
            this.youCallbackFunc();
        });```

Assuming onAnimEndCallback does not return a function you should change your code and pass the function reference rather than the result of its invocation.

Another thing to note, there's no need to add 'this' keyword (this.onAnimEndCallback) since onAnimEndCallback is just a parameter and not a field of your context.

Something like this should work

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = (typeof onAnimEndCallback === "function");
  //invoke Animated.timing only if you have a valid function
  if(hasCallback){
      Animated.timing(stateName, {
      toValue: newStateValue,
      duration: 3000
    }).start(onAnimEndCallback);
    );
  }

}

animateToFadeState(this.state.abc, 1, () => { //do something })

Building on top of answer Karim's, I just added fat arrow function on both ends and the function in callback gets called after the animation ends.

animateToFadeState(stateName, newStateValue, onAnimEndCallback) {
  const hasCallback = (typeof onAnimEndCallback === "function");

 //invoke Animated.timing only if you have a valid function
   if(hasCallback){
    Animated.timing(stateName, {
    toValue: newStateValue,
    duration: 3000
    }).start(() => {onAnimEndCallback});
  );
  }
}

and calling it as follows:

animateToFadeState(this.state.abc, 1, () => { //do something })