DEV Community: Himanshu Sharma

C++ in React Native: Going Beyond JavaScript for High-Performance Mobile Apps

Himanshu Sharma — Wed, 09 Sep 2026 19:01:30 +0000

React Native allows developers to build mobile applications using JavaScript and React while still accessing native platform capabilities.

But what happens when JavaScript isn't enough?

What if your application needs:

High-performance video processing
Complex mathematical calculations
Image or audio processing
Cryptography
Real-time data processing
Cross-platform native logic
Low-level memory control
Native integrations that need better performance

This is where C++ can become a powerful addition to a React Native application.

C++ isn't replacing JavaScript in React Native. Instead, it can work alongside JavaScript to handle computationally intensive or performance-critical operations.

In this article, we'll understand where C++ fits into the React Native architecture, how JavaScript communicates with C++, and where this approach makes sense in real-world applications.

Why would React Native need C++?

Most React Native applications are primarily written in JavaScript or TypeScript.

A simplified architecture looks like this:

React / TypeScript
       ↓
React Native
       ↓
Native APIs
       ↓
iOS / Android

For many applications, this is more than enough.

However, JavaScript is not always the best choice for CPU-intensive workloads.

For example, imagine processing a large video frame.

A JavaScript implementation might look conceptually like:

const processedFrame = processVideoFrame(frame);

If processVideoFrame() performs millions of calculations, the JavaScript runtime can become a bottleneck.

A native implementation could instead perform the heavy processing using C++:

JavaScript
    ↓
React Native Native Layer
    ↓
  C++
    ↓
Result
    ↓
JavaScript

The important idea is:

Use JavaScript for application logic and C++ where native performance or low-level processing provides a real advantage.

Where does C++ fit into React Native?

React Native's architecture has evolved significantly over the years.

With the newer architecture, React Native provides mechanisms that make communication between JavaScript and native code more efficient.

A simplified view is:

┌──────────────────────────┐
│     React / TypeScript   │
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│    React Native / JS     │
│         Runtime          │
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│     Native Platform      │
│    iOS / Android         │
└────────────┬─────────────┘
             │
             ▼
┌──────────────────────────┐
│           C++            │
│ Performance-heavy logic  │
└──────────────────────────┘

C++ can therefore become a shared native layer that sits underneath both Android and iOS implementations.

This is particularly useful when you don't want to implement the same complex algorithm separately in:

Kotlin / Java
       +
Swift / Objective-C

Instead, you can implement the core algorithm once in C++.

Why C++ instead of Kotlin or Swift?

This is one of the most important questions.

Android has Kotlin/Java.

iOS has Swift/Objective-C.

So why introduce C++?

Because C++ can provide a shared native implementation across platforms.

For example:

                React Native
                     │
              Native Interface
                     │
             ┌───────┴───────┐
             │               │
          Android           iOS
             │               │
             └───────┬───────┘
                     │
                    C++
                     │
              Shared Algorithm

Suppose you're building a custom media-processing engine.

Without C++:

Android → Kotlin implementation
iOS → Swift implementation

With C++:

Android ──┐
          ├──→ C++ Engine
iOS ──────┘

Now the core algorithm can be shared.

This doesn't mean that the entire application should be written in C++.

Only the appropriate low-level layer should be.

Real-world use cases for C++ in React Native

There are several situations where C++ can make sense.

Video processing

Video is one of the most obvious examples.

Applications involving:

Video encoding
Video decoding
Frame processing
Filters
Transcoding
Video effects
DRM-related processing
Custom media pipelines

can benefit from native code.

For example:

React Native UI
      ↓
Video Player
      ↓
Native Media Layer
      ↓
C++ Processing Engine
      ↓
Decoder / Renderer

A React Native application doesn't need to understand the low-level details.

It can simply expose a high-level API:

const result = await processVideo({
  input: videoPath,
  quality: "high"
});

The heavy work can happen underneath the API.

2. Image processing

Consider an application that needs to process images locally.

For example:

Resize
Crop
Compress
Filter
Detect
Transform

Processing thousands or millions of pixels repeatedly can be computationally expensive.

C++ is well suited for this kind of workload.

A React Native API could remain simple:

const processedImage = await ImageProcessor.resize(
  image,
  1080,
  1920
);

While internally:

React Native
     ↓
Native Module
     ↓
    C++
     ↓
Image Processing

3. Cryptography

Security-sensitive applications sometimes need native cryptographic operations.

Examples include:

Encryption
Decryption
Hashing
Key derivation
Secure data processing

Instead of implementing complex cryptographic algorithms in JavaScript, applications can use well-tested native libraries.

C++ is commonly used as the underlying implementation language for many high-performance libraries.

React Native can expose only the required interface:

const encryptedData = Crypto.encrypt(data, key);

The underlying implementation can remain native.

4. Gaming and graphics

Games are another obvious use case.

A game engine typically needs:

Physics
Rendering
Collision detection
Animation
Memory management
Real-time calculations

These workloads can require extremely high performance.

C++ is widely used in game engines because of its performance characteristics and low-level control.

A React Native application could potentially use C++ for a specialized engine while React Native handles surrounding application UI.

5. AI and machine learning

Another interesting area is on-device AI.

Imagine:

React Native
     ↓
AI Native Module
     ↓
C++ Runtime
     ↓
ML Model
     ↓
Inference Result

The JavaScript layer could simply request:
const result = await model.predict(input);

while the native layer performs the computationally expensive inference.

This approach can be useful when inference needs to happen locally rather than sending data to a server.

6. Complex algorithms

C++ becomes especially interesting when your application contains algorithms that are computationally expensive.

For example:

Large data processing
Graph algorithms
Signal processing
Compression
Search algorithms
Parsing
Computer vision
Mathematical calculations

Instead of repeatedly executing expensive calculations in JavaScript, the core algorithm can be implemented in C++.

JavaScript → C++ communication

This is where things become technically interesting.

The JavaScript application needs a way to communicate with the native implementation.

Conceptually:

JavaScript
    │
    │ Function Call
    ▼
Native Interface
    │
    ▼
   C++
    │
    │ Result
    ▼
JavaScript

For example:

const result = NativeCalculator.calculate(1000000);

The native implementation might eventually call:

double calculate(double input) { // Heavy calculation }

The JavaScript developer doesn't need to know how the calculation works.

They only need to know the API contract.

What is JSI?

If you're serious about understanding C++ in modern React Native, JSI (JavaScript Interface) is an important concept.

JSI provides a lower-level interface between JavaScript and native code.

Historically, React Native applications relied heavily on asynchronous communication through the bridge.

Conceptually:

JavaScript
     ↓
   Bridge
     ↓
  Native

The newer architecture provides a different approach.

JSI allows native code to interact more directly with the JavaScript runtime.

Conceptually:

JavaScript Runtime
       ↕
      JSI
       ↕
   Native / C++

This can reduce some of the overhead associated with traditional bridge-based communication.

Why JSI matters for C++

JSI itself is implemented around C++ concepts and provides a foundation for creating high-performance native integrations.

This makes C++ particularly interesting for React Native developers who want to work closer to the runtime.

For example, a native C++ implementation can expose functionality that JavaScript can call.

Conceptually:

jsi::Value calculate(
    jsi::Runtime& runtime,
    const jsi::Value* args,
    size_t count
) {
    // C++ implementation
}

The JavaScript side could then interact with the exposed function.

The exact implementation depends on the React Native architecture and the native module design, but the important concept is the same:

JS
 ↓
JSI
 ↓
C++

TurboModules and C++

Modern React Native also introduces TurboModules as part of the New Architecture.

TurboModules provide a more efficient native module system and work with React Native's code-generation approach.

A simplified architecture looks like:

TypeScript Specification
          ↓
      Codegen
          ↓
   Native Interface
          ↓
      C++ / Native

This is particularly interesting because it allows React Native developers to define a typed contract while implementing performance-critical logic in native code.

For example, a TypeScript specification could conceptually define:

interface VideoProcessor { processVideo(path: string): Promise<string>; }

The underlying implementation can then be handled natively.

This creates a clean separation:

Business/UI Logic
       ↓
TypeScript
       ↓
Native Contract
       ↓
C++ Implementation

Fabric and C++

C++ also becomes relevant when looking at Fabric, React Native's newer rendering system.

Fabric moves more of the rendering infrastructure toward C++ and provides a common core across platforms.

A simplified architecture is:

React ↓ Shadow Tree ↓ Fabric ↓ C++ ↓ Platform Renderer

This is one reason modern React Native developers can benefit from understanding C++.

You don't necessarily need to become a C++ expert to build React Native applications.

But understanding:

pointers
references
memory management
classes
templates
RAII
smart pointers
threading
native interfaces

can make the architecture much easier to understand.

C++ and React Native are not competitors

It's important not to think about this as:

JavaScript OR C++

Instead, think:

JavaScript
    +
TypeScript
    +
Native APIs
    +
   C++

Each layer has a different responsibility.

A practical architecture might look like:

┌─────────────────────────────┐
│       React / TypeScript    │
│       UI + Business Logic   │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│      React Native Layer     │
│  Components + Native APIs   │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│       Native Platform       │
│    Android / iOS Layer      │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│             C++             │
│   Performance-heavy logic   │
└─────────────────────────────┘

When should you NOT use C++?

This is just as important as understanding where C++ helps.

Don't introduce C++ simply because it is faster.

For a normal React Native application containing:

Forms
API calls
Navigation
Authentication
Lists
Basic animations
Business logic
Standard UI components

C++ is usually unnecessary.

For example, there is no reason to implement:

const fullName =${firstName} ${lastName};

in C++.

That would add complexity without providing meaningful benefits.

The goal should be:

Use C++ only when its advantages justify the additional complexity.

The cost of introducing C++

C++ isn't free from an engineering perspective.

Once you introduce a native C++ layer, you may need to deal with:

Memory management

You need to understand:

Pointers
References
Ownership
Smart pointers
Object lifetime
Threading

You may need to manage:

Worker threads
Synchronization
Race conditions
Deadlocks
Thread safety
Build systems

You may encounter:

CMake
NDK
Xcode
Clang
Gradle
CocoaPods
Debugging

Debugging a crash can become more complicated:

JavaScript
   ↓
React Native
   ↓
Native
   ↓
  C++
   ↓
Segmentation fault

Now you need native debugging skills.

C++ can also improve your React Native career

This is an underrated benefit.

React Native developers who understand native development can work on a much broader range of problems.

Instead of being limited to:

React
JavaScript
TypeScript

you can move toward:

React Native
     ↓
Android / iOS
     ↓
    C++
     ↓
    JSI
     ↓
   Fabric
     ↓
TurboModules
     ↓
Native Performance

This opens doors toward roles involving:

Mobile infrastructure
React Native platform engineering
Media SDKs
Video infrastructure
Performance engineering
Native SDK development
C++ mobile development
Cross-platform frameworks

A practical learning roadmap

If you're already an experienced React Native developer, I wouldn't recommend starting with an enormous C++ course.

Instead, learn C++ specifically from a React Native native-development perspective.

Phase 1 — C++ fundamentals

Learn:

Variables
Functions
Classes
Objects
Constructors
Destructors
Pointers
References
const
STL
Vectors
Maps
Strings
Templates

Phase 2 — Memory management

Focus heavily on:

Stack vs Heap
Pointers
References
RAII
unique_ptr
shared_ptr
weak_ptr
Move semantics

These concepts become extremely useful when working with native code.

Phase 3 — Modern C++

Learn:

C++11
C++14
C++17
C++20 basics

Especially:

auto
lambda functions
smart pointers
move semantics
range-based loops
optional
variant

Phase 4 — Android NDK

Then move into Android native development.

Learn:

Android NDK
CMake
JNI
C++
Native libraries

Architecture:

React Native
      ↓
   Android
      ↓
     JNI
      ↓
     C++

Phase 5 — iOS native integration

Understand:

Objective-C++
Swift ↔ Objective-C++
C++ libraries
Xcode
CocoaPods

You don't necessarily need to become a Swift expert.

Your goal is to understand how the C++ layer can be integrated into the iOS application.

Phase 6 — React Native internals

This is where your existing React Native experience becomes extremely valuable.

Learn:

JSI
TurboModules
Codegen
Fabric
Bridgeless Mode
Hermes
New Architecture

Then start reading actual React Native source code.

At this point, you'll start seeing why React Native uses C++ internally.

Final thoughts

C++ doesn't make every React Native application faster.

It makes sense when you have a problem that benefits from:

High computational performance
Low-level control
Native memory management
Cross-platform native logic
Existing C/C++ libraries
Heavy media or graphics processing

For experienced React Native developers, learning C++ is therefore less about abandoning JavaScript and more about understanding what happens underneath React Native.

The most powerful combination isn't:

React Native vs C++

It's:

React Native + Native Development + C++

Once you understand all three layers, you can move from building React Native applications to building native-powered React Native systems.

And that's a very different level of engineering.

Conclusion

If you're already comfortable with React Native, you don't need to become a C++ specialist overnight.

Start small.

Learn modern C++.

Understand memory management.

Build a native module.

Learn JSI.

Understand TurboModules and Fabric.

Then gradually move into the React Native internals.

The goal isn't to write your entire React Native application in C++.

The goal is to know when JavaScript is the right tool—and when it isn't.

A Guide to React Native Expo and Bare Bone Projects

Himanshu Sharma — Thu, 26 Sep 2024 13:36:58 +0000

React Native is a powerful framework for building mobile applications using JavaScript and React. It offers two main ways to start a project: using Expo or starting with a Bare Bone project. While both approaches can lead to a successful mobile app, they have different advantages, disadvantages, and use cases.

In this blog, we'll explore React Native Expo and Bare Bone projects, how to get started with each, and when to use one over the other.

What is Expo?

Expo is a framework and platform for React Native that allows developers to build native iOS and Android apps using JavaScript. It simplifies a lot of the underlying setup and offers a rich ecosystem of tools and services.

Key Features of Expo:

Out-of-the-box features: It includes a large number of pre-built components, such as camera access, push notifications, and file system management.
Zero build configuration: You don’t need to install Android Studio or Xcode to build and test apps. Expo provides a build service that can create the final binaries for both platforms.
Faster development cycle: You can preview changes instantly with Expo Go, a mobile app that helps you run your code directly on your device.

Setting Up an Expo Project

Install Expo CLI: First, install the Expo CLI globally on your machine:

npm install -g expo-cli

2.Create an Expo Project: Use the following command to create a new Expo project:

expo init MyExpoApp

You'll be prompted to choose between different project templates (blank, tab navigation, or managed workflow with TypeScript). Select the one that fits your needs.

3.Start the Development Server: Navigate into your project folder and run:

cd MyExpoApp
expo start

You can then open the Expo Go app on your iOS or Android device, scan the QR code, and immediately see the app running on your phone. This allows for a fast and efficient development workflow.

Benefits of Expo:

1. Ease of Use: Expo abstracts much of the native complexity, making it easier for beginners to start building mobile apps.
2. Cross-Platform Development: The same code works on both iOS and Android with minimal adjustments.
3. Quick Setup: No need to deal with Xcode, Android Studio, or any complex configurations to get started.

Limitations of Expo:

Limited Native Customization: If you need to implement custom native modules, Expo might not support them directly unless you "eject" to a bare project.
App Size: Expo apps are generally larger because they include all the native modules, even if you don’t use them.
Dependency on Expo: You rely on the Expo SDK and updates, which may sometimes limit flexibility in using the latest native features.

What is a Bare Bone React Native Project?

A Bare Bone React Native project is a more traditional approach where you have full control over the native code for both Android and iOS. Unlike Expo, a bare project doesn't abstract native configurations, meaning you'll need to manage build tools like Xcode and Android Studio yourself.

This approach is highly customizable and is ideal when you need direct access to native code or custom libraries.

Setting Up a Bare Bone Project

Install React Native CLI: First, ensure you have the React Native CLI installed globally:

npm install -g react-native-cli

2.Create a Bare React Native Project: You can create a new project using the React Native CLI:

npx react-native init MyBareApp

3.Running the App:

For iOS: You need to have Xcode installed. To run the app:

npx react-native run-ios

For Android: You need Android Studio set up. To run the app:

npx react-native run-android

This will build the app natively on your machine and allow you to test it on a simulator or device.

Benefits of a Bare Bone Project:

Full Customization: You have full access to native code, which is ideal for apps requiring custom native modules or integrations with native features.
Smaller App Size: Since you control which libraries are included, your app can be leaner, including only the native code necessary for your functionality.
More Flexibility: You can install and use any React Native or native library, even if it's not supported by Expo.

Limitations of a Bare Bone Project:

Complex Setup: You'll need to manage separate build environments for iOS and Android, which may require tools like Xcode and Android Studio.
Longer Build Times: Because you're compiling the code natively, you might experience longer build and iteration times compared to Expo’s hot reload.
More Maintenance: You'll be responsible for updating native dependencies and keeping your project in sync with new versions of React Native.

When to Use Expo vs. Bare Bone

Use Expo If:
- You want a fast, easy setup with minimal native configuration.
- You're building an MVP (Minimum Viable Product) or a prototype.
- Your app's functionality fits within the native modules provided by Expo.
- You want to avoid managing native build tools (Xcode, Android Studio).
Use a Bare Bone Project If:
- You need full access to native APIs and want to integrate custom native code.
- Your app requires a small footprint and needs to avoid unnecessary libraries.
- You plan to maintain the app long-term and need full control over dependencies.
- You’re working on an enterprise-level app with specific custom requirements.

Ejecting from Expo

If you start with Expo and eventually need more control over native code, Expo provides an option to "eject" to a bare React Native project.

Run the following command to eject:

expo eject

This will give you access to native code but will also require you to manage native dependencies moving forward, like any other bare React Native project.

Conclusion
Choosing between Expo and a Bare Bone React Native project depends on your app's requirements and your familiarity with native development tools. Expo is perfect for quickly starting a project with a great development experience and lots of pre-built functionality, while a bare project gives you full control over the native code and app customization.

When starting your next React Native project, consider your specific needs—Expo for simplicity and quick setup, or a bare project for flexibility and long-term customization. Both approaches are valid, and each shines in different scenarios.

Happy coding with React Native!

How to Create a React Native SDK: A Comprehensive Guide

Himanshu Sharma — Thu, 26 Sep 2024 13:15:36 +0000

React Native is a popular framework for building mobile applications, combining the best parts of native development with the flexibility of React. As React Native grows in popularity, the need for reusable libraries or SDKs (Software Development Kits) becomes important for developers looking to share functionality across multiple applications. In this blog, we'll explore the steps involved in creating a React Native SDK, from setting up the project to distributing it for others to use.

Why Create an SDK for React Native?
An SDK allows developers to encapsulate functionality into reusable packages that can be shared across multiple applications. This reduces redundancy and ensures that updates or changes to core logic can be implemented across all applications seamlessly. Use cases for React Native SDKs include:

Handling payments
Implementing analytics and tracking
Managing authentication
Abstracting complex business logic or UI components

Steps to Create a React Native SDK

Set Up the Project

Before you can create an SDK, you need to set up a React Native project that will serve as the foundation for your SDK.

1.1. Install React Native CLI
First, ensure that you have React Native CLI installed:

npm install -g react-native-cli

1.2. Create a New React Native Project
Create a new project where you’ll develop your SDK:

npx react-native init MySDK

Navigate to your project directory:

cd MySDK

2. Setup TypeScript (Optional but Recommended)
TypeScript helps with type safety and improves the development experience. To add TypeScript to your React Native SDK:

npm install --save-dev typescript @types/react @types/react-native

Then rename your .js files to .ts or .tsx and create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules"]
}

3. Create Reusable Modules
The core of your SDK will be reusable components or modules. Depending on what functionality your SDK provides, you may need to create native modules (for Android/iOS) or JavaScript components.
3.1. Create a Native Module
React Native allows you to write native code for Android and iOS that interacts with JavaScript. Let’s create a simple native module.

iOS
Create a new Objective-C or Swift file in the ios/ directory (for this example, we’ll use Objective-C):

Go to ios/MySDK and add a new file called MyModule.m:

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(MyModule, NSObject)
RCT_EXTERN_METHOD(sayHello:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
@end

2.In MyModule.swift, implement the native functionality:

@objc(MyModule)
class MyModule: NSObject {
  @objc
  func sayHello(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    resolve("Hello from iOS Native Module!")
  }
}

For Android, you will create a new Java/Kotlin module:

1.Create a new file under android/app/src/main/java/com/mysdk/ called MyModule.java:

package com.mysdk;

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 MyModule extends ReactContextBaseJavaModule {

    public MyModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void sayHello(Promise promise) {
        promise.resolve("Hello from Android Native Module!");
    }
}

3.2. Export Native Modules to JavaScript
You’ll need to bridge your native code to JavaScript.

In index.js, export the native module like this:

import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

export const sayHello = async () => {
  try {
    const message = await MyModule.sayHello();
    return message;
  } catch (error) {
    console.error(error);
  }
};

4. Create JavaScript Components
Not all functionality in your SDK needs to be written in native code. You can also create pure JavaScript components or hooks.

Here’s an example of a simple reusable button component:

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const MyButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007BFF',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    textAlign: 'center',
  },
});

export default MyButton;

5. Publish Your SDK
Once your SDK is ready, it’s time to package and distribute it. You can publish it to npm so other developers can install and use it.

5.1. Prepare for Publishing
Update your package.json to include the necessary information:

{
  "name": "my-react-native-sdk",
  "version": "1.0.0",
  "main": "index.js",
  "react-native": "index.js",
  "author": "Your Name",
  "license": "MIT"
}

Make sure your .npmignore file excludes unnecessary files like build artifacts and node_modules.

5.2. Publish to npm
To publish your SDK, first login to npm:

npm login

Then publish your package:

npm publish

5.3. Install in Another Project
Once published, your SDK can be installed in any React Native project:

npm install my-react-native-sdk

Developers can then use it in their applications:

import { sayHello } from 'my-react-native-sdk';

const App = () => {
  useEffect(() => {
    sayHello().then(message => console.log(message));
  }, []);

  return <Text>Check the console for the message!</Text>;
};

6. Testing and Documentation
Testing your SDK across different environments (iOS, Android) is crucial. Use a combination of manual testing and automated tests (e.g., Jest, Detox) to ensure it works as expected.

In addition, providing comprehensive documentation is key to making your SDK easy for others to use. Document your SDK features, APIs, and provide examples.

Conclusion
Creating a React Native SDK involves setting up reusable components or modules that can be shared across multiple applications. By combining native code with JavaScript components, you can create a flexible and powerful SDK that serves different needs.

Whether you're creating a payment gateway SDK, analytics tool, or authentication system, following the steps outlined in this blog will help you build and distribute a React Native SDK effectively.