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
-
npx expo install expo
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 rootindex.html
file. - Polyfills the
process.nextTick
function globally. - Adds support for using the
fontFamily
React Native style with theexpo-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 toreact-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, 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:
{
"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);
For projects that use Expo Router, you can create a custom entry point by following these steps from Expo Router's installation guide. To use the top-level src directory in your Expo Router project, see src directory reference for more information.