{"id":4112,"url":"https://github.com/instea/react-native-color-picker","last_synced_at":"2025-04-12T21:31:15.017Z","repository":{"id":14379994,"uuid":"76033039","full_name":"instea/react-native-color-picker","owner":"instea","description":"Color picker component for IOS/Android","archived":false,"fork":false,"pushed_at":"2023-05-24T17:17:33.000Z","size":732,"stargazers_count":272,"open_issues_count":22,"forks_count":68,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-03T05:32:17.590Z","etag":null,"topics":["android","color-picker","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/instea.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-09T12:19:27.000Z","updated_at":"2024-10-16T20:20:22.000Z","dependencies_parsed_at":"2024-01-08T01:01:39.079Z","dependency_job_id":"cc5bd347-d45a-4b6a-9dbe-de155dfe66f5","html_url":"https://github.com/instea/react-native-color-picker","commit_stats":{"total_commits":55,"total_committers":11,"mean_commits":5.0,"dds":0.4,"last_synced_commit":"36d515608b5441d22f411c457587be7d1828c74c"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instea%2Freact-native-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instea%2Freact-native-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instea%2Freact-native-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instea%2Freact-native-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instea","download_url":"https://codeload.github.com/instea/react-native-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248634919,"owners_count":21137143,"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","color-picker","ios","react-native"],"created_at":"2024-01-05T20:17:01.425Z","updated_at":"2025-04-12T21:31:14.988Z","avatar_url":"https://github.com/instea.png","language":"TypeScript","funding_links":[],"categories":["Components","Libraries","Others"],"sub_categories":["UI"],"readme":"# react-native-color-picker\n\nReact Native implementation of color picker for both Android and iOS.\n\n![android preview](doc/preview_android.png)\n![iphone preview](doc/preview_iphone.png)\n\n* [x] works both in controlled and uncontrolled way\n* [x] old color can be displayed for visual comparison\n* [x] holo and triangle color pickers\n\n## Getting started\nInstall the color picker\n\n```\nnpm install react-native-color-picker --save\n```\n\nAnd use it in your application\n\n```javascript\nimport { ColorPicker } from 'react-native-color-picker'\n\nconst Picker = () =\u003e (\n  \u003cColorPicker\n    onColorSelected={color =\u003e alert(`Color selected: ${color}`)}\n    style={{flex: 1}}\n  /\u003e\n)\n```\n\nColor picker will use space you provide. Therefore it is necessary to provide styles that will determine picker's size.\n\nFor HoloPicker (`ColorPicker`) you might need to install `@react-native-community/slider` and pass it (or any other Slider compatible component) as `sliderComponent` prop if you don't want to use deprecated RN `Slider`.\n\n## API\n\n### Color picker type\n\nWe provide two types of color picker - holo (default) and triangle color picker. Both has the same API so that they are interchangable. Just import it and use it the same way:\n\n```javascript\nimport { ColorPicker, TriangleColorPicker } from 'react-native-color-picker'\n```\n\n| ColorPicker | TriangleColorPicker |\n| ----------- | ------------------- |\n| ![](doc/holo.png) | ![](doc/triangle.png) |\n\n\n### Props\n\nColor pickers accepts properties below. Each property which define color is represented as a [color string](https://github.com/bgrins/TinyColor#accepted-string-input).\n\nBoth color pickers are [PureComponents](https://facebook.github.io/react/docs/react-api.html#react.purecomponent) thus if you want to update it you should not mutate its properties deeply.\n\n| Property | Type | Note |\n|--------------------|------------|--------|\n|`color`             |`String\\|HSV`|[Color string](https://github.com/bgrins/TinyColor#accepted-string-input) or HSV object (see below). Defines selected color in controlled component. |\n|`defaultColor`      |`String`    |Defines initial selected color in uncontrolled component.|\n|`oldColor`          |`String`    |Old color to be used for visual comparision. If it is not defined, whole circle is representing selected color.|\n|`style`             |`Style`     |Styles passed to color picker container|\n|`onColorSelected`   |`Function`  |Callback with color (HEX string) as argument called when user confirms color selection.|\n|`onColorChange`     |`Function`  |Callback called each time when color is changed. Used in controlled component. Argument is color in HSV representation (see below)|\n|`onOldColorSelected`|`Function`  |Callback with color (HEX string) as argument called when user selects old color.|\n|`hideSliders`       |`Boolean`   |Option to hide bottom sliders (holo picker only) |\n|`hideControls`      |`Boolean`   |Option to hide bottom buttons (triangle picker only) |\n\nWhen using color picker as a controlled component you should always use HSV color representation to avoid conversion from/to HEX or RGB. HSV color representation is an object literal with properties:\n\n```javascript\n{\n  h: number, // \u003c0, 360\u003e\n  s: number, // \u003c0, 1\u003e\n  v: number, // \u003c0, 1\u003e\n}\n\n```\n\n### Helper functions\n\nTo utilize HSV -\u003e HEX/RGB conversion we provide helper functions:\n\n```javascript\nimport { toHsv, fromHsv } from 'react-native-color-picker'\n\ntoHsv('blue') // { h: 24, s: 1, v: 1 }\n\nfromHsv({ h: 200, s: 0.4, v:0.4 }) // #3d5866\n\n```\n\n## Examples\n\nSee our examples on [Expo](https://snack.expo.io/@sodik82/react-native-color-picker-example)\n\n\n## Limitations\n* Does not work well within `ScrollView` due to touch event interference.\n* RN has deprecated `Slider` component. You need to provide Slider component as prop to overcome this. \n* There is known [bug](https://github.com/instea/react-native-color-picker/issues/17) affecting RN 0.61. See more info about the workaround. \n\n## Thanks\nOur implementation was inspired by [Android Holo ColorPicker](https://github.com/LarsWerkman/HoloColorPicker)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstea%2Freact-native-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstea%2Freact-native-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstea%2Freact-native-color-picker/lists"}