{"id":21928874,"url":"https://github.com/smallstonesk/rn-components-kit","last_synced_at":"2025-10-29T05:43:32.125Z","repository":{"id":54886357,"uuid":"187447019","full_name":"SmallStoneSK/rn-components-kit","owner":"SmallStoneSK","description":"A series of commonly used react-native components","archived":false,"fork":false,"pushed_at":"2021-01-22T09:36:23.000Z","size":27450,"stargazers_count":76,"open_issues_count":5,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T08:07:07.767Z","etag":null,"topics":["component","react-native","ui-components","ui-kit"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmallStoneSK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-19T07:30:24.000Z","updated_at":"2024-01-08T21:52:28.000Z","dependencies_parsed_at":"2022-08-14T05:50:16.757Z","dependency_job_id":null,"html_url":"https://github.com/SmallStoneSK/rn-components-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SmallStoneSK/rn-components-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Frn-components-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Frn-components-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Frn-components-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Frn-components-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmallStoneSK","download_url":"https://codeload.github.com/SmallStoneSK/rn-components-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallStoneSK%2Frn-components-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262937142,"owners_count":23387525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","react-native","ui-components","ui-kit"],"created_at":"2024-11-28T22:28:24.172Z","updated_at":"2025-10-29T05:43:27.107Z","avatar_url":"https://github.com/SmallStoneSK.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rn-components-kit\n\nEnglish | [中文](./README.zh-CN.md)\n\nA series of commonly used react-native components.\n\n## Quick Start\n\n### Installation\n\nYou can install `rn-components-kit` by following:\n\n```bash\nnpm install rn-components-kit --save\n```\n\n```js\nimport React from 'react';\nimport {Badge} from ' @rn-components-kit/badge';\n\nconst TestComponent = () =\u003e \u003cBadge/\u003e;\n```\n\n### Import On Demand\n\nThe 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:\n\n```bash\nnpm install @rn-components-kit/badge --save\n```\n\n```js\nimport React from 'react';\nimport {Badge} from ' @rn-components-kit/badge';\n\nconst TestComponent = () =\u003e \u003cBadge/\u003e;\n```\n\nIn fact, we recommend you to adopt this usage.\n\n### Running Examples\n\nWe 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.\n\n```bash\ngit clone https://github.com/SmallStoneSK/rn-components-kit.git\n\nnpm install\n\n# for iOS\nreact-native run-ios\n\n# for android\nreact-native run-android\n```\n\nFollowing are screenshots for each component's examples:\n\n\u003cdiv\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/app.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/badge.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/button.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/carousel.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/checkbox.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/deck-swiper.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/divider.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/icon.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/progress.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/radio.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/rating.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/scroll-picker.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/skeleton.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/slider.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/spin.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/swipe-out.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/switch.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/tag.png\"/\u003e\n  \u003cimg width=\"19%\" src=\"./screenshots/tooltip.png\"/\u003e\n\u003c/div\u003e\n\n## Components\n\n|component|Link|version|\n|---------|----|-------|\n|badge|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Badge)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/badge.svg)](https://www.npmjs.com/package/@rn-components-kit/badge)|\n|button|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Button)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/button.svg)](https://www.npmjs.com/package/@rn-components-kit/button)|\n|carousel|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Carousel)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/carousel.svg)](https://www.npmjs.com/package/@rn-components-kit/carousel)|\n|checkbox|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/CheckBox)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/checkbox.svg)](https://www.npmjs.com/package/@rn-components-kit/checkbox)|\n|deck-swiper|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/DeckSwiper)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/deck-swiper.svg)](https://www.npmjs.com/package/@rn-components-kit/deck-swiper)|\n|divider|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Divider)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/divider.svg)](https://www.npmjs.com/package/@rn-components-kit/divider)|\n|icon|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/icon.svg)](https://www.npmjs.com/package/@rn-components-kit/icon)|\n|progress|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Progress)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/progress.svg)](https://www.npmjs.com/package/@rn-components-kit/progress)|\n|radio|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Radio)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/radio.svg)](https://www.npmjs.com/package/@rn-components-kit/radio)|\n|rating|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Rating)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)|\n|scroll-picker|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/ScrollPicker)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/scroll-picker.svg)](https://www.npmjs.com/package/@rn-components-kit/scroll-picker)|\n|skeleton|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Skeleton)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/skeleton.svg)](https://www.npmjs.com/package/@rn-components-kit/skeleton)|\n|slider|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Slider)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/slider.svg)](https://www.npmjs.com/package/@rn-components-kit/slider)|\n|spin|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Spin)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/spin.svg)](https://www.npmjs.com/package/@rn-components-kit/spin)|\n|swipe-out|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/SwipeOut)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/swipe-out.svg)](https://www.npmjs.com/package/@rn-components-kit/swipe-out)|\n|switch|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Switch)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/switch.svg)](https://www.npmjs.com/package/@rn-components-kit/switch)|\n|tag|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Tag)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/tag.svg)](https://www.npmjs.com/package/@rn-components-kit/tag)|\n|text|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Text)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/text.svg)](https://www.npmjs.com/package/@rn-components-kit/text)|\n|tooltip|[Document](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Tooltip)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/tooltip.svg)](https://www.npmjs.com/package/@rn-components-kit/tooltip)|\n\n## FAQ\n\n**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.\n\n**A:** You should:\n\n1. Use Xcode to open your ios project, `Libraries` -\u003e `Add Files to` -\u003e `node_modules/react-native/Libraries/ART/ART.xcodeproj`.\n2. Click the root of project, find `Linked Frameworks and Libraries`, click `+` to add `libART.a` and rebuild the project.\n3. After having rebuilded, re-run command `react-native run-ios/android` to start your project.\n\n\n## License\n\n[MIT LICENSE](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallstonesk%2Frn-components-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallstonesk%2Frn-components-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallstonesk%2Frn-components-kit/lists"}