Loading video...
Video Failed to Load
We built this onboarding flow in React Native that feels better than most native apps Here’s how we did it: ① Patched react-native-screens for a custom transition ② Button and stepper are rendered on top of the stack ③ Synced button state across screens via context The button and... show more
230,420 views • 11 months ago •via X (Twitter)
35 Comments

why not a single screen, with step body components?

Did you try to achieve this result using a pager view? Switching screens isn’t mandatory

Super impressive! Do you mind if I share it with the react native community?

Could do it with a flatlist with pagingEnabled

Impressive! It is really smooth. Are you guys using expo-router or react-navigation?

09:41 🧐

Beautiful! Is there a chance to open source this?

Beautiful attention to detail. Worked on an identical flow but couldn't figure out how to keep keyboard open. Thanks for the tip!

I've recently tried to build a good onboarding, but this is just next-level.

Damn that’s smooth! Nice work

Looks great

Built a similar multi-step wizard but kept everything in one screen. Used Reanimated for smooth left↔️right transitions and XState FSM to drive the whole flow. Header & button are absolutely positioned too. Your keyboard-surfing trick is 🔥 — super fluid work 👏

That's my exact problem with React Native after trying it for one month. Brother could write this flow in 2 hours in native code instead of spending time on all this React Native dancing...

code plzzz ?

How exactly did you patch react-native-screens to implement the custom transition? Can you share key code snippets or explain the approach?

clean

Looks smooth

Love it

@datboychapo

wow! really impressive work!

Damn this looks clean, I love it. Is there any chance you will open-source this?

Keeping the keyboard open is really cool, love it !

Looks clean! Love it!

Just use a horizontal flat list with paging

smooth

Does it interact properly with auto-fill passwords?

Im trying to achieve something similar

this goes hard

Very cool approach

Nice work 👌🏽Seems a little bit over engineered though

Sooo buttery. Great work on this.

@StreamviDL

Amazing 🤩

Ayo, very few will actually appreciate this. Looks sick g, well done

Each step is a different screen??. It looks great.
