Skip to content

Latest commit

 

History

History
193 lines (168 loc) · 7.16 KB

installing-expo-modules.mdx

File metadata and controls

193 lines (168 loc) · 7.16 KB
Raw
title description
Install Expo modules
Learn how to prepare your existing native project to install and use Expo modules and the module API.

import InstallSection from '/components/plugins/InstallSection'; import { DiffBlock, Terminal } from '/ui/components/Snippet'; import { YesIcon, NoIcon } from '/ui/components/DocIcons'; import { Collapsible } from '/ui/components/Collapsible'; import { Step } from '~/ui/components/Step';

warning These 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

Prerequisites

You should have a native project with React Native installed and configured to render a root view. If you don't have this yet, you can follow the "Integration with Existing Apps" guide on the React Native docs and then return here.

Install the expo package

First, 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. Learn more.

<Terminal cmd={['npm install expo']} />

Configure your iOS app

Add the following to your `Podfile` in the `ios` directory: target '' do

  • use_expo_modules! config = use_native_modules! `} />
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. You will need to do this everytime you add a dependency that uses native code. **(Optional)** Complete the following if you would like to use [AppDelegate subscribers](/modules/appdelegate-subscribers/). /AppDelegate.swift b/ios//AppDelegate.swift index ff83531..bd8651d 100644 --- a/ios//AppDelegate.swift +++ b/ios//AppDelegate.swift @@ -1,31 +1,29 @@ import UIKit +import ExpoModulesCore

@main -class AppDelegate: UIResponder, UIApplicationDelegate { +class AppDelegate: ExpoAppDelegate {

  • func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  • override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  • return true
  • super.application(application, didFinishLaunchingWithOptions: launchOptions) } `} />

Configure your Android app

Add the following to the `gradle.properties` file in the `android` directory: Add the following to the `setting.gradle` file in the `android` directory: From the `android` directory, run the following command: Once this completes, run the following command: **(Optional)** Complete the following steps if you would like to use [lifecycle listener](/modules/android-lifecycle-listeners/) in your app: 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/` directory with the following content:

<DiffBlock raw={`diff --git a/android/app/src/main/java/com//MainApplication.kt b/android/app/src/main/java/com//MainApplication.kt new file mode 100644 index 0000000..2c8525a --- /dev/null +++ b/android/app/src/main/java/com//MainApplication.kt @@ -0,0 +1,19 @@ +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)
  • } +}`} />
Register the class in the `AndroidManifest.xml` file. If you have your own class extending `Application`, you can add the following to it:

<DiffBlock raw={`diff --git a/android/app/src/main/java/com//MainApplication.kt b/android/app/src/main/java/com//MainApplication.kt new file mode 100644 index 0000000..2c8525a --- /dev/null +++ b/android/app/src/main/java/com//MainApplication.kt @@ -0,0 +1,19 @@ class MainApplication() : Application() { override fun onCreate() { super.onCreate()

  •   ApplicationLifecycleDispatcher.onApplicationCreate(this)
    }
  • override fun onConfigurationChanged(newConfig: Configuration) {
  •   super.onConfigurationChanged(newConfig)

  •   ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
  • }

}} /> Override onConfigurationChanged` if you have not done so already.