Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I built a React Native bottom sheet with SwiftUI. All the work is done on the native side, and the API feels like RadixUI.

Fernando Rojo

19,373 subscribers

31,511 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Fernando Rojo1 year ago

4K video on YouTube. On the road to my first 1K subscribers...

Christian Esmann2 years ago

I just launched an all-in-one template for cross-platform development, based on the stack I use myself everyday. Expo, NextJS, TypeScript, Tailwind, Firebase, AppsFlyer, Authentication, Analytics, In-App Purchases, Stripe and a lot more, setup by default.

alex1 year ago

didn’t @reactnavigation already have this? what’s different here? @expo

Fernando Rojo1 year ago

@reactnavigation @expo This component can get used inline, it doesn’t need to be part of navigation

Hirbod1 year ago

🤯

wcastand1 year ago

next android <3 and we can go to mars

Koura 💻1 year ago

What about android?

Robert Herber1 year ago

Good stuff! Great example of the Native in React Native actually meaning Native 😎

Conor Buckley1 year ago

Beautiful 👌

Brandon Austin1 year ago

insane.

Martín Dev1 year ago

Amazing! Thanks Fer! Like and suscribe on YouTube

Related Videos

React Native SwiftUI TabView is now renamed to Native Bottom Tabs ✨ NPM Package name: `react-native-bottom-tabs` secured ✅ Now its time to establish good cross platform API, provide same features on both platforms and make it stable 😅

React Native SwiftUI TabView is now renamed to Native Bottom Tabs ✨ NPM Package name: `react-native-bottom-tabs` secured ✅ Now its time to establish good cross platform API, provide same features on both platforms and make it stable 😅

Oskar Kwaśniewski

17,889 views • 1 year ago

The same app built in SwiftUI, React Native, and Flutter. All with the same Rive animations. Can you tell which is which? Poll in thread. Credit to Ashu, Lucas Lima and Meng To for the amazing work.

The same app built in SwiftUI, React Native, and Flutter. All with the same Rive animations. Can you tell which is which? Poll in thread. Credit to Ashu, Lucas Lima and Meng To for the amazing work.

Gordon Hayes

518,310 views • 3 years ago

For our new product, we built a chat in React Native that feels like iMessage Here's how we did it: ① Fabric Swift View ② UICollectionView ③ SwiftUI cells via UIHostingConfiguration React is responsible for the state - mutations, fetching, infinite loading - all via React Query. The native Fabric view is purely for rendering. React decides what to show, native decides how to show it The bridge between three frameworks was tricky but worth it. UICollectionView animations come for free and scroll performance is native-smooth No blank spaces and no FPS drops - all powered by the New Architecture Who wants to see the code?

For our new product, we built a chat in React Native that feels like iMessage Here's how we did it: ① Fabric Swift View ② UICollectionView ③ SwiftUI cells via UIHostingConfiguration React is responsible for the state - mutations, fetching, infinite loading - all via React Query. The native Fabric view is purely for rendering. React decides what to show, native decides how to show it The bridge between three frameworks was tricky but worth it. UICollectionView animations come for free and scroll performance is native-smooth No blank spaces and no FPS drops - all powered by the New Architecture Who wants to see the code?

Baran

110,643 views • 8 months ago

What is the difference between React Native JS Bottom Tabs and Native Bottom Tabs? 👀 Native bottom tabs use native platform primitives to render tabs (TabView from SwiftUI and BottomNavigationView on Android), while JS Tabs recreate this UI as closely as possible. This approach works well but tabs can have different appearances on different platforms, here is an example:

What is the difference between React Native JS Bottom Tabs and Native Bottom Tabs? 👀 Native bottom tabs use native platform primitives to render tabs (TabView from SwiftUI and BottomNavigationView on Android), while JS Tabs recreate this UI as closely as possible. This approach works well but tabs can have different appearances on different platforms, here is an example:

Oskar

15,830 views • 1 year ago

Morph sheet (WIP) inspired by Family. w/ React Native Expo + Mo Gorhom's bottom sheet The source code and an article will be available on @landingcomps (

Morph sheet (WIP) inspired by Family. w/ React Native Expo + Mo Gorhom's bottom sheet The source code and an article will be available on @landingcomps (

Erencan Arica

14,543 views • 7 months ago

Did I tell you I'm writing a book on Turbo Native? This is the app you will build working through the chapters. It has: 🏠 Native SwiftUI home screen 🔑 Native authentication ⏺️ Native buttons (w/ a reusable API) 🛎️ Push notifications ⚡️ Turbo Streams I am so excited! 🤩

Did I tell you I'm writing a book on Turbo Native? This is the app you will build working through the chapters. It has: 🏠 Native SwiftUI home screen 🔑 Native authentication ⏺️ Native buttons (w/ a reusable API) 🛎️ Push notifications ⚡️ Turbo Streams I am so excited! 🤩

Joe Masilotti

24,872 views • 2 years ago

Animated sliding numbers 🛝 I've been building a reusable React Native UI library on the side, and the advantage is being able to use it for the company I work for or any of my own mobile apps. w/React Native Expo Source code on Landing Comps 👇

Animated sliding numbers 🛝 I've been building a reusable React Native UI library on the side, and the advantage is being able to use it for the company I work for or any of my own mobile apps. w/React Native Expo Source code on Landing Comps 👇

Erencan Arica

34,460 views • 9 months ago

Native date picker with a native sheet Always look fantastic. Built with Expo

Native date picker with a native sheet Always look fantastic. Built with Expo

Arunabh Verma

45,800 views • 4 months ago

Cover flow Music Carousel with Shared Element Transition, built in React Native powered by Software Mansion’s Reanimated Library. We couldn’t have done this without all the hard work of awesome RN community behind these libraries now at React Native EU is now React Universe Conf Design by @_iamsandeep & Dev by Karthik Balasubramanian

Cover flow Music Carousel with Shared Element Transition, built in React Native powered by Software Mansion’s Reanimated Library. We couldn’t have done this without all the hard work of awesome RN community behind these libraries now at React Native EU is now React Universe Conf Design by @_iamsandeep & Dev by Karthik Balasubramanian

Timeless

11,805 views • 2 years ago

We just upgraded to Expo 55! 🚀 Now the KitchenSink uses Expo Router v7 with liquid glass native feels because... React Native is actually native!

We just upgraded to Expo 55! 🚀 Now the KitchenSink uses Expo Router v7 with liquid glass native feels because... React Native is actually native!

gluestack

26,417 views • 4 months ago

Introducing Silk — The most advanced swipeable sheet ever engineered for the web. Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web. Available for React.

Introducing Silk — The most advanced swipeable sheet ever engineered for the web. Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web. Available for React.

Bruno Stasse

834,034 views • 1 year ago

⚡ Apple Maps–style bottom sheet in React Native using TrueSheet 🔗Github:

⚡ Apple Maps–style bottom sheet in React Native using TrueSheet 🔗Github:

rit3zh

45,519 views • 7 months ago

Lovable's bottom sheets are built with Silk. On the web and in the app. Same code. Native feel everywhere.

Lovable's bottom sheets are built with Silk. On the web and in the app. Same code. Native feel everywhere.

Bruno Stasse

27,038 views • 1 month ago

✨ Introducing Apple Music on React Native! UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler. Took me about two days, but still needs a few fixes. Link to the GitHub project below 👇

✨ Introducing Apple Music on React Native! UI with a custom modal view, built with expo, react-native-reanimated, and gesture-handler. Took me about two days, but still needs a few fixes. Link to the GitHub project below 👇

Saúl

81,814 views • 1 year ago

A cute self-care app i've been building as a sole react native dev in my current team. built with react native Expo Reanimated for all smooth animations Also used React Native Skia for water cup motion

A cute self-care app i've been building as a sole react native dev in my current team. built with react native Expo Reanimated for all smooth animations Also used React Native Skia for water cup motion

Daehyeon 대현

107,787 views • 1 year ago

New FoundationModels API for running on-device AI by  is working with react-native-ai and AI SDK 🔥🔥

New FoundationModels API for running on-device AI by  is working with react-native-ai and AI SDK 🔥🔥

Szymon Rybczak

60,914 views • 1 year ago

This is one of the fastest and most performant calendar I’ve ever built with Expo 🧙 Source code: React Native Components 🔗

This is one of the fastest and most performant calendar I’ve ever built with Expo 🧙 Source code: React Native Components 🔗

Erencan Arica

30,725 views • 2 months ago

If we want to present a sheet on top of another sheet in SwiftUI, we have to attach the second sheet() modifier inside the content of the first sheet view, otherwise it won't work properly and SwiftUI will complain that only presenting a single sheet is supported.

If we want to present a sheet on top of another sheet in SwiftUI, we have to attach the second sheet() modifier inside the content of the first sheet view, otherwise it won't work properly and SwiftUI will complain that only presenting a single sheet is supported.

Natalia Panferova

18,867 views • 1 year ago

Introducing Perplexi-Tube, the Perplexity for YouTube that I built in 20 minutes... A Mobile app that uses Deepseek and Gemini I used Cursor and the React Native template built that makes building mobile apps incredibly easy. Tomorrow I'm releasing a full tutorial on how to create a mobile app with react native. You will need - XCode and Simulator (free) - Cursor - A Clerk Account (for auth, free) - A Deepseek API Key - A Gemini API Key (Optional, we used it because deepseek has been down today) Video will be released tomorrow, and I will open source this code as well.

Introducing Perplexi-Tube, the Perplexity for YouTube that I built in 20 minutes... A Mobile app that uses Deepseek and Gemini I used Cursor and the React Native template built that makes building mobile apps incredibly easy. Tomorrow I'm releasing a full tutorial on how to create a mobile app with react native. You will need - XCode and Simulator (free) - Cursor - A Clerk Account (for auth, free) - A Deepseek API Key - A Gemini API Key (Optional, we used it because deepseek has been down today) Video will be released tomorrow, and I will open source this code as well.

Riley Brown

117,771 views • 1 year ago

Built this flight booking app in 15 minutes with Claude 🤯 as the base. Built with Expo React Native Nativewind and Software Mansion reanimated.

Built this flight booking app in 15 minutes with Claude 🤯 as the base. Built with Expo React Native Nativewind and Software Mansion reanimated.

Thomino

25,165 views • 3 months ago