Go cross-platform without starting over

React Native performance work can produce misleading results when teams rely on a single profiler run. This article introduces Metrognome, an open-source AI plugin that turns proposed fixes into repeated, gated experiments on a live app. It explains how the tool combines device control, render analysis, runtime signals, and performance guidance, shares examples from Uphold, and shows how its Performance Map and CI workflows prioritize issues and create evidence-backed PRs.

@callstack/inspector brings React component profiling to React Native release builds. This article walks through the setup in an Expo app and shows how to inspect performance closer to how users experience it, without development-only debug code affecting JavaScript execution.

We introduced the AI SDK Profiler plugin for Rozenite DevTools. It captures OpenTelemetry spans emitted by the Vercel AI SDK, surfaces prompts, outputs, metadata, and latency, and works with any provider, on-device or cloud.

If you’ve felt JS thread pressure in React Native, Lynx’s runtime will feel familiar and different at the same time. This article uses a simple jammer technique inspired by React Native experiments to reset expectations and provide a clear mental baseline. From there, it shows how Lynx’s dual-thread model keeps UI-critical work responsive, even when background JavaScript is completely blocked.

JavaScript minification is standard practice on the web, but React Native follows a different optimization path. This article explains how the Hermes engine compiles JavaScript into bytecode and applies dead code elimination during that step, making traditional minification largely unnecessary. It also shows how to verify what actually ships in production by decompiling Hermes bundles.

React Native makes it easy to pass data between JavaScript and native code, but things get complicated once you leave the synchronous path. This article explains what really happens when ArrayBuffer memory crosses the JS and native boundary, why raw pointers can become invalid during async work, how garbage collection affects native code, and what safe patterns you can use today.

Most audio APIs are designed around files. You generate sound, save it, then read it back for playback or processing. While simple, this workflow breaks down when you need low latency or real-time interaction. In this article, we’ll explore how to work with raw PCM data entirely in memory, construct valid WAV buffers on the fly, and transfer them efficiently to JavaScript using JSI. The result is a flexible foundation for building real-time audio features directly in React Native.

TurboModules provide a type-safe way to write native code in React Native. JSI sits underneath as a lower-level API, enabling direct interaction with the JavaScript runtime. This article explains how to safely inject custom bindings with an ArrayBuffer example.

In this deep dive, we explain how Node-API is brought to React Native—from discovering and bundling native addons to loading them at runtime. We also walk through the design of the host system and tools that make it all work.

This third installment in our performance series focuses on building a cooperative, fiber-based task scheduler. We explore what fibers are, how they relate to coroutines, and how to organize tasks using atomic counters instead of traditional locks. You’ll learn how to avoid blocking, manage dependencies across tasks, and profile execution with Tracy. The concepts apply across languages and runtimes, offering a foundation for designing lock-free systems that scale efficiently on modern CPUs.

Node-API allows you to write native modules that run not only in React Native but also in other JavaScript runtimes like Node.js. In this deep dive, we'll guide you through creating a simple Node-API module, testing it in Node.js, getting it up and running in React Native, and finally, publishing it to npm for wider use.

Node-API brings a stable, cross-platform system for building native modules in React Native, enabling faster builds, easier maintenance, and broader language support. Already widely used in Node.js, Deno, and Bun, it allows native code to interface with JavaScript in a runtime-agnostic way. This makes it possible to distribute prebuilt binaries, reuse existing native libraries, and share code across ecosystems. With support for languages like C++, Rust, and Swift, Node-API opens the door to building high-performance modules for tasks like AI, encryption, and platform API access, all without being tied to specific runtime internals.

This article walks through real-world examples of profiling multithreaded C++ code. It shows what happens when you throw too many threads at a problem, how to measure performance with Tracy, and why smarter scheduling beats brute force. While the code is in C++, the takeaways apply to any performance-critical system.

Profiling React Native's internals can uncover bottlenecks and provide deep insights into native behavior. This guide walks through using the Tracy profiler to instrument React Native code, collect performance metrics, and identify optimization opportunities across iOS and Android.

Slow app startup times can frustrate users, especially on older devices or slower networks. Expo Atlas helps you peek inside your React Native app bundle to identify large dependencies and optimize performance, even if you're not using Expo.

When building React Native apps, it's tempting to re-implement native OS patterns and gestures from scratch. But this can lead to inconsistencies and performance issues, even if you use native code. A better approach is to leverage existing native components and libraries wherever possible, and only build fully custom UI when absolutely necessary.

Building web3 apps with React Native requires careful optimization. This guide shares practical tips to manage dependencies securely, use mobile-first libraries, and connect wallets efficiently for better performance and UX.

The GPU is the unsung hero behind the stunning visuals on our screens. This article dives into how GPUs render 2D and 3D graphics, from processing vertices and pixels to creating the final masterpiece that tricks our eyes into perceiving smooth animations.

React Native 0.64 adds support for the Hermes engine on iOS. This technical guide walks through the process of integrating Hermes with React Native, building on the work to compile Hermes for Apple platforms. It covers the key integration points, how to activate the engine, and what it looks like in practice.

Compiling Hermes for iOS involves configuring CMake to target Apple platforms and architectures. This guide walks through the key steps, from setting up the build pipeline to creating a universal framework that works seamlessly on both devices and simulators.

Unused native dependencies can slow down React Native app startup times. This guide shows how to use the depcheck tool to identify and remove unneeded dependencies, reducing app size and improving time-to-interactive by up to 17%.

Gestures and animations in React Native are getting a major upgrade thanks to react-native-gesture-handler and react-native-reanimated. This guide walks through building a smooth collapsible navigation bar that runs entirely on the UI thread, even with the JS thread blocked.

Profiling React Native apps with native tools like Instruments, Flipper, and Hermes Debugger on iOS and Android Profiler on Android can help identify performance issues and improve user experience. This guide walks through how to use these tools to measure CPU, memory, network usage and more to optimize your app's responsiveness.

Debugging the React Native bridge is crucial for optimizing performance. This guide shows how to use the MessageQueue module to spy on data passing between JavaScript and native code, so you can identify unnecessary communication that may be overloading the bridge and causing your app to freeze.

Extending large React apps can be tricky in practice. We walk through the options we considered for adding form validation to the EEDI educational platform, and how we landed on a "function as child" pattern to meet our requirements without heavy refactoring.

The React Compiler automatically optimizes component performance, reducing unnecessary re-renders and locking down dependencies. We walk through how it can significantly speed up apps without extra code hassle or bugs.

Optimizing your Android app's size is crucial for faster downloads, shorter startup times, and better user experience. This guide shares practical Gradle settings to reduce APK size, like enabling Proguard to remove unused code and building separate APKs per CPU architecture.

Bundling your React Native app's JavaScript code with Metro can slow down build times as your codebase grows. This guide explores alternative bundlers like Re.Pack, react-native-esbuild, and rnx-kit that offer more configurability and performance optimizations to help ship less code to users faster.

React Native gives you freedom to build apps with JavaScript, but not all libraries are optimized for mobile. Using non-mobile libraries can drain battery and slow performance. This guide shares tips for choosing mobile-first libraries that deliver fast, efficient experiences without compromising battery life.

Lottie and Rive are two popular tools for creating high-quality animations in mobile apps. This article compares their performance, file sizes, and developer experience to help you choose the best option for your project.

Profiling code is essential for uncovering performance bottlenecks. This guide walks through how to use Tracy profiler to measure execution times, identify hotspots, and optimize a React Native image processing module for faster speeds.

Optimizing SVGs can significantly reduce app size and improve rendering speed. This guide walks through how to use tools like SVGO to compress SVGs, measure performance impact, and automate optimization with GitHub Actions.

Hermes is a JavaScript engine optimized for mobile that can significantly improve your React Native app's startup time. By generating bytecode during build time and avoiding just-in-time compilation, Hermes reduces the time needed to execute your app's logic. Enabling Hermes is a simple configuration change that can lead to a faster, more responsive user experience.

Choosing the right JavaScript libraries is key to building fast, performant React Native apps. This guide shares practical tips for being selective about dependencies, analyzing bundle size impact, and using smaller specialized libraries to reduce load times.

Creating custom native libraries in React Native used to be complex, with tricky bridging between JavaScript and native code. But now, Nitro Modules make it easy to write performant native code in Swift, Kotlin, and C++ with minimal boilerplate. This article explores how Nitro Modules improve on the legacy Native Modules API and the newer Turbo Modules.

Building fast React Native apps requires finding the right balance between native code and JavaScript. This guide shares best practices for optimizing communication over the bridge, validating arguments, and keeping abstractions on the JS side to improve performance and maintainability.

Smooth 60FPS animations are crucial for a great user experience in React Native apps. This guide shares practical techniques to achieve performant animations, including using the native driver, gesture-driven animations with React Native Gesture Handler and Reanimated, and giving JS operations lower priority.

React Native 0.64 brings Hermes, a new JavaScript engine, to iOS. We tested it on a real-world app to see how it compares to the default JSC engine. The results? Hermes made the app start up to 40% faster, especially on older devices.

Higher-order components like FlatList and FlashList can significantly boost performance in React Native apps compared to basic components like ScrollView. We explore how they optimize rendering and layout measurement for long lists, and share tips to get the smoothest 60FPS scrolling.

Handling multiple native iOS views in React Native can be tricky. This guide walks through how to use refs to control specific native view instances and communicate between the JavaScript and native layers.

Real User Monitoring (RUM) is a powerful tool for identifying performance issues, but many companies struggle to turn the data into meaningful actions. This guide walks through how to use RUM to optimize app performance, detect problems early, and improve key business metrics like conversion rates.

React Native's New Architecture brings major changes to how the framework works under the hood. We explore the key components like Fabric, TurboModules, and JSI, and show how migrating can help boost performance and leverage new capabilities in React 18.

Code splitting is a powerful technique for optimizing React Native apps by creating multiple bundle files instead of one monolithic bundle. This article introduces the concept of code splitting and explores how it can improve performance, especially for modular apps or "super apps" built from mini apps.

React Native 0.64 brings Hermes, a JavaScript engine optimized for mobile apps, to iOS for the first time. We walk through the technical details of how the Callstack team worked with Facebook and Microsoft to compile Hermes for Apple platforms and integrate it with React Native.

Polygen is a new toolkit that brings WebAssembly to React Native, compiling WASM modules to native C code for near-native performance. It enables using CPU-intensive libraries from the web in React Native apps, with some current limitations. The project is under active development to expand platform support and WASI integration.

React Native Reanimated is a powerful but complex library for building smooth, 60fps animations in React Native apps. This deep dive explains the core concepts behind Reanimated, walking through how it allows you to declaratively define animation logic that runs on the native UI thread.

Nico Martin explains how Transformers.js uses WebGPU and ONNX to run AI in the browser, plus the limits of local models and on-device agents.

Marc Rousavy joins Mike Grabowski to unpack VisionCamera v5, Nitro Modules, the constraints API, migration work, and what changed for React Native camera apps.

Łukasz talks with Janic from App & Flow about React Native Ease, Core Animation, Reanimated trade-offs, and performant UI animation in React Native.

Marc Rousavy (Margelo) talks Nitro modules, native state, zero-copy data, Vision Camera, and why speed is only part of the story.

William Candillon talks about where Redraw fits next to Skia, from physics-based rendering to camera effects, AR, and new UI patterns.

Nicola Corti (Meta) explains the evolution of Static Hermes into Hermes V1, the performance boosts it ships, and the (experimental) path to making it the new default engine.

Riccardo Cipolleschi (Meta) explains why the New Architecture is now just The Architecture and how it serves as the foundation for concurrent rendering, DOM APIs, and Hermes V1.

Discover how Nx empowers teams to build and scale monorepos without losing their sanity, from selective testing to AI-powered workflows.

Even faster React Native apps? That's possible with Nitro Modules! Tune in to the conversation with their creator, Marc Rousavy.

Tune in to find out how the use of React Native and Re.Pack can impact organizational structure and how these tools help Klarna scale product development.

Get insights from Matt Hargett on derisking large-scale projects with React Native. Learn how to maximize optimization success and future-proof your app.

Scaling React Native across business growth stages: insights from Rafael Mendiola & Jakub Stadniczuk in a podcast episode.

Join us as we explore the latest developments in React Native performance optimization with experts from Expo and Callstack.

Get insights into profiling your React Native app from our experts in this podcast episode.

In April 2023, we enjoyed talking about performance optimization in the US. We went to San Francisco, Los Angeles and Detroit to meet some amazing folks from the React Native community - we loved the intense thought exchange there!

This episode provides insights into the most intriguing aspects of React Native. Check the podcast to find out what our special guests have to say!

Join Nicola Corti and Łukasz Chludziński as they discuss all about React Native's new architecture.

Listen to Mike Grabowski talk about React Native FastIO, a collection of primitives for working with data in React Native and its performance benefits.

Discover how Hermes boosts React Native performance on iOS and macOS, with insights into AOT, bytecode precompilation, and the future of Hermes support.

In this episode, we dive deep into the practicalities of using native modules across different ecosystems with Open Native. Our guest, Jamie Birch (@LinguaBrowse), the creator of React NativeScript, explains the pressing problems in this area and how Open Native aims to solve them.

Animations and performance: friends or foes? Tune in to learn how not to break your React Native app's user experience.

In this episode, we talk the current state of React & React Native, compare it to how things were 5 years ago and give advice to newcomers in the industry.

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

At reactCon, Satyajit Sahoo explores the design choices behind React Navigation 8 and the challenges of creating a navigation library that works across platforms.

Artur Morys-Magiera will cover efficient on-device LLMs in React Native, including runtimes, model selection, quantization, and platform constraints.

Szymon Chmal will show how Voltra brings iOS Live Activities and widgets to React Native without requiring developers to write native UI code.

Mike Grabowski will explain what changed for system-provided on-device AI after WWDC and what React Native developers can build with it.

Satyajit Sahoo will share the decisions and trade-offs behind React Navigation 8 and building a modern cross-platform navigation library.

See how Voltra lets React teams build iOS Live Activities and Dynamic Island UIs without Swift by translating JSX into SwiftUI under tight native limits.

Join Callstack engineers Szymon Chmal and Kewin Wereszczyński on May 21 at 5 PM to explore Redraw, a new 2D graphics library for WebGPU.

A recap of React Native 0.85, covering the new animation backend, DevTools improvements, and ecosystem takeaways.

React Native 0.84 introduces Hermes v1 by default, iOS prebuilt binaries, WebAssembly support, and improved tooling across the ecosystem.

How Voltra enables Live Activities and Dynamic Island views using React without writing Swift. A deep dive into iOS constraints and architecture.

New architecture adoption, Nitro modules, React Strict DOM, Hermes v1, and ecosystem shifts shaping React and React Native in 2026.

Learn how Voltra brings React to iOS Live Activities and Dynamic Island by translating JSX into SwiftUI through a custom React renderer.

React Universe Meetup lands in Berlin on January 29, 2026. Join Zalando and Callstack for an onsite React Native-focused evening.

Learn how to build iOS Live Activities and Dynamic Island experiences using pure JSX, no Swift or native code required.

Learn how Lynx.js uses a dual-threaded model, how its APIs work, and what it means for performance in this live session with Lukasz Chludzinski and Kewin Wereszczynski.

A recap of our live session exploring how Lynx.js splits work across a main thread and a background thread.

A hands-on look at Valdi, Snapchat’s new UI framework: setup, architecture, rendering model, and early developer impressions.

Łukasz Chludziński, Szymon Chmal, and Matt Hargett unpack Hermes V1, covering what’s new, what’s changing, and what’s ahead for React Native performance.

Catch up on everything from TanStack updates and Astro insights to Reanimated deep dive and even Swift for Android. Plus, we celebrate the 256th newsletter!

Learn how to add real-time LiveActivity updates to your Expo app using Swift native modules. In this stream, we implemented Apple’s Live Activities with Evan Bacon’s library, explored ActivityKit, and discussed cross-platform development with Solito 5 and Expo UI.

Learn how Ottrelite brings modern, cross-platform tracing to React Native; no source build needed, with deep backend and language support.

This week's livestream highlighted two major releases reshaping the React and React Native landscape: FlashList v2 and Vercel AI SDK 5.

This week was packed with insights on highly anticipated Reanimated 4, the power of Worklets, Screens and more.

Discover how to build and share native code in React Native using Node-API: faster builds, runtime agnostic, and language flexible.

View flattening, React 19 hooks, real DevTools tips-learn what actually helps your React Native app run faster.

Discover how Expensify defines and tracks performance metrics that actually impact user experience.

Learn to fix JS performance issues in React Native-from debounce bugs to Redux selectors, in this hands-on webinar with real code examples.

Learn how to integrate native libraries in React Native, without TurboModules. Robert shares a practical approach using WebAssembly and introduces PolyGen.

Missed the React Universe Meetup SF? Watch the livestream recording soon, talks on RN performance, optimization, and build-free workflows await.

Watch Callstack's webinar on React Native JS performance. Learn to fix bottlenecks, leaks & FPS issues from the 2025 Ultimate Guide authors.

Watch a webinar on optimizing React Native apps to learn the top 5 metrics every React Native team should track to improve performance, reduce load time, and boost user experience.

Join us for a deep dive into Polygen: Callstack Incubator's breakthrough in React Native development!

Find out about executing WASM in React Native, the challenges of JIT restrictions on iOS, and how Callstack's wasm2c solution enables performant native modules.

Learn how Callstack improved a React Native app’s performance and user ratings through a real-world audit. Watch the webinar to see how it was done.

Learn how to improve your React Native app's performance with practical tactics, metrics, and real-life case studies from Callstack experts.

Next.js is the default choice, but Astro offers strong competition in some areas. Let's compare their features and differences.