Edit this page
Learn about getting started with Expo modules API.
Edit this page
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 covers the latter.
The two recommended flows to create a new module with Expo Modules API:
Add a new module to an existing Expo application, and use it to test and develop your module.
Create a new module in isolation with a generated example project if you want to reuse it in multiple projects or publish it to npm.
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. This is the recommended way to create a local Expo module.
-
npx create-expo-module@latest --local
Then, if your project doesn't native projects generated (android and ios directories), run the following command, otherwise skip this command:
-
npx expo prebuild --clean
You can provide a meaningful module name in the CLI prompt. For the rest of the prompts, you can also accept the default suggestions.
Note: If you have a pre-existing ios directory in your project's root which was created using
npx expo prebuild
, you must reinstall the pods:
Terminal-
npx pod-install
2
Import the local module in your application, for example in App.js or App.tsx or app/index.tsx:
%%placeholder-start%%...%%placeholder-end%%
import { hello } from './modules/my-module';
export default function App() {
return (
<View style={styles.container}>
<Text>{hello()}</Text>
</View>
);
}
Start the development sever in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:
-
npx expo start
Congratulations! You have created a local Expo module. You can now start working on it.
Tip: You can also use absolute import paths by applying these configuration changes.
3
To develop and test your module locally, let's use Android Studio and Xcode for Android and iOS.
npx expo prebuild
in step 1) from your project in Android Studio. It may take a while for Gradle to finish syncing the native directory project.hello
function to return a different string, such as "Hello world! 🌎🤖" and save the file.You have to repeat the build step anytime you make a change to the native code to the changes.
npx expo prebuild
in step 1) from your project in Xcode by running xed ios
command.hello
function to return a different string, such as "Hello world! 🌎🍎" and save the file.You have to repeat the build step anytime you make a change to the native code to the changes.
Tip: Usenpx pod-install
to reinstall the pods if you add new native files to the module or when you modify expo-module.config.json.
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 the How to use a standalone Expo module 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@latest 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
Go to example directory and start the development sever in your terminal so that when you edit the native module and build the app in the next step, the changes will be reflected in the app:
-
cd example
-
npx expo start
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
hello
function to return a different string, such as "Hello world! 🌎🤖" and save the file.You have to repeat the build step anytime you make a change to the native code to the changes.
hello
function to return a different string, such as "Hello world! 🌎🍎" and save the file.You have to repeat the build step anytime you make a change to the native code to the changes.
Tip: Usenpx pod-install
to reinstall the pods if you add new native files to the module or when you modify expo-module.config.json.
Now that you have 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.