If you wish to explore these navigation solutions deeply, go through below section. Else, you can skip to the next one!

Navigator

Navigator is a pure JS navigation component. Though, many developers find it confusing as sometimes it is not that powerful in terms of performance.

For instance: OurSky, a web development company based in Taiwan had to ditch Navigator component for their first client project as it is not suitable in cases when you have to keep a common navigation code between Android and iOS.

The main performance issue comes out in their case when they had to add more features to the app due to which multiple operations fall on the JS thread.

So, they choose ReactNavigation, which works well with redux and provided them an improved performance satisfaction.

NavigatoriOS

NavigatoriOS was mainly designed as native for IOS. So, the actual problem started when Android comes into the picture. This limits it suitable only for the cases when you are working around with iOS as a platform.

NavigationExperimental

NavigationExperimental was designed as a highly configurable navigator but it was more confusing for most developers to understand and grasp.

It was introduced as a promising solution for the react native navigation problem but it certainly failed to solve AirBnB’s navigation problem.

Navigation components mentioned above can still work on your app, given that your app is based on simpler UI and not much-complicated operations.

The major problem will be encountered when your app requires the native feel and functionality which only NavigatorIOS can give you (provided that your app is based on iOS).

React Navigation

A much better solution for navigation in react native is React Navigation which boasts of a customizable JS re-implementation of the native views.

React Navigation provide routers that come very handy when you need to put your navigation logic into redux. It can be your alternative solution to all the above navigation components.

Rendering Native views faster

Moreover, developers have to take advantage of React Native’s Virtual DOMfeature.

Virtual DOM allows you to optimize the JS rendering components, and batch it asynchronously with their diff algorithm. This effort minimizes the amount of data being sent over the bridge and improves the rendering and syncing of both the Realms.

This algorithm was first built for Javascript based web applications, but many applications including UberEat and F8 have used it to optimize the messageQueue and improve their app’s performance.

Delay in updating UI in Android

As already mentioned above, React native offloads all complex functions to the Javascript thread which causes a delay in updating the app’s user interface.

Under heavy loads and complex operations, such offloading fails to maintain app’s performance. And when that happens, the app stop responding to user inputs and performance lags are extremely apparent. The same offloading can drastically impact animations from executing. The main javascript thread if isn’t free, navigation and layout related animations won’t launch. React Native’s team has promised to move animations to the main thread to improve the performance.

Improving React Native app Launch time

A slow app launch time can left you with only few inactive users. It’s the biggest factor contributing to user churn. A major source of slow app performance and delays on launch times can be attributed to the default implementations of React Native. The first thing we would suggest you do to improve app’s launch time is to take care of Object.finalize element. Finalizers run on a single thread, so every other object has to wait until all finalizers have passed through, before they can be garbage collected. This creates huge dependencies which in turn lead to slow app launch time.

Image caching in React Native for Android

Though there are some npm libraries that attempts to solve the image caching issue in android by implementing caching logic in JS and storing images on file system. But, they often fail to provide the optimal performance we desire to deliver a delightful app experience.

The challenges most of these libraries bring to image caching on Android are:

Cache miss: Whenever an app’s page is refreshed, often these libraries fail to fetch previously loaded images.

Performance issues: Performance lags when the caching logic is ran on the javascript side of application

Looking at other alternatives, react-native-cacheable-image brings dynamic caching with placeholder based implementations. Another improved version of this library can be found with react-native-cached-image.

React Native Image Optimization on Android

When you work around in react native, it is very important to use responsive images. Otherwise, you may find your with an app that delivers sub par performance and multiple error messages.

Zeemee engineering team while developing their app with react native discovered that photos in the user profile sections would constantly flash.