When bootstrapping a new project, we always strive to achieve the best structure that enables, scalability, easy maintenance and a modularised structure. The goal is to have a self explanatory code structure. In this tutorial which is opinionated and was inspired by my new job at QuickComponent, I will be sharing few tips on how we have tried to achieve a well structured code in building a simple LoginApp Screen.
For this simple login screen, we have folders and files such as:
src: A folder where all source code lives
components: This house reusable components that are shared anywhere in the app.
hooks: This folders contains the general custom hooks used anywhere in the app.
screens: This generally holds different reusable components to make up a single component for screen display.
Analysing the components folder:
- Button: A subfolder of components, In here, we have separated the ui from the styles file.
AnimatedTextInput: A subfolder of components, In here, we have a text input component of which the ui is separated from the styles file.
AnimatedInputFields: A subfolder of components, In here, we have used AnimatedTextInput to create auto generate multiple fields based on given props passed.
index: A file that simply exports all components to enable us import in this manner.
Analysing the screens folder:
Auth: A subfolder of screens In here, we have created multiple subfolders in a attempt to group all auth related screens in a single folder.
hooks: A subfolder of Auth, In here, we have all custom auth related hooks. This include a useAuth hook used to authenticate user. In doing so, you have separated your auth business logic from the ui code.
components: A subfolder of Auth, In here, we have all components reused only in Auth related screens.
LoginScreen: A subfolder of Auth, In here, we have The LoginScreen ui file separated from the styles file. You can also find the inputFields file, whose content is display in the picture bellow.
inputFieldsConfig: A subfolder of LoginScreen, This inputFieldsConfig file clearly defines the input fields rendered in the login screen. In doing so, it becomes easy to add or delete from a field without touching the UI code. It also contains the error messages and regex for validation.
- index: Just like the index file recently mentioned, it does the same thing.
You should Take note of what we have done below and try to adapt it to your own style of structuring and modularising. we have:
Made sure all codes in each files are written with the goal of not exceeding 350 lines of code in a single file. When this threshold is hit, we start to examine the module being created and see how it can be broken down.
We try to create reusable custom hooks to separate business logic from UI code.
We try to group related components close to the screen components when we are not sure if it will be use any other place in the app.
We have made sure a single function doesn’t get overly long and become too difficult to read.
More pictures showing code sample
Moving forward, you can try to adopt and improve this style of structuring in your own app today.
You will learn, unlearn, grow and get better in the way you structure your react native projects, when you work in a team, meet other developers and get your hands on large structured projects.
We appreciate the time spent in reading this article. Find the complete source code for the LoginApp here.
Check out other mobile templates that has adopted this file structuring system at QuickComponent, where this article was first published.
This mobile templates includes a Whatsapp clone, Uber Eats Clone and more. It comes with a backend (Firebase) configured, saving you quality hours of development time.
Top comments (0)