Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

barany6m's profile picture

Baran

4,552 subscribers

230,817 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

35 Kommentare

Profilbild von Marc
Marcvor 1 Jahr

why not a single screen, with step body components?

Profilbild von Ludwig Vaan
Ludwig Vaanvor 1 Jahr

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

Profilbild von Gabriele Scotto di Vettimo
Gabriele Scotto di Vettimovor 1 Jahr

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

Profilbild von Yehia
Yehiavor 1 Jahr

Could do it with a flatlist with pagingEnabled

Profilbild von Ant Setiadi
Ant Setiadivor 1 Jahr

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

Profilbild von MT⚡️
MT⚡️vor 1 Jahr

09:41 🧐

Profilbild von Mick
Mickvor 1 Jahr

Beautiful! Is there a chance to open source this?

Profilbild von Conor
Conorvor 1 Jahr

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

Profilbild von Constantin 🔥
Constantin 🔥vor 1 Jahr

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

Profilbild von Ryan O'Hara
Ryan O'Haravor 1 Jahr

Damn that’s smooth! Nice work

Profilbild von Kyle
Kylevor 1 Jahr

Looks great

Profilbild von Billel Boudchicha
Billel Boudchichavor 1 Jahr

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 👏

Profilbild von Ivan Ry
Ivan Ryvor 1 Jahr

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

Profilbild von pedro
pedrovor 1 Jahr

code plzzz ?

Profilbild von Shreya Mishra
Shreya Mishravor 1 Jahr

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

Profilbild von JGF
JGFvor 1 Jahr

clean

Profilbild von Abhijeet Sharan
Abhijeet Sharanvor 1 Jahr

Looks smooth

Profilbild von Mayor
Mayorvor 1 Jahr

Love it

Profilbild von ª
ªvor 1 Jahr

@datboychapo

Profilbild von Davide Espertini
Davide Espertinivor 1 Jahr

wow! really impressive work!

Profilbild von Max Hoffmann
Max Hoffmannvor 1 Jahr

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

Profilbild von Melvyn
Melvynvor 1 Jahr

Keeping the keyboard open is really cool, love it !

Profilbild von Ice Bridge
Ice Bridgevor 1 Jahr

Looks clean! Love it!

Profilbild von Tyler Coffman
Tyler Coffmanvor 1 Jahr

Just use a horizontal flat list with paging

Profilbild von dany
danyvor 1 Jahr

smooth

Profilbild von EJ Campbell
EJ Campbellvor 1 Jahr

Does it interact properly with auto-fill passwords?

Profilbild von Marlon Johnson
Marlon Johnsonvor 1 Jahr

Im trying to achieve something similar

Profilbild von voj
vojvor 1 Jahr

this goes hard

Profilbild von julian
julianvor 1 Jahr

Very cool approach

Profilbild von Youss
Youssvor 1 Jahr

Nice work 👌🏽Seems a little bit over engineered though

Profilbild von Smoking Chimp
Smoking Chimpvor 1 Jahr

Sooo buttery. Great work on this.

Profilbild von 0xRay
0xRayvor 1 Jahr

@StreamviDL

Profilbild von Emmanuel Andy Eze 🇳🇬
Emmanuel Andy Eze 🇳🇬vor 1 Jahr

Amazing 🤩

Profilbild von Taylor Symonds
Taylor Symondsvor 1 Jahr

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

Profilbild von Ale
Alevor 1 Jahr

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

Ähnliche Videos

Really interesting to see how well React 19.2’s Activity handles inactive screens in screen-transitions. Here’s the difference between v3 and v4 in a 35 screen stack test 😳
0:48

Really interesting to see how well React 19.2’s Activity handles inactive screens in screen-transitions. Here’s the difference between v3 and v4 in a 35 screen stack test 😳

Ed

20,003 Aufrufe • vor 2 Monaten

Here's how Gemini 2.5 Flash-Lite writes the code for a UI and its contents based solely on the context of what appears in the previous screen - all in the time it takes to click a button. 💻 ↓
1:08

Here's how Gemini 2.5 Flash-Lite writes the code for a UI and its contents based solely on the context of what appears in the previous screen - all in the time it takes to click a button. 💻 ↓

Google DeepMind

1,060,697 Aufrufe • vor 1 Jahr

Ethan Klein purchased a $20k button that cuts off visuals and audio and replaces the streams last 20 seconds with a personalized H3 Podcast loading screen. In 2024 during a segment, Ethan hit the button in order to berate his employee AB. Only the button malfunctioned.
1:45

Ethan Klein purchased a $20k button that cuts off visuals and audio and replaces the streams last 20 seconds with a personalized H3 Podcast loading screen. In 2024 during a segment, Ethan hit the button in order to berate his employee AB. Only the button malfunctioned.

Chit Talker🏳️‍🌈🇵🇸

1,827,445 Aufrufe • vor 11 Tagen

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible
4:41

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

Wes Bos

177,255 Aufrufe • vor 1 Jahr

Here’s how I handle keyboard avoidance in React Native 👇 The keyboard covering your inputs is one of the most annoying UX issues on mobile. In this video, I show how I use react-native-keyboard-controller with reanimated to smoothly avoid this problem (👨‍💻 source code below)
4:05

Here’s how I handle keyboard avoidance in React Native 👇 The keyboard covering your inputs is one of the most annoying UX issues on mobile. In this video, I show how I use react-native-keyboard-controller with reanimated to smoothly avoid this problem (👨‍💻 source code below)

Beto

51,122 Aufrufe • vor 1 Jahr

When Tesla owners tell you about how seamless the Tesla experience is, this is what we mean. The raw, unedited experience. And it just goes from the end of this video to your driveway. Open door, buckle seatbelt, press a button on a touch screen.
0:59

When Tesla owners tell you about how seamless the Tesla experience is, this is what we mean. The raw, unedited experience. And it just goes from the end of this video to your driveway. Open door, buckle seatbelt, press a button on a touch screen.

Mike P

1,156,878 Aufrufe • vor 1 Jahr

This weekend’s project: a ‘kinetic’ instrument. Pull back and release to send glowing objects across the screen. Every time one hits a wall, it plays a note. Use the REC button to share your creations in the replies
0:38

This weekend’s project: a ‘kinetic’ instrument. Pull back and release to send glowing objects across the screen. Every time one hits a wall, it plays a note. Use the REC button to share your creations in the replies

Gabriel Valdivia

21,458 Aufrufe • vor 3 Monaten

We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised. We imported the bindings for DearImGui (a popular C++ imperative game UI library that renders meshes), and Sokol (an amazing lightweight 3D backend in C) and wrote a small demo. "Imperative UI" means that the entire UI and the state of the screen is recreated on every frame, which suits our purposes to demonstrate SH very well. The demo runs 100% compiled native code. JavaScript runs in every frame and recreates the entire state of the screen. It is portable to all platforms, though the screen layout is not optimized for phone. We wrote the demo in C++ and in JS, to compare, and they both ran with the same performance. In the attached videos you can see the demo running at the stable screen refresh rate - 120Hz on my Mac, 60Hz on a old Moto G5 phone. It includes some widgets, an n-body simulation of planets, a playable game demo, etc.
0:55

We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised. We imported the bindings for DearImGui (a popular C++ imperative game UI library that renders meshes), and Sokol (an amazing lightweight 3D backend in C) and wrote a small demo. "Imperative UI" means that the entire UI and the state of the screen is recreated on every frame, which suits our purposes to demonstrate SH very well. The demo runs 100% compiled native code. JavaScript runs in every frame and recreates the entire state of the screen. It is portable to all platforms, though the screen layout is not optimized for phone. We wrote the demo in C++ and in JS, to compare, and they both ran with the same performance. In the attached videos you can see the demo running at the stable screen refresh rate - 120Hz on my Mac, 60Hz on a old Moto G5 phone. It includes some widgets, an n-body simulation of planets, a playable game demo, etc.

Tzvetan Mikov

826,308 Aufrufe • vor 3 Jahren

"People in this part of the world, with due respect, believes that there are no consequences for bad behavior. That is why we have chosen to press the reset button in Lagos. There must be consequences, else, the state becomes an Hobbesian state where life becomes nasty, brutish, and short, and we cannot afford to have that in this state.”
0:51

"People in this part of the world, with due respect, believes that there are no consequences for bad behavior. That is why we have chosen to press the reset button in Lagos. There must be consequences, else, the state becomes an Hobbesian state where life becomes nasty, brutish, and short, and we cannot afford to have that in this state.”

Tokunbo Wahab

34,600 Aufrufe • vor 1 Jahr

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!
2:49

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

141,222 Aufrufe • vor 1 Monat

Easy tiling with COSMIC. Tile windows with the click of a button. Rearrange, stack, and swap windows with the mouse or keyboard shortcuts. Tile across all workspaces or per workspace. COSMIC Beta release Thursday, September 25th
0:58

Easy tiling with COSMIC. Tile windows with the click of a button. Rearrange, stack, and swap windows with the mouse or keyboard shortcuts. Tile across all workspaces or per workspace. COSMIC Beta release Thursday, September 25th

System76

31,017 Aufrufe • vor 1 Jahr

If a picture is worth a thousand words, your camera roll is worth millions. That’s why we built Dazzle, an AI assistant that turns your camera button into a "get it done" button. No blank prompts, just instant context and action. 🚀 Read the full launch post: 🎉
1:19

If a picture is worth a thousand words, your camera roll is worth millions. That’s why we built Dazzle, an AI assistant that turns your camera button into a "get it done" button. No blank prompts, just instant context and action. 🚀 Read the full launch post: 🎉

marissamayer

421,465 Aufrufe • vor 1 Monat

If the keyboard button was a person
0:24

If the keyboard button was a person

non aesthetic things

2,289,297 Aufrufe • vor 1 Jahr

I never use my iPhone’s camera button. So I made it call my dot. We just shipped dot widgets and Action button support on iOS. Here’s how to set those up, plus the Shortcuts trick I used for the camera button.
1:07

I never use my iPhone’s camera button. So I made it call my dot. We just shipped dot widgets and Action button support on iOS. Here’s how to set those up, plus the Shortcuts trick I used for the camera button.

dominik kundel

578,811 Aufrufe • vor 21 Tagen

New Ely's victory screen. If you spam the like button... wait for it...
0:21

New Ely's victory screen. If you spam the like button... wait for it...

Amadeus Rolux

154,760 Aufrufe • vor 1 Jahr

When the way software is built changes, we help companies adopt it. For over a decade, that meant bringing React Native to production across mobile, web, desktop, and TV. Now we are expanding that same mission to AI-native engineering: helping teams ship software with agents, safely and at scale. This is our new manifesto.
1:33

When the way software is built changes, we help companies adopt it. For over a decade, that meant bringing React Native to production across mobile, web, desktop, and TV. Now we are expanding that same mission to AI-native engineering: helping teams ship software with agents, safely and at scale. This is our new manifesto.

Callstack Engineers

24,878 Aufrufe • vor 5 Monaten

One of the most exciting things I’ve had the chance to work on has been integrating `react-native-teleport` into `screen-transitions`. v3.9 introduces a new handoff prop to seamlessly teleport boundary payloads between each other. Pretty happy with it so far! Here’s how it looks with the new zoom transition in v3.9
0:42

One of the most exciting things I’ve had the chance to work on has been integrating `react-native-teleport` into `screen-transitions`. v3.9 introduces a new handoff prop to seamlessly teleport boundary payloads between each other. Pretty happy with it so far! Here’s how it looks with the new zoom transition in v3.9

Ed

19,121 Aufrufe • vor 3 Monaten

react-native-screen-transitions v3 has been out for a couple days now - held off from posting because I wanted to move past the basic examples and show how it looks in real flows Here’s a gym app my buddy Brian and I are working on 🥳
0:31

react-native-screen-transitions v3 has been out for a couple days now - held off from posting because I wanted to move past the basic examples and show how it looks in real flows Here’s a gym app my buddy Brian and I are working on 🥳

Ed

82,386 Aufrufe • vor 10 Monaten

Commentary is one of the most important pillars of X. And sometimes the best way to share your thoughts is with video. Today we're launching a whole new way to make them: React with Video Tap the repost button and start recording with green screen, split screen, or picture-in-picture. Now available on iOS
0:45

Commentary is one of the most important pillars of X. And sometimes the best way to share your thoughts is with video. Today we're launching a whole new way to make them: React with Video Tap the repost button and start recording with green screen, split screen, or picture-in-picture. Now available on iOS

Nikita Bier

8,153,332 Aufrufe • vor 5 Monaten