React Native - Change folder of App.js or App.tsx into subfolder

Words: 214 - (2 min read)

React Native - Change folder of App.js or App.tsx to subfolder

Introduction

You may want to next your app within a different folder to make your dev environment cleaner. You can do this by moving your App.js or App.tsx into a /app folder.

Setup

I'm going to move my app into a /app folder but you may use /src etc.

Say my structure is currently like this:

.expo/
App.tsx
ios/
node_modules/
.gitignore
app.json
package.json
...

First we will create our /app folder.

We can then move our App.tsx (App.js) and the rest of my app /assets etc to this folder.

Within that folder we will create an AppEntry.tsx file:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from './App';

registerRootComponent(App);

Lastly, we need to tell the app where the entrypoint is. We will need to update our package.json file by setting the main:

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "app/AppEntry.tsx",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  ...
}

You will end up with a structure like:

.expo/
app/App.tsx
app/AppEntry.tsx
app/assets/logo.png
ios/
node_modules/
.gitignore
app.json
package.json
...

That's it, start your app with npm run ios and away you go. Good luck!