Change project file structure and stop using relative paths

Expo SDK
9
  1. Move everything to /src

Create an /src folder within your expo project folder. Then in the App.js you load your Main.js file from the /src folder

/App.js

import React from 'react';
import Main from './src/Main';

const App = () => (
  <Main />
);

export default App;

In the /src/Main.js you can call all your other React Native components from this folder with

import MyStore from './stores/MyStore';

While the structure is /src/stores/MyStore

  1. Relative paths (via Module-Resolver)

If you have a lot of subfolders (all within the /src) and don’t want to go up 3 levels of folders like this:

import MyComponentList from '../../Lists/MyComponentList';

You can use an alias to define a path like this:

  • Open up your .babelrc file
  • Add and edit the following at the end :
"plugins": [
    ["module-resolver", {
      "alias": {
        "your-alias": "./src",
      }
    }]
  ]
  • After you added this and restarted your project you can use the alias everywhere like this:
import MyComponentList from 'your-alias/Lists/MyComponentList';
4 Likes