Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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...

230,420 görüntüleme • 11 ay önce •via X (Twitter)

35 Yorum

Marc profil fotoğrafı
Marc11 ay önce

why not a single screen, with step body components?

Ludwig Vaan profil fotoğrafı
Ludwig Vaan11 ay önce

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

Gabriele Scotto di Vettimo profil fotoğrafı
Gabriele Scotto di Vettimo11 ay önce

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

Yehia profil fotoğrafı
Yehia11 ay önce

Could do it with a flatlist with pagingEnabled

Ant Setiadi profil fotoğrafı
Ant Setiadi11 ay önce

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

MT⚡️ profil fotoğrafı
MT⚡️11 ay önce

09:41 🧐

Mick profil fotoğrafı
Mick11 ay önce

Beautiful! Is there a chance to open source this?

Conor profil fotoğrafı
Conor11 ay önce

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

Constantin 🔥 profil fotoğrafı
Constantin 🔥11 ay önce

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

Ryan O'Hara profil fotoğrafı
Ryan O'Hara11 ay önce

Damn that’s smooth! Nice work

Kyle profil fotoğrafı
Kyle10 ay önce

Looks great

Billel Boudchicha profil fotoğrafı
Billel Boudchicha10 ay önce

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 👏

Ivan Ry profil fotoğrafı
Ivan Ry10 ay önce

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...

pedro profil fotoğrafı
pedro10 ay önce

code plzzz ?

Shreya Mishra profil fotoğrafı
Shreya Mishra11 ay önce

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

JGF profil fotoğrafı
JGF11 ay önce

clean

Abhijeet Sharan profil fotoğrafı
Abhijeet Sharan11 ay önce

Looks smooth

Mayor profil fotoğrafı
Mayor11 ay önce

Love it

ª profil fotoğrafı
ª11 ay önce

@datboychapo

Davide Espertini profil fotoğrafı
Davide Espertini11 ay önce

wow! really impressive work!

Max Hoffmann profil fotoğrafı
Max Hoffmann10 ay önce

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

Melvyn profil fotoğrafı
Melvyn10 ay önce

Keeping the keyboard open is really cool, love it !

Ice Bridge profil fotoğrafı
Ice Bridge11 ay önce

Looks clean! Love it!

Tyler Coffman profil fotoğrafı
Tyler Coffman11 ay önce

Just use a horizontal flat list with paging

dany profil fotoğrafı
dany11 ay önce

smooth

EJ Campbell profil fotoğrafı
EJ Campbell10 ay önce

Does it interact properly with auto-fill passwords?

Marlon Johnson profil fotoğrafı
Marlon Johnson11 ay önce

Im trying to achieve something similar

voj profil fotoğrafı
voj10 ay önce

this goes hard

julian profil fotoğrafı
julian11 ay önce

Very cool approach

Youss profil fotoğrafı
Youss11 ay önce

Nice work 👌🏽Seems a little bit over engineered though

Smoking Chimp profil fotoğrafı
Smoking Chimp11 ay önce

Sooo buttery. Great work on this.

0xRay profil fotoğrafı
0xRay11 ay önce

@StreamviDL

Emmanuel Andy Eze 🇳🇬 profil fotoğrafı
Emmanuel Andy Eze 🇳🇬11 ay önce

Amazing 🤩

Taylor Symonds profil fotoğrafı
Taylor Symonds11 ay önce

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

Ale profil fotoğrafı
Ale10 ay önce

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

Benzer Videolar

Build uncompromising high-performance, high-fidelity apps with React. What you see is not the Apple Messages app, nor is it meant to be 1:1. Rather it serves as an aspirational and real example of UI/UX that is possible. Every detail from the bubble animations to keyboard gestures to scroll view insets and safe areas to parallax timestamps required care and attention. Quality UIs come from caring hard. The little chat bubble tails that morph away when the next message animates in. Timestamps that scroll at a different rate than the bubbles. Peek gestures powered by UIKit that lift a chat bubble, tail and all, with a gentle haptic pulse. The subtle shadow of the text composer and responsively sliding down the keyboard in pixel-perfect concert. The composer shrinking its width to fit iPhone’s rounded bezel. The beautiful Liquid Glass refractions have the level of glassiness chosen by the user (new in iOS 27). Scroll view insets that adjust to fit the home bar and keyboard dynamically, creating a sense of depth as the chat bubbles are slightly visible as they scroll under the keyboard. Keeping the keyboard on screen if the prior screen already presented it. Sliding the keyboard and composer with the screen when the user drags to navigate back. I am excited to explore using the new iPhone Duo view controllers natively with React when the time comes. There is always room for innovation and improvement. This chat demo runs at 120 FPS on iOS 27 even on my phone that’s four versions old now. There are several approaches to high-performance lists. I explored a new Expo scroll view that uses the native gesture systems along with react-native’s VirtualView (codenamed “Fling” to reflect the speed of flinging a scroll view), which Meta’s React team designed to prioritize scroll momentum with React’s scheduler. There are tradeoffs with other scroll strategies for how the scroll views gracefully degrade, and they can be swapped out based on what’s best for your app’s use case. And, by virtue of using modern React, high-priority events like user gestures can preempt lower-priority ones like a network response. Let us dispel any myth that using React requires compromising on beautiful, smooth, user-friendly UI/UX that Uses the Platform. Let us dispel any myth frame-perfect UI coordination is not achievable. The Hermes thread and the UI thread can coordinate when needed, like for controlled text inputs. Let us dispel any myth that React Native’s performance is impacted by a bridge, let alone has a bridge. Bridgeless JSI and the Fabric renderer are here for apps that use the New Architecture. What about Android? The app runs and I’ll share a screenshot from my cloud agent’s emulator. With some attention to detail dedicated to Android I’m confident crafted UX is attainable. I’ve spent my tokens once and have a structural head start everywhere. One more thing! Most of this chat’s application code is written with , , , and other familiar elements. The styling is mostly CSS, including linear-gradient(), background-attachment: fixed, and semantic platform colors that adapt to dark mode. Not just appearance - CSS Animations and CSS Transitions run entirely natively. There are a handful of custom native components written in Swift and Kotlin, like the chat bubbles and a custom CAShapeLayer and UIBezierPath for the tails. Native coding is a first-class feature. The way to think about building beautiful apps this way is React and Native, not React vs. Native. Aspire high and raise your ambitions for what is possible!

James Ide

131,262 görüntüleme • 2 gün önce