The Beginner’s Guide to React Native UI Libraries

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. For mobile apps, a lot of the same UI elements are used across almost all apps, like icons, buttons, tabs, and forms, to name a few. That’s why instead of building these fairly popular components from scratch, you can use React Native UI libraries.

React Native UI Libraries

React Native UI libraries help you build better apps faster with the least amount of effort by providing you with a pre-made set of components that you can leverage. These components can also be customized later on based on your need.

There are many React Native UI libraries and toolkits. Here we will take a look at some of the biggest and most popular ones that can fulfill all your UI needs.

React Native Icons

Icons are used in many, if not most mobile apps. They are used for buttons, logos, and navigation/tab bars. Most apps also use similar sets of icons (e.g. navigation arrows, volume controls, etc.). That’s why you can save a lot of time by using the React Native vector icons library.

React Native Vector Icons

The React Native Vector Icons library provides you with over 3,000 icons to use that are easy to extend, style and integrate into your project. These are some of the most popular and used icons by Github, Google, ZURB, Fonticons, and more.

The React Native Vector Icons library is also extremely easy to use. Once installed, you can search for the desired icon by heading to the library’s website and searching for it using a keyword.

Benefits of React Native Vector Icons

• You can use your own custom icon sets. Supports SVG via Fontello or regular icon fonts.

• You can use native TabBarIOS.

• You can use icons inline with text components as emojis or to create buttons.

• You can use the icon as an image if a native component requires it (such as NavigatorIOS).

• Most common use cases are JavaScript only and thus enables wider possibilities of styling (and is easier to integrate with your project).

• No need to define width and height styles.

• Presentational details like size and color can be defined in your stylesheet instead of via a property (if you want).

• Icons scale with accessibility settings (unless disabled).

Bundled Icon Sets

The React Native Vector Icons bundled icon sets include:

• AntDesign by AntFinance (297 icons)

• Entypo by Daniel Bruce (411 icons)

• EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)

• Feather by Cole Bemis & Contributors (v4.7.0, 266 icons)

• FontAwesome by Dave Gandy (v4.7.0, 675 icons

• FontAwesome 5 by Fonticons, Inc. (v5.5.0, 1409 (free) 4566 (pro) icons)

• Foundation by ZURB, Inc. (v3.0, 283 icons)

• Ionicons by Ben Sperry (v4.2.4, 696 icons)

• MaterialIcons by Google, Inc. (v3.0.1, 932 icons)

• MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons)

• Octicons by Github, Inc. (v8.0.0, 177 icons)

• Zocial by Sam Collins (v1.0, 100 icons)

• SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

Installation

To install the React Native Vector Icons library, all you need to do is follow these few simple steps:

1. Run:

   $ npm install react-native-vector-icons --save

2. For each platform you plan to use, follow one of the options for the corresponding platform including iOS, Android, OSX, Windows, and Web.

3. If you plan on using FontAwesome 5, make sure to follow the steps from this guide to help you get started.

React Native Components

Building your own React Native components for your project from scratch can be extremely time-consuming and pretty redundant. To save you the hassle, it is recommended that you use a library of ready to use components like NativeBase.

NativeBase

NativeBase is a free and open source UI component library for React Native to build native mobile apps for iOS and Android platforms. It is made from effective building blocks referred to as components.

The components are constructed in pure React Native platform along with some JavaScript functionality with a rich set of customizable properties. These components allow you to quickly build the perfect interface and you can style these components with StyleSheet objects.

To understand how much work and time NativeBase saves you when creating React Native UI components, you can compare the amount of code needed to create a simple button with and without NativeBase, as you can see below.

NativeBase Components

The available NativeBase components include:

• Anatomies

• Accordions

• Action Sheets

• Badges

• Buttons

• Cards

• Check Boxes

• Date Pickers

• Deck Swipers

• FABs

• Footer Tabs

• Forms

• Headers

• Icons

• Layouts

• Lists

• Pickers

• Radio Buttons

• Search Bars

• Segments

• Spinners

• Swipeable Lists

• Tabs

• Thumbnails

• Toasts

• Typographies

• Drawers

• Refs

NativeBase KitchenSink

NativeBase makes React Native development even easier by providing developers with KitchenSink. It is an example app with all the UI components of NativeBase. This allows you to see and test out the different components, then once you’ve decided on which ones you want to add to your app, you can just go to the KitchenSink source code, copy and paste it to your project and customize it based on need.

After using code examples from the NativeBase KitchenSink, you can head to the React Native components docs to discover more about the different properties and options that you can configure for each component.

Installation

To install NativeBase, you just need to run these few commands:

1. 	react-native init AwesomeNativeBase
           cd AwesomeNativeBase

2. Install NativeBase:

   	npm install native-base --save

3. Install Peer Dependencies:

   	react-native link

React Native Forms

Just like with icons and components, React Native forms can be easily created using a library package. One of the best ones out there is TComb Form Native.

TComb Form Native

Forms can be a lot more complicated than icons or components as they have a lot of different parts and there’s logic involved when it comes to field validation and form submission. With this library, you simplify form processing incredibly. Write a lot less code, get usability and accessibility for free (automatic labels, inline validation, etc.), and no need to update forms when the domain model changes.

It provides a very detailed and comprehensive documentation for the numerous configurations and options that it offers.

Snowflake

Snowflake is a React Native starter mobile app for iOS and Android. It uses and showcases different tools and libraries from React Native, TComb, Redux, Parse.com, Jest. Mainly it is a great example app for TComb, if not the best, as it covers around 88% of the TComb Forms Native Library components.

Multiple scenes support Login, Register, and Reset Password. Once successfully logged in, there are three more scenes: Logout, Subview, and Profile.

Installation

You can integrate TComb into your project with one command:

  npm install tcomb-form-native

React Native Elements

At this point, almost all of your UI needs for your React Native apps should be covered. However, there might be instances when you have a missing item or option that you need for your React Native UI elements. That’s where React Native Elements comes in.

The aim of React Native Elements is to provide an all-in-one UI kit for creating apps in React Native. There are many great UI components made by developers all around open source. React Native Elements takes the hassle of assembling these packages together by giving you ready-made kit with consistent API, and look and feel.

React Native Elements Components

• Avatar

• Badge

• Button

• ButtonGroup

• Card

• Checkbox

• Form Elements

• HTML style headings

• Icon

• List and ListItem

• Pricing

• Rating

• Search Bar

• Slider

• Social Icons / Social Icon Buttons

• Tile

React Native Elements Demo App

Just like NativeBase KitchenSink, React Native Elements provides a demo expo app that uses all of the React Native Elements components. This allows you to save even more time by providing you with example codes of the different elements, which you can utilize in your app as you see fit.

Installation

To integrate React Native Elements into your project:

1. Install React Native Elements:

   	yarn add react-native-elements
           # or with npm
           npm i react-native-elements --save

2. Install React Native Vector Icons. If you have already installed React Native Vector Icons as a dependency for your project, you can skip this step. Otherwise, run the following command:

   	#yarn
           yarn add react-native-vector-icons
           # or with npm
           npm i --save react-native-vector-icons
   
           #link
           react-native link react-native-vector-icons

React Native Resources

If you still can’t find the React Native components you need or you’re just the kind of person who likes to build everything from scratch, there are numerous React Native resources that can help guide you in doing so.

React Native Docs

The React Native documentation are very comprehensive and provide you with all the info you might need from basics to guide as well as detailed info regarding every single component and API available, including code snippets, examples and references.

React Native Community

There are many React Native developers all around the world. The React Native Community page helps connect these developers together by listing the different channels, groups, forums, communities, conferences, and meetups where you can find them.

React Native Blog

The React Native official blog is a great source for news, updates, and guides straight from the source.

Finally, make sure to check out our list of top React Native newsletters, blogs, and online communities to stay up-to-date with all that’s new in the world of React Native.