UI components libraries for react native

By w s / June 11, 2017

Starting out on a react native project can be a nightmare if we try to create themes and UI components all by yourself. Not only we need to create all kinds of styles for different component, we also need to ensure that it works well and looks good across platform.

We sorely needa suite of UI components to quickly prototype and create a functioning application. Lucky for us, react native has a vibrant community who are happy to help with this quest of creating UI libraries.

Let’s walk through a list of 3 UI component libraries that will definitely make your work easier!

1. React Native Elements

React native elements is my default whenever I am starting a new react-native project. The community behind react native elements is doing a great job in making sure that each of the available components play nicely with react-native.

An thorough documentation of each of the components available in react-native-elements can be found at react-native-elements API documentation page.

To have a feel of how react native elements would look, go on ahead to react-native-elements exponent showcase.

2. Native base

Native base contributors have created a good framework to start a new project with react native. Native base comes pre-packed with the capability to set your themes and easily wrangle flex boxes. This helps a lot when trying to keep the look and feel of your application consistent.

The peeps at native base also created a starter pack for anyone who wants to start trying out react native, the project can be found at https://github.com/start-react/native-starter-kit.

Additionally, you can always have a quick tour of all the elements in native-base exponent showcase.

3. Nachos UI

Nachos UI is a relatively new contender to the react native UI components libraries. Although not as extensive as react native elements and native base yet, the people behind Nachos UI have made some awesome UI components for react-native. Nachos UI also comes pre-packed with ThemeManager should you wish to extend the original themes.

Nachos UI picked an interesting decision to showcase the components available inside the library by using react-native-web. When you head over to Nachos UI documentation page, you would be able to see how each of the component will be rendered in the application.

Know of other excellent UI component libraries for react native? Let me know in the comment!