This article is based on the experience gained after completing 2–3 projects, it is assumed that you already have some basic experience around React and React Native. This blog is a brief set of guidelines of best practices which should be kept in mind while working on a project.
The Do’s and Dont’s of React Native
- DO take UI Framework Support if you want to create your app faster
If time is a constraint take the help of a UI Framework that will help you boost your app build process. Take the help of this article to choose one which you are comfortable with. I use Galio.io Framework whenever I want to create something in less time and with selected components. - DO build both platforms simultaneously or go for iOS build first
I know I know - what is the use of the React Native if we go to a specific platform first? Well, the reason behind this is that as opposed to the Android platform iOS dependency modules are less compared to Android or sometimes auto-linking (RN ≥0.60) simply isn’t enough. So check before considering a module, whether that module has both Android and iOS related installation processes, the last time that module was updated and most importantly the Issues Tab. Yup, that’s right because this will give you an idea of what the status of the module is and if you want to contribute to that in order to help our fellow developers. - DON'T put logs in the release build
Having many console.log statements can slow your app down, especially if you are using logging libraries such as redux-logger. Be sure to disable all logs (manually or with a script) when making a release build. - DO use image caching solution
React Native provides an inbuilt Image Component Library which does a great job for displaying images when the number of the images to be shown on the screen is constant. If that is not the case I would prefer using react-native-fast-image. This will help you boost the app even if that is minimal. - DO use Safe Area View
If you want your app to look good on every iOS device you should use SafeAreaView which provides automatic padding when a view intersects with a safe area (notch, status bar, home indicator).
- DON'T use TouchableWithoutFeedback
According to the React Native official docs, all touch elements event should have a decent UI Feedback. Since TouchableWithoutFeedback doesn’t provide that feature keep this in mind when creating the UI elements on the screen. - DO keep folder structuring in mind when creating an app
Folder structuring is an important part while creating a React or React Native app because it makes the project much more maintainable whether the team is small or large or event divided across modules. I personally prefer the Ducks Approach. There are many Ducks versions available in the world but I like to put everything related to UI in the screen folder and all state-related files in the modules. You can refer to this article if you want to learn more about the Ducks Approach. - DO remember the difference in pushing the screen and navigating the screen
Some actions require pushing a new screen to the application stack, while others require going to a screen you’ve loaded before. The push action adds a route on top of the stack and navigates forward to it. The push will always add on top, so a component can be mounted multiple times. This is important for the back action and for the data you want to present. For example, do you want to allow opening one profile from another? You need the push action, because you’re essentially loading the same component twice, with different data, and you want to be able to return to the previous profile with the back button. Navigating the screen, on the other hand, doesn’t have the stack of routes this type of routes are only meant to be used once and should not come up when we do back action for eg ( Login Screen ) - DO choose State Management according to the requirement of the project
From the starting of the project, you should have an idea of what can be the complexity of the project and according to that, you can choose what kind of state management you want. After the release of the hooks, it becomes even easier to choose state management scenario’s - you can either use Redux or (Hooks + Context API) to achieve the somewhat same environment as of Redux or Simple State. I like (Hooks+Context API) because I don’t have to install any library for this. - DON'T Use Expo
You should never use expo in a professional project. The reason is that the entire build is not local but in the cloud. Another big disadvantage is that you can’t use packages with native languages that require linking. If you are still interested in building one with the help of expo you will find this documentation very useful.
I hope you found this article useful.
Let me know in the comments if there is anything I missed and necessary to be added. Peace!!