Introduction

The main idea of structure is in keeping each feature including views and logic in separated directories. And also in separating as much business logic from representation as possible.

Directories and files

src/features/*

The place where all features of your app lives. You keep here all business logic and components related to specific feature.

• Consider to keep files that don't contain business logic or refs to business logic in ui folder rather then in specific feature.
• Divide business logic from views (Components) to hooks or models
• Keep your features tight and if they overgrow try to split them

Read more with examples in features section

src/screens/*

Folder that contain screen of app attached to router. Each screen may contain one or more features.

• Consider to no to keep any logic in screen Components instead create corresponding feature, even if your screen seems very simple.
• This is a top-level folder, so your features can't use any of screen components (there exception when you import screens types for navigation or navigation hooks)

Read more with examples in screens section

src/lib/*

Reusable logic that doesn't contain any views and in most cases does not contain business logic of app. So here we can keep:

• reusable models (e.g. if you have some of paginated lists in app, you can create model builder for paginated list, keep it here, and in feature you can just create instance of model you need, see example)
• helpers, dont mess it with specific feature helpers. So if you want create helper for handling data that come from server and converter it to another format, this is not appropriate place, keep it in features folder.

src/ui/*

reusable UI Components that doesn't depend on any business logic of app (no app themed logic, no i18n logic, etc.). But they may contain their own inner logic. So try to think about it like components that may be easy divided to library or transmitted to another component.

• This is low-level folder. So if we are guessing that here is no business logic of app, ui Components should not import anything from features or screens folders or any folder related to app business logic. There some case when ui's may import logic from lib folder.
• If you use external library components like MaterialUI or AntDesign it is better to create wrapper for this components with initial styles you need. So the basic idea is: if you will need to replace library component in the feature with your own component or with another design system you will need to change it only in one place

optional folders

there some case when you create folders you need like

• src/navigation/* - folder that contain all logic related to routing and navigation, e.g. wrappers for native routing but with your screens specific typing
• src/constants/* - folder for saving you app constants and settings
• src/api/* - api structure with server response typing and server request params
• src/styles/* - reusable styles of app (not related to specific features), theme providers, theme settings, colors
• src/i18n/* - i18n lists, settings, providers, models or hooks.

Real life example