Best Folder Structure For React Native Project

React Native is a popular framework for building cross-platform mobile applications. It allows developers to use the same codebase for both iOS and Android applications, which makes the development process more efficient. One of the key aspects of building a successful React Native project is having a well-organized project structure. In this blog, we will discuss the best practices for structuring a React Native project.

Base dependencies

• axios for networking.
• react-navigation navigation library.
• redux for state management.
• redux-persist as persistence layer.
• redux-thunk to dispatch asynchronous actions.

Folder structure

This template follows a very simple project structure:

• assets: Asset folder to store all images, vectors, fonts, etc.
• src: This folder is the main container of all the code inside your application.
• components: Folder to store any common component that you use through your app (such as a generic button)
• constants: Folder to store any kind of constant that you have.
• routes: Folder to store the navigators.
• redux: This folder should have all your reducers and store
• views: Folder that contains all your application screens/features.
• helper: Common api controller.
• utils: Folder to store any common function such as calculate the radius and different date formatting functions.
• App.js: Main component that starts your whole app.
• index.js: Entry point of your application as per React-Native standards.

Modify the environment variables files in the root folder (.env)

How to use it

The idea of this section is to explain how the template composition is the best and easiest to use when you try to use well-formed, architectures, especially using redux flow.

The template follows a simple and convenient exporting pattern. The folder index exposes the resources, allowing to import all from the same path.

Components

Components are the basic blocks of a React native application, but since we​​ aim to minimize development complexity, all the components are at the same nesting level.

Another important thing is the use of propTypes to check the kind of data that your components need to work properly. If the component receives some data from others, the type of these props must be defined, and in case you need it the default value of the property too.

API connection handler

To keep the networking layer simple, the template uses a single Axios instance in the api.js. It uses interceptors to define common side effects for the responses.

Views

In this folder, you have the main objects to apply the composition architecture. Just create a folder for each screen you have in your application, call all the components and static resources you need to render the scene, and finally use the corresponding hooks to interact with redux and create behaviors depending on the store.

Conclusion

This is just one way I found to be productive and better organized your code among the team, I hope it helps you too. You can find a ready-to-use project structure on GitHub.

https://github.com/VinitBhavsar/React-Native-Project-Structure

Happy Programming!

If you found this article helpful, don’t forget to share and clap! 👏