React Native Folder Structure — For Simplicity (Part 1)

npx react-native init, then what?

simple react native structure folder

After 6 months of coronavirus attack, react native becomes less popular than covid19, so i want to share to you guys how to make simple structure folder for mobile app development and make react native being popular again (lol kidding). React native is one of the most popular cross-platform mobile framework based on statista survey. What is the main reason of it? It is because the freedom for developer to create structure folder according to the needs of each developer and requirements itself.

default Android structure folder

This is the default Android native structure folder. As we can see, the structure folder is generated completely after we create new project in Android Studio.

1. manifest (contains the AndroidManifest.xml file).
2. java (contains the Java source code files, separated by package names, including JUnit test code).
3. res (contains all non-code resources, such as XML layouts, UI strings, and bitmap images, divided into corresponding sub-directories. For more information about all possible resource types, see Providing Resources.) and
4. gradle scripts (library and another configuration).

default react native structure folder

Meanwhile, this is the default react native structure folder. It is generated after we run npx react-native init MyTestApp. This structure folder is really confusing for react native developer because there are only platform folder (Android/iOS), node_modules and another files. index.js file becomes the head when it is running and app.js becomes the view of index.js.

default index.js

Then, we have to create our own structure folder, because the default folder just gives index.js and app.js, no clue for the structure folder. Actually, there are many example of easy and simple structure folder for react native, but sometimes, it needs more understanding, depends on the react fundamentals.

simple react native structure folder

1. assets
   Assets is a folder to store static resources, like fonts and images. Sometimes, an app can use more than 1 font, just put them in this folder. Images folder is used to store images for local, maybe for icon, app launcher, etc.
2. src
   Src is a folder to store all of source code that is used. It is the most general structure folder for react native, usually there are actions, components, pages/screens, reducers and routes/navigations. In this case, i use react-redux for reducers, it connects the actions, constants and reducers folder.

• actions
  It is used to store all the function to call API or set Asyncstorage.

example of funtion in actions

• components
  It is used to store all the granule or compound level items here like atoms (for smallest components like custom button, input etc) or mixed of small components if needed (it is the best way for reusable components rather than we import and code one by one just for the same components). In the next post i will explain how to create the reusable components for the better performance and faster coding.

example of reusable components, it depends on our needs

• config
  It is used to store all the configurations. In this case, i have the configuration for channels, colors, fonts, images and strings. Why do we have to create config folder? it is to simplify for exporting the resource files. For example we want to export all images that we store in the assets/images folder.

example of image config

• constants
  It is used to store all uri link API that will be imported in actions. For example in the actions folder (image above), there is the function of postVersion, the link uri is imported from constants folder, so it calls

calling checkVersion uri link API

state for fetch and receive in constants

example of uri link rest api

• pages
  It is used to store all pages/screens or the UI that user will interact with, using class component or functional component. If there are many pages, just create folder for each page to make it easier for development.

example of pages/screens folder structure

• reducers
  It is used to store all the reducers state that connect to actions. Just like i explained before, in this case i use react-redux for reducers. Let’s take the example in postVersion function, there is the state reducer calls

state in postVersion function

We must create all types in reducers using switch-case logic based on action type.

initialState and switch-case logic based on action type

• routes
  It is used to store all the stack navigation. Firstly, we import all the pages like this

example of import all pages in routes

Secondly, createStackNavigator and createAppContainer to construct all the pages.

example of createStackNavigator

example of export the createAppContainer from StackComponent

Lastly, export them and store in const Stack.

• utility
  It is used to store all the repeated functions which related to data (not UI), like sorting, calculating, filtering, etc. The way to use it is just import the utility file and point to the function which we want to use.

example of utility for each function

3. index.js
This is the head file when we running the react native project. The start point where we will define our app that brings all modules together here to link and start navigation of the application. In index.js, i set some configuration:

example of index.js

a. Environment. It is for the environment that we use for development either it is development or production. If development, i set the logger to display all the logs for debugging (it is because react native doesn’t have IDE tool like Android Studio)

b. Middleware. I store reducers for calling API and create middleware

c. AppRegistry. In AppRegistry, i call AppContainer that renders all the views, in this case, i call the Stack component which is the routes folder that i import

4. react-native.config.js
Actually, it is just additional file if we want to use custom fonts. Set the assets path where fonts are stored, for example in assets/fonts/. More explanation of this.

example of config custom fonts

So, those are all explanations of each folder. Of course there are some pros and cons to the folder structure.
[PROS]
1. The config folder can be used to set dual language, dark/light mode (theme colors), etc. It is like the settings of our app.
2. Reducers are separated based on each function, that’s why there are folder for actions (for calling API), constants (for storing uri link API), and reducers itself.
3. It is easy for maintenance and tracking the issue that happens to our app.

[CONS]
1. In actions and reducers folder, we have to create one by one for each action type, even though all states are same (i will fix it, maybe for the next post?).
2. It is not recommended for the complex app (has many features/modules) because of the cons number 1, it will produce long lines of code. The alternative is it can be put in the same folder, so there is 1 page + 1 redux for each page or each API function.
3. In redux management, the using of 1 file. If more than 1 developer working simultaneously, there will be conflict when put API for the reducer.

Introduction · React Native

An efficient way to structure React Native projects | Cheesecake Labs

React Native Folder Structure — For Simplicity (Part 2)