React Native UI Toolkit Roundup

Published on August 7, 2017
Default avatar

By Conroy Whitney

React Native UI Toolkit Roundup

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

React Native’s core UI components provide a lot of cross-platform power if you are willing to do much of the styling yourself. On the other hand, seeing as it’s lacking even a basic Button (TouchableOpacity anyone?), you may find yourself wanting to start your next React Native project with a bit more of a foundation. Until someone makes react-native-bootstrap (which does not exist yet, by the way), here are a number of other React Native UI Toolkits that you can use to bootstrap (get it?) your next React Native project.


The libraries that we will compare & contrast (in alphabetical order) are:

  • awesome-react-native - List of one-off components and native modules
  • Material UI - Bringing Material Design to React Native
  • NativeBase - Essential cross-platform UI components for React Native
  • React Native Elements - Cross Platform React Native UI Toolkit
  • Shoutem - Customizable set of components for React Native applications

Some of these have demo applications which you can view using Expo, the technology behind create-react-native-app. Simply download and open the Expo app on your iPhone or Android, click on the UI Toolkit’s Expo link in your browser, and use the QR-code scanner to open the demo app on your phone.

Component Categories

Component categories will be used to indicate which components a library has without having to list every single one. Here are a list of possible categories. If a library does not have the majority of the components specified in each category, then that category will not be indicated as present.

  • Inputs: Buttons, Input Fields, Checkboxes, and so on.
  • Advanced Inputs: Datepickers, Autocomplete, File Uploaders
  • Indicators: Badges, Progress Indicators, Toasts, Snackbars
  • Navigation: Menus, Tabs, etc.
  • Dialogs: Dialogs, Modals, Popovers
  • Layout: Drawers, Lists, Cards, Grids, Typography


Before we get into the more heavy-duty libraries below, it’s worth noting that it is totally possible to create your own hodge-podge of components using this extensive components list on the awesome-react-native github repo. Use as few or as many of these plug-and-play components to make your React Native development experience both productive and enjoyable.

Material UI

There are multiple Material UI toolkits for React Native that, while they look very similar, have one HUGE difference: there is only ONE that I have found which works on both iOS and Android: react-native-material-kit. Since Material was developed by Google for the Android platform, most of the libraries out there are Android-only. Keep in mind, though, that using this toolkit will give your React Native application an Android-specific feel, even on iOS. Take this into account if you expect that the majority of your users will be more comfortable with the iOS UX.

If you are fine with an Android-only library and are not worried about iOS compatibility, you can check out react-native-material-design which has more components including Inputs, Indicators, and some Layout.


NativeBase has a LOT to offer in the way of components – their demo app is called Kitchen Sink for a reason. This library does a good job of trying to strike a balance between iOS and Android UX, using platform-specific styles to tailor it to the device. Their component structure is intuitive, their documentation is amazing, and there are plenty of examples from around the web. Definitely ranks high on my list.

React Native Elements

React Native Elements is the most popular and most full-featured of the UI Toolkits in this roundup. React Native Elements is one of the few that does not try to copy either iOS- or Android-specific styles, but instead creates a combination all of its own. It’s much more colorful than the other React Native UI Toolkits, which could be a good thing if you want to go bold. It has great documentation and relatively few open issues.


Shoutem is a much more refined and design-y UI toolkit than the others in this roundup, leaning more towards the iOS style guidelines. If you are going for elegant, this could be the right choice. One of the most unique things about Shoutem, though, is that they provide a whole platform for developing apps that sits on top of React Native, encouraging you to write your app as a set of extensions in addition to the 40+ official extensions they provide. While not necessary in order to use their Shoutem UI Toolkit, it is worth taking a look to see if that’s a direction you would like to go with your next app.

Wrapping Up

Whichever route you take, from using one of the React Native UI Toolkits in this roundup, to integrating a grab-bag of components via awesome-react-native, standing on the shoulders of giants will help you get your next React Native application off to a great – and stylish – start.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Conroy Whitney


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel