正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

18 条评论

dennis 的头像
dennis1 年前

if you stop sharing these insights i'll 🔫

Fabian Kamberi 的头像
Fabian Kamberi1 年前

Saturday means Kanye on all speakers at the office

Daehyeon Mun 的头像
Daehyeon Mun1 年前

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

NicheGuys 的头像
NicheGuys11 个月前

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

Sebastian Penafiel 的头像
Sebastian Penafiel1 年前

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

enes 的头像
enes1 年前

I 🐧 pengu

Max 的头像
Max1 年前

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

Nnaemeka.dev 的头像
Nnaemeka.dev1 年前

🔥

小贺 的头像
小贺11 个月前

👏

Trent 的头像
Trent1 年前

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

Nico 的头像
Nico1 年前

Cool name

Zen 的头像
Zen1 年前

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

Mohamed Rasheq 的头像
Mohamed Rasheq1 年前

Interesting challenge. 🔥🔥

Alzea | Orenji Studio 的头像
Alzea | Orenji Studio11 个月前

This is cool man 👀

Frozair 的头像
Frozair11 个月前

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

Parav 的头像
Parav11 个月前

is that similar to how offscreencanvas works on web?

AtheX Web3 的头像
AtheX Web311 个月前

wen docs?

Jannis Ringwald 的头像
Jannis Ringwald11 个月前

Checkout my latest post

相关视频

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 次观看 • 1 年前

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 次观看 • 11 个月前

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 次观看 • 1 个月前

🥪 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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 5 个月前

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 次观看 • 1 年前

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 次观看 • 23 天前

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 次观看 • 1 年前

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,222 次观看 • 1 个月前

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 次观看 • 1 年前

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,332 次观看 • 2 年前

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 次观看 • 6 个月前

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 次观看 • 1 年前

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 次观看 • 1 个月前

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 次观看 • 2 个月前

✨ 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 次观看 • 2 年前