Pinned
Ever wondered why animations on #reactnative's new architecture were so laggy?
We partnered with the @discord team, found the bottlenecks, and helped make their mobile app feel buttery smooth.
Here’s the before/after 👇
00:00
Margelo
556 posts
Margelo
@margelo_com
High-end App Development and Contracting Agency - aka the "React Native Avengers". We will help you design better apps, faster. Hire us → [email protected]
- Announcing react-native-skottie - a library to run Lottie animations using Skia's GPU-accelerated engine! 🥳 1.0.0 is out now! 🚀 github.com/margelo/react-…
00:00 - #ReactNative Pro Tip #14: Disable compression for .𝚋𝚞𝚗𝚍𝚕𝚎 files in your Android app to speed up it's launch time - in our tests this resulted in a 400ms (!) startup time improvement! 🚀 Simply add this to your 𝚊𝚙𝚙/𝚋𝚞𝚒𝚕𝚍.𝚐𝚛𝚊𝚍𝚕𝚎:
- #ReactNative Pro Tip #12: Use 𝚋𝚘𝚛𝚍𝚎𝚛𝙲𝚞𝚛𝚟𝚎="𝚌𝚘𝚗𝚝𝚒𝚗𝚞𝚘𝚞𝚜" to create smoother rounded rectangles ("squircles"). ⚽️
- We built something cool! 🤩 This is running smoothly at 60FPS+ in a #ReactNative app, the custom models were created in Blender, and the face tracking, filtering and rendering is written from scratch in a native Swift module. 💪 Stay tuned for what's coming to VisionCamera... 👀
00:00 - We just launched a new library: react-native-nitro-fetch! 🚀 - ⚡️ Fast HTTP stack using Cronet (super optimized Chromium implementation) - 💪 Supports HTTP/2, QUIC, Brotli, and disk cache - ⏰ "Prefetching" feature to start loading before your JS code runs - 🧵 Worklet support!
00:00 - Here's a quick sneak-peek on what we're working on at Margelo 👀 WishList is a new native List component built from scratch! 💪 👉 Fully native virtualization/recycling in C++/Fabric 👉 Synchronous measuring/rendering (UI Thread) 👉 60 FPS scrolling 👉 No more blank spots 🎉
GIF - #ReactNative Pro Tip #8: Never use the <Text> component directly. Instead, create your own abstraction so you don't repeat yourself with font name, font size or colors each time and it's easier to change properties at any point.
- We just open-sourced our high-performance Graph library for React Native! 🥳🎉 It uses React Native Skia for fast rendering and native path interpolation for 60 FPS animations! 🤯 @PinkPandaDefi's mobile app already uses react-native-graph! Leave a ⭐️: github.com/margelo/react-…
GIF - #ReactNative Pro Tip #6: When presenting numbers to the user, you should format them in the correct locale (commas, currency signs, ..) While .toLocaleString(..) does it's job, you can actually construct your own NumberFormat instance to improve performance by ~2x! 💨
- #ReactNative Pro Tip #5: Use react-native-blurhash to show beautiful blurry placeholders for your images and videos. Generate a short string that represents a blurry version of your content ("blurhash") server-side and send it alongside with your data to the app!
- Welcome to Margelo! 👋 We're a team of rockstar-level engineers who has created some of the best user experiences in the world. 🎨 Hire us and we will help you ship better apps, faster:
- We're getting closer and closer to an alpha release! 🚀 Our upcoming high performance React Native list solution "WishList" is able to recycle cells with views, text, images, and even state in realtime! This is pretty much as fast as a fully native list - no more blanks! 🥳🤩
GIF - #ReactNative Pro Tip #7: Always handle Safe Area Insets appropriately. Instead of wrapping the entire screen in a <SafeAreaView>, you can work with paddings to create cleaner UIs. Here, we passed `contentContainerStyle={{ paddingBottom: safeAreaBottom }}` to the <ScrollView>:
GIF