New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Layout animations for the New Architecture #3439
Comments
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.
|
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? |
We're working on it
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 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. |
TBH, there is a struggle with |
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
The text was updated successfully, but these errors were encountered: