Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smallstonesk/rn-components-kit
A series of commonly used react-native components
https://github.com/smallstonesk/rn-components-kit
component react-native ui-components ui-kit
Last synced: about 2 months ago
JSON representation
A series of commonly used react-native components
- Host: GitHub
- URL: https://github.com/smallstonesk/rn-components-kit
- Owner: SmallStoneSK
- License: mit
- Created: 2019-05-19T07:30:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-22T09:36:23.000Z (almost 4 years ago)
- Last Synced: 2024-11-20T18:03:40.469Z (about 2 months ago)
- Topics: component, react-native, ui-components, ui-kit
- Language: HTML
- Homepage:
- Size: 26.2 MB
- Stars: 76
- Watchers: 2
- Forks: 16
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rn-components-kit
English | [中文](./README.zh-CN.md)
A series of commonly used react-native components.
## Quick Start
### Installation
You can install `rn-components-kit` by following:
```bash
npm install rn-components-kit --save
```
```js
import React from 'react';
import {Badge} from ' @rn-components-kit/badge';
const TestComponent = () => ;
```
### Import On Demand
The above usage would import whole components into bundle even if you have not use all of them. However, if you want to import component on demand, you can do like following:
```bash
npm install @rn-components-kit/badge --save
```
```js
import React from 'react';
import {Badge} from ' @rn-components-kit/badge';
const TestComponent = () => ;
```
In fact, we recommend you to adopt this usage.
### Running Examples
We create an app to provide many examples for each component, you can look at them at [here](./example). If you want to run it, you should clone this repo at first.
```bash
git clone https://github.com/SmallStoneSK/rn-components-kit.git
npm install
# for iOS
react-native run-ios
# for android
react-native run-android
```
Following are screenshots for each component's examples:
## Components
|component|Link|version|
|---------|----|-------|
|badge|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Badge)|[](https://www.npmjs.com/package/@rn-components-kit/badge)|
|button|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Button)|[](https://www.npmjs.com/package/@rn-components-kit/button)|
|carousel|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Carousel)|[](https://www.npmjs.com/package/@rn-components-kit/carousel)|
|checkbox|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/CheckBox)|[](https://www.npmjs.com/package/@rn-components-kit/checkbox)|
|deck-swiper|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/DeckSwiper)|[](https://www.npmjs.com/package/@rn-components-kit/deck-swiper)|
|divider|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Divider)|[](https://www.npmjs.com/package/@rn-components-kit/divider)|
|icon|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|[](https://www.npmjs.com/package/@rn-components-kit/icon)|
|progress|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Progress)|[](https://www.npmjs.com/package/@rn-components-kit/progress)|
|radio|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Radio)|[](https://www.npmjs.com/package/@rn-components-kit/radio)|
|rating|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Rating)|[](https://www.npmjs.com/package/@rn-components-kit/rating)|
|scroll-picker|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/ScrollPicker)|[](https://www.npmjs.com/package/@rn-components-kit/scroll-picker)|
|skeleton|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Skeleton)|[](https://www.npmjs.com/package/@rn-components-kit/skeleton)|
|slider|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Slider)|[](https://www.npmjs.com/package/@rn-components-kit/slider)|
|spin|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Spin)|[](https://www.npmjs.com/package/@rn-components-kit/spin)|
|swipe-out|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/SwipeOut)|[](https://www.npmjs.com/package/@rn-components-kit/swipe-out)|
|switch|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Switch)|[](https://www.npmjs.com/package/@rn-components-kit/switch)|
|tag|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Tag)|[](https://www.npmjs.com/package/@rn-components-kit/tag)|
|text|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Text)|[](https://www.npmjs.com/package/@rn-components-kit/text)|
|tooltip|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Tooltip)|[](https://www.npmjs.com/package/@rn-components-kit/tooltip)|
## FAQ
**Q:** If you encounter the problem like **No component found for view with name "ARTXXX"**, that's because the `ART` module has not been integrated in your project.
**A:** You should:
1. Use Xcode to open your ios project, `Libraries` -> `Add Files to` -> `node_modules/react-native/Libraries/ART/ART.xcodeproj`.
2. Click the root of project, find `Linked Frameworks and Libraries`, click `+` to add `libART.a` and rebuild the project.
3. After having rebuilded, re-run command `react-native run-ios/android` to start your project.
## License
[MIT LICENSE](./LICENSE)