Integrating React Native into Existing Apps

Learn how to integrate React Native into your existing native iOS or Android application. This allows you to gradually adopt React Native without rewriting your entire app.

Overview

React Native can be embedded into existing native applications, allowing you to:

Develop new features in React Native while keeping existing native code
Gradually migrate native screens to React Native
Share code between iOS and Android for new features
Leverage native modules and React Native simultaneously

Integration Approach

There are two main approaches:

Full App Integration: Add React Native to your entire app build process
Screen-by-Screen: Integrate React Native for specific screens or features

Android Integration

Prerequisites

Existing Android application (Android 6.0+, API level 24+)
Node.js installed
React Native package

Setup Steps

Add React Native to package.json

Create a package.json in your project root:

{
  "name": "ExistingApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-native": "^1000.0.0"
  }
}

Install dependencies:

npm install

Configure build.gradle

Update your app’s build.gradle:

android {
    compileSdkVersion 35
    
    defaultConfig {
        applicationId "com.your.app"
        minSdkVersion 24
        targetSdkVersion 35
    }
    
    configurations.all {
        resolutionStrategy {
            force "com.facebook.react:react-android:1000.0.0"
        }
    }
}

dependencies {
    implementation "com.facebook.react:react-android:+"
    implementation "com.facebook.react:hermes-android:+"
}

Implement ReactApplication

Modify your Application class:

package com.your.app

import android.app.Application
import com.facebook.react.ReactApplication
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

    private val reactNativeHost = object : DefaultReactNativeHost(this) {
        override fun getUseDeveloperSupport() = BuildConfig.DEBUG

        override fun getPackages(): List<ReactPackage> {
            return listOf(
                // Add your native modules here
            )
        }

        override fun getJSMainModuleName() = "index"
    }

    override fun getReactNativeHost(): ReactNativeHost = reactNativeHost

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)
    }
}

Create React Native Activity

package com.your.app

import android.os.Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultReactActivityDelegate

class MyReactActivity : ReactActivity() {

    override fun getMainComponentName(): String = "MyReactNativeApp"

    override fun createReactActivityDelegate(): ReactActivityDelegate {
        return DefaultReactActivityDelegate(
            this,
            mainComponentName,
            false
        )
    }
}

Launch from native code

From any Activity:

val intent = Intent(this, MyReactActivity::class.java)
startActivity(intent)

iOS Integration

Prerequisites

Existing iOS application (iOS 13.4+)
CocoaPods installed
Node.js installed

Setup Steps

Install React Native dependencies

Create package.json and install:

{
  "name": "ExistingApp",
  "version": "0.0.1",
  "dependencies": {
    "react": "^18.3.1",
    "react-native": "^1000.0.0"
  }
}

npm install

Configure Podfile

Create or update ios/Podfile:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, min_ios_version_supported

target 'YourApp' do
  config = use_native_modules!
  
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
  
  post_install do |installer|
    react_native_post_install(installer, config[:reactNativePath])
  end
end

Install pods:

cd ios && pod install

Create RCTRootView in ViewController

#import "ViewController.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation ViewController

- (void)loadReactNativeView {
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
        jsBundleURLForBundleRoot:@"index"];
    
    RCTRootView *rootView = [[RCTRootView alloc] 
        initWithBundleURL:jsCodeLocation
        moduleName:@"MyReactNativeApp"
        initialProperties:@{}
        launchOptions:nil];
    
    rootView.frame = self.view.bounds;
    [self.view addSubview:rootView];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self loadReactNativeView];
}

@end

Configure App Transport Security

Update Info.plist for Metro bundler access:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

React Native Code

Create index.js in your project root:

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

const MyReactNativeApp = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Welcome to React Native!
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent(
  'MyReactNativeApp',
  () => MyReactNativeApp
);

Running the Integrated App

Start Metro bundler

npx react-native start

Build and run native app

Android:

./gradlew installDebug

iOS: Open Xcode and click Run, or:

xcodebuild -workspace ios/YourApp.xcworkspace -scheme YourApp

Communication Between Native and React Native

Passing Data to React Native

Android:

val bundle = Bundle()
bundle.putString("message", "Hello from native")

val intent = Intent(this, MyReactActivity::class.java)
intent.putExtras(bundle)
startActivity(intent)

iOS:

NSDictionary *initialProps = @{
    @"message": @"Hello from native"
};

RCTRootView *rootView = [[RCTRootView alloc]
    initWithBundleURL:jsCodeLocation
    moduleName:@"MyReactNativeApp"
    initialProperties:initialProps
    launchOptions:nil];

Native Modules

Create custom native modules to expose native functionality to React Native:

// Android
class MyNativeModule(reactContext: ReactApplicationContext) 
    : ReactContextBaseJavaModule(reactContext) {
    
    override fun getName() = "MyNativeModule"
    
    @ReactMethod
    fun showToast(message: String) {
        Toast.makeText(reactContext, message, Toast.LENGTH_SHORT).show()
    }
}

Best Practices

Start Small: Begin by integrating one screen or feature
Use Native Modules: Leverage existing native code through native modules
Handle Lifecycle: Properly manage React Native lifecycle in your native app
Test Thoroughly: Test integration points between native and React Native
Performance: Monitor performance impact of the integration

Troubleshooting

Metro Bundler Connection Issues

Ensure your device/emulator can reach Metro:

Android: adb reverse tcp:8081 tcp:8081
iOS: Check firewall settings

Native Module Not Found

Rebuild native app after adding dependencies:

# Android
cd android && ./gradlew clean

# iOS
cd ios && pod install

Next Steps

Learn about out-of-tree platforms
Optimize performance
Configure Android setup in detail

Getting Started

Core Concepts

Architecture

Native Modules

Platform Guides

Performance

Developer Tools

Advanced Guides

Integrating React Native into Existing Apps

Integrating React Native into Existing Apps

Overview

Integration Approach

Android Integration

Prerequisites

Setup Steps

iOS Integration

Prerequisites

Setup Steps

React Native Code

Running the Integrated App

Communication Between Native and React Native

Passing Data to React Native

Native Modules

Best Practices

Troubleshooting

Metro Bundler Connection Issues

Native Module Not Found

Next Steps

​Integrating React Native into Existing Apps

​Overview

​Integration Approach

​Android Integration

​Prerequisites

​Setup Steps

​iOS Integration

​Prerequisites

​Setup Steps

​React Native Code

​Running the Integrated App

​Communication Between Native and React Native

​Passing Data to React Native

​Native Modules

​Best Practices

​Troubleshooting

​Metro Bundler Connection Issues

​Native Module Not Found

​Next Steps

Integrating React Native into Existing Apps

Overview

Integration Approach

Android Integration

Prerequisites

Setup Steps

iOS Integration

Prerequisites

Setup Steps

React Native Code

Running the Integrated App

Communication Between Native and React Native

Passing Data to React Native

Native Modules

Best Practices

Troubleshooting

Metro Bundler Connection Issues

Native Module Not Found

Next Steps