Quick guide on React Native - App structure, Modularised and scalable code.
Updated: Jul 19, 2021
Generally, there is no single accepted way to structure your app, It is all opinionated and based on the developer's preference. But it is advisable to structure your app in a less complex manner. The goal is to make sure you have a well structured code that is very easy to navigate, and self explanatory. We also want a scalable code that is very easy to maintain. In this tutorial which was inspired by new job at Quick Component, 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.