How to define entry point for react native app

Question

I'm just getting started with react native and have created a base app with create-react-native-app.

I did some restructuring and made a few new folders and renamed the App.js to Home.js. I modified the app.json to contain an entry point that references the new Home.js file. When I load the app, nothing happens. There's no error, it just stays on the expo screen.

.
 -components
 -screens
    -Home
        Home.js
 -config
 -node_modules
 -tests
 app.json

app.json file:

{
  "expo": {
    "sdkVersion" : "23.0.0",
    "entryPoint" : "./screens/Home/Home.js"
  }
}

How do you define the entry point of the app?

Answer 1

if you are using Expo, you have to specify the entrypoint in your app.json file like this:

{
  "expo": {
    "entryPoint": "./src/app/index.js"
  }
}

then, inside that file you need to register the app with Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)

import Expo from 'expo'
...

class App extends Component {
  ...
}

export default Expo.registerRootComponent(App);

this way you can add your entry file wherever you want.

Answer 2

You need to update the app.json so that the entryPoint is the new path to the App.js.

{
  "expo": {
    "entryPoint": "./src/App.js",
    ...
  }
}

However using Expo.registerRootComponent(App) causes the following error in SDK 32:

undefined is not an object (evaluating '_expo.default.registerRootComponent') 

It can be fixed by importing registerRootComponent explicitly, rather than trying to access it via Expo.registerRootComponent.

Here is a sample App.js.

import { registerRootComponent } from 'expo';

class App extends React.Component {
  ...
}

export default registerRootComponent(App);

Answer 3

For Expo Projects

According to the current Expo documentation, if you want a different entry point than the App.js file, you can update the package.json - add a main field with the path to the desired entry point. Then inside the entry point file you'll have to also have to register the root component of the app. Expo was doing this automatically, when the entry point wasn't specified and was the App.js file

package.json

{
 "main": "my/customEntry.js"
}

entryPointFile.js

import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';

registerRootComponent(MyRootComponent);

---

What if I want to name my main app file something other than App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my