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.

React Native close to native performance

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

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.

Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time

"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.
The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you set useNativeDriver: true, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and the main thread frame drops.

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.

Caveats:

• LayoutAnimation only works for fire-and-forget animations ("static" animations) -- if it must be interruptible, you will need to use Animated.

Reduce Image Size we use  in our Application

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.

• Use lesser size of Images.
• Use PNG over JPG.
• Cache the image locally once it gets updated.
• Convert your images in WebP format.

Avoid Unnecessary Render

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 -

• Using pure component.
• Override a component update.

Reduce Application Size

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.

• Use JS side code and component as much as possible.
• The component in JS side use a bridge to communicate with native side.
• you can reduce the load on the bridge which will definitely increase the app performance.