How do you structure components and screens when using expo, native-base and react-navigate?

user_8344181 0
Viewed 7114

Just starting out with trying to build an app with React Native. I decided to use expo + react-navigate + native-base as a baseline, however I am having trouble setting up my project because each documentation seems to be doing things differently.

Specifically, I would like to know where to keep the code for components (e.g. a searchbar) and different screens in react-navigate. The documentation for react-navigate seems to be keeping all screens in the App.js file, but shouldn't I be separating different screens into different .js files in a subfolder? The documentation for native-base completely changes the App.js file so that I have no idea how to implement screens within that. All guides I could find seem to be outdated or not using the expo file structure, so I am having trouble getting the setup to work.

Thanks in advance!

native-base react-navigation expo react-native
1 Answers

Usually the file structure is somewhat like this:

  • node_modules
  • expo
  • src
    • screens
    • components
  • app.js
  • package.json
  • package-lock.json

The src folder will not be there when you initially do expo start. You will have to make it.

Generally you put the components that you use, in the components directory of the src folder, and the screens in the screens directory. The screens from the screens directory use the components from the components directory.

The app.js file is usually used for the initial screen you want to display on start-up of the app. But also most people make this app.js file into a navigator file where you can import all the navigation screens.

Keep in mind that these rules are just convention, you can customise according to your convenience as well.

user_117581460
Related