Edit this page
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.
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.
expo packageAdd 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.
- npm install expo1
Add the following to the gradle.properties file in the android directory:
| 20 | newArchEnabled=true | |
| 21 | ||
| 22 | hermesEnabled=true |
2
Add the following to the setting.gradle file in the android directory:
| 1 | apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle"); | |
| 2 | useExpoModules() | |
| 3 | ||
| 1 | 4 | include ':app' |
| 2 | 5 | includeBuild("../node_modules/@react-native/gradle-plugin") |
3
Inside the android directory, run the following command:
- ./gradlew cleanOnce the above command completes, run:
- ./gradlew assembleDebug4
(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:
| 1 | package <my.app.package> | |
| 2 | ||
| 3 | import android.app.Application | |
| 4 | import android.content.res.Configuration | |
| 5 | import com.facebook.soloader.SoLoader | |
| 6 | import expo.modules.ApplicationLifecycleDispatcher | |
| 7 | ||
| 8 | class MainApplication() : Application() { | |
| 9 | override fun onCreate() { | |
| 10 | super.onCreate() | |
| 11 | ApplicationLifecycleDispatcher.onApplicationCreate(this) | |
| 12 | } | |
| 13 | ||
| 14 | override fun onConfigurationChanged(newConfig: Configuration) { | |
| 15 | super.onConfigurationChanged(newConfig) | |
| 16 | ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig) | |
| 17 | } | |
| 18 | } |
4.2
Register the class in the AndroidManifest.xml file.
| 7 | 7 | <application |
| 8 | 8 | android:allowBackup="true" |
| 9 | android:name=".MainApplication" | |
| 9 | 10 | android:fullBackupContent="@xml/backup_rules" |
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.
| 0 | 1 | override fun onCreate() { |
| 1 | 2 | super.onCreate() |
| 3 | ApplicationLifecycleDispatcher.onApplicationCreate(this) | |
| 2 | 4 | } |
| 5 | ||
| 6 | override fun onConfigurationChanged(newConfig: Configuration) { | |
| 7 | super.onConfigurationChanged(newConfig) | |
| 8 | ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig) | |
| 9 | } |
Override onConfigurationChanged if you have not done so already.
1
Add the following to your Podfile in the ios directory:
| 1 | require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking") | |
| 1 | 2 | require Pod::Executable.execute_command('node', ['-p', |
| 2 | 3 | 'require.resolve( |
| 3 | 4 | "react-native/scripts/react_native_pods.rb", |
| 14 | 15 | end |
| 16 | use_expo_modules! |
2
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.
3
Run pod install in the ios directory.
- cd ios && pod installYou will need to do this every time you add a dependency that uses native code.
4
(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.
| 1 | 1 | import UIKit |
| 2 | import ExpoModulesCore | |
| 2 | class AppDelegate: UIResponder, UIApplicationDelegate { | |
| 3 | class AppDelegate: ExpoAppDelegate { | |
| 3 | func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { | |
| 4 | override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { | |
| 4 | return true | |
| 5 | super.application(application, didFinishLaunchingWithOptions: launchOptions) |