Layout animations for the New Architecture

[aleluiah]

from my understanding react native reanimated 3.0.0-rc-0 dosen't yet support fabric layout animation what version of reanimated will fabric layout animation be supported. thank you

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Snack or minimal code example, Package versions and Affected platforms sections.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

[tomekzaw]

Hello @aleluiah! That's right. Reanimated 3.0.0-rc.0 supports Fabric but doesn't support Layout Animations yet.

Currently, we are improving some parts of the implementation of Layout Animations in Reanimated 2 in order to eliminate memory leaks and crashes, see the draft PR:

• https://github.com/software-mansion/react-native-reanimated/pull/3332

Once Layout Animations are refactored for Paper, we will look into supporting them on Fabric.

~~We plan to release Layout Animations for Fabric with Reanimated 3.0.0 (stable).~~

[tomekzaw]

Layout Animations are not implemented on Fabric yet

[tomekzaw]

Assigning @bartlomiejbloniarz here as he's currently working on porting Layout Animations to the New Architecture.

[anton-patrushev]

Any updates here?

Do you have any advice on how we can partially opt-in in Reanimated in Fabric while using Layout animations components working in Paper mode?

@tomekzaw @bartlomiejbloniarz

[tomekzaw]

Any updates here?

We're working on it

Do you have any advice on how we can partially opt-in in Reanimated in Fabric while using Layout animations components working in Paper mode?

Nope, we don't have any advice on it.

[anton-patrushev]

Okay, I was able to reimplement some Layout animations with a set of components that run custom animations in the useEffect on mount and unmount phases. At least it replaced entering & exiting layout animations for me.

So if you have something like (working in Paper):

import { FadeIn, FadeOut } from 'react-native-reanimated';

const EnteringAnimation = FadeIn.duration(500).easing(
  Easing.in(Easing.ease),
);
const ExitingAnimation = FadeOut.duration(500).easing(
  Easing.out(Easing.ease),
);

function AnimatedComponent() {
  return <Animated.View entering={EnteringAnimation} exiting={ExitingAnimation} />;
}

So you should be able to replace it with that (working in Fabric):

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

function AnimatedComponent() {
  const sv = useSharedValue(0);

  React.useEffect(() => {
    sv.value = 1;

    return () => {
      sv.value = 0;
    };
    // ignoring since we should make sure it runs only ones
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: withTiming(sv.value, {
      duration: 500,
      easing: Easing.ease,
    }),
    transform: [
      {
        translateY: withTiming(
          interpolate(
            sv.value,
            [0, 1],
            [-100, 1],
            Extrapolation.CLAMP,
          ),
          { duration: 250, easing: Easing.ease },
        ),
      },
    ],
  }));
  
  return <Animated.View style={animatedStyle} />;
}

Can confirm it's working with Fabric. I'm running this with RN 72.12 on iOS with Fabric (New Architecture) enabled!

[anton-patrushev]

TBH, there is a struggle with exiting animation, since the component is removed from DOM faster than the animation launches