An enthralling reason for using React Native instead of WebView-based tech is to achieve a native look and feel to your apps without compromising the performance.
React-native is one of the most popular mobile application development technology today.
In this article we will discuss how we can further improve the performance of the react native to match it to a level of native development.
One of the most loved things of the react-native is its performance.It lets you achieve a performance very similar to Native Platform.Although we need to take care of few things to obtain its top performance which will surely help you to write complex project.
Memory leakage is one of the most important issues comes in the picture while writing any application that could be occur due to unnecessary object creation and unnecessary background process running like Listeners not getting removed while unmounting the component and etc…
So while writing code you have to be very careful about object creation and process running in the background to tackle the memory leak issue.
"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation too.
One case where I have used this is for animating in a modal (sliding down from the top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.
If you are using images as ImageBackground or as Image extensively which is very much possible and common in application development then Image size does matter. At times this can be very costly in terms of performance and size of the app as well.
These things you can try to minimize the effect of the Image size.
To update the data member or view of the component we use setState in the react native. Try to avoid to refresh the whole component , just to update a single variable or view , we will discuss here how we can avoid such situation -
The size of the react native application usually larger than the native app size,therefore we need to be very careful with the files(images..) and third party dependencies we use in our react native application.
These things you can follow to reduce the app size and increased performance.