bare/installing-expo-modules

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Automatic installation with install-expo-modules command

To install and configure the expo package automatically, run the command: npx install-expo-modules@latest. When the command succeeds, you will be able to add any Expo module in your app. If the command fails, follow the manual installation instructions.

Manual installation for React Native 0.86

For manual installation, run npm install expo. Then apply configuration changes from diffs for Android and iOS. This process is expected to take about five minutes and may require adaptation depending on project customization.

iOS deployment target requirement

After installing Expo modules on iOS, update the iOS Deployment Target in Xcode to iOS 16.4. Open your-project-name.xcworkspace in Xcode, select your project in the left sidebar, then go to Targets > your-project-name > Build Settings > iOS Deployment Target and ensure it is set to iOS 16.4.

Installing CocoaPods after Expo module setup on iOS

After applying iOS configuration changes, install the project's CocoaPods again to pull in Expo modules detected by the use_expo_modules! directive added to the Podfile. Run: npx pod-install or alternatively: npx expo run:ios

Expo CLI for bundling JavaScript and assets

It is recommended to use Expo CLI and related tooling configurations to bundle app JavaScript code and assets. This adds support for using the main field in package.json to use the Expo Router library. Not using Expo CLI for bundling may result in unexpected behavior.

Verification of Expo module installation

To verify successful installation, run npx expo install expo-constants, then run npx expo run and modify your app JavaScript code to add: import Constants from 'expo-constants'; console.log(Constants.systemFonts);

Modules included in the expo package

The expo package includes the following Expo modules as dependencies: expo-asset (JavaScript-only package for assets), expo-constants (access to manifest), expo-file-system (device file system interaction, used by expo-asset and many other modules), expo-font (load fonts at runtime, optional but recommended for expo-dev-client and required by @expo/vector-icons), and expo-keep-awake (prevents device sleep during development, optional and can be safely removed).

Excluding modules from autolinking

To exclude native code from Expo modules you are not using but were installed by other dependencies, use the expo.autolinking.exclude property in package.json. Example: {"expo": {"autolinking": {"exclude": ["expo-keep-awake"]}}}

iOS AppDelegate.swift optional delegate methods

You can optionally add additional delegate methods to AppDelegate.swift for iOS. Some libraries may require them, so unless you have a good reason to leave them out, it is recommended to add them. These can be found in the expo-template-bare-minimum AppDelegate.swift template.

iOS build phase shell script for Expo CLI bundling

For iOS, replace the shell script under Build Phases > Bundle React Native code and images in Xcode with a script that sources environment files, sets the project root, configures bundling behavior, sets the entry file using expo/scripts/resolveAppEntry, uses Expo CLI as the CLI_PATH, and defaults to the export:embed bundling command before calling react-native-xcode.sh.

iOS AppDelegate bundleURL configuration for main field support

To support the main field in package.json on iOS, modify the bundleURL method in AppDelegate.swift to use .expo/.virtual-metro-entry as the jsBundleURL forBundleRoot in the DEBUG configuration instead of "index".

Native project upgrade requires manual file changes across SDK versions

When upgrading to a new Expo SDK version in a bare workflow project with managed android and ios directories, you must make changes to native project files. The upgrade process can be complex because you need to identify which native files change and what updates to apply to each file.

Upgrade native files using diff tool for current SDK version

After upgrading the Expo SDK version and related dependencies, use the native project upgrade diff tool to compare files between your current SDK version and target SDK version. The tool generates file-by-file diffs that show exactly what changes need to be made to native projects, which you can then apply manually to your project files.

Native upgrade diffs are Expo-specific equivalent to React Native Upgrade Helper

Expo provides a native upgrade helper tool similar to the React Native Upgrade Helper (at react-native-community.github.io/upgrade-helper/). The Expo tool focuses on projects using Expo modules and related tooling, allowing developers to see file-by-file changes needed between SDK versions.

Continuous Native Generation (CNG) avoids manual native code upgrades

To avoid the complexity of manually upgrading native project files, you can use Continuous Native Generation (CNG). With CNG, Expo Prebuild generates your native projects automatically before each build, eliminating the need to manage upgrades to native code manually.

Use Expo CLI without Expo Modules API

To use Expo CLI without installing Expo Modules API, install the expo package with npm install and configure react-native.config.js to exclude the package from autolinking by setting platforms (android, ios, macos) to null. However, features such as expo-dev-client or expo-router will be unavailable without Expo Modules API installed.

Install Expo modules in React Native CLI project

To migrate from React Native CLI to Expo CLI, install the expo package by running: npx install-expo-modules@latest (npm), yarn dlx install-expo-modules@latest (yarn), pnpm dlx install-expo-modules@latest (pnpm), or bunx install-expo-modules@latest (bun). After installing, configure your project to use Expo CLI including Metro config, Babel preset, and native project configurations.

Give your agent this brain