File Structure

Understanding File Structure

Starting with a good folder structure, especially when working on large applications is very important for the developer experience.

Top-Level Directory Structure

.
App.js
app.json
package-lock.json
package.json
├── assets
│   ├── fonts    # Contains fonts
│   └── images   # Contains images
├── components
│   ├── assets
│   ├── CalendarRangeInput # Contains Calendar Range Input
│   ├── CheckBox # Contains all Check Boxes
│   ├── DescriptionObject
│   ├── IconButton
│   ├── LabeledInput
│   ├── Rating
│   ├── react-native-calendars
│   ├── Recommendation
│   ├── Scaler
│   ├── Slider
│   ├── TabBarIcon
│   ├── TopBar
│   └── TouchableBackground
├── jest
├── navigation
│   ├── AppNavigator
│   ├── FilterTopTabNavigator
│   ├── HotelTopTabNavigator
│   ├── MainDrawerNavigator
│   ├── MainTabNavigator
│   └── ProfileTopTabNavigator
├── screens
│   ├── ArticleFeedPage
│   ├── ArticlePage
│   ├── BookPageScreen
│   ├── CredentialsScreen
│   ├── FacilitiesPage
│   ├── FilterObjects
│   ├── FilterPageScreen
│   ├── HomePage
│   ├── HotelPageAbout
│   ├── HotelPageReviews
│   ├── HotelPageScreen
│   ├── LoginScreen
│   ├── LoginScreenIn
│   ├── LoginScreenReg
│   ├── MapScreen
│   ├── PaymentResultScreen
│   ├── PaymentScreen
│   ├── ProfileBookings
│   ├── ProfileFavorites
│   ├── ProfileScreen
│   ├── ReviewPage
│   ├── ReviewResultScreen
│   ├── RoleScreen
│   ├── ProfileTopTabNavigator
│   ├── RoomsScreen
│   ├── SearchHomePage
│   └── SubscribeResultScreen
├── variables
└── __tests__

Screens File Structure

├── screens
│   ├── ArticleFeedPage
│       ├── data.js
│       ├── index.js

│       └── styles.js
└── ...

Test File Structure

The automated tests are placed in the tests directory of each screen / component.

Unit and integration tests are placed directly in the tests folder

Snapshots Jest tests (rendering tests of a screen / component against a snapshot) are placed in the snapshots subfolder