Loading video...

Video Failed to Load

Go Home

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,614 subscribers

229,293 views • 8 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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,058,254 views • 1 year ago

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

176,975 views • 1 year ago

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

50,772 views • 1 year ago

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,707 views • 1 year ago

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,019 views • 2 years ago

"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,596 views • 1 year ago

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

30,984 views • 9 months ago

If the keyboard button was a person
0:24

If the keyboard button was a person

non aesthetic things

2,288,411 views • 1 year ago

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

21,382 views • 1 month ago

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

81,609 views • 6 months ago

The new version of React Native Bottom Tabs is out! 🎉 A new highly anticipated feature: Custom JavaScript Tabs! ✨ Provide your custom tab bar while leveraging native navigation underneath 🚀 Here is a demo of it in the 🦋 app! This demonstrates smooth screen transitions using native animations along with their custom tab bar.
0:21

The new version of React Native Bottom Tabs is out! 🎉 A new highly anticipated feature: Custom JavaScript Tabs! ✨ Provide your custom tab bar while leveraging native navigation underneath 🚀 Here is a demo of it in the 🦋 app! This demonstrates smooth screen transitions using native animations along with their custom tab bar.

Oskar

35,725 views • 1 year ago

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,084,116 views • 29 days ago

Blake Bednarz Blake is right. That button is on the right side of the glass and there is only one button
0:30

Blake Bednarz Blake is right. That button is on the right side of the glass and there is only one button

RyanMatta 🇺🇸 🦅

34,966 views • 9 months ago

got rid of the pause button in the dumbell guy green screen
1:26

got rid of the pause button in the dumbell guy green screen

Green Screen Videos by Murdoink

3,120,980 views • 2 months ago

Lenovo unveiled a bunch of concepts for their "Rollable" screens concept at CES today. This laptop has a screen that grows widescreen at the touch of a button. They have monitors and other configs too.
0:38

Lenovo unveiled a bunch of concepts for their "Rollable" screens concept at CES today. This laptop has a screen that grows widescreen at the touch of a button. They have monitors and other configs too.

Grummz

608,567 views • 5 months ago

This is one of my favorite iPhone hacks and works surprisingly well! Let me share all the steps here so you exactly know how to do this too: 1. Open Settings → Accessibility. 2. Scroll to the bottom and tap Accessibility Shortcut. 3. Select VoiceOver (make sure it has a ✓ next to it). → This lets you triple-click the side button to quickly toggle VoiceOver on or off. 4. Open the Camera app and swipe to Video mode. 5. Triple-click the side button to turn on VoiceOver. (You'll hear VoiceOver speak when it's active.) 6. When ready, double-tap the Record button to start recording. (VoiceOver will say "Recording.") 7. Triple tap the display with three fingers. → The screen goes black, but your iPhone keeps recording in the background. 8. When you're done, triple tap the screen with three fingers again to wake the screen. 9. Double-tap the Record button to stop recording. 10. Triple-click the side button again to turn off VoiceOver.. sc ig/appledsign
0:34

This is one of my favorite iPhone hacks and works surprisingly well! Let me share all the steps here so you exactly know how to do this too: 1. Open Settings → Accessibility. 2. Scroll to the bottom and tap Accessibility Shortcut. 3. Select VoiceOver (make sure it has a ✓ next to it). → This lets you triple-click the side button to quickly toggle VoiceOver on or off. 4. Open the Camera app and swipe to Video mode. 5. Triple-click the side button to turn on VoiceOver. (You'll hear VoiceOver speak when it's active.) 6. When ready, double-tap the Record button to start recording. (VoiceOver will say "Recording.") 7. Triple tap the display with three fingers. → The screen goes black, but your iPhone keeps recording in the background. 8. When you're done, triple tap the screen with three fingers again to wake the screen. 9. Double-tap the Record button to stop recording. 10. Triple-click the side button again to turn off VoiceOver.. sc ig/appledsign

Laurent Correia Bill

254,130 views • 7 months ago

Hey Degens, An update on the Degen app: - Onboarding flow is basically finished. - Feed screens are in place. - Posting, liking, recasting, threads, and profiles all work. - Notifications, tipping, and the wallet buy button are next. We originally aimed for a late September release, but progress slowed while we built the Degen mini app in parallel. We’re catching up now and plan to open a closed beta to a small group soon, with an invite-only rollout toward mid to late October, where seed users can bring in others. Really happy with how the app looks and feels. v1 will be a fast, lightweight Farcaster client, and we’ll layer in more Degen-native features as we go. 🎩
0:30

Hey Degens, An update on the Degen app: - Onboarding flow is basically finished. - Feed screens are in place. - Posting, liking, recasting, threads, and profiles all work. - Notifications, tipping, and the wallet buy button are next. We originally aimed for a late September release, but progress slowed while we built the Degen mini app in parallel. We’re catching up now and plan to open a closed beta to a small group soon, with an invite-only rollout toward mid to late October, where seed users can bring in others. Really happy with how the app looks and feels. v1 will be a fast, lightweight Farcaster client, and we’ll layer in more Degen-native features as we go. 🎩

Degen 🎩

19,049 views • 9 months ago

The White Stripes - The Hardest Button to Button
0:59

The White Stripes - The Hardest Button to Button

MP10

58,918 views • 3 months ago

I'm unfortunately that friend that ragebaits and presses the home button and screenshot button during a group switch gaming session
0:49

I'm unfortunately that friend that ragebaits and presses the home button and screenshot button during a group switch gaming session

Jab 🍉 @ VCF SoCal

21,689 views • 5 months ago

🚨BREAKING: X just launched React with Video. Tap the repost button and record your response directly over any post. Green screen, split screen, or picture-in-picture. No third party app. No editing. Just tap and go. Available on iOS now. This is the feature that turns commentary from text into something people actually watch. X has been building toward this for a while and it just shipped. Via Nikita Bier, X product lead.
0:45

🚨BREAKING: X just launched React with Video. Tap the repost button and record your response directly over any post. Green screen, split screen, or picture-in-picture. No third party app. No editing. Just tap and go. Available on iOS now. This is the feature that turns commentary from text into something people actually watch. X has been building toward this for a while and it just shipped. Via Nikita Bier, X product lead.

Future Stacked

46,170 views • 29 days ago