AnimatePresence + Hermes doesn't work

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

MotiView stuck/freeze appearing animation when wrapped in AnimatedPresence with exitBeforeEnter prop. Patch from https://github.com/nandorojo/moti/issues/195 and changes in https://github.com/nandorojo/moti/pull/200 does not fix this bug.

Bug not exists in moti@0.17.1

Steps To Reproduce

1. Only happens when MotiView has multiple animated properties:

 <MotiView
    from={{ opacity: 0,   scale: 0.9 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0, scale: 0.9 }}
  />

1. Wrap MotiView into AnimatePresence with exitBeforeEnter prop
2. Enable hermes in Podfile

Versions

- Moti: 0.18.0
- Reanimated: 2.9.1
- React Native: 0.67.4 - 0.69

Screenshots

Current Behavior:

https://user-images.githubusercontent.com/7981854/180895644-b2298203-076c-4f2c-9141-57cd4ebf495c.mov

Expected Behavior:

https://user-images.githubusercontent.com/7981854/180895655-e797b750-375e-4837-835b-771cd2808836.mov

Reproduction

https://github.com/davidnum/motibug

[nandorojo]

Thanks for the update. I’ll keep looking into it soon when I have some time. I’m convinced it’s a dependency-related issue.

[semvgelooven]

I’ve added a resolution to my package.json for framer-motion:

"resolutions": {
    "framer-motion": "3.10.6"
  }

Then installed the latest Moti and ran yarn why framer-motion which results in version 3.10.6. Build and ran my app again but the problem still exists.

Reverted back to 0.17.1, build and ran my app and then it works as intended. When using 0.17.1 I do see that <AnimatePresence> is underlined in my IDE and when hovered refers to import { Frame, AnimatePresence } from 'framer' but is imported like so: import { AnimatePresence, MotiView } from "moti".