Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

barany6m's profile picture

Baran

4,572 subscribers

111,102 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieNachrichten & PolitikBildung
LIVE

Anya Rossi• Live Now

Private livecam show

36 Kommentare

Profilbild von Miguel Piedrafita ✨
Miguel Piedrafita ✨vor 1 Jahr

i’m not super familiar with the RN world, but if this is akin to using React for data management but rendering with pure SwiftUI/UIKit I’d be very interested in how you got it working 👀

Profilbild von Baran
Baranvor 1 Jahr

yes!

Profilbild von Miguel Piedrafita ✨
Miguel Piedrafita ✨vor 1 Jahr

ooo veeeeery interested, been looking at state management solutions for SwiftUI and the ergonomics SUCK

Profilbild von Baran
Baranvor 1 Jahr

uncompressed:

Profilbild von Umair Ahmed
Umair Ahmedvor 1 Jahr

Question should be who doesn't wanna see the code? 👀

Profilbild von matty
mattyvor 11 Monaten

got claude on the case.. a simple starter:

Profilbild von Nodus Labs
Nodus Labsvor 1 Jahr

Anyone received the code or it was just a bait to get views and comments?

Profilbild von Yash
Yashvor 1 Jahr

really want to see the code

Profilbild von Vayo
Vayovor 1 Jahr

sadly, android left the chat

Profilbild von Chintan Turakhia
Chintan Turakhiavor 1 Jahr

Epic. Would love to see the code

Profilbild von Serg
Sergvor 1 Jahr

Can you rebuild telegram ios client in swift? That’s the real challenge!

Profilbild von Sam
Samvor 1 Jahr

Nice, can you share the code :)

Profilbild von Harry Tormey 🇮🇪 | 🇺🇸| 🇺🇦
Harry Tormey 🇮🇪 | 🇺🇸| 🇺🇦vor 1 Jahr

Nice. You gonna post any sample code?

Profilbild von nikiv.dev
nikiv.devvor 1 Jahr

would love to see the code 🖤

Profilbild von shubham
shubhamvor 11 Monaten

Can you share repo ?

Profilbild von MARCO WENK
MARCO WENKvor 1 Jahr

Does the interactive keyboard dismissal work? I’d be impressed !

Profilbild von ian
ianvor 1 Jahr

very impressive :O

Profilbild von Fabian Kamberi
Fabian Kamberivor 1 Jahr

@JannisRingwald 🔥

Profilbild von Gabriel
Gabrielvor 1 Jahr

got me real curious there!

Profilbild von Alex Ruber
Alex Rubervor 1 Jahr

@parthematics down

Profilbild von Joël Kuijper
Joël Kuijpervor 1 Jahr

Cool. I'd like to see the code!

Profilbild von alex
alexvor 1 Jahr

👋

Profilbild von anirudh
anirudhvor 1 Jahr

yes please

Profilbild von Sebastian Penafiel
Sebastian Penafielvor 11 Monaten

Nice header 👀

Profilbild von Sebastian BO
Sebastian BOvor 1 Jahr

Would love to see the code

Profilbild von Martino
Martinovor 11 Monaten

@borndotcom Really cool, did it with pure react native too, but your details are next level

Profilbild von Selva
Selvavor 1 Jahr

🙋‍♂️

Profilbild von Youss
Youssvor 1 Jahr

Nice work 👌🏽

Profilbild von Deniss
Denissvor 1 Jahr

I guess the tough part now is bridging the gap with Android and Compose as the primitives and API is inherently different. Did you build all of the bridging of components by yourself using Fabric?

Profilbild von Arunabh Verma
Arunabh Vermavor 11 Monaten

this is insane, would love to check out the code fr

Profilbild von rommyarb 💛
rommyarb 💛vor 1 Jahr

Me

Profilbild von kele
kelevor 1 Jahr

Me 🖐️

Profilbild von Ian
Ianvor 1 Jahr

Yes

Profilbild von groky
grokyvor 1 Jahr

GitHub ?

Profilbild von M
Mvor 1 Jahr

liquid glass is so easy to add

Profilbild von Degen
Degenvor 11 Monaten

would live to have the link too 🙏🏻

Ähnliche Videos

React Native feels more native than ever. So I started tagging every block on that is powered by native components. That’s how the Native facet was born. I hope it becomes a handy spot for anyone chasing that truly native feel.
0:26

React Native feels more native than ever. So I started tagging every block on that is powered by native components. That’s how the Native facet was born. I hope it becomes a handy spot for anyone chasing that truly native feel.

Volodymyr

58,776 Aufrufe • vor 2 Monaten

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉
0:29

🥪 Learn how to make a 3D Sandwich Configurator with React Native and React Three Fiber! 🍭 WawaWonka is hidden in the video with a 🎟️ Golden Ticket to get for free! Be the first to redeem it 👉

Wawa Sensei

39,667 Aufrufe • vor 2 Jahren

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,442 Aufrufe • vor 3 Jahren

While you debate if you should switch to native, I've implemented iOS Gallery zoom interaction, using React Native and Expo, and feels incredibly smooth. Recreating this was living in my head over 4 years without paying, now I think it's a good time to show what’s possible. It’s funny that we still have this React Native vs. native discussion from the early times of it. React Native doesn’t stop you from building a performant app, and going fully native doesn’t automatically give you performant apps either. You can build performant, delightful things with React Native.
0:41

While you debate if you should switch to native, I've implemented iOS Gallery zoom interaction, using React Native and Expo, and feels incredibly smooth. Recreating this was living in my head over 4 years without paying, now I think it's a good time to show what’s possible. It’s funny that we still have this React Native vs. native discussion from the early times of it. React Native doesn’t stop you from building a performant app, and going fully native doesn’t automatically give you performant apps either. You can build performant, delightful things with React Native.

Enes

25,938 Aufrufe • vor 22 Tagen

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

140,188 Aufrufe • vor 24 Tagen

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!
0:57

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!

Software Mansion

26,869 Aufrufe • vor 8 Monaten

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,846 Aufrufe • vor 4 Monaten

Current progress on my AI Tattoo app 🤓 The Tattoo Playground is powered by: - CSS animations in RN (hat tip Kacper Kapuściak) - Expo Module for a native SwiftUI input view (via Kavsoft) - Custom haptic engine with expo-modules by vo—va 🇺🇦 (also used in Fuse 🤩) - Pressto for seamless pressable handling (thanks Enzo Manuel Mangano) - Sonner Native for toasts thanks to Gunnar Torfi - Apple Foundation Models for on-device prompt suggestions (via expo-modules) - Expo Router v7 (canary) for routing + API Routes on EAS Hosting - React Native Screens (v4.18.0) with UITabBarItem support - Expo UI (context menus) + Expo Image - React Native Reanimated by Software Mansion - Nano Banana 2 Lite for amazing image results - And more! :) Source code is available for Code with Beto members — link below 👇
2:37

Current progress on my AI Tattoo app 🤓 The Tattoo Playground is powered by: - CSS animations in RN (hat tip Kacper Kapuściak) - Expo Module for a native SwiftUI input view (via Kavsoft) - Custom haptic engine with expo-modules by vo—va 🇺🇦 (also used in Fuse 🤩) - Pressto for seamless pressable handling (thanks Enzo Manuel Mangano) - Sonner Native for toasts thanks to Gunnar Torfi - Apple Foundation Models for on-device prompt suggestions (via expo-modules) - Expo Router v7 (canary) for routing + API Routes on EAS Hosting - React Native Screens (v4.18.0) with UITabBarItem support - Expo UI (context menus) + Expo Image - React Native Reanimated by Software Mansion - Nano Banana 2 Lite for amazing image results - And more! :) Source code is available for Code with Beto members — link below 👇

Beto

35,480 Aufrufe • vor 11 Monaten

The bounds api is great for images, but not so much for videos that require continuity (yet). Today I had some time to play around with react-native-teleport and this is how I managed to integrate it into screen-transitions. Super excited to see how further this can be pushed
0:29

The bounds api is great for images, but not so much for videos that require continuity (yet). Today I had some time to play around with react-native-teleport and this is how I managed to integrate it into screen-transitions. Super excited to see how further this can be pushed

Ed

21,463 Aufrufe • vor 4 Monaten

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

118,021 Aufrufe • vor 1 Jahr

New React framework: One. In this episode, I talk to One’s lead developer, Nate Wienert. What makes One special? - Do React and React native in the same project - SPA, static, or server modes on a per-file basis - Includes Tamagui, a web and mobile styling system - Soon will include Zero for smart sync between client and server Here's a short clip from our chat. Full video in next post.
1:05

New React framework: One. In this episode, I talk to One’s lead developer, Nate Wienert. What makes One special? - Do React and React native in the same project - SPA, static, or server modes on a per-file basis - Includes Tamagui, a web and mobile styling system - Soon will include Zero for smart sync between client and server Here's a short clip from our chat. Full video in next post.

Cory House

19,114 Aufrufe • vor 1 Jahr

We’re open-sourcing React Native Godot this Sunday. After a year of testing, polishing, and making it scalable across all the different Android devices. Over the next few days, we’ll share all the different features we’ve built and best practices on how to use them. We built much of Pengu’s core functionality on top of this library, and it opened up a whole new world of possibilities for us. I can’t wait to see what you’ll all build with it!
0:28

We’re open-sourcing React Native Godot this Sunday. After a year of testing, polishing, and making it scalable across all the different Android devices. Over the next few days, we’ll share all the different features we’ve built and best practices on how to use them. We built much of Pengu’s core functionality on top of this library, and it opened up a whole new world of possibilities for us. I can’t wait to see what you’ll all build with it!

Jannis Ringwald

266,743 Aufrufe • vor 11 Monaten

Telegram meets Cosmos ⚛️ Built on the Cosmos - The Interchain ⚛️ tech stack, powered by IBC, and native to the TON 💎 ecosystem. In my interview with Marco Monaco | cazares.eth, we unpack how TAC (🫰,✨️) is bridging Cosmos and TON - and what that means for Telegram-native apps, seamless cross-chain UX, and mass Web3 adoption. We also dive into the new leadership in Cosmos and Ethereum, how it is to launch a blockchain, DeFi liquidity challenges, and more.
39:45

Telegram meets Cosmos ⚛️ Built on the Cosmos - The Interchain ⚛️ tech stack, powered by IBC, and native to the TON 💎 ecosystem. In my interview with Marco Monaco | cazares.eth, we unpack how TAC (🫰,✨️) is bridging Cosmos and TON - and what that means for Telegram-native apps, seamless cross-chain UX, and mass Web3 adoption. We also dive into the new leadership in Cosmos and Ethereum, how it is to launch a blockchain, DeFi liquidity challenges, and more.

Cito

24,952 Aufrufe • vor 1 Jahr

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,205 Aufrufe • vor 2 Jahren

THERE IS NO PERFECT SITUATION We all want our kids to play for the best team, with the best coach, play a ton, and score a ton. That is not reality. There is no perfect situation. Especially when the players are younger, every situation can breed growth, no matter how good or bad it is.. it’s all dependent on how we react to it!!
0:59

THERE IS NO PERFECT SITUATION We all want our kids to play for the best team, with the best coach, play a ton, and score a ton. That is not reality. There is no perfect situation. Especially when the players are younger, every situation can breed growth, no matter how good or bad it is.. it’s all dependent on how we react to it!!

Steve Dagostino

16,045 Aufrufe • vor 1 Jahr

Introducing proof of concept React Imgui! The name is a joke, but it is accurate enough. In the last few days I have been working on a prototype of React driving Dear ImGui using Static Hermes. The result is a fully native app written almost entirely in JavaScript, using unmodified React, typed JS, plus a very small amount of glue C++ code and unmodified Dear ImGui and Sokol. The actual renderer translating React into Dear ImGui is written entirely in typed JS using zero-cost FFI. Of course this wouldn't be possible without React's great design and flexibility. I find it really fascinating that I was able to take literally unmodified React, write a little extra JS, and get a functional fully native app so quickly. Of course everything is unoptimized, and prototype code quality, and who knows how buggy, but it seems to work well enough. Please, watch the video to see it in action. If there is interest, I will write a more detailed article.
3:02

Introducing proof of concept React Imgui! The name is a joke, but it is accurate enough. In the last few days I have been working on a prototype of React driving Dear ImGui using Static Hermes. The result is a fully native app written almost entirely in JavaScript, using unmodified React, typed JS, plus a very small amount of glue C++ code and unmodified Dear ImGui and Sokol. The actual renderer translating React into Dear ImGui is written entirely in typed JS using zero-cost FFI. Of course this wouldn't be possible without React's great design and flexibility. I find it really fascinating that I was able to take literally unmodified React, write a little extra JS, and get a functional fully native app so quickly. Of course everything is unoptimized, and prototype code quality, and who knows how buggy, but it seems to work well enough. Please, watch the video to see it in action. If there is interest, I will write a more detailed article.

Tzvetan Mikov

211,337 Aufrufe • vor 11 Monaten

"That is a big deal to all the people that work on this show... it is a labor of love." Greg and the crew react to MLB Tonight winning the #SportsEmmys Award for Outstanding Studio Show – Daily.
1:57

"That is a big deal to all the people that work on this show... it is a labor of love." Greg and the crew react to MLB Tonight winning the #SportsEmmys Award for Outstanding Studio Show – Daily.

MLB Network

266,580 Aufrufe • vor 2 Jahren

WHAT IS REACT DOING WITH SUSPENSE?! WTH*CK honestly idk all the details rn but I know preloading is important and you'll probably want to get good at it if you want to optimize data loading and provide a snappy UX while it happens Here's how it looks in future React Router v7
6:01

WHAT IS REACT DOING WITH SUSPENSE?! WTH*CK honestly idk all the details rn but I know preloading is important and you'll probably want to get good at it if you want to optimize data loading and provide a snappy UX while it happens Here's how it looks in future React Router v7

Ryan Florence

77,440 Aufrufe • vor 2 Jahren