Install Expo modules in an existing native project

Learn how to prepare your existing native project to install and use Expo modules and the module API.

If your project is a greenfield React Native app — primarily built with React Native from the start, then see Install Expo modules in an existing React Native project instead of this guide.

This guide provides the steps to prepare your existing native project to install and use Expo modules and the module API.

Prerequisites

The following instructions may not work for all projects. Support for integrating Expo modules into existing projects is still experimental. If you encounter issues, create an issue on GitHub.

You should have a brownfield native project with React Native installed and configured to render a root view. If you don't have this yet, follow the Integration with Existing Apps guide from the React Native documentation and then come back here once you have followed the steps.

Install the `expo` package

Add the expo package to your project. Ensure you are using a version of the expo package that is compatible with the React Native version in your project.

Terminal

npm install expo

Configuring native apps

Android app

Add the following to the gradle.properties file in the android directory:

android/gradle.properties

Add the following to the setting.gradle file in the android directory:

android/settings.gradle

Inside the android directory, run the following command:

Terminal

./gradlew clean

Once the above command completes, run:

Terminal

./gradlew assembleDebug

(Optional) Complete the following steps if you would like to use lifecycle listeners in your app. If you do not set up lifecycle listeners, then additional setup will be required for each module that uses them.

4.1

If you already have a class that extends the Application class you can move to step 3. If you do not have it, we need to create one. Add a file called MainApplication.kt file to your android/app/src/main/java/com/<your-app-package> directory with the following content:

android/app/src/main/java/com/<my-app-package>/MainApplication.kt

4.2

android/app/src/main/AndroidManifest.xml

4.3

If you have your own class extending Application, you can add the following. It includes calls to ApplicationLifecycleDispatcher for handling events at the application startup and during device configuration changes.

android/app/src/main/java/com/<my-app-package>/MainApplication.kt

Override onConfigurationChanged if you have not done so already.

iOS app

Add the following to your Podfile in the ios directory:

ios/Podfile

Open your ios directory in Xcode. From the project navigator, select your project and then select your app target under TARGETS. In Build Settings, using the search bar, search for ENABLE_USER_SCRIPT_SANDBOXING. If it is not already, set its value to No.

Run pod install in the ios directory.

Terminal

cd ios && pod install

You will need to do this every time you add a dependency that uses native code.

(Optional) Complete the following if you would like to use AppDelegate subscribers. If you do not set up AppDelegate subscribers, then additional setup will be required for each module that uses them.

ios/<MyAppProject>/AppDelegate.swift

	20	newArchEnabled=false
	21
	22	hermesEnabled=true

+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
+useExpoModules()
 include ':app'
 includeBuild("../node_modules/@react-native/gradle-plugin")

+package <my.app.package>
+import android.app.Application
+import android.content.res.Configuration
+import com.facebook.soloader.SoLoader
+import expo.modules.ApplicationLifecycleDispatcher
+class MainApplication() : Application() {
+    override fun onCreate() {
+        super.onCreate()
+        ApplicationLifecycleDispatcher.onApplicationCreate(this)
+    }
+    override fun onConfigurationChanged(newConfig: Configuration) {
+        super.onConfigurationChanged(newConfig)
+        ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+    }
+}

     <application
         android:allowBackup="true"
+        android:name=".MainApplication"
         android:fullBackupContent="@xml/backup_rules"

    override fun onCreate() {
        super.onCreate()
+       ApplicationLifecycleDispatcher.onApplicationCreate(this)
+   }
+   override fun onConfigurationChanged(newConfig: Configuration) {
+       super.onConfigurationChanged(newConfig)
+       ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+   }

+require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
 require Pod::Executable.execute_command('node', ['-p',
   'require.resolve(
   "react-native/scripts/react_native_pods.rb",
 end
+ use_expo_modules!
  config = use_native_modules!

 import UIKit
+import ExpoModulesCore
+class AppDelegate: UIResponder, UIApplicationDelegate {
+class AppDelegate: ExpoAppDelegate {
+ func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+ return true
+ }