React Native Libraries You must know

June 15, 2022

1. gorhom/bottom-sheet

This is by far the best bottom sheet library I’ve ever tried. It combined the seamless animation and gestures from reanimated-bottom-sheet and the scrollable feature from react-native-scroll-bottom-sheet, into one native-like performance library.

Bottom sheets are mounted through a portal which references the common practice in creating overlay content in web development. The concept is similar to React Portals.

It can also integrate with React Navigation which mimics the iOS native modal stack behavior. The setup is simply wrapping a stack navigator with a bottom sheet. No custom navigator is required. This opens up more creative freedom when implementing a modal stack.

Demo video from the documentation

The downside would be the annoying keyboard avoiding view issue. There are imperfect hacks around it and the owner is looking to resolve it in v3 which requires Reanimated v2. It would be a walk in the park if you don’t plan to have any input fields inside your bottom sheets.

gorhom/react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀 🌟 Modal presentation view, Bottom Sheet…

https://github.com/gorhom/react-native-bottom-sheet

2. react-native-notifier

This library reminds me of the in-app notifications of Instagram. I like neat design, not to mention the integration with gesture handler. And it’s also fully customizable.

There’s also a queue mode where you can line up multiple notifications and transition through them.

You can essentially mimic native push notifications. Everyone should find the user experience familiar and intuitive.

seniv/react-native-notifier

Fast and simple in-app notifications for React Native This library uses react-native-gesture-handler, a perfect library…

https://github.com/seniv/react-native-notifier

3. react-native-render-html

This library reminds me of Ionic. The basic idea is that you map HTML tags to their corresponding React Native components. You can even have custom tags and add styles with classes.

The greatest potential I would say it’s to pair it with a back-end service where you can serve HTML templates to your React Native app for rendering. This is particular useful for dynamic content like promotions or disclaimer documents.

meliorence/react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views …

https://github.com/meliorence/react-native-render-html

4. react-native-haptic-feedback

This library adds a slight touch of user feedback experience. Small interactions like sounds or vibration tends to make us feel “connected” to an app. This idea is profoundly used in the gaming world. It’s not only the sound effects from games but also the vibration on controllers.

iOS seamlessly implemented haptic features in its Eco-system, for example when you use Apply Pay or confirming an app download. Try adding this feature in one of your user journey and bring your app alive.

junina-de/react-native-haptic-feedback

Right now the Android implementation is a small Vibrate pattern, similar to the “feeling” of the iOS haptic system…

https://github.com/junina-de/react-native-haptic-feedback

5. react-native-parsed-text

Creating an inline link to some page, unlike how we can add inlineatags in HTML, requires a great effort in React Native. It was never possible to nest components within text. The problem is even more obvious when your app uses internalization. Sentences could be in different structure depending on the language. You cannot join components and text together in the same way.

This library would be your savior. You can use RegExp or predefined patterns to select individual text. Then you can add styles and handlers to them. For example, you can select URLs and add a handler to open up the browser.

taskrabbit/react-native-parsed-text

This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3…

https://github.com/taskrabbit/react-native-parsed-text

6. Moti

Moti is essentially the React Native version of Framer Motion. It’s created under the motto of “Write once, animate anywhere”. This means you can share your native app animations on the web, for example, if you’re using React Native Web.

Moti has incredible performance since it’s using Reanimated 2under the hood. The APIs should be familiar for those who have used Framer Motion before. Even for newcomers, the declarative nature of Moti should be intuitive.

Sometimes I find Reanimated or the traditional Animated API daunting to write. With Moti, it’s much easier to build performant animations fast.

Welcome to Moti | Moti

Moti is the universal animation package for React Native, made by Fernando Rojo. Universal: works on all platforms 60…

https://moti.fyi/

7. React Native MMKV

This is essentially a high performance replacement of Async Storage. It’s written in C++ and utilizes JSI instead of the old bridge.

You can customize the storage location and encrypt your data as well. But this would require diving into the native iOS or Android library code.

GitHub - mrousavy/react-native-mmkv: ⚡️ The fastest key/value storage for React Native. ~30x faster…

MMKV is an efficient, small mobile key-value storage framework developed by WeChat. See Tencent/MMKV for more…

https://github.com/mrousavy/react-native-mmkv

8. React Native BlurHash

This library provides blurred placeholder when for loading images. It gives a slightly more colourful loading experience than using grayscale skeletons.

It’s a trend in the web industry. We can see frameworks like Next and Gatsby, and image management platforms like Cloudinary provide blurred placeholder option. It would be delightful to see more adoption in mobile apps.

GitHub - mrousavy/react-native-blurhash: 🖼️ A library to show colorful blurry placeholders while…

🖼️ Give your users the loading experience they want. Install via npm: npm i react-native-blurhash npx pod-install…

https://github.com/mrousavy/react-native-blurhash

9. React Native VisionCamera

This is possibly the best camera library out there. From camera types to capture formats, you have all the controls you need to build a camera-based app essentially.

The most fascinating feature is theFrame Processor. It’s a function that processes what the camera is capturing. It allows us to create advance features like AI facial and object recognition, barcode scanner, Instagram-like filters, etc. They come in the form of plugins which are written in native code.

Hello from VisionCamera | VisionCamera

📸 The Camera library that sees the vision. VisionCamera was designed from the ground up to provide all features a…

https://mrousavy.com/react-native-vision-camera/

10. Victory Native

Stream graph

This library is a complete solution for anyone who wants to use graphs in react native. The only requirement is to have the react-native-svg library installed.

As this library works with svg standards, it is extremely performant, making sure you don’t lose any quality and performance in the application, which is a fear for many people.

Furthermore, this library has extensive documentation, which facilitates its learning and application. It also has integration for React.js, ie its learning curve to apply the concepts of the same library to the web is null.

Victory Native Gallery
https://formidable.com/open-source/victory/gallery

Documentation
https://formidable.com/open-source/victory/docs/native/

11. Modalize

Modal fixed content gif sample

Library for applying modals in React Native super performance and very intuitive and easy to apply. You who want to apply modals should certainly consider using this library that has good documentation and examples in its github for easy implementation.

Modalize Github
https://github.com/jeremybarbet/react-native-modalize

Documentation
https://jeremybarbet.github.io/react-native-modalize

12. React Hook Form

You have certainly had or will have to deal with large forms, asking for name, age, email, password, password confirmation, country, state, neighborhood, etc. As the default is now to use hooks you would have a dozen lines with useState, which makes the code very messy and also reduces performance on weaker devices by causing multiple renderings.

That’s why the react hook form came up, it takes care of that for you and with each character typed it doesn’t render the application again.

It also has an extremely useful, performant validation strategy and native integration with Yup.

Whenever you have to deal with forms in react native, now think about using this library. Once you’ve familiarized yourself with it, you probably won’t want to use another way to handle validations and forms.

**React Hook Form Github **https://github.com/react-hook-form/react-hook-form

Documentation
https://react-hook-form.com/get-started#ReactNative

13. React Native Responsive Fontsize

In react native we deal with fonts with absolute value, widths, heights and percentages, which can sometimes be a problem of screen incompatibility.

With this library it is much better to use these values. Because it uses as a basis the DPI of the screen when applying the fontsize. Applying for example a padding.

padding: RFValue(20)

If you use styled components it would look like this

padding: ${RFValue(20)}px;

After knowing this library I started to use it in all my projects and if it is useful for you use it too

Documentation
https://github.com/heyman333/react-native-responsive-fontSize

14. React Native SVG Transformer

SVG Transform Example

Everyone knows that .svg files are lighter than png. But you can hardly use an svg inside a jsx or tsx as a component, right? With this library you solve that.

With it you will be able to use your svg inside the jsx/tsx as a component passing only the height and width properties and it will take care of the rest. Just import your svg image as a component. Remember that you must in this case pass the extension.

Documentation
https://github.com/kristerkari/react-native-svg-transformer

15. Lottie React Native

Animation Lottie Thumbs Up

If you still don’t know lottie you should know. With it well applied, your app will be extremely professional.

Very fluid animations and a large free library for you to find the ideal animation for your application. It also has an expo integration that can be very useful.

Be sure to explore their animation catalog and consult their documentation.
Once you start using it, she will hardly want not to put some animation in her application!

Lottie Gallery Files
https://lottiefiles.com/featured

Documentation
https://github.com/lottie-react-native/lottie-react-native

16. React Native Onesignal

Push Notification Example Image

This library allows you to create push notifications in a very good way. In addition to having an extremely high sending limit for free and a very nice price if you go over the free limit. It is also very simple to install and you will hardly find any incompatibility or inconsistency for it.

React Native Onesignal
https://github.com/OneSignal/react-native-onesignal

Documentation
https://documentation.onesignal.com/docs/react-native-sdk-setup

17. RevenueCat

Very good library for recurring billing, in app purchases, with a good library and a free use option, the paid version is also very good if you want to have a little more metrics and statistics for your app or more users to manage. It also has a good integration for you to use both for iOS and Android.

Documentation
https://docs.revenuecat.com/docs/reactnative

18. React Native Shadow 2

card image with shadows

You’ve certainly wanted to use shadows in react native and saw that it’s not that simple. This library helps you in that need. Very simple to use and with a very good result and no headache.

Documentation
https://github.com/SrBrahma/react-native-shadow-2

19. React Native Element Dropdown

Dropdown example gif

This application does not need presentations, in react native for not having a good dropdown this library ends up being a good request. I used it a few times and it is very useful, it has several ways of easy implementation and learning.

Documentationhttps://github.com/hoaphantn7604/react-native-element-dropdown

Reference from https://javascript.plainenglish.io/4-more-react-native-libraries-you-might-have-missed-41abe79b27ec, https://medium.com/@viniciuspetrachin/top-10-libraries-you-should-know-for-react-native-d435e5209c96


Written by Manoj Bhardwaj who lives and works in Dharamshala Himachal Pradesh (India). My stackoverflow