Guides
Plan-enterprise-icon
Expo Application Services
API Reference

registerRootComponent


This function tells Expo what component to use as the root component for your app.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon

Installation

This API is pre-installed in managed apps. It is not available for bare React Native apps.

Terminal
expo install expo

API

import { registerRootComponent } from 'expo';

registerRootComponent(component)

Sets the main component for Expo to use for your app.

Info-icon

Note: Prior to SDK 18, it was necessary to use registerRootComponent directly, but for projects created as of SDK 18 or later, this is handled automatically in the Expo SDK.

Arguments

  • component (ReactComponent) -- The React component class that renders the rest of your app.

Returns

No return value.

Info-icon

Note: registerRootComponent is roughly equivalent to React Native's AppRegistry.registerComponent, with some additional hooks to provide Expo specific functionality.

Common questions

I created my project before SDK 18 and I want to remove registerRootComponent, how do I do this?

  • Before continuing, make sure your project is running on SDK 18 or later.
  • Open up main.js (or if you changed it, whatever your "main" is in package.json).
  • Set "main" to "node_modules/expo/AppEntry.js".
  • Delete the registerRootComponent call from main.js and put export default before your root component's class declaration.
  • Rename main.js to App.js.

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 Expo 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, for example. First, set this in package.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.

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

class App extends React.Component {
  render() {
    return <View />;
  }
}

registerRootComponent(App);
  • Message-iconAsk a question on the forums about registerRootComponent
  • Github-iconView open bug reports for registerRootComponent
  • Code-iconView source code for registerRootComponent
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?