TOP 6 React Native libraries with native performance ⚡️

Kirill Novikov — Thu, 12 Jan 2023 09:29:39 +0000

In this list, you will find well-maintained React Native libraries based on the latest technologies like JSI and new architecture, which allows you to achieve native performance.

1. MMKV

This library uses MMKV key-value storage and JSI to communicate between the JS side and the native side very quickly and synchronously. It is a suitable replacement for slow AsyncStorage. Follow this guide to migrate from AsyncStorage and get 30x faster on read and write operations in your app.

2. FlashList

FlashList is based on RecyclerListView but has an API similar to FlatList, which makes migration very simple and has many additional features. For example, FlashList provides metrics API, which allows you to measure performance problems and find proper params configuration for your list component. Also, it supports animation with Reanimated and layouts like Masonry.

3. Reanimated 2

React Native provides Animation API, and even some properties like opacity or transform can be calculated on the native side when you use useNativeDriver.
Reanimated solves this problem by moving animation calculation to a separate JS thread which is running on the UI thread. It means that your main JS thread will always be available, even if you have a complex animation. In Reanimated terms, it is called worklets - pieces of JS, which can be called from separate JS threads. Reanimated contains a lot of useful functions and hooks for building animation and hiding the complexity of using worklets inside it.

4. Skia

If you need complex animations or you want to animate something besides native components, Skia is your choice. Skia is a base rendering engine for Flutter and Chrome written in C++. React Native version provides access to Skia API using direct JSI calls, which makes it close to native performance with minimum overhead. As a result, you can build animations like this:

5. Quick SQLite

This SQLite wrapper uses JSI and avoids RN bridge overhead with serialization/deserialization. Also, you can use compile-time options, which allow you to set up SQLite instances precisely. If you use an old wrapper with the bridge, you can replace it with this library because it supports the existing DB.

6. Vision Camera

Vision Camera is a modern replacement for React Native Camera. It uses JSI instead of the bridge and provides a Frame processor feature. Using Frame processor, you can run small JS functions and native plugins to process camera results in real-time. Examples of these plugins are QR detectors, ML Vision with face or object detections and OCR. The complete list of plugins is here.