Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

fernandorojo's profile picture

Fernando Rojo

19,373 subscribers

31,511 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Fernando Rojo profil fotoğrafı
Fernando Rojo1 yıl önce

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

Christian Esmann profil fotoğrafı
Christian Esmann2 yıl önce

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.

alex profil fotoğrafı
alex1 yıl önce

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

Fernando Rojo profil fotoğrafı
Fernando Rojo1 yıl önce

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

Hirbod profil fotoğrafı
Hirbod1 yıl önce

🤯

wcastand profil fotoğrafı
wcastand1 yıl önce

next android <3 and we can go to mars

Koura 💻 profil fotoğrafı
Koura 💻1 yıl önce

What about android?

Robert Herber profil fotoğrafı
Robert Herber1 yıl önce

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

Conor Buckley profil fotoğrafı
Conor Buckley1 yıl önce

Beautiful 👌

Brandon Austin profil fotoğrafı
Brandon Austin1 yıl önce

insane.

Martín Dev profil fotoğrafı
Martín Dev1 yıl önce

Amazing! Thanks Fer! Like and suscribe on YouTube

Benzer Videolar

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 😅
0:20

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 görüntüleme • 1 yıl önce

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.
0:26

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 görüntüleme • 3 yıl önce

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?
0:25

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 görüntüleme • 8 ay önce

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:
0:40

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 görüntüleme • 1 yıl önce

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 (
0:29

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 görüntüleme • 7 ay önce

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! 🤩
2:11

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 görüntüleme • 2 yıl önce

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 👇
0:22

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 görüntüleme • 9 ay önce

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

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

Arunabh Verma

45,800 görüntüleme • 4 ay önce

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
0:24

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 görüntüleme • 2 yıl önce

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

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 görüntüleme • 4 ay önce

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.
1:09

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 görüntüleme • 1 yıl önce

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

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

rit3zh

45,519 görüntüleme • 7 ay önce

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

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

Bruno Stasse

27,038 görüntüleme • 1 ay önce

✨ 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 👇
0:35

✨ 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 görüntüleme • 1 yıl önce

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
0:50

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 görüntüleme • 1 yıl önce

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

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

Szymon Rybczak

60,914 görüntüleme • 1 yıl önce

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

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 görüntüleme • 2 ay önce

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.
0:23

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 görüntüleme • 1 yıl önce

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.
0:29

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 görüntüleme • 1 yıl önce

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

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 görüntüleme • 3 ay önce