Reanimated v3 - LayoutAnimations - FadeIn & FadeOut in react-native

Question

I am having some trouble fading stuff in and out conditionally so it just doesn't "pop in".

This is what I got so far but doesn't seem to be working. What could I be missing?

I am using reanimated v3 where AnimatedLayout was removed.

const MyComponent = () => {

  const [didLoad, setDidLoad] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setDidLoad(prev => !prev);
    }, 3000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <>
      {didLoad ? (
          <Animated.View
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(200).delay(200)}
          >
            <SkeletonPlaceholder borderRadius={4}>
              <SkeletonPlaceholder.Item alignItems="center" flexDirection="row">
                <SkeletonPlaceholder.Item
                  borderRadius={50}
                  height={20}
                  width={20}
                />

                <SkeletonPlaceholder.Item marginLeft={20}>
                  <SkeletonPlaceholder.Item height={25} width={120} />

                  <SkeletonPlaceholder.Item
                    height={25}
                    marginTop={6}
                    width={80}
                  />
                </SkeletonPlaceholder.Item>
              </SkeletonPlaceholder.Item>
            </SkeletonPlaceholder>
          </Animated.View>
        ) : (
          <Animated.View
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(200).delay(200)}
          >
            <View style={tw`flex-row items-center gap-2`}>
              <Icon name="chevron-right" />

              <Icon name="chevron-left" />

              <Icon name="map" />

              <Icon name="home" />
            </View>
          </Animated.View>
        )}
    </>
  )
}

score 1 · Accepted Answer · answered Aug 26 '23 at 05:08

You will have to add keys to the animated views, please refer this snack, I have added the animations in same way you have mentioned in the question, and it is working.

       <Animated.View
            key="fede3"  // add this
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(2000).delay(200)}
          >
           <View 
              key="view1"  // add this
              style={styles.view1}>
           </View>
       </Animated.View>

here is similar issue on github repo for reference.

P.S. I have noticed that entering/exiting animations don't work when the debugger in On.

@Walter please let me know if this answers your question – Rohit S K Aug 28 '23 at 07:48 — Rohit S K, Aug 28 '23 at 07:48
Working great! Thank you! – Walter Monecke Aug 29 '23 at 12:49 — Walter Monecke, Aug 29 '23 at 12:49

Reanimated v3 - LayoutAnimations - FadeIn & FadeOut in react-native

1 Answers1