After four years of development, React Native, a mobile cross-platform framework, has become extremely rich in ecology. In the process of developing projects using React Native, in order to improve development efficiency, we often draw lessons from some open source libraries with high utilization rate. For these highly used React-Native UI libraries, we make a simple summary and classification, so that you can better get started with React Native.
This article is just a collection of some common UI libraries and function libraries, in addition to the well-known third-party libraries introduced above, there are many libraries to implement small functions, these libraries can greatly improve our development efficiency, and on this basis can be secondary development. And welcome everyone to pay attention to my React Native Mobile Development Practice, the second revised version will be reissued soon, welcome to continue to pay attention.
Third-party libraries
The UI suite
1， NativeBase
NativeBase is a popular UI component library that provides React Native with dozens of cross-platform components. When using NativeBase, you can use any third-party native library you want out of the box, and the project itself has a rich ecosystem, from useful starter kits to customizable theme templates. NativeBase Project address: github.com/GeekyAnts/N… Get started at reactnativeseed.com/
2. React Native Elements
React Native Elements is a highly customizable cross-platform UI toolkit built entirely in Javascript. The library’s authors claim that “the React Native Elements idea is more about component structure than design, which means you can use certain Elements with less boilerplate code but with complete control over their design,” which appeals to both new developers and seasoned veterans. React Native Elements Project address: github.com/react-nativ… React Native Elements/React-native Elements/React-Native Elements/React-Native Elements/React-Native Elements
3, Shoutem
Shoutem is also a React Native UI toolkit consisting of three parts: UI components, themes, and component animations. The library provides a set of cross-platform components for iOS and Android, all of which are composable and customizable. Each component also provides predefined styles that are consistent with other components so that complex components can be built without having to manually define complex styles.
Project address: shoutem.github. IO/UI /
4， UI Kitten
The UI Kitten library provides a customizable and reusable React-Native component toolkit that moves style definitions to specific locations so that components can be reused or stylized individually. You can easily change the theme style “on the fly” by passing different variables. Project address: github.com/akveo/react… Expo. IO /@akveo/ UI-k…
React Native Material UI
React Native Material UI is a set of highly customizable UI components that implement Google’s Material Design. Note that the library uses a JS object called uiTheme, which is passed between contexts to maximize customization.
React Native Material UI Project address: github.com/xotahal/rea… For a list of library components and examples: github.com/xotahal/rea…
React Native Material Kit is a useful set of UI components and themes that implement Google’s Material Design. However, it should be noted that React Native Material Kit was discontinued after December 2017. Project address: github.com/xinthink/re…
Nachos UI is a React Native component library that provides more than 30 customizable components that can also be run on the Web via React-Native Web. It passes the snapshot test, supports formatting and YARN, and provides a heated design and global theme manager. Project address: github.com/nachos-ui/n…
React Native UI Library
Wix Engineering is working on developing this state-of-the-art UI toolset and component library, which also supports React-Native Animatable and React-Native Blur. The library comes with a set of predefined style prefixes (converted to modifiers), including Color, Typography, Shadow, Border Radius, and more. Project address: github.com/wix/react-n…
9. React Native Paper
React Native Paper is a cross-platform UI component library that follows the Material Design Guidelines, provides global theme support and an optional Babel plug-in to reduce bundle size. React Native Paper Project address: github.com/callstack/r…
Expo sample application: expo.io/@satya164/r…
React Native Vector Icons
The React Native Vector Icons is a set of the React of Native custom icon, support NavBar TabBar/ToolbarAndroid, image source and complete style. It is very useful and is used by thousands of applications as well as other UI component libraries such as React-Native-Paper. Project address: github.com/oblador/rea… Example project: oblador.github. IO/React-nativ…
Teaset Teaset is a React Native UI library that provides more than 20 pure JS (ES6) components for content display and action control. The documentation wasn’t exhaustive, but the simplicity of the design caught my eye. Project address: github.com/rilyu/tease…
Other libraries
Antd-mobile antD-Mobile is an open source react component library created by ant Financial team. Antd-mobile has many components for use. Antd-mobile is an open source react component library created by Ant Financial team.
Github.com/ant-design/…
# # # 2, and the react – native – button react – native – the button is on making an open source button component, still keep a fast update frequency, provide abundant button function. Project address: github.com/ide/react-n…
###3, React-Native Image-viewer is a library for viewing large images. Click on the react-native image-viewer to zoom in and out.
Github.com/ascoders/re…
4, the react – native – image – picker
React-native Image-Picker is a third-party library for multiple image selection, cropping, compression, and other functions. You can use the react-native image-Picker library for image, photography, and other operations.
Github.com/react-commu…
React-native Picker is the most common wheel control in React Native. It can achieve single, double, and triple wheel effects.
Github.com/beefe/react…
###6, React-native scrollable tab-view is a react-native scrollable tab-view with a TabBar and a toggable page. In Android, it can be viewed as a combination of ViewPager and TabLayout. Project address: github.com/happypancak…
### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### #
Project address: github.com/fuyaode/rea…
8, 3 D Touch
3D Touch is a library that implements React Native 3D Touch. It is convenient to implement 3D Touch with this library. The effect is as follows:
Github.com/jordanbyron…
9, the react – native – snap – a carousel
React-native snap-Carousel is a react-native snap-Carousel gallery that can achieve complex effects. The effects are as follows:
Github.com/archriss/re…
10 and the react – native – the blur
React-native Blur is specifically designed to achieve ground-glass effects. Project address: github.com/react-nativ…
11, the react – native – actionsheet
The React-Native ActionSheet is a component that implements the bottom popup. It can be shared across Android and iOS platforms, but it can also be encapsulated.
Github.com/beefe/react…
12, the react – native – popover
React-native-popover is a common pop-up prompt operation in React Native development, and its effect is shown in the figure below:
13, the react – native – charts – wrapper
There are a lot of scenarios in which charts are used in mobile development. Here is one of the most widely used libraries.
Github.com/wuxudong/re…
14, the react – native – spinkit
React-native Spinkit is a cool third party library for loading animations that can be customized to your actual situation.
Github.com/maxs15/reac…
15, Facebook Design-iOS 10 iPhone GUI
Facebook Design-iOS 10 iPhone GUI is an iOS 10 public version of THE GUI element template, including Sketch, Photoshop, Figma, XD and Craft. Project home page: Facebook. design/ios10