Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 11 ay önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

18 Yorum

dennis profil fotoğrafı
dennis11 ay önce

if you stop sharing these insights i'll 🔫

Fabian Kamberi profil fotoğrafı
Fabian Kamberi11 ay önce

Saturday means Kanye on all speakers at the office

Daehyeon Mun profil fotoğrafı
Daehyeon Mun11 ay önce

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

NicheGuys profil fotoğrafı
NicheGuys11 ay önce

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

Sebastian Penafiel profil fotoğrafı
Sebastian Penafiel11 ay önce

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

enes profil fotoğrafı
enes11 ay önce

I 🐧 pengu

Max profil fotoğrafı
Max11 ay önce

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

Nnaemeka.dev profil fotoğrafı
Nnaemeka.dev11 ay önce

🔥

小贺 profil fotoğrafı
小贺11 ay önce

👏

Trent profil fotoğrafı
Trent11 ay önce

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

Nico profil fotoğrafı
Nico11 ay önce

Cool name

Zen profil fotoğrafı
Zen11 ay önce

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

Mohamed Rasheq profil fotoğrafı
Mohamed Rasheq11 ay önce

Interesting challenge. 🔥🔥

Alzea | Orenji Studio profil fotoğrafı
Alzea | Orenji Studio11 ay önce

This is cool man 👀

Frozair profil fotoğrafı
Frozair11 ay önce

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

Parav profil fotoğrafı
Parav11 ay önce

is that similar to how offscreencanvas works on web?

AtheX Web3 profil fotoğrafı
AtheX Web311 ay önce

wen docs?

Jannis Ringwald profil fotoğrafı
Jannis Ringwald11 ay önce

Checkout my latest post

Benzer Videolar

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

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

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

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

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

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

111,117 görüntüleme • 1 yıl önce

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

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

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

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

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

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

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

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

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