Many of you probably have designed and developed multiple applications already but are you using best practices in your code?
Hi, I am a React Native developer and I’m going to tell you about the best folder structure for React Native here. This blog summarizes why a properly defined folder structure is very important. You can count it as one of the best practices of writing code.
After working on some projects, I came up with the following folder structure. There is no defined pattern for a folder structure. So, we can create according to our project requirement.
I worked with this format on the last project I had and I can certainly say, it helped me a lot during the entire application development lifecycle. So, let’s get started-
I created a structure which is as follows-
As seen in the referenced screenshot above, At the very first I created a base folder “src” which will store all the necessary folders or files in it for the project.
assets/
This folder will store all the assets that we are using in react-native. You can add static files like fonts and images to it. Also, you can add more assets like videos in this folder according to your project requirements.
If you started folder name with a small letter then it should be the same for all the folder names.
components/
In the components folder, you can create multiple component files that are used to wrap the application components and determine their overall layout. You can also add reusable and UI components.
You can divide components based on categories: atoms, organisms, molecules & templates.
- atoms- The smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts can be stored in the atoms folder.
- molecules- They are the composition of one or more components of atoms.
- organisms- The combination of molecules that work together or even with atoms that compose more elaborate interfaces.
- templates- The collection of organisms that will make a full-page template.
- page- The page will look like the referenced screenshot below-
containers/
Just as the name implies, you can put all screen-based components inside containers, such as Splash Screen, Home Screen, bottom Tabs, Sidebar, common header, and the container-based files, etc.
The use case for this folder is included and represents a screen being exported.
screens/
If you have multiple screens like auth screens: login, register and profile screens, product screens it can be saved here.
i18n/
This holds translation files for different languages in which you’re using your application.
navigation/
Your project base navigation goes here. You can create a stack navigator in it and export it to your application.
stores/
We are using Redux and Redux-Sagas in our project and handle business logic using them. If you are using Redux, then there must be action, reducers, saga, and services files that can be put here.
In stores, you can create an actions folder and you can store different types of actions in this folder. You can do the same as reducer, saga, and for services.
/actions.js
You can store different types of actions in this folder. The action folder contains all the calling action creators for this feature according to your project requirement.
/reducers.js
Our application’s navigation data now takes a slice of the application state, we would need a reducer to properly update this sliced data based on triggered actions.
/selectors.js
This might come across as a bit strange to some of us, however, this segment of our architecture is influenced by the reselect package, which enables us to efficiently compute derived data from our application’s state.
/services.js
The service folder contains logic, related to external API communications.
utils/
All the utils/helpers files go here that storing reusable methods and logic like validations, progress bar, date pickers, and according to your app requirements.
hooks/
If you have custom hooks defined in your project you can put it over here that can be shared across your entire project.
styles/
You can add universal styles here like flexDirection: row, centerAll, itemsEnd and container-like equally spacing from all directions and many more. Here we place the explore feature’s components related styles.
theme/
- fonts- It contains global fonts like font size, font type, and font-weight. Whenever you come across situations where you need to use the same size of fonts and the same font family, you have to create a theme/font.
Here’s what the /theme/fonts.js looks like:
- colors- All the colors your application using goes here. All the repeating colors, for example, your application has theme colors which are black & red so you can add primary & secondary colors like black & red. Sample code you can see below image.
Here’s what the /theme/colors.js looks like:
- metrices- This will hold your device dimensions so you can export and use them for responsive layouts. It will manage all the fonts, margins, and images according to device size.
Here’s what the /theme/metrics.js looks like:
Conclusion
As we can see there are many ways to organize your code from the simplest to the most complex. It all depends on the codebase size and the team that manages it.
This is just one way I found to be productive and better organized your code among the team, I hope it helps you too.
Happy Programming!
If you found this article helpful, don’t forget to share and clap! 👏