11 libraries (sets of components) for React Native, which you should know about in 2018

At the beginning of the year, we published several materials on popular component sets for React , Angular and Vue . Today we present to your attention the translation of an article from the same series dedicated to React Native. Given the continuing growth in popularity of React, and the fact that mobile applications and PWA are becoming more in demand, it is not surprising that React Native is attracting more and more attention from the developer community.

The React Native framework is very similar to React in that its application encourages the programmer to create user interfaces using isolated components. The sets of such components designed for the development of interfaces give developers ready-made modules, the use of which helps save time by speeding up work. Here we discuss eleven sets of components that are well supported by their creators. We hope they will be useful to anyone who has to develop interfaces on React Native.

1. NativeBase

NativeBase is a cross-platform set of user interface components for React Native.
')

Nativebase

The serious popularity of NativeBase is indicated by the fact that this project gained about 10 thousand stars on GitHub, and that it has about a thousand forks. NativeBase makes dozens of cross-platform components available to programmers. When using NativeBase, you can, without additional efforts, use any native libraries of third-party developers, and around this project itself there is an extensive ecosystem that has a lot of useful things - from tools for creating basic projects, to tools for developing themes that customize external kind of components nativebase.

2. React Native Elements

The set of cross-platform components React Native Elements gathered about 12 thousand stars on GitHub. Components from this set, completely created by means of JavaScript, are amenable to fine-tuning.

React Native Elements

The authors of the kit state that the most important thing in React Native Elements is the structure of the components, not their design. This means that in order to set up a certain component and prepare it for work, you need quite a bit of template code. In this case, the one who uses these components, it is possible to fully control their appearance. Such an approach to the components can attract the attention of broad layers of web programmers to them - from beginners to experienced. Here is a demo application built on the basis of React Native Elements, with which you can see the components of this set in action.

3. Shoutem UI Toolkit

The set of tools for developing interfaces Shoutem , gathered about 3.5 thousand stars on GitHub, consists of three parts. These are user interface components , themes , and animation components.

Shoutem

Shoutem gives developers a set of cross-platform components designed for iOS and Android. All components are created with the possibility of sharing. Their appearance can be customized . Each component also has a standard style consistent with the style of the other components. This makes it possible to create complex components without the need to manually customize complex style systems.

4. UI Kitten

The set of components UI Kitten , the owner of about 3 thousand stars on GitHub, makes available to the developer React Native-components that can be fine-tuned and suitable for reuse.

Ui kitten

At the heart of UI Kitten is the idea of moving the definition of styles to a specific place, which helps reuse components and makes it easier to customize their appearance. The themes applied to the components are fairly easy to change, as they say, on the fly, transferring different sets of variables to them. Here is a demonstration project, experimenting with which, you can get to know UK Kitten better.

5. React Native Material UI

The React Native Material UI project, which has about 2,000 stars on GitHub, provides a web developer with a set of user interface components that implement Google’s Material Design ideas and are customizable. When working with React Native Material UI, it is worth considering that this library uses a single JS object, called uiTheme , which is passed through the context to ensure the maximum level of customizability.

React Native Material UI

By default, the uiTheme object uiTheme based on the lightTheme theme, which can be found here . And here is a list of library components with examples of their use.

6. React Native Material Kit

Although the React Native Material Kit was published in NPM in December 2017, this set of components, which has about 4 thousand stars on GitHub, is worth paying attention to.

React Native Material Kit

React Native Material Kit offers the developer a collection of simple and convenient user interface components and themes that implement the concept of Material Design from Google. Why is this set of components worthy of attention? The thing is in its simplicity, and in the fact that there is nothing superfluous in it that creates information "noise." However, it should be noted that due to the fact that this library is not particularly actively supported, it should be used with caution.

7. Nachos UI

The Nachos UI library, which has about 1.5 thousand stars on GitHub, offers developers a set of more than 30 customizable components that, in addition to using them in a mobile environment as part of React Native applications, are also suitable for developing web applications using react- native-web .

Nachos UI

Nachos UI supports prettier, yarn and jest testing. This pleasant, well-written library, makes available to all comers with interesting design components and a global themes manager.

8. React Native UI Library

Work on the project React Native UI Library engaged in Wix . It is an ultramodern user interface development toolkit and component library for React Native. React Native UI Library supports, without additional effort from the programmer, react-native-animatable and react-native-blur .

React Native UI Library

This library includes a set of preset styles (among them - Colors, Typography, Shadows, Border Radius, and others), which are translated into modifiers.

Here is an example of using React Native UI Library.

9. React Native Paper

The cross-platform library of components React Native Paper , which has about 1.5 thousand stars on GitHub, follows the ideas of Material Design from Google.

React Native Paper

This set of components supports global themes . If necessary, in order to get rid of unused modules of this set, you can use the appropriate plug-in for babel. Here is an example of using React Native Paper.

10. React Native Vector Icons

The React Native Vector Icons project, which gathered about 10 thousand stars on GitHub, is an extensive collection of customizable icons for React Native applications suitable for use on various platforms.

React Native Vector Icons

Icons from React Native Vector Icons are applied in thousands of applications. It is possible that they will be useful to you.

11. Teaset

The Teaset library, which collected about 1300 stars on GitHub, includes more than 20 components written in pure JS (ES6).

Teaset

The project cannot boast of rich documentation, but the simplicity of the components it contains, focused on servicing the basic needs of React Native applications, and their pleasant appearance, suggest that Teaset is at least worth a look.

Results

At the beginning of this material, we talked about the fact that React Native is attracting more and more attention from the developer community due to the prevalence of React and the popularity of mobile applications. Therefore, it is not surprising that the number of worthy developments implementing component sets or supporting tools for creating React Native applications cannot be limited to those we discussed above. If you are looking for something similar for your Native React application, here are some other projects you should pay attention to:

Dear readers! If you are developing mobile applications based on React Native, please tell us which sets of components and tools you use for this.