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.

A technically interesting challenge when building Pengu was generating transparent images for each user’s unique Pengu. With over 350 clothing items and countless possible combinations, plus varying device sizes, pre-generating images in the cloud quickly became infeasible. To solve this, we moved the computation to the device itself by... leveraging React Native Godot. Here’s how it works: ① The user changes the Pengu’s clothing, and React Native calls a GDScript function. ② Godot opens a subwindow with a specific scene that renders the Pengu. ③ Godot takes a “screenshot” and closes the subwindow. ④ React Native receives the File Path of the screenshot as a return value. You can get quite creative with how you leverage Godot’s subwindows. Screenshots are captured in just a few milliseconds, without the user ever noticing.show more

Jannis L. Ringwald

2,903 subscribers

28,696 views • 11 months ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

18 Comments

dennis11 months ago

if you stop sharing these insights i'll 🔫

Fabian Kamberi11 months ago

Saturday means Kanye on all speakers at the office

Daehyeon Mun11 months ago

Interesting. This is a similar approach I tried for Callie 😸

NicheGuys11 months ago

sunday! we are waiting GitHub link =))) <3

Sebastian Penafiel11 months ago

This one was quite the challenge to come up with at the time. 🔥

enes11 months ago

I 🐧 pengu

Max11 months ago

Remember it quite well. Was an interesting system design challenge 🔥

Nnaemeka.dev11 months ago

🔥

小贺11 months ago

👏

Trent11 months ago

That’s a clever workaround. I had no idea Pengu was even made in Godot

Nico11 months ago

Cool name

Zen11 months ago

omg @Sidaelle this is how they built pengu!!!!!

Mohamed Rasheq11 months ago

Interesting challenge. 🔥🔥

Alzea | Orenji Studio11 months ago

This is cool man 👀

Frozair11 months ago

So this only works for react native? What's the difference when using gdscript and targeting mobile devices?

Parav11 months ago

is that similar to how offscreencanvas works on web?

AtheX Web311 months ago

wen docs?

Jannis Ringwald11 months ago

Checkout my latest post

Related Videos

One of the most important features for Pengu was the ability to download and launch different games (Godot pck's) on the fly. Under the hood, our React Native Godot library manages the entire Godot lifecycle: stopping, cleaning up, and starting a new instance with a different pck. Everything happens within milliseconds, without restarting the app.

One of the most important features for Pengu was the ability to download and launch different games (Godot pck's) on the fly. Under the hood, our React Native Godot library manages the entire Godot lifecycle: stopping, cleaning up, and starting a new instance with a different pck. Everything happens within milliseconds, without restarting the app.

Jannis L. Ringwald

56,497 views • 1 year ago

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Today, we’re officially releasing React Native Godot to the public. For the first time, every React Native developer can create games with an amazing UI on top. This unlocks a new era of apps and games.

Jannis L. Ringwald

942,622 views • 11 months ago

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.

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

26,082 views • 1 month ago

🥪 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 👉

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

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!

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

266,853 views • 1 year ago

For a few weeks we've been building agents that are capable of understanding any app and then autonomously convert it to a React Native app. Powered by agent-device and react-native-best-practices skills from Callstack Engineers and some custom instructions DM if you're interested

For a few weeks we've been building agents that are capable of understanding any app and then autonomously convert it to a React Native app. Powered by agent-device and react-native-best-practices skills from Callstack Engineers and some custom instructions DM if you're interested

Michał Pierzchała

10,545 views • 5 months 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

111,117 views • 1 year ago

A clothing rack in React Native 🧥 Rendered with WebGPU on React Native Skia's new Graphite backend. Huge thanks to William Candillon 🙏

A clothing rack in React Native 🧥 Rendered with WebGPU on React Native Skia's new Graphite backend. Huge thanks to William Candillon 🙏

Mehdi · Motionary

36,860 views • 22 days ago

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 header are positioned absolutely above the stack. When a screen focuses, it updates the shared button state (text, disabled state) via context The hardest part is keeping the keyboard open during screen transitions. We solved it with hidden TextInputs that get focused programmatically before navigating The result: one button flows across every screen and surfs the keyboard

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 header are positioned absolutely above the stack. When a screen focuses, it updates the shared button state (text, disabled state) via context The hardest part is keeping the keyboard open during screen transitions. We solved it with hidden TextInputs that get focused programmatically before navigating The result: one button flows across every screen and surfs the keyboard

Baran

230,724 views • 1 year ago

$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!$

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

141,222 views • 1 month ago

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

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

31,557 views • 1 year ago

a day in the life of a react native software engineer

a day in the life of a react native software engineer

David Leuliette

149,331 views • 2 years ago

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Callstack Engineers

18,242 views • 6 months ago

A new era of open, transparent, user-first, and decentralized finance. That's what Spark is building. It’s a response to the broken & opaque traditional finance system built to benefit the few over the many. And now with a native token: SPK. Learn more 👇

A new era of open, transparent, user-first, and decentralized finance. That's what Spark is building. It’s a response to the broken & opaque traditional finance system built to benefit the few over the many. And now with a native token: SPK. Learn more 👇

Spark

178,772 views • 1 year ago

Know React for the web? You are closer to shipping a mobile app than you think. Components, hooks, props, state: same React. The rendering layer is what changes. ◆ React DOM swaps for a native renderer ◆ Styling uses the StyleSheet API ◆ View, not div

Know React for the web? You are closer to shipping a mobile app than you think. Components, hooks, props, state: same React. The rendering layer is what changes. ◆ React DOM swaps for a native renderer ◆ Styling uses the StyleSheet API ◆ View, not div

Expo

16,084 views • 2 months ago

Did you know on-device MLS encryption in React Native can take less than 1ms? 🦸🏻‍♂️ Here’s how we built one of the fastest end-to-end encryption demos in #ReactNative. ~0.9ms on-device MLS encryption powered by OpenMLS, Rust, and Nitro Modules.

Did you know on-device MLS encryption in React Native can take less than 1ms? 🦸🏻‍♂️ Here’s how we built one of the fastest end-to-end encryption demos in #ReactNative. ~0.9ms on-device MLS encryption powered by OpenMLS, Rust, and Nitro Modules.

Margelo

20,811 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,980 views • 2 years ago