defining expo entryPoint in app.json does not work

Question

I am building a React-Native android application. I want to move the App.js file into a src folder for a cleaner file structure so I added this line to the app.json file inside the expo object:

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

When I run the app I get the same old default expo App. It doesn't matter what I have in the file. The moment I change anything it throws this error:

Unable to resolve "../../App" from "node_modules/expo/AppEntry.js"

I also tried adding this line to the file as recommended here:

export default Expo.registerRootComponent(App);

I'm using Linux and an android studio simulator.

Answer 1

Whenever I have tried this what worked for me was to import registerRootComponent and use it in the following way:

Here is a very simple App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { registerRootComponent } from 'expo'; // import it explicitly

class App extends React.Component {
  render () {
    return (
      <View style={styles.container}>
        <Text>Hello</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

export default registerRootComponent(App); // this is how I register the App component

Here is my app.json

{
  "expo": {
    "entryPoint": "./src/App.js", <---- notice my entry point
    "name": "ExpoTester",
    "slug": "ExpoTester",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

Here is my package.json

{
  "name": "NewApp",
  "version": "0.0.0",
  "description": "No description",
  "author": null,
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "dependencies": {
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  }
}

This is my file structure:

├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── package-lock.json
├── package.json
└── src
    └── App.js <- notice the App.js is no longer in the root directory it is now in src

Also when making any significant changes to the structure of the app I like to close down the bundler and then restart it using expo start -c to make sure that the cache is cleaned.

Answer 2

Well, for those who got this error:

[Unhandled promise rejection: Error: Unable to activate keep awake].

I found a new approach to achieve the restructuring based on this and the answer provided by Andrew above.

This is my structure:

.expo
  |- many_files
.expo-shared
  |- many_files
assests
  |- many_files
node_modules
src
  |- App.tsx
app.json
package.json
... (many more)

This is my package.json:

{
  "main": "./src/App.tsx",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

My app.json:

{
  "expo": {
    "entryPoint": "./src/App.tsx",
    "name": "front",
    "slug": "front",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

And finally, my App.tsx:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { registerRootComponent } from 'expo'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style='auto' />
    </View>
  )
}

export default registerRootComponent(App)