Hello everyone, in this posting we are going to make a top 10 of libraries you should know for React Native that are of great help, and we have already used them in several applications in the job market.
These top 10 are based on our choice, and there are definitely other libraries that we should put here. Maybe one day I’ll make a top 25 or even more. So follow, you don’t miss out!
I’ll try not to bring libraries that are always mentioned in top 10 posts, like React Native maps that are in practically every post.
The list will also not be sorted in order of priority or from best to worst. It is organized according to what came to my mind.
Top 10 Libraries You Should Know for React Native in 2022
1. Victory Native
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 formidable.com/open-source/victory/gallery
Documentation formidable.com/open-source/victory/docs/nat..
2. Modalize
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 github.com/jeremybarbet/react-native-modalize
Documentation jeremybarbet.github.io/react-native-modalize
3. 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 github.com/react-hook-form/react-hook-form
Documentation react-hook-form.com/get-started#ReactNative
- 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 github.com/heyman333/react-native-responsiv..
5. React Native SVG Transformer
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 github.com/kristerkari/react-native-svg-tra..
6. Lottie React Native
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 catalogue and consult their documentation. Once you start using it, she will hardly want not to put some animation in her application!
Lottie Gallery Files lottiefiles.com/featured
Documentation github.com/lottie-react-native/lottie-react..
7. React Native Onesignal
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 github.com/OneSignal/react-native-onesignal
Documentation documentation.onesignal.com/docs/react-nati..
8. 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 docs.revenuecat.com/docs/reactnative
9. React Native Shadow 2
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 github.com/SrBrahma/react-native-shadow-2
10. React Native Element Dropdown
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.
Documentation github.com/hoaphantn7604/react-native-eleme..
That’s it
With that, I end my list of the top 10 libraries you should know about. I hope you enjoyed! Any doubts, suggestions, tips or criticisms, leave them in the comments. This encourages me to continue and improve my posts here on medium! See you later!