App Structure

App Structure

There are Five main folder structures in an React Native app:

App: App has all the files needed to the app and the main structure we will build the app upon.

common: It has some files which we reuse in app.

components: It has UI components which we used in App.

containers: It has all pages of project.

Images: It has all icons, background Image and some other images.

Stores: It have Action and Reducer. Action is pretty straightforward. All it does is return an action that the reducer will ‘hear’. Reducer have one extra property of state. So, if your app has a users reducer, a messages reducer, and a notifications reducer, your state object.

Note: If you want more information, please refer to React Native Getting Started pages.

App

app.js: It is the main entry point of our app. It defines the basic structure and initial navigation of the app.

In our case we have a side menu navigation. In this file we define which page would be the first one and the options and navigation of the side menu. It’s also where we get notified when the platform is ready.

Common:

It contains a standard file which we are using in your project. In our case, we defined all the colors used within the app and made it easy to change color so you can play around and try different color schemes.

primary : #4bc08a // You can add your own color.

We also defined constant variable which used within the app is easy to change variable value.

base_url: 'https://restaurantrestapi.herokuapp.com/' // you can add your own database URL

We also define Icons and SideBar inside the common.

Components:

We made from active building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with a rich set of customizable properties. These components allow you to build the perfect interface quickly.

We include components such as anatomy of your app screens, button, badge, icon, radio-button, list, card, spinner, Avatar, etc. You can style these components.

Containers:

It includes pages which is connected with redux.