1--- 2title: 'Expo Modules API: Get started' 3sidebar_title: Get started 4description: Learn about getting started with Expo modules API. 5--- 6 7import { BookOpen02Icon, Grid01Icon } from '@expo/styleguide-icons'; 8 9import { BoxLink } from '~/ui/components/BoxLink'; 10import { Step } from '~/ui/components/Step'; 11import { Terminal } from '~/ui/components/Snippet'; 12 13**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](/modules/existing-library) covers the latter case. 14 15The two recommended flows to create a new module with Expo Modules API: 16 17- [Add a new module to an existing Expo application, and use it to test and develop your module.](#adding-a-new-module-to-an-existing-application) 18 19- [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.](#creating-a-new-module-with-an-example-project) 20 21Both of these flows are covered in the next sections. 22 23## Adding a new module to an existing application 24 25<Step label="1"> 26 27### Creating the local Expo module 28 29Navigate 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: 30 31<Terminal cmd={[`$ npx create-expo-module@latest --local`]} /> 32 33It's best to provide a meaningful module name. However, you can accept the default suggestions for the rest of the questions. 34 35</Step> 36 37<Step label="2"> 38 39### Using the module 40 41If you have an **ios** directory in your project that you created using `npx expo prebuild`, you must reinstall the pods: 42 43<Terminal cmd={[`$ pod install --project-directory=ios`]} /> 44 45> **Note:** 46> If you're using a development client, you need to rebuild your development client any time you want to use new native code. 47 48Now, import the module in your application, for example in **App.js** or **App.tsx**: 49 50```js 51import { hello } from './modules/my-module'; 52``` 53 54To run your app locally, run the `prebuild` command and then compile the app: 55 56<Terminal 57 cmdCopy="npx expo prebuild --clean && npx expo run:ios" 58 cmd={[ 59 '# Re-generate the native project directories from scratch', 60 '$ npx expo prebuild --clean', 61 '# Run the example app on Android', 62 '$ npx expo run:android', 63 '# Run the example app on iOS', 64 '$ npx expo run:ios', 65 ]} 66/> 67 68Congratulations! You have created a local Expo module. You can now start working on it. 69 70> **Note:** 71> You can also use absolute import paths [with some configuration changes](https://expo.fyi/absolute-path-expo-modules.md). 72 73</Step> 74 75<Step label="3"> 76 77### Editing the module 78 79#### Android 80 81If you have an **android** directory in your project that you created using `npx expo prebuild`, you can open the directory in Android Studio. 82 83You 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. 84 85Change the `hello` method to return a different string. For example, you can change it to return "Hello world! ����". 86 87Rebuild the app or build a new development client and you should see your change. 88 89#### iOS 90 91Open 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 `npx expo prebuild`, you can use Xcode to edit them. 92 93Now, change the `hello` method to return a different string. For example, you can change it to return "Hello world! ����". 94 95Rebuild 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). 96 97</Step> 98 99> **Note** 100> 101> There are also other flows for working on an Expo module in parallel with your application. 102> For example, you can use a monorepo or publish to npm, as described in [How to use a standalone Expo module in your project](/modules/use-standalone-expo-module-in-your-project) guide. 103 104## Creating a new module with an example project 105 106<Step label="1"> 107 108### Creating the Expo module 109 110To create a new Expo module from scratch, run the `create-expo-module` script as shown below. 111The 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. 112 113<Terminal cmd={[`$ npx create-expo-module my-module`]} /> 114 115</Step> 116 117<Step label="2"> 118 119### Running the example project 120 121Navigate to the module directory and then open the Android and/or iOS example project by running the following commands: 122 123<Terminal cmd={[`$ cd my-module`, `$ npm run open:android`, `$ npm run open:ios`]} /> 124 125Now, 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. 126 127> **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. 128 129</Step> 130 131<Step label="3"> 132 133### Making a change 134 135#### Android 136 137Open up **MyModuleModule.kt** in Android Studio (<kbd>⌘ Cmd</kbd> + <kbd>O</kbd> or <kbd>Ctrl</kbd> + <kbd>O</kbd> 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. 138 139#### iOS 140 141Open up **MyModuleModule.swift** in Xcode (<kbd>⌘ Cmd</kbd> + <kbd>O</kbd> or <kbd>Ctrl</kbd> + <kbd>O</kbd> and search for **MyModuleModule.swift**). Change the `hello` method to return a different string. For example, you can change it to return `"Hello world! ����"`. 142 143If you added new native files, you need to reinstall the pods using `pod install --project-directory="example/ios"`. 144 145Rebuild the app and you should see your change. 146 147</Step> 148## Next steps 149 150Now 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. 151 152<BoxLink 153 title="Creating your first native module" 154 description="Create a simple, but complete, native module to interact with Android and iOS preferences APIs." 155 href="/modules/native-module-tutorial" 156 Icon={BookOpen02Icon} 157/> 158 159<BoxLink 160 title="Module API Reference" 161 description="Outline for the Expo Module API and common patterns like sending events from native code to JavaScript." 162 href="/modules/module-api" 163 Icon={Grid01Icon} 164/> 165