Expo Docs MCP Server

--- title: registerRootComponent description: A universal component that allows setting the initial React component to render natively in the app's root React Native view. sourceCodeUrl: https://github.com/expo/expo/tree/sdk-52/packages/expo/src/launch packageName: expo platforms: ["android", "ios", "tvos", "web"] --- Sets the initial React component to render natively in the app's root React Native view on Android, iOS, and the web. It also adds dev-only debugging tools for use with `npx expo start`. ## Installation ### Manual Android setup > This is only required if your app does **not** use [Expo Prebuild](/workflow/prebuild) to continuously generate the **android** directory. Update the **android/app/src/main/your-package/MainActivity.java** file to use the name `main` in the `getMainComponentName` function. ```diff @Override protected String getMainComponentName() { + return "main"; } ``` ### Manual iOS setup > This is only required if your app does **not** use [Expo Prebuild](/workflow/prebuild) to continuously generate the **ios** directory. Update the iOS **ios/your-name/AppDelegate.(m|mm|swift)** file to use the **moduleName** `main` in the `createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps` line of the `application:didFinishLaunchingWithOptions:` function. ## API ```ts ``` ### `registerRootComponent(component)` Sets the initial React component to render natively in your app's root React Native view (`RCTView`). This function does the following: - Invokes React Native's [AppRegistry.registerComponent](https://reactnative.dev/docs/appregistry.html) - Invokes React Native web's `AppRegistry.runApplication` on web to render to the root `index.html` file. - Polyfills the [`process.nextTick`](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#process-nexttick) function globally. - Adds support for using the `fontFamily` React Native style with the `expo-font` package. This function also adds the following dev-only features that are **removed** in production bundles. - Adds the Fast Refresh and bundle splitting indicator to the app. - Asserts if the `expo-updates` package is misconfigured. - Asserts if `react-native` is not aliased to `react-native-web` when running in the browser. #### Arguments - **component (ReactComponent)**: The React component class that renders the rest of your app. #### Returns No return value. ## Common questions ### What if I want to name my main app file something other than App.js or app/\_layout.tsx? **For projects that do not use [Expo Router](/router/introduction/)**, you can set the `"main"` in **package.json** to any file within your project. If you do this, then you need to use `registerRootComponent`. The `export default` will not make this component the root for the app if you are using a custom entry file. For example, let's say you want to make **src/main.jsx** the entry file for your app — maybe you don't like having JavaScript files in the project root. First, set this in **package.json**: ```json package.json { "main": "src/main.jsx" } ``` Then, in **src/main.jsx**, make sure you call `registerRootComponent` and pass in the component you want to render at the root of the app: ```jsx src/main.jsx function App() { return ; } registerRootComponent(App); ``` **For projects that use [Expo Router](/router/introduction/)**, you can create a custom entry point by following these steps from [Expo Router's installation guide](/router/installation/#custom-entry-point-to-initialize-and-load). To use the top-level **src** directory in your Expo Router project, see [src directory reference](/router/reference/src-directory/) for more information.