6 Best Practices for Building Apps in React Native
Nowadays cross-platform frameworks are emerging. Mostly we have heard two frameworks when it comes to the cross-platform frameworks in the mobile application development field which are Flutter and React Native. React Native is preferable because it has been built on JavaScript. React Native has one advantage over Flutter here that any web developer can easily start with mobile application development using react-native. So here I am writing some of the practices which we should follow while developing an application in React Native.’
1. Do not mix business logic within the component
Divide your components in such a way that business logic related to component and UI code will always be in separate files/functions. The component which deals with the UI part will always contain UI-related code only. Components that deal with business logic will have functions related to it only. For example, we have created Buttons and TextInput as customized components. These components can be used to create a login screen that will store the data in our app’s store and do the network layer part (API calling). So never mix these two things otherwise you will be repeating yourself.
If you are using functional components you can achieve this with the help of custom hooks. If some logic is common you can create a custom hook and use it in other components. And the benefit is, you can also use other hooks in the custom hooks. So, the custom hook is basically a JavaScript function where we can write a shared logic and can also use other hooks.
2. Create Reusable components
Classify your screen in such a way that each component can be reusable if needed.
Make a Components folder in your project. Make the Components folder module-wise to create module-specific common components. Create all common components as per requirement e.g., a customize Button, List, TextInput which accepts different props based on the requirements and can be easily reused.
We need to build a high-performing interactive app, so we’ve chosen React Native. Using PropTypes or TypeScript, in addition, to React Native can give us a ton of additional benefits. Such as it provides static type checking which helps to catch problems early. For example, if we haven’t supplied a prop that is required when referencing a component, the compiler will detect it, and which helps us to improve our code quality.
You can use this above component as shown in the below snippet.
3. Redux store setup and misconception to use it in every application
When we are developing an app, we should think about global state management which is very much important.
It is also very important to choose a library which works for our need, not necessary to choose redux only, there are many other state management libraries as well. However redux is the most popular one when it comes to state management.
As you can see in the above image first action will be triggered from UI. Then in if we need to do API calling for that particular event we will do it in that action function. Each action will be attached with one reducer which mutates the state and returns a newly updated state. And then we can use it across the app with the updated value.
Basically, it is a misconception that everyone should use Redux in their app regardless of app size. But as a developer, we must understand our app size according to the requirements. Sometimes if the app is too small and if there is no scope that app size will increase in the future, we should avoid using redux or any such library because unnecessarily it increases no of files and project codebase size. It also ends up with more complexity. So, you only use this if your app size is large or medium. For small-sized app(around 10 screens), context API will work well.
4. Test your app well
Keep a habit of testing an application on all the available platforms. Usually, we have seen many developers are doing testing only on a single platform. But we never know how that feature behaves on another platform.
Our app design should be pixel perfect, and the app should be responsive. Verify that by testing our app in different size’s phones on each Platform. So that we can verify that is our app’s design is proper in any big size phone and even in small size phone.
Also, when we are fixing any issue, we must double-check with our fix. It might possible that whatever fix we have done also affect other modules and it ruins other modules’ logic so if our fix is in a common component and that component is used by other features also, we must verify those features also because it is not viable that when we are fixing one issue it rises other so make sure that always you verify your changes before pushing your code.
We should write test cases while writing our code. It allows us to test our app better before releasing it. If we found any issue, we can fix it on our end and can release it after that. For that, we should write a test case for both success and failure use cases. We should give each component a test id which helps a developer to fetch that component-related info while writing the code and even it helps QA to perform automation testing.
For more understanding of the importance of the test cases and different libraries, you can visit here.
5. Give proper styling and use in-built RN Class APIs
While creating a screen design we will use different components and each component will have styles. So while creating components we must keep in mind that we should not use inline styling because it became very hard when we want to change even a padding value we have to search for that particular line of code and if it applies more than one time in a screen or even in the whole project we have to search for it and then have to change it rather with a proper naming convention we should create a style file for each container and components which helps us to find out style for each component and container easily e.g. If we are creating a Radio button component file name RadioButton.js it’s style file name should be RadioButtonStyles.js.
While we are looking at the design of the project before start implementing it we can figure out that some styles are common across the whole project. For e.g. In every screen header style is the same or at the top, the bottom there is some space, etc. For that, we should create one common file and can name it like ApplicationStyles.js which contains this kind of style so in the future if any change needs to be done, we can change it in a single file and will reflect in the whole project wherever it used.
React Native offers a built-in API to write code that works for both of the platforms. We should write Platform-specific code like we should apply a platform-specific stylesheet. And for that our code doesn’t become messy and to organize it properly we should use Platform.OS or Platform.select APIs. It automatically detects the platform and applies the style accordingly. Here I am attaching a piece of code for that.
To make our app pixel perfect and responsive we should use an inbuilt API that is Dimensions provided by React Native. It gives us the height and width of the application window. We can use it to set padding, margin, image height, width, etc. If you are using React Native 0.61.0 version or above, we must use the useWindowDimensions hook.
If you want your app to look good on every device you should use SafeAreaView which provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).
6. Write Readable code
We should write our code in a way that any developer can understand it at a glance. At least one can understand the use of any particular variable, constant, component, container, style or function, etc. In short anything we define in our codebase for that we must use a proper naming convention. Let me give you an example here If we are creating a Login screen, we keep the component’s name as Login.js and its style file name should be LoginStyles.js. If we are creating a function to render the header component it should be renderHeader().
A developer should also have a habit of adding comments in their code where it is needed. It helps other developers when they read it or start development.
Instead of using if/else blocks you can use the ternary operator for conditional rendering.
- Syntax:- {condition? if_true : if_false}
- The operator is wrapped in curly braces, and the expressions can contain JSX, optionally wrapped in parentheses to improve readability. It can also be applied to different parts of the component. And it helps us to improve our code quality and code become more readable and easy to understand it also decreases no of lines in our codebase.
You should always lock your dependencies. Because gradually you start your development and as much as you develop your app libraries you use will increase. If you don’t lock your dependencies there are high chances that will break your code if the dependency gets an update. Always keep eye on JavaScript libraries because those are getting updated very fast. To lock your dependency, remove the caret sign (^) in package.json file before the dependency name.
To improve code quality at our end we must use linters. It helps us to do a static analysis of our code before running it. It shows unused imports, code, duplication of code, and many more common errors. React Native by default providing us ESLint for this.
Use Prettier or any other code formatter which helps us to format our code and improve code quality properly. Format code means it gives proper indentation, wraps the line if it is too large, and many other things. It has its own rules in which we can do changes based on our requirements you can check this link for more details.
Always check the compatibility of each library before using it. You should keep in mind the following points before downloading any library.
· Star of the library
· How frequently it gets updated
· License of the library
· Should have IOS and Android platforms support
· No of open issues
Let’s just take a glance at what we have learned to keep in mind while developing a react native application.
- Differentiate your component for UI code and business logic code.
- Write DRY(Do Not Repeat Yourself) code. Make your screen design in a way that each component can be reusable.
- Use redux for global state management but yes please keep in mind your app size and then decide should you use it or not.
- Always make sure that you double-check your app on both platforms and even with different sizes of phones before giving it to QA for the test.
- Give testIds and write a test case to do static analysis.
- Give proper styling to your component. Use flex properties and built-in RN APIs to make your app responsive. Give platform-specific style for which you find out issues after testing in both platforms.
I hope these above points help you out to improve your coding pattern in React Native and if I missed any of the points feel free to leave a comment.
And Yeah! If you liked it don’t forget to clap and do not hesitate to share.
