TOP 6 React Native libraries with native performance ⚡️
Tags: reactnative, performance, jsi, react
Published: 2023-01-12 09:29:39

---
title: TOP 6 React Native libraries with native performance ⚡️ 
published: false
description: 
tags: reactnative, performance, jsi, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kklzb3adywr7wzi8gm7.png
published: true
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-23 19:51 +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](https://github.com/mrousavy/react-native-mmkv)

![react-native-mmkv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qvr14i338xghn5hgi6e.png)

This library uses [MMKV](https://github.com/Tencent/MMKV) key-value storage and [JSI](https://reactnative.dev/architecture/glossary#javascript-interfaces-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](https://github.com/mrousavy/react-native-mmkv/blob/master/docs/MIGRATE_FROM_ASYNC_STORAGE.md) to migrate from AsyncStorage and get 30x faster on read and write operations in your app.

#### 2. [FlashList](https://shopify.github.io/flash-list/)

![flash-list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dirop0n44iczi8t87mlg.png)

FlashList is based on [RecyclerListView](https://github.com/Flipkart/recyclerlistview) but has an API similar to FlatList, which makes migration very simple and has many additional features. For example, FlashList provides [metrics API](https://shopify.github.io/flash-list/docs/metrics), 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](https://shopify.github.io/flash-list/docs/guides/masonry).

#### 3. [Reanimated 2](https://docs.swmansion.com/react-native-reanimated/)

![Reanimated 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inm1x3b4625zyuyn4ahs.png)

React Native provides Animation API, and even some properties like `opacity` or `transform` can be calculated on the native side when you use [useNativeDriver](https://reactnative.dev/docs/0.69/animations#using-the-native-driver).
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](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/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](https://shopify.github.io/react-native-skia/)

![Skia](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydrxwlxvtuq4920b56ws.png)

If you need complex animations or you want to animate something besides native components, Skia is your choice. [Skia](https://skia.org/about/) 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](https://github.com/mateoguzmana/react-native-fiesta): 

![Skia animation example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irknqwamvshxcs1dsz7o.gif)

#### 5. [Quick SQLite](https://github.com/ospfranco/react-native-quick-sqlite)

![Quick SQLite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ex2yuqhv6fz4ie8te4.png)

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](https://github.com/ospfranco/react-native-quick-sqlite#loading-existing-dbs).

#### 6. [Vision Camera](https://github.com/mrousavy/react-native-vision-camera)

![Vision Camera](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ofr4ay5269voyrx9fyj.png)

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](https://mrousavy.com/react-native-vision-camera/docs/guides/frame-processor-plugin-list).