moti: 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

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 }}
  />

Wrap MotiView into AnimatePresence with exitBeforeEnter prop
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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 28 (13 by maintainers)

Most upvoted comments

Moti finally works with Hermes in version 0.22. Please upgrade and let me know if it works for you. Appreciate your patience.

nandorojo on Jan 20, 2023

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.

nandorojo on Aug 25, 2022

Alright, I’m deeply investigating. I’ve spent hours diffing lock files. Here are some findings.

^0.17.1 works
^0.18 does not work

Here is what it looks like to install it:

info Direct dependencies
└─ moti@0.18.0
info All dependencies
├─ @motify/components@0.18.0
├─ @motionone/animation@10.15.1
├─ @motionone/dom@10.12.0
├─ @motionone/easing@10.15.1
├─ @motionone/generators@10.15.1
├─ framer-motion@6.5.1
├─ moti@0.18.0
└─ popmotion@11.0.3

I ran a diff of all files from moti and went one-by-one to see what the cause could be (yes really).

By pulling useMotify from 0.17 → 0.18, I found that it started working again. This meant that something in the 0.18 change in the worklets made a difference. In that update, I improved performance by changing .forEach loops to use for (const key of) loops. I’m wondering if Hermes didn’t like that…

I tried changing for (const key in mergedStyles) to Object.keys(mergedStyles).forEach(key => and…that did it 🧐.

So, I guess I have to refactor that back. This whole coding thing may not be for me lol

nandorojo on Jan 20, 2023