{"id":18264736,"url":"https://github.com/native-ly/native-color-picker","last_synced_at":"2026-02-12T01:04:47.322Z","repository":{"id":37067429,"uuid":"164850707","full_name":"native-ly/native-color-picker","owner":"native-ly","description":"🦄 Color picker for React Native","archived":false,"fork":false,"pushed_at":"2023-03-14T18:49:18.000Z","size":2681,"stargazers_count":1,"open_issues_count":17,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T09:06:56.326Z","etag":null,"topics":["android","colors","component","expo","ios","library","mobile","picker","react","react-native","selection"],"latest_commit_sha":null,"homepage":"https://snack.expo.io/@jbiesiada/native-color-picker","language":"TypeScript","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/native-ly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-09T11:31:17.000Z","updated_at":"2021-09-26T17:26:58.000Z","dependencies_parsed_at":"2024-11-05T11:16:46.145Z","dependency_job_id":null,"html_url":"https://github.com/native-ly/native-color-picker","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/native-ly%2Fnative-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/native-ly","download_url":"https://codeload.github.com/native-ly/native-color-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247958710,"owners_count":21024821,"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":["android","colors","component","expo","ios","library","mobile","picker","react","react-native","selection"],"created_at":"2024-11-05T11:15:46.411Z","updated_at":"2026-02-12T01:04:42.278Z","avatar_url":"https://github.com/native-ly.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [native-color-picker](https://github.com/native-ly/native-color-picker)\n\n[![NPM version](https://img.shields.io/npm/v/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)\n[![NPM downloads](https://img.shields.io/npm/dm/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)\n[![NPM license](https://img.shields.io/npm/l/native-color-picker?style=flat-square)](https://www.npmjs.com/package/native-color-picker)\n[![run in expo snack](https://img.shields.io/badge/Run%20in%20Snack-4630EB?style=flat-square\u0026logo=EXPO\u0026labelColor=FFF\u0026logoColor=000)](https://snack.expo.io/@jbiesiada/native-color-picker)\n[![Codecov](https://img.shields.io/codecov/c/github/native-ly/native-color-picker?style=flat-square)](https://codecov.io/gh/native-ly/native-color-picker)\n[![Travis](https://img.shields.io/travis/com/native-ly/native-color-picker/main?style=flat-square)](https://travis-ci.com/native-ly/native-color-picker)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"420\" src=\"https://raw.githubusercontent.com/native-ly/native-color-picker/main/assets/preview.jpg\" alt=\"Native Color Picker\"\u003e\n\u003c/p\u003e\n\n## About\n\nColor picker for React Native\n\n### Alternatives\n\n- [react-native-color-picker](https://github.com/instea/react-native-color-picker/) by [instea](https://github.com/instea/)\n- [React Native Color Palette](https://github.com/holmansv/react-native-color-palette/) by [Holman Strategic Ventures](https://github.com/holmansv/)\n\n## How to Install\n\nFirst, install the library in your project by npm:\n\n```sh\n$ npm install native-color-picker\n```\n\nOr Yarn:\n\n```sh\n$ yarn add native-color-picker\n```\n\n### Expo Project\n\n- install `expo-linear-gradient`:\n\n```sh\n$ npm install expo-linear-gradient\n```\n\nOr Yarn:\n\n```sh\n$ yarn add expo-linear-gradient\n```\n\n### Bare React Native Project\n\n- add `react-native-linear-gradient` – [follow instructions here](https://github.com/react-native-community/react-native-linear-gradient#react-native-linear-gradient)\n\n## Getting Started\n\n**• Connect library with project using ES6 import:**\n\n```js\nimport NativeColorPicker from 'native-color-picker'\n```\n\n## Options\n\n| Name                    | Type                  | Default                                          | Description                                          | Available options                       |\n| ----------------------- | --------------------- | ------------------------------------------------ | ---------------------------------------------------- | --------------------------------------- |\n| **colors**              | string[]              | `[]`                                             | Colors to display in a color picker                  | e.g.: `['#f96204', '#43d8c9']`          |\n| **columns**             | number                | `5`                                              | Number of columns in color list (only vertical)      | Number of columns                       |\n| **gradient**            | boolean               | `false`                                          | Enable or disable gradient layer over the color item | `true` - enable, `false` - disable      |\n| **horizontal**          | boolean               | `false`                                          | Enable or disable horizontal scroll direction        | `true` - horizontal, `false` - vertical |\n| **itemSize**            | number                | `44`                                             | Size (`width` \u0026 `height`) of list item               | Size of list item                       |\n| **onSelect**            | function              | `item =\u003e item`                                   | Select color item                                    | e.g.: `elem =\u003e { /* code */ }`          |\n| **selectedColor**       | string                | ` ` | Marked item | Color from the list `colors` |\n| **shadow**              | boolean               | `false`                                          | Display shadow for list items                        | `true` - enable, `false` - disable      |\n| **sort**                | boolean               | `false`                                          | Order colors by perception                           | `true` - enable, `false` - disable      |\n| **itemProps**           | TouchableOpacityProps | `{}`                                             | Item props                                           | TouchableOpacity props                  |\n| **itemStyle**           | StyleProps\u003cViewStyle\u003e | `{}`                                             | Styles for Item                                      | View styles                             |\n| **markerProps**         | ViewProps             | `{}`                                             | Item props                                           | View props                              |\n| **markerStyle**         | StyleProps\u003cViewStyle\u003e | `{}`                                             | Styles for Item                                      | View styles                             |\n| **linearGradientProps** | LinearGradientProps   | `{}`                                             | Gradient props                                       | LinearGradientProps props               |\n| **linearGradientStyle** | StyleProps\u003cViewStyle\u003e | `{}`                                             | Styles for Gradient                                  | View styles                             |\n\n## License\n\nThis project is licensed under the MIT License © 2019-present Jakub Biesiada\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnative-ly%2Fnative-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnative-ly%2Fnative-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnative-ly%2Fnative-color-picker/lists"}