Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

JannisRingwald's profile picture

Jannis L. Ringwald

2,903 subscribers

28,696 Aufrufe • vor 11 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

18 Kommentare

Profilbild von dennis
dennisvor 11 Monaten

if you stop sharing these insights i'll 🔫

Profilbild von Fabian Kamberi
Fabian Kamberivor 11 Monaten

Saturday means Kanye on all speakers at the office

Profilbild von Daehyeon Mun
Daehyeon Munvor 11 Monaten

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

Profilbild von NicheGuys
NicheGuysvor 11 Monaten

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

Profilbild von Sebastian Penafiel
Sebastian Penafielvor 11 Monaten

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

Profilbild von enes
enesvor 11 Monaten

I 🐧 pengu

Profilbild von Max
Maxvor 11 Monaten

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

Profilbild von Nnaemeka.dev
Nnaemeka.devvor 11 Monaten

🔥

Profilbild von 小贺
小贺vor 11 Monaten

👏

Profilbild von Trent
Trentvor 11 Monaten

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

Profilbild von Nico
Nicovor 11 Monaten

Cool name

Profilbild von Zen
Zenvor 11 Monaten

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

Profilbild von Mohamed Rasheq
Mohamed Rasheqvor 11 Monaten

Interesting challenge. 🔥🔥

Profilbild von Alzea | Orenji Studio
Alzea | Orenji Studiovor 11 Monaten

This is cool man 👀

Profilbild von Frozair
Frozairvor 11 Monaten

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

Profilbild von Parav
Paravvor 11 Monaten

is that similar to how offscreencanvas works on web?

Profilbild von AtheX Web3
AtheX Web3vor 11 Monaten

wen docs?

Profilbild von Jannis Ringwald
Jannis Ringwaldvor 11 Monaten

Checkout my latest post

Ähnliche 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.
0:22

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 11 Monaten

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

26,082 Aufrufe • vor 1 Monat

🥪 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

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

266,853 Aufrufe • vor 1 Jahr

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
1:10

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 Aufrufe • vor 5 Monaten

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

111,117 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 20 Tagen

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

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 Aufrufe • vor 1 Jahr

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

141,012 Aufrufe • vor 1 Monat

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

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 Aufrufe • vor 1 Jahr

a day in the life of a react native software engineer
3:03

a day in the life of a react native software engineer

David Leuliette

149,331 Aufrufe • vor 2 Jahren

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 ⬇️
0:25

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 Aufrufe • vor 6 Monaten

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 👇
1:01

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 1 Monat

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
1:00

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 Aufrufe • vor 2 Monaten

Updated my Godot movement for the public to use. I'm working on this project again (been busy with college), I'm going to introduce a lot of new changes. This works with Godot 4.3 and is open sourced. #Godot #GodotEngine
0:26

Updated my Godot movement for the public to use. I'm working on this project again (been busy with college), I'm going to introduce a lot of new changes. This works with Godot 4.3 and is open sourced. #Godot #GodotEngine

Underdog

80,275 Aufrufe • vor 2 Jahren