正在加载视频...

视频加载失败

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 次观看 • 11 个月前 •via X (Twitter)

35 条评论

Marc 的头像
Marc11 个月前

why not a single screen, with step body components?

Ludwig Vaan 的头像
Ludwig Vaan11 个月前

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

Gabriele Scotto di Vettimo 的头像
Gabriele Scotto di Vettimo11 个月前

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

Yehia 的头像
Yehia11 个月前

Could do it with a flatlist with pagingEnabled

Ant Setiadi 的头像
Ant Setiadi11 个月前

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

MT⚡️ 的头像
MT⚡️11 个月前

09:41 🧐

Mick 的头像
Mick11 个月前

Beautiful! Is there a chance to open source this?

Conor 的头像
Conor11 个月前

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

Constantin 🔥 的头像
Constantin 🔥11 个月前

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

Ryan O'Hara 的头像
Ryan O'Hara11 个月前

Damn that’s smooth! Nice work

Kyle 的头像
Kyle10 个月前

Looks great

Billel Boudchicha 的头像
Billel Boudchicha10 个月前

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 的头像
Ivan Ry10 个月前

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 的头像
pedro10 个月前

code plzzz ?

Shreya Mishra 的头像
Shreya Mishra11 个月前

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

JGF 的头像
JGF11 个月前

clean

Abhijeet Sharan 的头像
Abhijeet Sharan11 个月前

Looks smooth

Mayor 的头像
Mayor11 个月前

Love it

ª 的头像
ª11 个月前

@datboychapo

Davide Espertini 的头像
Davide Espertini11 个月前

wow! really impressive work!

Max Hoffmann 的头像
Max Hoffmann10 个月前

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

Melvyn 的头像
Melvyn10 个月前

Keeping the keyboard open is really cool, love it !

Ice Bridge 的头像
Ice Bridge11 个月前

Looks clean! Love it!

Tyler Coffman 的头像
Tyler Coffman11 个月前

Just use a horizontal flat list with paging

dany 的头像
dany11 个月前

smooth

EJ Campbell 的头像
EJ Campbell10 个月前

Does it interact properly with auto-fill passwords?

Marlon Johnson 的头像
Marlon Johnson11 个月前

Im trying to achieve something similar

voj 的头像
voj10 个月前

this goes hard

julian 的头像
julian11 个月前

Very cool approach

Youss 的头像
Youss11 个月前

Nice work 👌🏽Seems a little bit over engineered though

Smoking Chimp 的头像
Smoking Chimp11 个月前

Sooo buttery. Great work on this.

0xRay 的头像
0xRay11 个月前

@StreamviDL

Emmanuel Andy Eze 🇳🇬 的头像
Emmanuel Andy Eze 🇳🇬10 个月前

Amazing 🤩

Taylor Symonds 的头像
Taylor Symonds11 个月前

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

Ale 的头像
Ale10 个月前

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

相关视频

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 次观看 • 2 天前