nandorojo / moti

🐼 The React Native (+ Web) animation library, powered by Reanimated 3.
https://moti.fyi
MIT License
3.91k stars 120 forks source link

Exit prop not working #225

Closed BalogunofAfrica closed 1 year ago

BalogunofAfrica commented 1 year ago

Is there an existing issue for this?

I have applied suggested fixes as mentioned here https://github.com/nandorojo/moti/issues/104, but still getting the same issue

Current behavior

I am trying to animate on exit and it doesn't seem to work, I even added a key and still getting the same results.

Here's a snippet of my code:

    <Box>
      {selected && (
        <AnimatePresence exitBeforeEnter>
          <Motibox
            animate={{
              scale: 1,
            }}
            aspectRatio={1}
            backgroundColor="primary600"
            borderRadius="Ml"
            exit={{
              opacity: 0.4,
            }}
            from={{
              scale: 0,
            }}
            key={`${selected}`}
            transition={{
              duration: 150,
              type: "timing",
            }}
            width={16}
          />
        </AnimatePresence>
      )}
    </Box>

Motibox is just a motified restyle Box:

const Motibox = motify(Box)();

Important dependecies

"moti": "^0.18.0",
"expo": "~45.0.0",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-reanimated": "~2.8.0",
nandorojo commented 1 year ago

You aren’t using it correctly. AnimatePresence shouldn’t conditionally render; its immediate child should.