react-native-reanimated how to use delay between 'Animated.timing' functions

Question

I use react-native-reanimated version: '1.7.1' and I tried to process delay between 4 different timing functions. I tried to find instructions on the web and didn't find one that was clear: https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/about#reanimated-overview https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/declarative

I know that in the original reactNative API there is a delay so I tried to find something comparable with this good library

export const createTimingAnimation = (value: Animated.Node<number>, duration = 500, easing = Easing.inOut(Easing.ease), toValue = 1) => {
  return Animated.timing(value, {
    toValue,
    duration,
    easing,
  });
};

Barak · Accepted Answer · 2021-02-01T12:28:42.550

I didn't find any formal way, so I created one:

export const timingAnimationWithDelay = (delay: number, timingAnimation: Animated.BackwardCompatibleWrapper, finishCallback?: any): void => {
  setTimeout(() => {
    timingAnimation.start(() => {
      finishCallback && finishCallback();
    });
  }, delay);
};

And then you call it like this:

const greetingNfnTiming = createTimingAnimation(animatedValue, 480, Easing.out(Easing.cubic));

timingAnimationWithDelay(1000, greetingNfnTiming, onGreetingFinish);

react-native-reanimated how to use delay between 'Animated.timing' functions

1 Answers1