Closed aleluiah closed 1 week ago
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.
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?
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:
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).
Layout Animations are not implemented on Fabric yet
Assigning @bartlomiejbloniarz here as he's currently working on porting Layout Animations to the New Architecture.
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
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.
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!
TBH, there is a struggle with exiting
animation, since the component is removed from DOM faster than the animation launches
It's here 🥳🥳🥳
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