registerRootComponent

A universal component that allows setting the initial React component to render natively in the app's root React Native view.

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 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.

  @Override
  protected String getMainComponentName() {
+    return "main";
  }

Manual iOS setup

This is only required if your app does not use Expo 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

import { registerRootComponent } from 'expo';

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
• Invokes React Native web's AppRegistry.runApplication on web to render to the root index.html file.
• Polyfills the 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?

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.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:

{
  "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.

import { registerRootComponent } from 'expo';
import { View } from 'react-native';

function App() {
  return <View />;
}

registerRootComponent(App);