5 Essential React Native Libraries

React Native is an increasingly popular framework for building cross-platform mobile apps. Unlike other cross-platform development frameworks, React Native compiles down to true native instead of running Javascript inside web views. On its own, React Native is powerful, and with the introduction of a few great libraries it becomes even more valuable.

React Native Maps
1. React Native Maps

In many apps it is helpful to have a map component that shows location pins, user location, tooltips, etc. React Native Maps removes the complications of dealing with both Apple and Google maps in cross-platform applications. With just one simple <MapView> tag, you have a flexible, customizable map that can be zoomed and panned with markers that can capture touches to show callouts, navigate to detail views, or even link out to the user’s native map system. The maps rendered by this library feel native, smooth, and highly performant.

React Navigation2. React Navigation

React Navigation allows developers to quickly and easily configure the navigation scheme for the entire application all from the main app file. Stack Navigators, Drawer Navigators, and Tab Navigators can be nested and combined to accommodate both horizontal and vertical navigation structures. For example, a Material Design compliant bottom tab bar can be combined with a stack to allow for master-detail flows inside the tabs. This centralized navigation control keeps your component files clean and prevents you from directly manipulating state to navigate through the app. Additional bells and whistles of this library include built-in transition animations, flexible header components, and Redux integration capabilities.

react Native vector icons3. React Native Vector Icons

This library is a streamlined way to include icon fonts in React Native applications. It come pre-bundled with over 3,000 icons, including some of the most popular icon libraries like Font Awesome and Google’s Material Icons. Need custom icons from a design or unique logos? No problem. React Native Vector Icons supports Fontello (http://fontello.com/) configs so all you need is an svg file. With this library, a simple, one-line import statement gives you access to style-able Icon and Icon.Button components to polish and brand your app.

react native communication4. React Native Communications

One of the pain points in creating React Native apps is integrating with the native systems (phone calls, push notifications, etc.). React Native Communications relieves some of that stress by providing a cross-platform solution for placing phone calls, sending text messages, opening web URLs, and composing emails directly from your app. Once a few dependencies are linked in Xcode and Android Studio, your app is just 1 line away from communication functionality.

React, react native material kit5. React Native Material Kit

React Native Material Kit is an awesome time-saver for Material Design themed apps. The library provides components for buttons, cards, loading indicators, floating label text fields, sliders, and toggles, each with configurable themes and options. You can use the included Material-inspired color palette or use all custom colors to style each component. Additionally, there are multiple ways to construct each component: choose either the constructor or JSX technique to best fit the structure of your project. This library is sure to save a ton of time and styling effort for any developer with app designs rooted in Material guidelines.

About Allison Velez

Alli is a developer with experience in web technology for responsive websites as well as multitouch installations. She graduated from the Gallatin School at NYU with concentrations in Art History & Psychology, which provided her with foundational knowledge to work closely with creative and user experience designers. Alli also graduated Summa Cum Laude from Georgia Institute of Technology with a degree in Computational Media.