DEV Community: Sharad K

React Native Skia: The Future of High-Performance UI

Sharad K — Tue, 01 Jul 2025 15:43:06 +0000

React Native Skia: The Future of High-Performance UI

React Native has revolutionized mobile app development, but when it comes to creating complex animations and custom graphics, developers often hit performance walls. Enter React Native Skia – a game-changing library that brings Google's powerful Skia graphics engine directly to your React Native apps, enabling buttery-smooth 60fps animations and stunning visual effects.

What is React Native Skia?

React Native Skia is a 2D graphics library that provides direct access to Skia's rendering capabilities on both iOS and Android. Unlike traditional React Native animations that rely on the JavaScript bridge, Skia renders everything natively on the UI thread, eliminating performance bottlenecks and enabling truly smooth animations.

Why Skia is Taking Over

🚀 Native Performance

Skia runs directly on the native thread, bypassing the JavaScript bridge entirely. This means your animations run at true 60fps without frame drops.

🎨 Unlimited Creative Freedom

Create complex shapes, gradients, filters, and effects that would be impossible or extremely difficult with standard React Native components.

📊 Perfect for Data Visualization

Build interactive charts, graphs, and dashboards that respond smoothly to user interactions.

🔧 Developer-Friendly API

Skia's declarative API feels natural to React developers, making complex graphics surprisingly approachable.

Getting Started with React Native Skia

First, install the library:

npm install @shopify/react-native-skia react-native-reanimated

# For iOS
cd ios && pod install

Example 1: Creating a Smooth Animated Circle

Let's start with a simple but smooth animated circle that pulses:

import React from 'react';
import {useEffect} from "react";
import {Canvas, Circle} from "@shopify/react-native-skia";
import {
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

export const AnimatedCircle = () => {
  const radius = useSharedValue(50);

  useEffect(() => {
    radius.value = withRepeat(
      withTiming(80, { duration: 1000 }),
      -1,
      true
    );
  }, []);

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle
        cx={150}
        cy={150}
        r={radius}
        color="lightblue"
      />
    </Canvas>
  );
};

This creates a circle that smoothly grows and shrinks in an infinite loop – something that would cause performance issues with traditional Animated API at scale.

Example 2: Interactive Progress Ring

Here's a more practical example – an interactive progress ring that responds to touch:

import React, { useState } from 'react';
import { Canvas, Circle, Path, Skia } from '@shopify/react-native-skia';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';

interface ProgressRingProps {
  size?: number;
  strokeWidth?: number;
  color?: string;
}

const ProgressRing: React.FC<ProgressRingProps> = ({ size = 200, strokeWidth = 20, color = '#007AFF' }) => {
  const [progress, setProgress] = useState(0);
  const center = size / 2;
  const radius = center - strokeWidth / 2;

  const createArcPath = (progressValue: number) => {
    const path = Skia.Path.Make();
    const startAngle = -Math.PI / 2;
    const endAngle = startAngle + (progressValue * 2 * Math.PI);

    if (progressValue > 0) {
      path.addArc(
        { x: strokeWidth / 2, y: strokeWidth / 2, width: radius * 2, height: radius * 2 },
        (startAngle * 180) / Math.PI,
        ((endAngle - startAngle) * 180) / Math.PI
      );
    }
    return path;
  };

  const updateProgress = (value: number) => {
    setProgress(Math.max(0, Math.min(1, value)));
  };

  const panGesture = Gesture.Pan()
    .onUpdate((e) => {
      const x = e.x - center;
      const y = e.y - center;
      const angle = Math.atan2(y, x) + Math.PI / 2;
      const normalizedAngle = angle < 0 ? angle + 2 * Math.PI : angle;
      const progressValue = normalizedAngle / (2 * Math.PI);
      runOnJS(updateProgress)(progressValue);
    });

  return (
    <GestureDetector gesture={panGesture}>
      <Canvas style={{ width: size, height: size }}>
        <Circle
          cx={center}
          cy={center}
          r={radius}
          style="stroke"
          strokeWidth={strokeWidth}
          color="#E0E0E0"
        />
        {progress > 0 && (
          <Path
            path={createArcPath(progress)}
            style="stroke"
            strokeWidth={strokeWidth}
            strokeCap="round"
            color={color}
          />
        )}
      </Canvas>
    </GestureDetector>
  );
};

export {ProgressRing};

Example 3: Real-Time Chart Animation

One of Skia's strongest use cases is creating smooth, interactive charts:

import React, { useEffect } from 'react';
import { Canvas, Path, Skia } from '@shopify/react-native-skia';
import { useSharedValue, withTiming, useDerivedValue, Easing } from 'react-native-reanimated';

const AnimatedLineChart = ({ data }: { data: number[] }) => {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = 0;
    progress.value = withTiming(1, { duration: 2000, easing: Easing.out(Easing.cubic) });
  }, [data]);

  const path = useDerivedValue(() => {
    const p = Skia.Path.Make();
    if (!data.length) return p;

    const max = Math.max(...data);
    const min = Math.min(...data);
    const range = max - min || 1;
    const totalProgress = progress.value * (data.length - 1);
    const completeSegments = Math.floor(totalProgress);
    const partialProgress = totalProgress - completeSegments;

    const getPoint = (i: number) => ({
      x: (i / (data.length - 1)) * 300,
      y: 200 - ((data[i] - min) / range) * 200
    });

    const start = getPoint(0);
    p.moveTo(start.x, start.y);

    for (let i = 1; i <= completeSegments && i < data.length; i++) {
      const curr = getPoint(i);
      const prev = getPoint(i - 1);
      const cp1x = prev.x + (curr.x - prev.x) * 0.4;
      const cp2x = prev.x + (curr.x - prev.x) * 0.6;
      p.cubicTo(cp1x, prev.y, cp2x, curr.y, curr.x, curr.y);
    }

    if (partialProgress > 0 && completeSegments + 1 < data.length) {
      const curr = getPoint(completeSegments + 1);
      const prev = getPoint(completeSegments);
      const endX = prev.x + (curr.x - prev.x) * partialProgress;
      const endY = prev.y + (curr.y - prev.y) * partialProgress;
      const cp1x = prev.x + (curr.x - prev.x) * 0.4 * partialProgress;
      const cp2x = prev.x + (curr.x - prev.x) * 0.6 * partialProgress;
      p.cubicTo(cp1x, prev.y, cp2x, endY, endX, endY);
    }

    return p;
  });

  return (
    <Canvas style={{ width: 300, height: 200 }}>
      <Path path={path} color="#2196F3" style="stroke" strokeWidth={4} strokeCap="round" />
    </Canvas>
  );
};

export default AnimatedLineChart;
// Usage
const chartData = [10, 25, 15, 40, 30, 55, 45, 60];
<AnimatedLineChart data={chartData} />

Demo

Performance Benefits in Action

Traditional React Native animations often struggle with:

Frame drops during complex animations
JavaScript bridge bottlenecks when updating multiple elements
Limited styling options for custom graphics

React Native Skia solves these issues by:

Running animations on the UI thread at native speeds
Providing direct access to the graphics pipeline
Offering unlimited creative possibilities with custom shapes and effects

When to Use React Native Skia

Perfect for:

Custom charts and data visualizations
Complex animations and transitions
Image processing and filters
Games and interactive graphics
Custom UI components that need pixel-perfect control

Maybe overkill for:

Simple fade/slide animations
Standard UI components
Static layouts

Getting the Most Out of Skia

Performance Tips:

Use shared values for animations instead of state
Minimize re-renders by using useDerivedValue
Batch updates when possible
Profile your animations to identify bottlenecks

Best Practices:

Start simple and build complexity gradually
Leverage Skia's built-in optimizations
Use gestures for interactive elements
Cache complex calculations

The Future is Smooth

React Native Skia represents a fundamental shift in how we think about mobile app UI. By bringing native graphics performance to React Native, it opens up possibilities that were previously reserved for native development.

Whether you're building the next great data visualization app, creating engaging animations, or just want your app to feel incredibly smooth, React Native Skia provides the tools to make it happen – all while maintaining the developer experience you love about React Native.

The future of mobile UI is smooth, performant, and beautiful. With React Native Skia, that future is available today.

Ready to dive deeper? Check out the official React Native Skia documentation and start building your next smooth, stunning mobile experience.

🚀 Unlocking React Native Speed: TurboModules, JSI, and Hermes Explained

Sharad K — Sat, 28 Jun 2025 06:06:41 +0000

Unlocking React Native Speed: TurboModules, JSI, and Hermes Explained

A comprehensive guide to optimizing React Native apps in 2025 with cutting-edge tools and techniques

Introduction
The Performance Challenge
Hermes: The Game-Changing JavaScript Engine
TurboModules: Redefining Native Communication
JSI: Direct JavaScript-to-Native Interface
Practical Optimization Techniques
Performance Monitoring and Debugging
Real-World Implementation
Conclusion

Introduction

React Native has come a long way since its inception, and 2025 marks a pivotal year for mobile app performance. With the introduction of revolutionary technologies like Hermes, TurboModules, and JSI (JavaScript Interface), React Native is finally delivering on its promise of native-level performance while maintaining the developer experience that made it popular.

The gap between React Native and native app performance has significantly narrowed, making it an increasingly attractive choice for enterprises and startups alike. This comprehensive guide explores the cutting-edge tools and techniques that are transforming React Native performance in 2025.

The Performance Challenge

Traditional React Native Bottlenecks

React Native's original architecture introduced several performance bottlenecks:

Bridge Communication: Asynchronous serialization between JavaScript and native threads
JavaScript Engine Limitations: JavaScriptCore wasn't optimized for mobile
Memory Overhead: Inefficient garbage collection and memory management
Startup Time: Slow app initialization due to bundle parsing

The Evolution Toward Speed

The React Native team has systematically addressed these issues through architectural improvements:

New Architecture: Complete reimagining of the rendering system
Fabric Renderer: Synchronous and thread-safe UI operations
Hermes Engine: Mobile-optimized JavaScript execution
TurboModules: Lazy-loaded, type-safe native modules
JSI: Direct JavaScript-to-native communication

Hermes: The Game-Changing JavaScript Engine

What is Hermes?

Hermes is Facebook's open-source JavaScript engine specifically designed for React Native applications. Unlike traditional engines like JavaScriptCore or V8, Hermes is optimized for mobile constraints and React Native's specific use cases.

Key Features and Benefits

Ahead-of-Time Compilation

// Traditional JIT compilation happens at runtime
// Hermes pre-compiles JavaScript to bytecode

// This reduces:
// - App startup time by 50-70%
// - Memory usage by 20-30%
// - APK/IPA size optimization

Improved Garbage Collection

Generational garbage collector
Reduced pause times
Better memory efficiency
Predictable performance characteristics

Mobile-First Design

Optimized for ARM processors
Reduced memory footprint
Battery-efficient execution
Faster cold starts

Enabling Hermes in Your Project

For New Projects (React Native 0.70+)

// metro.config.js
module.exports = {
  transformer: {
    hermesCommand: require.resolve('hermes-engine/package.json'),
  },
};

For Android (android/app/build.gradle)

project.ext.react = [
    enableHermes: true
]

For iOS (Podfile)

use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

Performance Measurements

Real-world Hermes performance improvements:

Startup Time: 15-50% faster app initialization
Memory Usage: 20-40% reduction in RAM consumption
Bundle Size: 25-35% smaller bytecode vs. JavaScript
TTI (Time to Interactive): 30-60% improvement

TurboModules: Redefining Native Communication

Understanding the Bridge Problem

Traditional React Native used an asynchronous bridge for JavaScript-native communication:

// Old Bridge Architecture
NativeModule.someMethod(param1, param2, (result) => {
  // Callback executed asynchronously
  // Data serialized/deserialized
  // Performance bottleneck for frequent calls
});

TurboModules Solution

TurboModules provide synchronous, type-safe, and lazy-loaded native modules:

// TurboModule Implementation
import {NativeSampleModule} from './specs/NativeSampleModule';

// Direct, synchronous calls
const result = NativeSampleModule?.getValue() ?? 0;

// Type safety built-in
interface Spec extends TurboModule {
  getValue(): number;
  setValue(value: number): void;
  getConstants(): {
    PI: number;
    E: number;
  };
}

Creating a TurboModule

1. Define the Specification

// NativeSampleModule.ts
import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  multiply(a: number, b: number): number;
  getDeviceInfo(): {
    model: string;
    version: string;
  };
}

export default TurboModuleRegistry.getEnforcing<Spec>('SampleModule');

2. Native Implementation (iOS)

// SampleModule.h
#import <React/RCTBridgeModule.h>
#import <React/RCTTurboModule.h>

@interface SampleModule : NSObject <RCTBridgeModule, RCTTurboModule>
@end

// SampleModule.mm
#import "SampleModule.h"
#import <React/RCTUtils.h>

@implementation SampleModule

RCT_EXPORT_MODULE()

- (NSNumber *)multiply:(double)a b:(double)b {
    return @(a * b);
}

- (NSDictionary *)getDeviceInfo {
    return @{
        @"model": [[UIDevice currentDevice] model],
        @"version": [[UIDevice currentDevice] systemVersion]
    };
}

@end

3. Native Implementation (Android)

// SampleModule.java
public class SampleModule extends ReactContextBaseJavaModule implements TurboModule {

    @ReactMethod(isBlockingSynchronousMethod = true)
    public double multiply(double a, double b) {
        return a * b;
    }

    @ReactMethod(isBlockingSynchronousMethod = true)
    public WritableMap getDeviceInfo() {
        WritableMap info = Arguments.createMap();
        info.putString("model", Build.MODEL);
        info.putString("version", Build.VERSION.RELEASE);
        return info;
    }
}

TurboModule Benefits

Performance: 2-3x faster than bridge calls
Type Safety: Compile-time type checking
Lazy Loading: Modules loaded only when needed
Synchronous Execution: No callback complexity
Better DevX: Improved debugging and development experience

JSI: Direct JavaScript-to-Native Interface

What is JSI?

JavaScript Interface (JSI) is a lightweight API that enables direct communication between JavaScript and native code, bypassing the traditional bridge entirely.

JSI Architecture

// C++ JSI Implementation
#include <jsi/jsi.h>

using namespace facebook::jsi;

class DatabaseManager : public HostObject {
public:
    Value get(Runtime& runtime, const PropNameID& name) override {
        std::string propertyName = name.utf8(runtime);

        if (propertyName == "query") {
            return Function::createFromHostFunction(
                runtime,
                PropNameID::forAscii(runtime, "query"),
                1,
                [](Runtime& runtime, const Value& thisValue, const Value* arguments, size_t count) -> Value {
                    // Direct native code execution
                    std::string sql = arguments[0].getString(runtime).utf8(runtime);
                    auto result = executeQuery(sql);
                    return String::createFromUtf8(runtime, result);
                }
            );
        }

        return Value::undefined();
    }
};

// Installation
runtime.global().setProperty(runtime, "DatabaseManager", 
    Object::createFromHostObject(runtime, std::make_shared<DatabaseManager>()));

JSI Use Cases

High-Performance Libraries

Database operations (SQLite, Realm)
Image processing
Cryptographic operations
Real-time audio/video processing
Machine learning inference

Popular JSI Libraries

// react-native-mmkv (Storage)
import {MMKV} from 'react-native-mmkv';

const storage = new MMKV();
storage.set('username', 'john_doe'); // Synchronous, JSI-powered

// react-native-reanimated (Animations)
import Animated from 'react-native-reanimated';

const animatedStyle = useAnimatedStyle(() => {
  // Runs on UI thread via JSI
  return {
    transform: [{translateX: sharedValue.value}]
  };
});

// react-native-vision-camera (Camera)
const frameProcessor = useFrameProcessor((frame) => {
  'worklet';
  // Runs on camera thread via JSI
  const qrCodes = scanQRCodes(frame);
  runOnJS(setQrCodes)(qrCodes);
}, []);

JSI Performance Benefits

Zero Serialization: Direct memory access
Synchronous Execution: No async overhead
Thread Safety: Run on any thread
Memory Efficiency: Shared object references
Native Speed: C++ level performance

Practical Optimization Techniques

1. Bundle Optimization

Code Splitting and Lazy Loading

// Lazy component loading
const ProfileScreen = React.lazy(() => import('./ProfileScreen'));

// Bundle splitting with Metro
// metro.config.js
module.exports = {
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      mangle: {
        keep_classnames: true,
      },
    },
  },
  serializer: {
    createModuleIdFactory: () => (path) => {
      // Custom module ID generation for better caching
      return require('crypto').createHash('sha1').update(path).digest('hex').substr(0, 8);
    },
  },
};

Tree Shaking and Dead Code Elimination

// Use specific imports
import {debounce} from 'lodash/debounce'; // ✅ Good
import _ from 'lodash'; // ❌ Imports entire library

// Remove unused code
// Use tools like babel-plugin-transform-remove-console

2. Image Optimization

Advanced Image Handling

import FastImage from 'react-native-fast-image';

const OptimizedImage = ({uri, style}) => (
  <FastImage
    style={style}
    source={{
      uri,
      priority: FastImage.priority.normal,
      cache: FastImage.cacheControl.immutable,
    }}
    resizeMode={FastImage.resizeMode.cover}
  />
);

// Image caching strategy
const ImageWithCache = ({uri}) => {
  const [cachedUri, setCachedUri] = useState(null);

  useEffect(() => {
    RNFS.downloadFile({
      fromUrl: uri,
      toFile: `${RNFS.CachesDirectoryPath}/${hash(uri)}.jpg`,
    }).promise.then(() => {
      setCachedUri(`file://${RNFS.CachesDirectoryPath}/${hash(uri)}.jpg`);
    });
  }, [uri]);

  return <FastImage source={{uri: cachedUri || uri}} />;
};

3. List Performance

Optimized FlatList Implementation

const OptimizedList = ({data}) => {
  const keyExtractor = useCallback((item) => item.id, []);
  const renderItem = useCallback(({item}) => <ListItem item={item} />, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      initialNumToRender={20}
      windowSize={10}
      getItemLayout={(data, index) => ({
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index,
        index,
      })}
    />
  );
};

// For complex lists, use FlashList
import {FlashList} from '@shopify/flash-list';

const SuperFastList = ({data}) => (
  <FlashList
    data={data}
    renderItem={renderItem}
    estimatedItemSize={100}
    // 10x better performance than FlatList
  />
);

4. Memory Management

Preventing Memory Leaks

const useMemoryOptimized = () => {
  const [data, setData] = useState([]);
  const abortControllerRef = useRef();

  useEffect(() => {
    abortControllerRef.current = new AbortController();

    fetchData({signal: abortControllerRef.current.signal})
      .then(setData)
      .catch((error) => {
        if (!error.name === 'AbortError') {
          console.error(error);
        }
      });

    return () => {
      abortControllerRef.current?.abort();
    };
  }, []);

  return data;
};

// Image cache management
const useImageCache = () => {
  useEffect(() => {
    const cleanupCache = () => {
      FastImage.clearMemoryCache();
      FastImage.clearDiskCache();
    };

    AppState.addEventListener('background', cleanupCache);
    return () => AppState.removeEventListener('background', cleanupCache);
  }, []);
};

5. Navigation Optimization

Optimized React Navigation

import {enableScreens} from 'react-native-screens';
enableScreens(); // Native screen optimization

// Lazy screen loading
const Stack = createNativeStackNavigator();

const AppNavigator = () => (
  <Stack.Navigator
    screenOptions={{
      lazy: true,
      animationTypeForReplace: 'push',
    }}
  >
    <Stack.Screen 
      name="Home" 
      component={HomeScreen}
      options={{
        freezeOnBlur: true, // Suspend inactive screens
      }}
    />
  </Stack.Navigator>
);

Performance Monitoring and Debugging

1. Performance Profiling Tools

Flipper Integration

// Install Flipper performance plugins
import {logger} from 'flipper';

const performanceLogger = {
  startTiming: (name) => {
    performance.mark(`${name}-start`);
  },

  endTiming: (name) => {
    performance.mark(`${name}-end`);
    performance.measure(name, `${name}-start`, `${name}-end`);

    const measure = performance.getEntriesByName(name)[0];
    logger.track('performance', {
      name,
      duration: measure.duration,
      timestamp: Date.now(),
    });
  },
};

React DevTools Profiler

import {Profiler} from 'react';

const ProfiledComponent = ({children}) => (
  <Profiler
    id="ComponentProfiler"
    onRender={(id, phase, actualDuration) => {
      if (__DEV__) {
        console.log(`${id} ${phase} phase: ${actualDuration}ms`);
      }
    }}
  >
    {children}
  </Profiler>
);

2. Custom Performance Monitoring

Performance Metrics Collection

class PerformanceMonitor {
  static metrics = new Map();

  static startMeasure(name) {
    this.metrics.set(name, {
      startTime: performance.now(),
      memory: performance.memory?.usedJSHeapSize || 0,
    });
  }

  static endMeasure(name) {
    const start = this.metrics.get(name);
    if (!start) return;

    const endTime = performance.now();
    const endMemory = performance.memory?.usedJSHeapSize || 0;

    const result = {
      duration: endTime - start.startTime,
      memoryDelta: endMemory - start.memory,
      timestamp: new Date().toISOString(),
    };

    // Send to analytics
    Analytics.track('performance_measure', {
      name,
      ...result,
    });

    return result;
  }
}

// Usage
PerformanceMonitor.startMeasure('api_call');
await fetchUserData();
PerformanceMonitor.endMeasure('api_call');

3. Automated Performance Testing

Detox Performance Tests

// e2e/performance.test.js
describe('Performance Tests', () => {
  beforeAll(async () => {
    await device.launchApp({
      newInstance: true,
      launchArgs: {
        detoxEnableSynchronization: 0,
      },
    });
  });

  it('should measure app launch time', async () => {
    const startTime = Date.now();
    await device.relaunchApp();
    await waitFor(element(by.id('home-screen'))).toBeVisible();
    const launchTime = Date.now() - startTime;

    expect(launchTime).toBeLessThan(3000); // App should launch in <3s
  });

  it('should handle large list scrolling', async () => {
    await element(by.id('large-list')).scroll(2000, 'down');
    // Should not crash or freeze
    await expect(element(by.id('large-list'))).toBeVisible();
  });
});

Real-World Implementation

Case Study: E-commerce App Optimization

Before Optimization

App launch time: 4.2 seconds
Memory usage: 180MB average
List scrolling: 45 FPS
APK size: 28MB

Implementation Strategy

// 1. Enable Hermes
// android/app/build.gradle
project.ext.react = [
    enableHermes: true,
    hermesCommand: "../../node_modules/hermes-engine/%OS-BIN%/hermes",
]

// 2. Implement TurboModules for API calls
// ProductAPI.ts
import {NativeProductAPI} from './NativeProductAPI';

export class ProductService {
  static async getProducts(): Promise<Product[]> {
    // Direct native call via TurboModule
    return NativeProductAPI.fetchProducts();
  }

  static getCachedProduct(id: string): Product | null {
    // Synchronous cache access
    return NativeProductAPI.getCachedProduct(id);
  }
}

// 3. Optimize product list with FlashList
import {FlashList} from '@shopify/flash-list';

const ProductList = ({products}) => {
  const renderProduct = useCallback(({item}) => (
    <ProductCard product={item} />
  ), []);

  return (
    <FlashList
      data={products}
      renderItem={renderProduct}
      estimatedItemSize={120}
      removeClippedSubviews
      maxToRenderPerBatch={5}
    />
  );
};

// 4. Implement JSI for image processing
const useImageOptimization = () => {
  return useCallback((imageUri: string) => {
    // JSI-powered image processing
    return ImageProcessor.optimizeImage(imageUri, {
      quality: 0.8,
      maxWidth: 800,
      format: 'webp',
    });
  }, []);
};

After Optimization Results

App launch time: 1.8 seconds (57% improvement)
Memory usage: 120MB average (33% reduction)
List scrolling: 60 FPS (smooth)
APK size: 22MB (21% reduction)

Performance Monitoring Dashboard

// PerformanceDashboard.tsx
import React, {useEffect, useState} from 'react';
import {View, Text, ScrollView} from 'react-native';

const PerformanceDashboard = () => {
  const [metrics, setMetrics] = useState({
    memoryUsage: 0,
    cpuUsage: 0,
    frameRate: 60,
    bundleSize: 0,
  });

  useEffect(() => {
    const monitor = setInterval(() => {
      setMetrics({
        memoryUsage: performance.memory?.usedJSHeapSize || 0,
        cpuUsage: getCPUUsage(),
        frameRate: getAverageFrameRate(),
        bundleSize: getBundleSize(),
      });
    }, 1000);

    return () => clearInterval(monitor);
  }, []);

  return (
    <ScrollView style={{padding: 16}}>
      <Text style={{fontSize: 24, fontWeight: 'bold'}}>
        Performance Metrics
      </Text>

      <MetricCard
        title="Memory Usage"
        value={`${(metrics.memoryUsage / 1024 / 1024).toFixed(2)} MB`}
        status={metrics.memoryUsage < 150000000 ? 'good' : 'warning'}
      />

      <MetricCard
        title="Frame Rate"
        value={`${metrics.frameRate} FPS`}
        status={metrics.frameRate >= 55 ? 'good' : 'warning'}
      />

      <MetricCard
        title="Bundle Size"
        value={`${(metrics.bundleSize / 1024).toFixed(2)} KB`}
        status={metrics.bundleSize < 1000000 ? 'good' : 'warning'}
      />
    </ScrollView>
  );
};

Conclusion

React Native in 2025 represents a mature, high-performance platform capable of delivering native-quality user experiences. The combination of Hermes, TurboModules, and JSI has fundamentally transformed the performance landscape, making React Native a compelling choice for demanding mobile applications.

Key takeaways for developers:

Immediate Actions

Enable Hermes in all new projects
Migrate existing bridge modules to TurboModules
Implement proper performance monitoring
Optimize critical user journeys

Long-term Strategy

Plan migration to New Architecture
Invest in JSI-based solutions for performance-critical features
Build performance culture within development teams
Stay updated with React Native evolution

Performance Mindset

Performance is a feature, not an afterthought
Measure everything, optimize continuously
User experience drives technical decisions
Balance optimization with development velocity

The future of React Native is bright, with performance gaps closing rapidly and new capabilities emerging regularly. By leveraging these tools and techniques, developers can build mobile applications that rival native performance while maintaining the productivity benefits that made React Native popular.

Whether you're building a simple app or a complex enterprise solution, the performance optimization strategies outlined in this guide will help you deliver exceptional user experiences while maintaining development efficiency. The key is to start with the fundamentals, measure everything, and continuously optimize based on real-world usage patterns.

React Native's journey toward native-level performance is nearly complete, and 2025 is the year to fully embrace these powerful optimization tools and techniques.

Ready to supercharge your React Native app? Start with enabling Hermes, implement performance monitoring, and gradually adopt TurboModules and JSI-based solutions. Your users will notice the difference.

Additional Resources:

DEV Community: Sharad K

React Native Skia: The Future of High-Performance UI

React Native Skia: The Future of High-Performance UI

What is React Native Skia?

Why Skia is Taking Over

🚀 Native Performance

🎨 Unlimited Creative Freedom

📊 Perfect for Data Visualization

🔧 Developer-Friendly API

Getting Started with React Native Skia

Example 1: Creating a Smooth Animated Circle

Example 2: Interactive Progress Ring

Example 3: Real-Time Chart Animation

Demo

Performance Benefits in Action

When to Use React Native Skia

Getting the Most Out of Skia

Performance Tips:

Best Practices:

The Future is Smooth

🚀 Unlocking React Native Speed: TurboModules, JSI, and Hermes Explained

Unlocking React Native Speed: TurboModules, JSI, and Hermes Explained

Table of Contents

Introduction

The Performance Challenge

Traditional React Native Bottlenecks

The Evolution Toward Speed

Hermes: The Game-Changing JavaScript Engine

What is Hermes?

Key Features and Benefits

Enabling Hermes in Your Project

Performance Measurements

TurboModules: Redefining Native Communication

Understanding the Bridge Problem

TurboModules Solution

Creating a TurboModule

TurboModule Benefits

JSI: Direct JavaScript-to-Native Interface

What is JSI?

JSI Architecture

JSI Use Cases

JSI Performance Benefits

Practical Optimization Techniques

1. Bundle Optimization

2. Image Optimization

3. List Performance

4. Memory Management

5. Navigation Optimization

Performance Monitoring and Debugging

1. Performance Profiling Tools

2. Custom Performance Monitoring

3. Automated Performance Testing

Real-World Implementation

Case Study: E-commerce App Optimization

Performance Monitoring Dashboard

Conclusion