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