DEV Community: anubhuti chopra

React Native’s New Architecture: A Beginner-Friendly Guide to Faster, Smoother Apps

anubhuti chopra — Sat, 17 May 2025 12:07:16 +0000

React Native’s new architecture is a game-changer for mobile developers, offering a massive boost in performance, flexibility, and scalability. This shift is centered around three core technologies – Fabric, TurboModules, and JSI (JavaScript Interface) – which together provide a more seamless bridge between JavaScript and native code.

Why a New Architecture?

The old React Native bridge worked well, but it had some limitations:

Performance Issues: Communication between JavaScript and native code was slow and asynchronous.
High Memory Usage: The old bridge duplicated data, increasing memory usage.
Complex Debugging: It was hard to track bugs across the JS-native boundary.

The new architecture fixes these problems, providing a more responsive and efficient framework.

Key Components of the New Architecture

1. Fabric – The New Rendering System (Example: High-Performance UI Updates)

To understand how Fabric can make your UI more responsive, here’s a simple example of a component using React’s concurrent mode to handle intensive state updates efficiently.

import React, { useState, useTransition } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';

export default function App() {
    const [isPending, startTransition] = useTransition();
    const [count, setCount] = useState(0);

    const handleHeavyUpdate = () => {
        startTransition(() => {
            for (let i = 0; i < 5000; i++) {
                setCount((prev) => prev + 1);
            }
        });
    };

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Count: {count}</Text>
            <Button title="Perform Heavy Update" onPress={handleHeavyUpdate} />
            {isPending && <Text>Updating...</Text>}
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
    text: { fontSize: 24, marginBottom: 20 }
});

With Fabric, this component can handle frequent updates without lag, providing a smoother experience for your users.

Fabric is the new engine that drives how UI components are rendered. It’s faster because it talks to the native layer more directly.

Better Performance: Fabric uses React’s concurrent mode for faster updates.
Real-Time Layout: UI components respond immediately without waiting for the bridge.
Simpler Code: Easier to build complex animations and gestures.

2. TurboModules – Faster, More Flexible Native Modules (Example: Native Module Integration)

Here’s a simple example of creating a TurboModule for a native function. Suppose you want to expose a native method that returns the battery level on Android.

Create a Native Module (Java)

// BatteryModule.java
package com.yourapp;
import android.os.BatteryManager;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BatteryModule extends ReactContextBaseJavaModule {
    BatteryModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    public String getName() {
        return "BatteryModule";
    }

    @ReactMethod
    public void getBatteryLevel(Promise promise) {
        try {
            IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
            Intent batteryStatus = getReactApplicationContext().registerReceiver(null, ifilter);
            int level = batteryStatus.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
            promise.resolve(level);
        } catch (Exception e) {
            promise.reject("Error", e);
        }
    }
}

Use the Native Module (JavaScript)

import { NativeModules, Button, Text, View } from 'react-native';
import React, { useState } from 'react';

export default function App() {
    const [batteryLevel, setBatteryLevel] = useState(null);

    const fetchBatteryLevel = async () => {
        try {
            const level = await NativeModules.BatteryModule.getBatteryLevel();
            setBatteryLevel(level);
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Battery Level: {batteryLevel !== null ? batteryLevel + '%' : 'Unknown'}</Text>
            <Button title="Get Battery Level" onPress={fetchBatteryLevel} />
        </View>
    );
}

This demonstrates how to expose native functionality using TurboModules for faster, more direct communication.

TurboModules replace the old way of connecting to native modules. They are faster because they avoid the slow, serialized bridge communication.

On-Demand Loading: Load only what you need, when you need it.
Direct Access: No more slow JSON conversion – it’s all direct communication.
Smaller App Sizes: Load fewer modules, save memory.

3. JSI (JavaScript Interface) – The Backbone (Example: Direct Native Access)

JSI allows you to directly call native functions from JavaScript without a bridge. Here’s a simple example of using JSI to add two numbers in C++.

Create a JSI Module (C++)

// MyJSIModule.cpp
#include <jsi/jsi.h>
#include <react-native/jsi/jsilib.h>

using namespace facebook::jsi;

void install(Runtime &jsiRuntime) {
    auto addNumbers = Function::createFromHostFunction(
        jsiRuntime,
        PropNameID::forAscii(jsiRuntime, "addNumbers"),
        2,
        [](Runtime &rt, const Value &, const Value *args, size_t) -> Value {
            double a = args[0].asNumber();
            double b = args[1].asNumber();
            return Value(a + b);
        }
    );
    jsiRuntime.global().setProperty(jsiRuntime, "addNumbers", std::move(addNumbers));
}

Use the JSI Function (JavaScript)

import React, { useEffect, useState } from 'react';
import { Text, View, Button } from 'react-native';

export default function App() {
    const [result, setResult] = useState(0);

    useEffect(() => {
        const sum = global.addNumbers(10, 20);
        setResult(sum);
    }, []);

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Result: {result}</Text>
            <Button title="Calculate 10 + 20" onPress={() => setResult(global.addNumbers(10, 20))} />
        </View>
    );
}

This code directly calls the C++ function from JavaScript, providing near-instant performance.

JSI is the heart of the new architecture. It directly connects JavaScript to native code, removing the old bridge entirely.

Faster Calls: Instant communication with native code.
Better Memory Management: Share data without copying it.
Cross-Engine Support: Use different JS engines like V8 or Hermes.

How to Migrate to the New Architecture

Step 1: Prepare Your Project

First, make sure you’re using React Native 0.72+:

npx react-native upgrade

Step 2: Enable the New Architecture

Update your android/gradle.properties to enable the new architecture:

newArchEnabled=true

And for iOS, ensure you have the latest Podfile settings:

use_react_native!(:new_architecture => true)

Step 3: Migrate Your Native Modules

If you have custom native modules, you'll need to rewrite them as TurboModules. This involves updating your C++ bindings and ensuring they are JSI-compliant.

Step 4: Test and Optimize

With the new architecture enabled, test your app for potential breaking changes and performance improvements. Use tools like Flipper for debugging and performance analysis.

Benefits of the New Architecture

Improved Performance: Faster app startup and smoother UI.
Smaller Bundle Sizes: Reduced memory footprint with on-demand module loading.
Cross-Platform Consistency: More predictable performance across iOS and Android.
Easier Maintenance: Simplified module management and code sharing.

Real-World Project Example – Building a Native Module for Battery Health

To bring everything together, let’s walk through a small real-world project that leverages the new architecture. We’ll create a native module to get the battery health of the device.

Step 1: Creating the Native Module (Java)

Create a new file in your Android project:

// BatteryHealthModule.java
package com.yourapp;
import android.os.BatteryManager;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BatteryHealthModule extends ReactContextBaseJavaModule {
    BatteryHealthModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    public String getName() {
        return "BatteryHealthModule";
    }

    @ReactMethod
    public void getBatteryHealth(Promise promise) {
        try {
            IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
            Intent batteryStatus = getReactApplicationContext().registerReceiver(null, ifilter);
            int health = batteryStatus.getIntExtra(BatteryManager.EXTRA_HEALTH, BatteryManager.BATTERY_HEALTH_UNKNOWN);
            String status;
            switch (health) {
                case BatteryManager.BATTERY_HEALTH_GOOD:
                    status = "Good";
                    break;
                case BatteryManager.BATTERY_HEALTH_OVERHEAT:
                    status = "Overheat";
                    break;
                case BatteryManager.BATTERY_HEALTH_DEAD:
                    status = "Dead";
                    break;
                case BatteryManager.BATTERY_HEALTH_OVER_VOLTAGE:
                    status = "Over Voltage";
                    break;
                default:
                    status = "Unknown";
            }
            promise.resolve(status);
        } catch (Exception e) {
            promise.reject("Error", e);
        }
    }
}

Step 2: Using the Native Module (JavaScript)

import { NativeModules, Button, Text, View } from 'react-native';
import React, { useState } from 'react';

export default function App() {
    const [batteryHealth, setBatteryHealth] = useState(null);

    const fetchBatteryHealth = async () => {
        try {
            const health = await NativeModules.BatteryHealthModule.getBatteryHealth();
            setBatteryHealth(health);
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Battery Health: {batteryHealth !== null ? batteryHealth : 'Unknown'}</Text>
            <Button title="Get Battery Health" onPress={fetchBatteryHealth} />
        </View>
    );
}

Step 3: Testing the Module

Run your app and press the Get Battery Health button. You should see the current battery health displayed on the screen.

Benefits of This Example

Direct Native Access: Immediate access to battery health without bridging delays.
Efficient Memory Use: No unnecessary data copying, thanks to TurboModules.
Scalability: Easily extend this module to include more battery-related metrics.

Debugging React Native’s New Architecture

Debugging your app with the new architecture can feel a bit different, but with the right tools and approach, it’s straightforward and even fun!

1. Use Flipper – The Ultimate Debugging Tool

Flipper is the official React Native debugger that supports the new architecture:

Why Flipper?
It shows logs, inspects network calls, views your component hierarchy, and profiles performance.
How to set up Flipper:

Flipper is integrated by default in React Native 0.72+. Just open Flipper on your machine and connect your device/emulator.

Inspect Fabric UI Components: The new Fabric architecture exposes detailed UI component trees you can inspect in Flipper’s React DevTools plugin.

2. Enable Debugging in React Native

For JavaScript debugging, use Hermes Debugger or Chrome Debugger:
- Hermes debugger is faster and supports the new architecture better.
- To enable, add in your metro.config.js:

  module.exports = {
    transformer: {
      experimentalImportSupport: false,
      inlineRequires: true,
    },
  };

Use console.log as usual, but keep an eye on Flipper’s logs for native module outputs.

3. Debug TurboModules

Verify if TurboModules are loaded by inspecting your native modules in Flipper.
Use Android Studio or Xcode native debuggers to step through native code.
Add explicit logging in native modules to trace method calls.

4. Debugging JSI

Because JSI runs native code directly, debugging might require native debugger tools.
Use lldb (iOS) or gdb (Android) to debug C++ code.
Use console.log or logging macros in C++ to trace calls.

5. Performance Profiling

Use Flipper's React DevTools profiler to track rendering performance with Fabric.
Use native profilers (Android Profiler, Instruments on iOS) to find bottlenecks in native modules.

6. Common Debugging Tips

Always clear caches after switching architecture modes:

  npm start --reset-cache

Rebuild your app after enabling the new architecture.
Monitor crash logs closely – sometimes native module errors bubble up asynchronously.

Unstoppable Debugging Mastery in React Native

anubhuti chopra — Sun, 11 May 2025 11:57:55 +0000

Debugging is an essential skill for any developer, and in the world of React Native with TypeScript, it becomes even more critical. Understanding the right tools and strategies can save you hours of frustration and ensure a smoother development experience. In this guide, we’ll explore the most effective ways to debug your React Native applications.

1. Common Debugging Tools

React Native Debugger

A standalone app that integrates well with React Native and provides a powerful combination of tools like Redux DevTools, Network Inspection, and more. To use it:

Install it using React Native Debugger
Start it before running your app.
Open the in-app developer menu (Cmd + D or Cmd + M for macOS, Ctrl + M for Windows) and select Debug.

Flipper

Meta's official debugging tool for React Native, providing features like network inspection, crash logs, performance profiling, and more. Setup is straightforward:

Ensure you have the latest React Native version.
Install the Flipper app from Flipper website.
Add the Flipper plugin to your project if required.

VS Code Debugger

Leverage the powerful VS Code debugging capabilities:

Install the React Native Tools extension.
Add a .vscode/launch.json configuration.
Set breakpoints and start debugging directly in your IDE.

2. Essential Debugging Techniques

Console Logging

While basic, console.log() remains one of the quickest ways to understand what’s happening in your code. Use it wisely to avoid clutter.

React DevTools

Inspect the component tree, check props, and monitor state changes. It integrates seamlessly with React Native and can be a game-changer for UI debugging.

Error Boundaries

Use error boundaries to catch runtime errors gracefully and prevent your app from crashing.

import React, { Component, ErrorInfo } from 'react';

class ErrorBoundary extends Component {
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('Error caught:', error, info);
  }

  render() {
    return this.props.children;
  }
}

TypeScript's Strict Mode

Enable strict mode in your tsconfig.json to catch type errors early and enforce best practices.

{
  "compilerOptions": {
    "strict": true
  }
}

Network Debugging

Use tools like Axios interceptors or Flipper's network plugin to inspect and debug API calls.

Hot and Fast Refresh

Take advantage of Fast Refresh for instant feedback during development.

Redux DevTools

If you're using Redux, integrate the Redux DevTools for better state inspection and time-travel debugging.

Clearing Cache

Sometimes caching issues can cause unexpected behavior. Use the following command to clear the cache:

npx react-native start --reset-cache

3. Advanced Tips

Profiling with Flipper - Track performance bottlenecks.
Remote JS Debugging - Use the Chrome DevTools for advanced JavaScript debugging.
React Native CLI Options - Use npx react-native log-android and npx react-native log-ios for platform-specific logs.
Performance Optimization - Use the useMemo and useCallback hooks wisely to prevent unnecessary renders.
Memory Leak Detection - Use tools like why-did-you-render to catch unwanted re-renders and memory leaks.
Crash Reporting - Use Sentry or Firebase Crashlytics for real-time crash analytics.

4. Final Thoughts

Effective debugging is a mix of using the right tools and developing a keen sense for identifying problems early. Mastering these techniques will not only save you time but also make you a more confident React Native developer.

Happy debugging! 🚀

React Native 0.79: Hold Onto Your Keyboards! 🚀

anubhuti chopra — Thu, 01 May 2025 07:18:41 +0000

React Native 0.79 (April 2025) is here, and it’s a doozy. This release is packed with performance wins and developer-friendly tweaks across the board. In plain terms: it just got way cooler to build RN apps. Metro (the JS bundler) now starts up around 3× faster thanks to deferred hashing, and it fully supports modern package.json exports/imports fields out of the box. Android apps launch much quicker (we’re talking ~400ms shaved off in some tests), and iOS native modules can be registered with Swift-friendly codegen, cutting boilerplate.

Under the hood, RN’s JavaScriptCore (JSC) engine has been moved into a community package for faster updates, and legacy Chrome remote debugging is gone in favor of newer DevTools.

Plus, React 19 is the default React version now – unlocking shiny new hooks like Actions and useOptimistic. And if you’ve been following along, React Native’s “New Architecture” (Fabric/TurboModules) is already on by default and now rock-solid.

Bottom line: RN 0.79 is all about speed, modern tooling, and slick developer experiences. Let’s dive into the highlights! 🎉

⚡ Metro Bundler: Turbocharged

First up, Metro got a serious turbocharge. RN 0.79 ships Metro 0.82, which uses deferred hashing to cut cold-start times by about three times (even more in big projects/monorepos).In practice, your yarn start will spin up almost instantly compared to before. Metro 0.82 also now officially honors the exports and imports fields in package.json, which means you can use modern, standards-compliant module resolution without workarounds. In short – wait times are slashed and your project’s module graph just got a whole lot cleaner. Faster bundling means more time coding and less time staring at the terminal!😎

📱 Android: Launch at Ludicrous Speed

Android developers, rejoice! 0.79 changes how the JS bundle is packaged in your APKs. By default now, RN doesn’t compress the JS bundle in the APK Why? Previously Android would have to unzip that bundle on startup, causing delays. Now the bundle is just stored uncompressed on the device, so the app pops open much faster. In fact, Discord’s team saw a ~400ms (12%) startup speedup on a mid-tier phone (Samsung A14) with just this one tweak. (There’s a tradeoff: a slightly bigger on-device footprint, but APKs downloaded from the Play Store remain compressed, so users don’t pay the price on install.) You can even toggle this via enableBundleCompression in app/build.gradle if you want to balance size vs speed. The bottom line – way faster Android cold starts with virtually no downside.

🍎 iOS: Swift Modules Made Easy

iOS got some smooth upgrades too. 0.79 revamps how native modules hook into the RN app. Instead of writing a bunch of registration code in Objective-C, you now add a modulesProvider section in your app’s package.json. In practice, that means Swift and ObjC native modules can self-register via the codegen system, with zero changes to your AppDelegate. This new modulesProvider field lets you define the JS name and Swift/ObjC provider class in JSON, and React Native handles the rest. No more wrestling with headers or boilerplate – native modules just slide in seamlessly. (Good news if you love Swift: the old 0.77 limitation—where pure C++ modules couldn’t register on a Swift AppDelegate—is now history. Everything just works without extra glue code.)

🔧 Under the Hood: Modern Engines & Debugging

Under the hood, RN 0.79 is trimming fat and updating engines. JavaScriptCore (JSC), the default JS engine on iOS/Android, is being spun out into its own community package (@react-native-community/javascriptcore). What does this mean for you? RN core becomes leaner, and the JSC engine can be updated on its own schedule to grab new language features and security fixes. (If you’re using Hermes instead of JSC, nothing changes – Hermes users are unaffected.) On the debugging side, say goodbye to the old-school Chrome remote debugger. RN 0.79 removes Remote JS Debugging via Chrome. The team recommends using the built-in React Native DevTools or other modern tools instead. In other words, dump the buggy round-trip hacks and use the official DevTools console and React inspector – they’re more stable and fully featured. It might feel like the end of an era, but it’s for the better: cleaner toolchain, better breakpoints, and no more mysterious Chrome handshake issues.

🎉 React 19: The Future Is Now

Remember React 18? Well, now RN has React 19 as the engine under the hood (after a quick app upgrade). This brings some flashy new React features into your RN apps. Think built-in async transitions (Actions) and hooks like useOptimistic for easy optimistic UI updates. For example, Actions lets you define a function whose work happens in a suspendable, concurrent way, handling pending/error states for you. useOptimistic helps show a “predictive” UI state while waiting for a server response. You can even pass refs as props instead of wrapping in forwardRef, thanks to React 19. Just a heads-up: upgrading means you need to adjust anything that used removed APIs (like legacy propTypes), but most apps will seamlessly gain the new hooks and improvements. In short, RN 0.79 finally puts the latest React magic in your toolbox.

🤖 New Architecture: Rock Solid and Ready

If you’ve been following React Native’s progress, you know about the “New Architecture” (Fabric renderer + TurboModules). Good news: it’s the default now and fully stable. Since RN 0.76, the new architecture has been enabled by default in new projects. By 0.79 it’s considered production-ready. That means if you’ve already opted in, you get its benefits: smoother UI (Fiber-based mounting), better concurrency, and faster native module bridging. The core is now all set up for Fabric, so your UI interactions and thread-hopping native calls are as performant as they can be. Think of it as the solid foundation that future RN features will build on — and in 0.79 it’s completely baked in and battle-tested.

🎨 Styling and Other Goodies

Finally, let’s talk style (literally!). RN 0.79 keeps up all the recent strides in layout and style props. For instance, earlier versions (like 0.76) already introduced new CSS-like style props such as boxShadow and filter, and 0.77 added flexbox gap support and percentage-based sizing. These aren’t new in 0.79 per se, but they’re fully there for you to use. This means crafting polished UIs is easier: shadows, blurs, and layout gap control are all part of the toolkit now. Plus, the release includes tons of bug fixes and small upgrades under the hood (like dozens of internal modules moving to modern export syntax). It’s the kind of release where everything feels just a bit smoother and snappier.

💡 Key Takeaways

Metro bundler is insanely faster: cold-start is ~3× quicker with deferred hashing, and modern package.json exports/imports work out-of-the-box.
Android startup is much faster: RN now ships uncompressed JS bundles by default, shaving ~400ms (12%) off time-to-interactive on tested devices.
iOS modules registration is simpler: add a modulesProvider entry in package.json and Swift/ObjC native modules auto-register (no AppDelegate edits).
JSC engine has moved to a community package. This modularizes RN core so JS engine updates (and new JS features) can come faster.
Chrome remote debugging is gone.Use React Native DevTools or other modern debuggers instead – they’re more stable and feature-rich.
React 19 support: RN 0.79 runs React 19, unlocking features like async Actions, useOptimistic, and passing ref props (after updating your app for any removed APIs).
New Architecture (Fabric/Turbo) is now default and battle-tested.Enjoy smoother rendering and faster native modules out-of-the-box.
Better styling: RN’s style system keeps getting richer. New props like boxShadow and filter are available, so crafting nice UIs is even easier.

React Native 0.79 isn’t about flashy new widgets – it’s about a leaner, meaner, faster toolkit for serious app builders. Faster bundling, snappier startups, and modern internals mean you spend more time building and less time wrestling with plumbing. So grab 0.79, upgrade your app, and enjoy the turbocharged ride! Happy coding! 🎉

🚀 React Native Performance Optimization Tips I Wish I Knew Earlier

anubhuti chopra — Thu, 17 Apr 2025 06:53:50 +0000

After building React Native apps for years, I’ve come to realise something painful: most performance issues don’t scream. They whisper.

Your app might work fine on your device — smooth animations, fast loads — until one day a user with an older Android phone opens it and it feels like it's running underwater. That’s when the complaints start rolling in. Been there? Yeah, me too.

So here’s a list of performance tips I wish someone had tattooed on my screen earlier in my React Native journey. These are real-world lessons, not theoretical fluff — and they’ve saved me more than once.

1. Avoid Anonymous Functions in JSX

It’s tempting to inline logic, especially when the function is
short. But anonymous functions in your render tree trigger
unnecessary re-renders.

// ❌ This creates a new function every render
<Button onPress={() => doSomething()} />

// ✅ Better: use useCallback
const handlePress = useCallback(() => {
  doSomething();
}, []);

<Button onPress={handlePress} />

Even small optimizations like this can make a noticeable difference when you're rendering long lists or complex UI.

2. Use FlatList Instead of ScrollView for Lists

This one’s simple but often overlooked. When rendering large
datasets, always use FlatList — it’s virtualized, meaning it only
renders what’s visible on the screen.

Key props to fine-tune performance:

 <FlatList
   data={data}
   initialNumToRender={10}
   maxToRenderPerBatch={5}
   windowSize={10}
   removeClippedSubviews={true}
 />

Avoid ScrollView for dynamic or long content. It renders everything,
which kills performance.

3. Don’t Overuse useEffect

I see a lot of devs use useEffect as a default hook for everything data fetching, logging, side effects. It’s powerful, but overuse can lead to memory leaks, double-fetches, and unnecessary re-renders.

Be intentional. Sometimes, derived state or simple conditional logic is all you need. And don’t forget to clean up your effects.

useEffect(() => {
  const subscription = doSomething();
  return () => {
    subscription?.unsubscribe();
  };
}, []);

4. Memoization is Your Friend

React renders are cheap — until they’re not.

Use:
React.memo() for functional components

useMemo() for expensive calculations

useCallback() for functions passed as props

But don’t go overboard — memoization has its own cost. Use it strategically.

5. Optimize Images

Unoptimized images are one of the biggest silent killers of performance, especially on slower networks.

Here’s what helped:

Use react-native-fast-image — better caching and decoding

Compress images before shipping

Lazy load images when possible (e.g., with onEndReached in FlatList)

6. Turn On Hermes (Seriously)

Hermes is a JavaScript engine optimized for React Native on Android. If your app is sluggish on Android, enabling Hermes can dramatically reduce load times and memory usage.

How to enable it:

android {
  ...
  defaultConfig {
    ...
    jscFlavor: 'org.webkit:android-jsc-intl:+'
  }
  buildTypes {
    release {
      ...
      shrinkResources true
      minifyEnabled true
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
}

Enable in android/app/build.gradle and rebuild. You'll feel the difference, especially on older Android devices.

7. Trim the Fat: Dependencies & JS Bloat

It’s easy to add another library to solve a problem — but every dependency adds to your bundle size and startup time.

✅ Tips:

Audit dependencies regularly

Remove unused polyfills

Avoid dev tools in production (e.g., redux-logger, Flipper, etc.)

Use why-did-you-render during dev to find unnecessary renders and bloat.

8. Profile Your App Like a Detective

Don't guess. Measure.

Tools I recommend:

Flipper – React DevTools + performance monitoring

Android Profiler – CPU & memory usage

Xcode Instruments – for iOS diagnostics

React DevTools – check component re-renders

Spend time here. You’ll be surprised where bottlenecks hide.

9. Use Native Driver in Animations

React Native’s JS thread is fragile — animations that rely on it can easily get choppy. When using Animated, always enable the native driver:

Animated.timing(animatedValue, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

Or go further and explore Reanimated 3, which is designed to run animations entirely on the native thread.

10. Prefer Lightweight Libraries

Every dependency has a cost.

Here’s what I use in place of heavier tools:

Zustand or Jotai instead of Redux (for smaller apps)

react-native-mmkv instead of AsyncStorage

React Query or SWR instead of hand-rolled fetch logic

These small shifts have made my apps leaner and faster.

✅ Final Thoughts
Performance isn’t about perfection — it’s about awareness.

When you know what to look for, and how React Native works under the hood, it becomes easier to write faster, smoother apps from the start. The good news? You don’t need to be a wizard. You just need the right habits.

Hope these tips help you avoid the mistakes I made. Got a performance win or horror story? Drop it in the comments — I’d love to hear it!