React Native UI Toolkit Roundup
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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
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 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.
- Github: https://github.com/jondot/awesome-react-native#components
- Stars: 14k+
- Components: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
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)
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.
- 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 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/
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.