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