11 libraries (sets of components) for React Native, which you should know about in 2018
- Transfer
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 use 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 will 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.
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 can be used to customize external kind of components nativebase.
A 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 to set up a certain component and prepare it for work, you need quite a bit of template code. At the same time, the person who uses these components has the ability to fully control their appearance. Such an approach to the components can draw attention to them of wide layers of web programmers - 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.
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.
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 components are quite 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 acquainted with UK Kitten closer.
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
React Native Material UI
By default, the object is
Although the React Native Material Kit was published in NPM in December 2017, this set of components, having about 4,000 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 whole 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.
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 theme manager.
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.
The cross-platform library of components React Native Paper , having 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.
The React Native Vector Icons project , which gathered about 10,000 stars on GitHub, is an extensive collection of customizable icons for React Native applications that are suitable for use on various platforms.
React Native Vector Icons
Icons from React Native Vector Icons are used in thousands of applications. It is possible that they will be useful to you.
The Teaset library , which gathered 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 its components, which are oriented to serving the basic needs of React Native-applications, and their pleasant appearance, suggests that Teaset is at least worth a look.
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 decent developments that implement component sets or auxiliary tools for creating React Native applications cannot be limited to those 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.
The React Native framework is very similar to React in that its use 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 will 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 can be used to customize external kind of components nativebase.
2. React Native Elements
A 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 to set up a certain component and prepare it for work, you need quite a bit of template code. At the same time, the person who uses these components has the ability to fully control their appearance. Such an approach to the components can draw attention to them of wide layers of web programmers - 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 components are quite 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 acquainted with UK Kitten closer.
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, to ensure the maximum level of customizability, is passed through the context.React Native Material UI
By default, the object is
uiThemebased on a themelightThemethat 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, having about 4,000 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 whole 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 theme 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 , having 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,000 stars on GitHub, is an extensive collection of customizable icons for React Native applications that are suitable for use on various platforms.
React Native Vector Icons
Icons from React Native Vector Icons are used in thousands of applications. It is possible that they will be useful to you.
11. Teaset
The Teaset library , which gathered 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 its components, which are oriented to serving the basic needs of React Native-applications, and their pleasant appearance, suggests 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 decent developments that implement component sets or auxiliary tools for creating React Native applications cannot be limited to those discussed above. If you are looking for something similar for your Native React application, here are some other projects you should pay attention to:
- React-Virgin
- Ignite cli
- Snowflake
- panza
- Material React Native
- iOS 10 iPhone GUI
- React Native Calendars
- react-native-progress
- react-native-spinkit
- lottie-react-native
- React Native Material Design
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.