1

Im trying to add some simple animations to my app. Decided to try it with react-native-reanimated v2. I did the bare minimum and followed the installation guide/tutorial on respective expo and reanimated pages (Basically set hermes as engine and included the correct plugin last in babel plugins). The animations work great, added some entering/exiting animations on when items change in a list. Here is basically all my animation code, I wrapped my listItem in the following view.

  <Animated.View
        entering={LightSpeedInLeft.duration(500)}
        exiting={LightSpeedInRight.duration(500)}
        layout={Layout.springify()}
      >

However, I am getting my Loading component displayed ontop of my other components. See error at bottom(On my phone its displayed as a black bar, but on emulator its the loading text). This behaviour is also occuring on screens where I havent implemented any animations :/

This is how my simple Loading logic is. While no data, I return Loading. Otherwise i return my normal JSX. This works flawlessly without reanimated.

  if (!data) {    
    return <Loading />;
  }

The packages relevant to this I am using are.
react-native: "0.64.3.
react-native-reanimated": "~2.3.1.
expo": "^44.0.0.

Any idea's why this happens and what I can do to fix it? Thanks in advance

enter image description here

Rzll
  • 91
  • 5
  • Theres two threads when working with reanimated the javascript thread and the ui thread. It seems like thats your issue read about `runOnJs` and `runOnUI` and see if that helps. (https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/api/miscellaneous/runOnJS/) – carlosdafield Feb 14 '22 at 19:47

0 Answers0