In 2012 Mark Zuckerberg said, “The biggest mistake we made as a company was betting too much on HTML as opposed to native”.
React Native is one of the most popular cross-platform frameworks, which was created in 2013 thanks to Facebook. Since then, it has been growing quickly, gaining a bunch of fans among developers and business owners – it provides a really great developer experience for those, who use React Native to create mobile apps. React Native is based on JavaScript code and can be used to create apps for iOS and Android with a single codebase. The framework significantly saves time and costs when developing apps dedicated for Apple and Android devices.,
We can all agree that React Native is a great programming framework. In this article, we would like to offer some tips, tricks, and best practices to make creating with React Native even better!
Turn off logs on production
Turning off all logs (either manually or with a script) when creating a release compilation can prevent your application from slowing down. What’s more, it can also slow it down by having many console.log statements, especially if you use logging libraries like redux-logger.
Classify components
Smart containers get data from APIs, provide data to other components and perform most of the calculations. Functional components, on the other hand, provide simple functionality based on input data. What they do is receive data and display it to users. They contain all the customization. Classification into smart components and functional components allows better reuse of them and also organizes the project logically.
Flexbox
Using Flexbox is a good practice. In React Native, Flexbox works almost identically to its CSS opposite. However, note that flexDirection in React Native defaults to column instead of row. Using absolute positioning of elements instead of Flexbox in React Native code breaks the layout and prevents it from being reused.
Keep components concise
By far the best way to design components is to keep them in a way that each component corresponds to a single function. It’s a good idea to avoid having an infinitely long list of components performing multiple tasks. It’s good to have each component render only a specific section of the application page or modify only a single function. It is much easier to keep components small and short. Large components can be problematic to manage.
Use capital letters for names
Earlier versions of React-Native maintained a list of built-in names that distinguished them from custom ones – this list, however, at some point became too long to manage which resulted in the fact that nowadays when using JavaScript Extension, the component name must start with a capital letter.
ESLint
To avoid problems related to the language and code style, it is useful to know linting. This is the process of running a static code analysis to enforce proper code style and find possible problems. The ESLint extension, which we use for almost every project, is very helpful in code quality control. It is easy to use and configure so we highly recommend not to forget about it. (ESLint can always be turned off in the .eslintrc configuration file.)
Report failures
It’s highly recommended to set up crash reporting for your application to keep track of all errors and failures in one place. Tools like Crashlytics make it quite easy and by tracking where your app most likely fails, you’ll be able to use this information to improve the quality of your application efficiently.
Track the complexity of your code
Thanks to extensions like code metrics, we can track the complexity of our code. The point is not to pre-optimize everything, because the performance of a released application can always be different from the version on your simulator. However, it’s worth being more or less aware of the computational complexity of your code because it happens that a component spends more time calculating the received data than waiting for the server to respond.
Contact
Do you want to find out more about React Native?
Talk to us!Size of the application
In React Native, application size is affected by the use of external components and libraries, among other things. To reduce the size of your app, you need to optimize your resources and create different app sizes for different devices. To optimize resources you will be useful with ProGuard, which is a free program for shrinking, obfuscating, and pre-verifying Java byte code.
Segregate component files
Files related to a component should be kept all together in one folder. By keeping things organized and placing components in appropriate folders and subfolders, it will be easier for the developer to find any part of the code when it needs a quick modification.
Transform.tools 🚀
It is easy to miss a piece of information when transforming code from one format to another. In addition, this is a time-consuming and quite boring activity, so with help at such moments comes a free online application transform.tools, which allows you to update and reformat data from one state to another.
Make life easier with React Native tips
In terms of React & React Native development, for a front-end developer who is involved in creating highly functional UIs, React Native presents one of the best options. That’s why, it’s always good to be up to date with existing techniques and tricks that can make your life with RN in 2022 even easier!
