React native reanimated not working with fabric

[salisuabubakar]

Hi, am unable to get react native 0.72.4 and react native reanimated 3.5.4 to work with the navigation router fabric. I have the example fabric you ptovided but still the same. No error message. Can you please check. Thank you

[grahammendick]

Could you show me the reanimated code that you're adding to the fabric sample, please?

[salisuabubakar]

Hi, below is the code:

        <Animated.View
          entering={FadeInDown
            .duration(2000)
            .delay(200)
          }
          layout={Layout.springify().stiffness().mass(0)}>
          <Image
            style={styles.image}
            source={require("../../assets/images/logobg.png")}
          />
        </Animated.View>

Thanks

[grahammendick]

Thanks. Are you getting the problem on Android or iOS or both?

[grahammendick]

Hey, I pasted the sample code from the Reanimated site into the Tabs component of the fabric sample and it works on Android and iOS

import { Button, View } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: 'violet',
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

https://github.com/grahammendick/navigation/assets/1761227/9ded72c6-748c-4666-af35-351b50ea03a6

[salisuabubakar]

Thanks. Are you getting the problem on Android or iOS or both?

Both Android and iOS.

[salisuabubakar]

I guess the issue is with my installation. I have tried several time but still the same.

[grahammendick]

Have you tried pasting that code over the Tabs component in the fabric sample? It worked for me on both Android and iOS

[salisuabubakar]

Hi, thanks for your quick response. I had to research and realised react native reanimated layout animation does not work in fabric. I have used transform and its working perfectly. Thanks