How to structure your React Native Project ?
The world’s latest technologies, policies, business-boosting strategies will be written here. Contact Morosoft

It’s very important to structure a React Native Project.
In this article, I will be using a simple project to show you the most efficient and easy way to structure your React Native project. As a result, you will be able to customize large apps. Let’s discuss an approach to architecture your large applications.



One of the best things I feel about the React Native is its flexibility because it is very flexible even we can write native modules for android and iOS separately.In other words you can organize your project the way you want.

[ultimate_heading main_heading=”Let’s create and structure your React Native project.” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

Open cmd and run the following command
react-native init clockit
cd clockit

Before jumping into the implementation process, let’s discuss the main tools and libraries that are necessary for an application.Therefor let’s start by installing them:

1) Native Base – A library with prebuilt components
2) React Navigation – Use for the navigation
3) Axios – For calling backend services
4) NetInfo – For handling our internet configurations
5) Redux – Apps state management
6) Redux Saga – Handling side effects
7) Enzyme – Testing React Native components

[ultimate_heading main_heading=”Let’s discuss the default structure of the React Native project :” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

1) android/ : android directory is responsible for handling and managing all native android code. If you explore further you will see files like android manifest, gradle files and xml files

2) ios/: same like android ios directory is responsible for handling and managing all native ios code. You have to use Xcode to open your project.

3) Index.android.js: it is an entry point for your application, you have to register your app in this file.

3) Index.ios.js: same like the android it is entry point for the iOS application, you will notice that both apps has same code.

[ultimate_heading main_heading=”Let’s check out the app directory now:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

app/ directory is where we will handle our all logic and implementation for the app, this directory will serve as a single point for our app, it has some bunch of sub directories in hand that are also important and help to reduce the code redundancy.

[ultimate_heading main_heading=”app/components :” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

This directory helps us to define our components once therefor we can use them later on where ever we want in the app. It helps to remove code redundancy and remove component states. We will be writing a mostly functional component in this that can be used in different places in the app.




Let’s take an example of a button, as it is clear that we have to use buttons on multiple time in an app so instead of repeating code, again and again, we will write a generic function in our component that can be used throughout the app, we just have to import that component in the respective screen. Let’s explore a bit about the component directory and its architecture.

If we look into this image we will notice three files. index.js file will be responsible that what will be exported outside the directory and we will be requiring only index.js in our screens or where ever we have to use that component. button.js file will encapsulate all our data and view.style.js file will include all the styles that are applied to that component.Now it will look like the over kill of our simple items but it will make our project architecture easy as our app will grow.

[ultimate_heading main_heading=”config/:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

configuration directory will include all the configurations of the app that we will use though out the app, we will place them in one place so that we can access them easily.

You can see here that we have got the routes.js file for handling all our routes in the app, we have got one place to store the routes, similar we have global.js file for handling all our serves settings and url etc.

[ultimate_heading main_heading=”app/screens:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

Normally an app has a lot of screens that a user see and interact with basically this directory handle almost all the UI part of an app, every route that you will register in routes file will be having a screen.

Therefor these screens are basically container for all our data fetching and implementation.

[ultimate_heading main_heading=”app/assets:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

This directory handles all the images that are used on website. In this way we can store all images on one place.

[ultimate_heading main_heading=”app/screens:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

Normally an app has a lot of screens that a user see and interact with them so this directory handle almost all the UI part of an app. As a result every route that you will register in routes file will be having a screen.

Therefor these screens are the box for our data processing and manipulation.

[ultimate_heading main_heading=”app/actions:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

This directory handles all the redux action that are dispatched from the screen.

export const loginUser = user => ({
  type: types.LOGIN_USER,
  user
});

[ultimate_heading main_heading=”app/reducers:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;” margin_design_tab_text=””][/ultimate_heading]

This directory is responsible for updating the states of an app because whenever an action is dispatched it communicates with reducer therefor it tells the store that which state of an app needs to be updated.

To enhance your knowledge regarding advanced technologies tune to Morosoft tweaks https://www.mstweaks.com/. If you want to be up to date with all what is happening in the world, Morosoft Tweaks is providing you all under one roof. We also aim to provide relevant information in a quick and sophisticated manner. Contact us: info@morosoft.pk

LEAVE A REPLY

Please enter your comment!
Please enter your name here