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-51/packages/expo/src/launch packageName: expo platforms: ["android", "ios", "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. {/* TODO: Remove this after https://github.com/expo/expo/pull/18596 */} - Polyfills `console.log` to send logs to the dev server via `/logs` #### 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? {/* NOTE: This is only accurate if we land https://github.com/expo/expo/pull/18381 */} You can set the `"main"` in **package.json** to any file within your project. If you do this, then you need to use `registerRootComponent`; `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.js"` 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 { "main": "src/main.js" } ``` Then in `"src/main.js"`, make sure you call `registerRootComponent` and pass in the component you want to render at the root of the app. ```tsx function App() { return ; } registerRootComponent(App); ```