React-native-reanimated: parallel(...) alternative

[mldb]

how to run some Animated.timing() in same time with reanimated ?

[osdnk]

Hi, @mldb
Do you wish to use backward compatible API?

[mldb]

hi @osdnk
yes i prefer that
but i try using runTiming function and i failed :(

[osdnk]

I understand this issue and it is on our radar.

[chrfalch]

How would this be done in reanimated without using the backward comp API? @osdnk

[xaviershay]

I came across this while upgrading an existing app to RN 0.59 (which by transitive dependency required upgrading react-navigation-tabs to a version than required using this library). Was expecting Animated.parallel to exist (backwards compatible API), didn't find it.

[chrfalch]

From looking at the source code in React Native Animated it seems like their solution was to just run all animations provided, wait until everything finished and then call back to the caller. Could be a simple solution in Reanimated as well - easy to implement in JS.

[kmagiera]

I agree that this is something that can be build in user-land with reanimated 1.x as a base. However since we are focusing on Reanimatec 2, we don't plan on working on a relatively large new additions to the old api.

[cmlarsen]

FWIW: I wanted to use the backwards compatible API and ended up writing this little function to run the animations in parallel and get a callback when they started and when they ended.

const parallelize = (
  animations: Animated.BackwardCompatibleWrapper[],
  cb?: {onStart?: () => void; onDone?: () => void},
) => {
  cb?.onStart && cb.onStart();
  const promises = animations.map(a => {
    return new Promise(resolve => {
      a.start(() => {
        resolve();
      });
    });
  });
  return Promise.all(promises).then(() => {
    cb?.onDone && cb.onDone();
  });
};

Usage Example:

parallelize(
        [
          Animated.timing(value1, {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear,
          }),
          Animated.timing(value2, {
            toValue: 25,
            duration: 1500,
            easing: Easing.linear,
          }),
          Animated.timing(value3, {
            toValue: 100,
            duration: 500,
            easing: Easing.linear,
          }),
        ],
        {
          onStart: () => {
            console.log('started')
          },
          onDone: () => {
            console.log('done');
          },
        },
      );