React Native UI Toolkit Roundup

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.

Libraries

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

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

awesome-react-native

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.

• Github: https://github.com/jondot/awesome-react-native#components
• Stars: 14k+
• Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout

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.

• Github: https://github.com/xinthink/react-native-material-kit
• Stars: 3k+
• Components: Inputs, Indicators
• Documentation: http://www.xinthink.com/react-native-material-kit/docs/index.html
• Demo: https://github.com/xinthink/rnmk-demo (download and build the source for demo)

NativeBase

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.

• Github: https://github.com/GeekyAnts/NativeBase
• Stars: 5.5k+
• Components: Inputs, Indicators, Navigation, Layout
• Documentation: https://docs.nativebase.io/
• Demo: https://expo.io/@geekyants/nativebase-kitchenSink

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.

• Github: https://github.com/react-native-training/react-native-elements
• Stars: 6.5k+
• Components: Inputs, some Advanced Inputs, Indicators, Navigation, Layout
• Documentation: https://react-native-training.github.io/react-native-elements/docs/getting_started.html
• Demo: https://expo.io/@monte9/react-native-elements-app

Shoutem

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.

• Github: https://github.com/shoutem/ui
• Stars: 2.5k+
• Components: Navigation, Input, Layout
• Documentation: https://shoutem.github.io/docs/ui-toolkit/introduction
• Demo: https://new.shoutem.com/

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.