Simple React Native App Structure

Introduction

This post reflects a personal opinion on how to organize and structure a React Native project and some best practices to have.

Folder structure

Each developer has it own way of organizing a project and there is no right or wrong way. In this post, we will present what we consider a more generic and simple way to organize concerns and components on a React Native project.

We start by create a folder called app that will contain all the files for our application. Then we create the following folders:

• Assets
• Routes
• Screens
• Components
• Store
• Reducers
• Actions
• API Functions

To export a component, we create a structure that the folder represents the name of the component and the index.js file with the code itself. This way, when importing a component, we only need to import the folder, and the import will be from the default index.js file.

Assets

This folder is used to store all the assets for our app, images, logos, etc.

Components

In this folder, we create all the React components that will be part of our app and any custom component that we create during the app’s development. We can group components by features or places they will be used and components that will be used throughout our app, like buttons or texts.

Routes

Every React Native app needs a navigation library. In this folder, we’ll create the routes structure of our application. These routes will reflect the screens that we can navigate to.

Screens

This folder includes all the screens that we can navigate to. On each screen, we can use the components that we build on the components folder.

Store

For this post, we will use Redux as our state management library. So this folder will include the reducers with the state, the actions to update the reducer or fetch any information on an API.

Libraries installed

Redux

yarn add react-redux redux

Navigation

yarn add @react-navigation/native

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

If you have any questions or comments, don’t hesitate to reach out

I’m a software developer from Portugal, currently working at Runtime Revolution as a front-end and mobile developer.