Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 35

Фото профиля Marc
Marc1 год назад

why not a single screen, with step body components?

Фото профиля Ludwig Vaan
Ludwig Vaan1 год назад

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

Фото профиля Gabriele Scotto di Vettimo
Gabriele Scotto di Vettimo1 год назад

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

Фото профиля Yehia
Yehia1 год назад

Could do it with a flatlist with pagingEnabled

Фото профиля Ant Setiadi
Ant Setiadi1 год назад

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

Фото профиля MT⚡️
MT⚡️1 год назад

09:41 🧐

Фото профиля Mick
Mick1 год назад

Beautiful! Is there a chance to open source this?

Фото профиля Conor
Conor1 год назад

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 🔥1 год назад

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

Фото профиля Ryan O'Hara
Ryan O'Hara1 год назад

Damn that’s smooth! Nice work

Фото профиля Kyle
Kyle1 год назад

Looks great

Фото профиля Billel Boudchicha
Billel Boudchicha1 год назад

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 Ry1 год назад

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
pedro1 год назад

code plzzz ?

Фото профиля Shreya Mishra
Shreya Mishra1 год назад

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

Фото профиля JGF
JGF1 год назад

clean

Фото профиля Abhijeet Sharan
Abhijeet Sharan1 год назад

Looks smooth

Фото профиля Mayor
Mayor1 год назад

Love it

Фото профиля ª
ª1 год назад

@datboychapo

Фото профиля Davide Espertini
Davide Espertini1 год назад

wow! really impressive work!

Фото профиля Max Hoffmann
Max Hoffmann1 год назад

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

Фото профиля Melvyn
Melvyn1 год назад

Keeping the keyboard open is really cool, love it !

Фото профиля Ice Bridge
Ice Bridge1 год назад

Looks clean! Love it!

Фото профиля Tyler Coffman
Tyler Coffman1 год назад

Just use a horizontal flat list with paging

Фото профиля dany
dany1 год назад

smooth

Фото профиля EJ Campbell
EJ Campbell1 год назад

Does it interact properly with auto-fill passwords?

Фото профиля Marlon Johnson
Marlon Johnson1 год назад

Im trying to achieve something similar

Фото профиля voj
voj1 год назад

this goes hard

Фото профиля julian
julian1 год назад

Very cool approach

Фото профиля Youss
Youss1 год назад

Nice work 👌🏽Seems a little bit over engineered though

Фото профиля Smoking Chimp
Smoking Chimp1 год назад

Sooo buttery. Great work on this.

Фото профиля 0xRay
0xRay1 год назад

@StreamviDL

Фото профиля Emmanuel Andy Eze 🇳🇬
Emmanuel Andy Eze 🇳🇬1 год назад

Amazing 🤩

Фото профиля Taylor Symonds
Taylor Symonds1 год назад

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

Фото профиля Ale
Ale1 год назад

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

Похожие видео

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 просмотров • 2 месяцев назад

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,930 просмотров • 1 год назад

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,830,170 просмотров • 17 дней назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 3 месяцев назад

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 просмотров • 3 лет назад

"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 просмотров • 1 год назад

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

142,196 просмотров • 2 месяцев назад

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 просмотров • 1 год назад

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

425,987 просмотров • 1 месяц назад

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 просмотров • 5 месяцев назад

If the keyboard button was a person
0:24

If the keyboard button was a person

non aesthetic things

2,289,331 просмотров • 1 год назад

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 просмотров • 27 дней назад

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 просмотров • 1 год назад

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,486 просмотров • 11 месяцев назад

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 просмотров • 3 месяцев назад

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,154,657 просмотров • 5 месяцев назад