Next.js 13 App Router - Animations work only with re-renders after SSR

[AlvSovereign]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [X] Not urgent

Current Behavior

Mounted animations do not start after SSR and need re-render.

Expected Behavior

Please excuse me if I am not using Moti correctly with Next.js 13.

MotiViews hould animate in with no re-renders when both the from and to props are defined.

I've provided a minimal repro StackBlitz link, testing all the animations found on the Moti.fyi docs.

My issues are probably due to using the App Router - please let m eknow.

Steps To Reproduce

Please see the StakBlitz link and have a look. There should be some boxes animating in without the need to update state (by clicking the 'Presser' button)

Versions

- Moti: 0.26.0
- Reanimated: 3.5.4
- React Native: 0.72.6

Screenshots

No response

Reproduction

https://stackblitz.com/edit/stackblitz-starters-oarsad?file=app%2Fpage.tsx

[nandorojo]

Not sure about app router support.

Your layout file isn’t properly configured though. https://github.com/nandorojo/solito/blob/master/develop/appdir/app/layout.tsx

[nandorojo]

I wonder if there is something special to make Reanimated work with app router other than the StyleProvider.

[AlvSovereign]

Small edit - line 56

Triggering a state update on component initialisation allows for the animations to auto start

Not nice but it will allow me to continue development til we get more results.

Intrestingly, using Pages Router also does not work as expected and I see the same bug when testing locally.

[nandorojo]

Something might be wrong with your setup then

[AlvSovereign]

I'll close this ticket and reopen if needed when I have more news.

[macrozone]

i can confirm this problem, @AlvSovereign did you ever find a solution?

[AlvSovereign]

I ended up moving to Tamagui.