Finally got something to show - we're working on a new 3D library for React Native! 👀🧊
👉 Powered by native Graphics APIs (Metal/Vulkan)
👉 Full control over rendering in JS
👉 120 FPS rendering on a Worklet Thread (no lags!)
👉 Supports hotswapping .glb/.gltf models
React Performance Tip
#12
: Since modern CPUs are square, format your code to exact squares to make sure it fits on the CPU as efficiently as possible.
This ensures that the CPU can directly execute the optimized format and will execute code much faster! 🤯
Built with VisionCamera. All the drawing and blurring is happening with JavaScript code, and it runs in realtime. No post-processing. This is going to change the entire mobile camera game. Get ready.
React Native made my dreams come true - I bought my dream car!
I want to thank everyone who put their trust in me and my skills. ❤️
See y'all on the race track!
This is an object detector model running in React Native VisionCamera.
I am looping through all the output data and drawing red boxes using simple JavaScript - even the model can be hotswapped!
All of this while still running at more than 60 FPS 🤯 - no more native code!!
🧵
#ReactNative
Performance Pro Tip 🔥💡: If you are building a
#ReactNative
app that works with Crypto, Big Numbers or Buffers make sure you are using the right libraries - otherwise your app will be slow asf! 😷 (a thread) (1/5)
VisionCamera V3 is up to 𝟳𝘅 faster than V2 because of performance improvements like:
- New CameraDevice selection API (no await) 🚀
- Rewritten native codebase (cleaner & faster) 🧹
- Single-hardware-locking for configuration batches (instant updates) 🔒
- ..and more!
The power of VisionCamera's write-back Frame Processors: I detect all faces in a Frame, then immediately censor them out using a simple frame.drawRect(..) call - all in JavaScript! 🤯
This is running in real-time, and with a faster model (like BlazeFace) it can run at 200+ FPS 🔥
I just released VisionCamera V4!!!!!! 🥳🚀💪🤯🔥👏
This one's a big release. With V4 you can draw directly onto a Camera Frame using Skia!!!
..and also, I fixed pretty much all Android issues from V3. 😉
I just released react-native-fast-tflite!!! 🥳
🔥 Powered by JSI/C++
💨 Zero-copy ArrayBuffers
🔧 Uses the low-level C/C++ TFLite core API
🔄 Supports fast-refresh for swapping out .tflite models at runtime
🖥️ Supports GPU-acceleration
Offline mode using react query and rn mmkv is INCREDIBLE!
My app's speed is doubled – when I open the app, everything loads instantly.
And the beautiful part is that you just need to add a few lines of code and it WORKS!
Awesome job
@mrousavy
@TkDodo
🙌
• TurboModules, Fabric and faster bundlers coming soon
• Camera Frame Processing, 2D Skia Graphics drawing and 60 FPS Animations straight from JS
• Easy Swift/Kotlin Native Modules abstraction coming soon (
@expo
)
#ReactNative
is about to become a whole lot more interesting
Good news! My PR to react-native core for smooth, interactive keyboard dismissal in ScrollViews now landed on master again! 🎉🎉
Can't wait to see my change in the next
#ReactNative
release 🤩
You're probably having a lot of unnecessary re-renders in your
#ReactNative
app 🥶🥶🥶
There's a simple flip you can switch to greatly improve the overall performance and responsiveness of your app and here's how you can switch it on. 🚀💨 (1/4)
JSI is amazing - I'm passing the whole audio sample buffer to JavaScript and then run an algorithm that determines the average "loudness" of the audio in realtime (in JS!) 🤩 can anyone guess what song this is?
#ReactNative
#javascript
@expo
Just released VisionCamera 3.0.0-rc.4! 🎉
- Full rewrite of the C++ codebases 😅
- New hook: useSkiaFrameProcessor 🔗
- Frame Processor Plugins are now object-oriented 💪
- Android now works! 🤖
- Frame Processors are now fully optional! ⛓️
I'm excited to announce that we just published react-native-quick-crypto - a new library for
#ReactNative
that implements NodeJS' crypto library in native C++/JSI! 🥳🎉🚀
We measured up to 58x speedups in certain cryptography functions, check it out:
My `automaticallyAdjustKeyboardInsets` PR has landed in React Native core!!
Y'all excited to finally have smooth interactive keyboard swipe-down in
#ReactNative
lists?
JSI allows JavaScript to directly call native C++ code.
#ReactNative
's new UI Manager "Fabric" uses JSI to render views even faster - it's powered by the native C++ Layout Engine "Yoga".
Yoga layouts views ~7 times faster than AutoLayout, the layout engine for native iOS apps.
VisionCamera now has an
@expo
config-plugin to easily enable the fully native QR/Barcode scanner! 🔍
Simply set 𝚎𝚗𝚊𝚋𝚕𝚎𝙲𝚘𝚍𝚎𝚂𝚌𝚊𝚗𝚗𝚎𝚛 to 𝚝𝚛𝚞𝚎, and you're all set! ✅
We wanted to show the performance and the insane power of the Static Hermes native FFI. But we don't yet support the all language features needed to compile React Native (soon though!), so we improvised.
We imported the bindings for DearImGui (a popular C++ imperative game UI…
A pro tip: Read "Effective Modern C++".
Even if you're not a C++ developer, this book will help you understand how memory management works and believe it or not this affects how you think about React (Native).
In fact that's the only programming book I ever read
VisionCamera 3.0.0-rc.3 is out! 🥳🎉
It contains the TensorFlow Lite JS Plugin for everyone to try now! 📸
Also some stability improvements and Skia is now on latest version with the new Ganesh rendering pipeline 😎
I created some Benchmarks to compare the speed of popular storage libraries for React Native. 👀
MMKV is 20x faster than AsyncStorage, and 4x faster than WatermelonDB! 🤯
(only testing simple string get speed, in debug, with hermes)
Check out the repo:
If you're still confused about the new architecture, check out this amazing guide on the react native website by
@lunaleaps
- they even mention react-native-vision-camera 🥰
I built a game changer.
That's an Image-Labelling AI running inside of a VisionCamera Frame Processor. Zero bridge traffic, just pure power. It's fast asf.
#ReactNative
📢 I'm looking for companies willing to sponsor VisionCamera.
VisionCamera is a library I created and constantly improve in my free time.
It's a huge library containing more than 15 thousand lines of JS, TS, Swift, ObjC, Java, Kotlin and C++ code.
Please RT for visibility 🙏
I'm looking for a good React Native developer.
You will be working alongside some of the best RN devs out there and focus on cool projects such as apps downloaded my millions of users or open source projects.
DM me if interested 📥😄
#ReactNative
We just published react-native-worklets-core, a core library for integrating flexible Worklets functionality into your app! 🥳
This will be used by VisionCamera V3 (Frame Processors) and WishList (Rendering) as a peer dependency.
Tip: Change the background color of your App's Window/root ViewController to avoid the default white color from flashing through 💡
(see comments for code)
react-native-mmkv V3 now supports the new architecture and is written as a pure C++ TurboModule - try it yourself by installing 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚖𝚖𝚔𝚟@𝚋𝚎𝚝𝚊 from npm!
I'm creating a Wallet app for one of our clients,
@PinkPandaDefi
.
I use the ethers.js library to interact with the Ethereum Blockchain
The library is written purely in JavaScript, causing the App to take 33s to start! 🥶
Here's how I improved performance by 33000% ‼️ (1/4)
Managed to run Skia at up to 120 FPS, even though I currently perform one extra GPU -> CPU copy 🔥
Left: VisionCamera native preview
Right: Skia Canvas rendering the 4k Camera Frame in JS
I built something useless - an app that generates a color palette for what you're looking at in realtime!
This is actually built with React Native & runs on iOS and Android, but it's as smooth as a native app because of VisionCamera and Reanimated 🤩🚀
(original idea by
@Simek
)
Wanted to delete ~/Xcode/DerivedData but accidentally ran rm -rf ~ because of my Terminal's autocomplete which deleted the entire home folder.
How's your day going?
I got something incredible to share. We got RN Skia running in a VisionCamera Frame Processor - in other words; we draw directly on a Frame, in realtime! 🤯
And the best part is; you can use any RN Skia code that you are used to today, whether it's paint, a line, or a shader!
🎉 react-native-mmkv 1.3.0 is finally here!! 🎉
I completely redesigned the API so now it has support for:
• 🚀 Creating multiple instances, e.g. to separate a logged in user's data from the global app data
• 🚀 Encryption/Decryption
• 🚀 Custom paths
So hyped for this project!! 🚀🚀
DM me if you/your company is having issues with FlatList/RecyclerListViewer, we're working on something great and need your support to build it! 📥
#ReactNative
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 🎉
in opensource, negative feedback usually outweighs positive feedback.
that's not the case today though - VisionCamera V4 is going really well, and people like Tyler are already noticing the improvements 😄
WOOOHOOO I finally got Skia + OpenGL set up on Android! 🥳
Now I'll just need to call the JS function to draw the Camera Frame and Skia Frame Processors are implemented in VisionCamera!