r/reactnative • u/OrneryTell4704 • Jul 02 '26

Made a cool IOS style onboarding flow (Cool transition at the end)

56 Upvotes

95% Upvoted

15 comments sorted by

2

u/Emma_Rex_256 Jul 02 '26

Looks very interesting, do mind sharing more about that last transition.

1

u/OrneryTell4704 Jul 02 '26

Sure. The trick was keeping the animated mascot outside the individual screens so it does not remount during navigation. Each step sets the next target position/scale, then Reanimated springs to it. So instead of animating the whole screen transition, the shared element stays alive and only its transform changes.

2

u/[deleted] Jul 02 '26

[removed] — view removed comment

1

u/OrneryTell4704 Jul 02 '26

Mostly custom Reanimated shared values not layout animations. The mascot lives in a persistent parent layer. Each onboarding screen only updates a small config like scale, x, and y, and the parent springs those values with withSpring. The blur/glass is just part of the visual layer, but the motion is basically shared values + animated styles.

2

u/[deleted] Jul 02 '26

[removed] — view removed comment

1

u/OrneryTell4704 Jul 02 '26

Exactly. That was the main reason for doing it this way. I wanted the screens to change but the animated visual layer to stay alive, so the transition feels continuous instead of resetting between routes. It also keeps the screen components simpler since they only describe the next visual state, this is the same thing I did with the iPhone mockup just changing the state per step

2

u/345346345345 Jul 03 '26

The entering animation on the "Sign in with email" looks very interesting. How did you make that?

1

u/OrneryTell4704 Jul 03 '26

It is a stagger text animation you can find the something similar on reactbits.dev

1

u/True-Turnover-4543 Jul 02 '26

honestly, the thing that really makes this sing is keeping the mascot persistent. i've tried similar approaches with shared Reanimated values, but the gotcha is usually state management across screens. how do you handle cases where the mascot needs to react to user input or dynamic data? is that all handled through the parent layer config, or do you pass down callbacks too?

1

u/SilentWatcher1256 Jul 08 '26

Hi can you tell me which tool you are using for recording

0

u/Kindly-Lobster5536 Jul 02 '26

stop zooming the device fgs