Learn about getting started with Expo modules API.
There are two ways to get started with the Expo Modules API: you can either initialize a new module from scratch or add the Expo Modules API to an existing module. This guide will walk you through creating a new module from scratch, and the Integrating in an existing library guide covers the latter case.
The two recommended flows to create a new module with Expo Modules API:
Both of these flows are covered in the next sections.
1
Navigate to your project directory (the one that contains the package.json file) and run the following command, which is the recommended way to create a local Expo module:
-
npx create-expo-module@latest --local
It's best to provide a meaningful module name. However, you can accept the default suggestions for the rest of the questions.
2
If you have an ios directory in your project that you created using expo prebuild
, you must reinstall the pods:
-
pod install --project-directory=ios
Note: If you're using a development client, you need to rebuild your development client any time you want to use new native code.
Warning: If you override the
paths
property intsconfig.json
or are using Expo SDK version below48.0.11
, you need to include the following wildcard in the paths config."paths": { "*": ["./modules/*"] }
Now, import the module in your application:
import { hello } from 'my-module';
To run your app locally, run the prebuild
command and then compile the app:
# Re-generate the native project directories from scratch
-
npx expo prebuild --clean
# Run the example app on Android
-
npx expo run:android
# Run the example app on iOS
-
npx expo run:ios
Congratulations! You have created a local Expo module. You can now start working on it.
3
If you have an android
directory in your project that you created using expo prebuild
, you can open the directory in Android Studio.
You can always just edit the files in the modules/my-module/android/src/main/java/expo/modules/mymodule/
directory directly in your favorite text editor.
Change the hello
method to return a different string. For example, you can change it to return "Hello world! 🌎🍎".
Rebuild the app or build a new development client and you should see your change.
Open the files in modules/my-module/ios/ directory in your favorite code editor to edit them. Alternatively, if you have an ios directory in your project that was created using expo prebuild
, you can use Xcode to edit them.
Now, change the hello
method to return a different string. For example, you can change it to return "Hello world! 🌎🍎".
Rebuild the app or build a new development client and you should see your change. Remember you need to either run npx expo prebuild
each time you make a native change or you reinstall the pods using pod install --project-directory="example/ios"
(which should be way faster).
Note
There are also other flows for working on an Expo module in parallel with your application. For example, you can use a monorepo or publish to npm, as described in How to use a standalone Expo module in your project guide.
1
To create a new Expo module from scratch, run the create-expo-module
script as shown below.
The script will ask you a few questions and then generate the native Expo module along with the example app for Android and iOS that uses your new module.
-
npx create-expo-module my-module
2
Navigate to the module directory and then open the Android and/or iOS example project by running the following commands:
-
cd my-module
-
npm run open:android
-
npm run open:ios
Now, you can run the example project on your device or simulator/emulator. When the project compiles and runs, you will see "Hello world! 👋" on the screen.
Note: If you're using Windows, you can open the example project by opening the android directory in Android Studio, but you cannot open the iOS project files.
3
Open up MyModuleModule.kt in Android Studio (⌘ Cmd + O or Ctrl + O and search for MyModuleModule.kt). Change the hello
method to return a different string. For example, you can change it to return "Hello world! 🌎🤖"
. Rebuild the app and you should see your change.
Open up MyModuleModule.swift in Xcode (⌘ Cmd + O or Ctrl + O and search for MyModuleModule.swift). Change the hello
method to return a different string. For example, you can change it to return "Hello world! 🌎🍎"
.
If you added new native files, you need to reinstall the pods using pod install --project-directory="example/ios"
.
Rebuild the app and you should see your change.
Now that you've learned how to initialize a module and make simple changes to it, you can continue to a tutorial or dive right into the API reference.
Create a simple, but complete, native module to interact with Android and iOS preferences APIs.
Outline for the Expo Module API and common patterns like sending events from native code to JavaScript.