nandorojo/moti

Exit prop not working

BalogunofAfrica opened this issue · 1 comments

Is there an existing issue for this?

  • I have searched the existing issues

I have applied suggested fixes as mentioned here #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",

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