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:
Run:
$ npm install react-native-vector-icons --save
For each platform you plan to use, follow one of the options for the corresponding platform including iOS, Android, OSX, Windows, and Web.
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:
react-native init AwesomeNativeBase cd AwesomeNativeBase
Install NativeBase:
npm install native-base --save
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:
Install React Native Elements:
yarn add react-native-elements # or with npm npm i react-native-elements --save
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.
Learn more:
How to Deploy Your React Native for iOS and Android
React Native Development Tools
Top React Native Blogs, Newsletters, and Online Communities
Instabug empowers mobile teams to accelerate their workflows and release with confidence through Real-Time Contextual Insights across the entire app lifecycle.