# Routing and Folder Structure [Mobile]

In Mobile, we have three seperate apps which are specific to the user type it caters to. The entire mobile codebase consists of five repositories as mentioned below.

1. Student App Codebase
2. Teacher App Codebase
3. Family App Codebase
4. Common Module
5. Locales

Common Module & locales are used within the first three codebases, as these two provides the general and common components and functionalities used across the three apps namely Student, Teacher & Family.

Below are few norms which we have to follow while adding new features to the app.

* To understand the routing structure of the app check the below mentioned directory.

   js/Root/Components

* When creating a new screen for the app. The folder structure should consists of two sections: **components** & **routes** .

1. components : The internal routes for navigation within the screen should be written inside this folder with other details related to navigation, if needed.
2. routes : Each individual routes within a screen should be added under this, each under a seperate folder.

Example :

Here for "App" , we have a components & routes folder.


* For creating a new UI, it should always consist of three files.

1. `<componentName>.js` : The file with component itself.
2. `<componentName>Styles.js` : All the styling done within a component should be added and imported from a seperate file
3. `index.js` : The component itself should be exported for use through this file.

Example :


## Creating new route (To be completed)
- Folder structure for new route
- Implementing the route component depending upon whether they are the group of screens/routes or a Navigator
- Structure of route component