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

Answer 4

If your project is in managed workflow setup (the default one), as stated in the doc, you must import the registerRootComponent and call it with your root component as argument, in the file you wish to be the main one:

import { registerRootComponent } from 'expo';

const AnyName() { ... } // Your root component

registerRootComponent(AnyName)

And then, in your package.json file, change the "main" to this file relative path, like

{
  "main": "src/main.js"
}

Answer 5

The entry point can be found in node_modules/expo/AppEntry.js.. This is in Expo Typescript...

import registerRootComponent from 'expo/build/launch/registerRootComponent';
 import App from '../../src/App';
 registerRootComponent(App);

In this you can change your entry point. Initially it is set to App, Look the import statement where that component is coming from.

Answer 6

I created project by react-native-script. In default entrypoint of app (App.js), you export App which import from your entry.

- node_modules
- App.js
- build
    - main.js

File App.js:

import App from './build/main'
export default App

Answer 7

Solution:

In package.json add

"main": "src/App.tsx",

Then in your App.tsx you need to register

registerRootComponent(App);

Idea is in package you point to where the App is being registered and NOT the actual App component, but where you are registering.

In my case i have both App.tsx and registration happening in same file and works fine.

More info: https://docs.expo.dev/versions/latest/sdk/register-root-component/

Answer 8

I also prefer to put all sources in a separated folder, for instance src/, and I found a different solution:

1. in my package.json, generated by expo cli, I see that main attribute is node_modules/expo/AppEntry.js.
2. I copied node_modules/expo/AppEntry.js to src/expoAppEntry.js and just changed the App import to import App from './App'; so it points to my *src/App.tsx`
3. then of course I changed the package.json main attribute to src/expoAppEntry.js.

See a working example here https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js

Answer 9

For those who are using Expo with typescript, you dont have to add .tsx at the end of the entrypoint in app.json. For example your entrypoint can be:

{
  "expo": {
    "entryPoint": "./app/components/AppEntryPoint/App.component",
    "name": "Sample App",
     ...
     }
  ...
}

In this example the name of entrypoint component is App.Component.tsx. But not mentioning the extension will also work. Apart from this, in the root component, writing export default registerRootComponent(AppComponent) or registerRootComponent(AppComponent) both should work as exporting a component from a file only means that other files can use it as well. Not writing it should not be an issue here because we have mentioned in app.json that this is the root component. App.json will look up and start building the structure of the app from there itself.

Answer 10

When using expo, instead of having the main entry point be in app/index.js, I wanted it the main entrypoint to be App.tsx at the root of the project. I merely added this line to my package.json (found from comparing the template code for a blank expo project):

"main": "node_modules/expo/AppEntry.js",