React Native : Third party libraries that make your life easier
Sharing is caring.
One of the main attractions of React Native is its large community and thus, the large quantity of high quality third party libraries that make our life way easier by not requiring us to reinvent the wheel but instead focus on the task at hand. In this article, I am going to list some of my favorite libraries and I hope that this helps your learn something new.
Disclaimer : This will include only React Native specific, no testing, navigation or UI libraries as these usually come down to personal preferences and taste.
react-native-vector-icons
The go-to icon library while working with React Native is none other than react-native-vector-icons. It provides us with almost all the icons we will ever need, from various icon providers (Material, Ionic, Fontawesome, …). All we have to do to get started is to visit the directory , search for the icon we’re looking for, import the Icon component in our project and finally pass the icon name as the name prop in the component.
This library provides us with all the helpful TypeScript types we will need as well as supporting animated colors.
My only gripe is the outdated documentation because nowadays, with the recent versions of react-native, all you have to do to get started is to create a “react-native.config.js” file in the root folder of the project as seen below, running react-native link in the terminal which will link the assets correctly in both the Android and iOS projects.
Note : to get it working on iOS, you might need to remove the icon files in the Copy Bundle Resources section in XCode.
react-native-gifted-chat
react-native-gifted-chat is a great solution and the perfect tool when working on anything related to a chat application. By default it provides us it’s very usable and acceptable components that work out of the box, but still offers us ways to customize its appearance and behavior to get it to look and work just the way we need it to.
This library is very well documented, provides us with Typescript types, deals with annoying React Native quirks (dealing with the keyboard destroying the UI), provides helpful functionality by default (scrolling on new messages) and it even goes the extra mile by providing a great looking typing indicator by default and I couldn’t recommend it more.
react-native-calendars
react-native-calendars is another one of my favorites and my go-to when working with anything related to displaying calendars and/or agendas.
It’s very easy to set up and get it up and running, is quite customizable (after digging deep enough to extract the correct stylesheetId for every component), allows us to use our own custom component for various parts of the calendar components.
TypeScript support can be lackluster at times (not listing some crucial available props) and the documentation is very outdated (I had to dig in the source code to discover the existence of the ExpandableCalendar component (that, as well, lacked any TypeScript type definition at the time)), but this won’t change the fact that its pros greatly outweigh its cons, and these quirks are just part of the learning curve.
react-native-reanimated
The GOAT in React Native animations. react-native-reanimated (and especially reanimated 2) changes the way we think about animations by actually making them a viable option and accessible to low end devices with its great performance. The community around this library is large, competent and helpful, and once past the quite steep learning curve and start thinking in animations, the sky is the limit of what is possible to achieve. You can check out my Snap To Corner or Progress Bar exemples for a showcase on how to use this library.
I can’t write about react-native-reanimated without also mentioning the greatly helpful react-native-redash library written mainly by William Candillon that provides a set of helpful functions that simplify and greatly reduce the size of our reanimated code. Think of it as the equivalent for lodash, but for animations.
lottie-react-native
lottie-react-native is when you simply want to bring life to your React Native application in a quick and elegant manner. This library allows us to use pre-made Adobe After Effects animations straight in our application. You can use your own animations or simply browse Lottiefiles for the one you’re looking for, save it as a json file and require it in the source of LottieView Component.
Customizing pre-made animations can be quite tricky but it’s doable (hunting for layer names in a huge json file can be annoying sometimes) and performance can present an issue on lower end Android devices using large complex animations.
But still, when used correctly, lotte-react-native might be what you always needed to get that professional look and feel to your application.
react-native-size-matters
react-native-size-matters is a simple library that has one goal in mind: get a consistent UI in different screen sizes by using a standard 5" screen as the baseline, and scaling up or down accordingly. The main use case in encapsulated in these 4 functions :
- scale(size: number) => number : scales the number linearly depending on the device’s screen width.
- verticalScale(size: number) => number : same as scale, but depending on the device’s screen height instead.
- moderateScale(size: number, factor ?: number) => number : same as scale, but instead we get to control the scaling factor as shown in the example below. Factor defaults to 0.5.
- moderateVerticalScale(size: number, factor?: number) => number : same functionality as moderateScale, but scales depending on the screen’s height.
Conclusion
And that about wraps things up for now, this has been a list of my favorite React Native specific third party libraries that I interact with on a daily basis. Feel free to mention any other awesome library that you enjoy working with down in the comments. Stay safe.
