# @nativepaint/react-native-color-picker

> Color picker for react native

Latest version **0.5.2** (published 2019-09-17) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @nativepaint/react-native-color-picker
pnpm add @nativepaint/react-native-color-picker
yarn add @nativepaint/react-native-color-picker
bun add @nativepaint/react-native-color-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.2 |
| Published | 2019-09-17 |
| First published | 2019-08-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 373.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | nativepaint // instea.co |
| Maintainers | nativepaint |
| Keywords | react-native, react, native, color, picker, paint |

## Links

- npm: https://www.npmjs.com/package/@nativepaint/react-native-color-picker
- Repository: https://github.com/nativepaint/react-native-color-picker
- Homepage: https://github.com/nativepaint/react-native-color-picker#readme
- Issues: https://github.com/nativepaint/react-native-color-picker/issues
- npm.io page: https://npm.io/package/@nativepaint/react-native-color-picker

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [@react-native-community/slider](https://npm.io/package/@react-native-community/slider.md) ^2.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.2 (latest) — 2019-09-17
- 0.5.0 — 2019-08-15

## README

# react-native-color-picker
*Fork of [instea/react-native-color-picker](https://github.com/instea/react-native-color-picker)*

React Native implementation of color picker for both Android and iOS. 

![android preview](doc/preview_android.png)
![iphone preview](doc/preview_iphone.png)

* [x] works both in controlled and uncontrolled way
* [x] old color can be displayed for visual comparison
* [x] holo and triangle color pickers

## Getting started
Install the color picker
```
npm install react-native-color-picker @react-native-community/slider
 --save
```
```
yarn add react-native-color-picker @react-native-community/slider
```

You must then either run `react-native link @react-native-community/slider`
or if you are on react-native 0.60+ run the auto-linking scripts.

### React 0.60+ solution
```
$ react-native link @react-native-community/slider
$ cd ios/
$ pod install
$ cd ..
$ npm run run:ios
```

And use it in your application
```javascript
import { ColorPicker } from 'react-native-color-picker'

const Picker = () => (
  <ColorPicker
    onColorSelected={color => alert(`Color selected: ${color}`)}
    style={{flex: 1}}
  />
)
```
Color picker will use space you provide. Therefore it is necessary to provide styles that will determine picker's size.

## API

### Color support: 
- HSV, RGB, HSVA, RGBA


### Color picker type

We 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:

```javascript
import { ColorPicker, TriangleColorPicker } from 'react-native-color-picker'
```

| ColorPicker | TriangleColorPicker |
| ----------- | ------------------- |
| ![](doc/holo.png) | ![](doc/triangle.png) |


### Props

Color pickers accepts properties below. Each property which define color is represented as a [color string](https://github.com/bgrins/TinyColor#accepted-string-input).

Both 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.

| Property | Type | Note |
|--------------------|------------|--------|
|`color`             |`String\|HSV`|[Color string](https://github.com/bgrins/TinyColor#accepted-string-input) or HSV object (see below). Defines selected color in controlled component. |
|`defaultColor`      |`String`    |Defines initial selected color in uncontrolled component.|
|`oldColor`          |`String`    |Old color to be used for visual comparision. If it is not defined, whole circle is representing selected color.|
|`style`             |`Style`     |Styles passed to color picker container|
|`sliderStyles`             |`sliderStyles`     |Styles passed to [sliders](https://github.com/jeanregisser/react-native-slider)|
|`onColorSelected`   |`Function`  |Callback with color (HEX string) as argument called when user confirms color selection.|
|`onColorChange`     |`Function`  |Callback called each time when color is changed. Used in controlled component. Argument is color in HSV representation (see below)|
|`onOldColorSelected`|`Function`  |Callback with color (HEX string) as argument called when user selects old color.|
|`sliderConfig`       |`Object`   | Options to enable specific sliders and add text labels and style overrides |



#### sliderConfig Props:
*HoloPicker Only*
```
{
  hasSliders: true,
  sliders: [
    {
      type: "saturation",
      hasLabels: true,
      labelText: "Saturation",
      labelStyle: {},
    },
    { type: "value", hasLabels: true, labelText: "Value", labelStyle: {} },
    { type: "opacity", hasLabels: true, labelText: "Opacity", labelStyle: {} },
  ],
}
```
- type must be *value, opacity, saturation*

When 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:

```javascript
{
  h: number, // <0, 360>
  s: number, // <0, 1>
  v: number, // <0, 1>
}

```

### Helper functions

To utilize HSV -> HEX/RGB conversion we provide helper functions:

```javascript
import { toHsv, fromHsv } from 'react-native-color-picker'

toHsv('blue') // { h: 24, s: 1, v: 1 }

fromHsv({ h: 200, s: 0.4, v:0.4 }) // #3d5866

```

## Examples

* [Uncontrolled picker](examples/src/ExampleUncontrolledVertical.js)
* [Controlled picker](examples/src/ExampleControlledVertical.js)
* [Uncontrolled triangle picker](examples/src/ExampleUncontrolledTriangle.js)
* [Controlled triangle picker](examples/src/ExampleControlledTriangle.js)

## Examples scripts
- **dev-inst**: Adds all react-native-color-picker directly into the examples repo for rapid prototyping
- **clean**: Removes all react-native-color-picker generated folders from `dev-inst`

## Limitations
* Does not work well within `ScrollView` due to touch event interference.
* Support for React-Native >= 59.0
* Resolves RN issue with `<Sliders />` being pulled out of React Native package

## Thanks
Our implementation was inspired by [Android Holo ColorPicker](https://github.com/LarsWerkman/HoloColorPicker)

---
_Source: https://npm.io/package/@nativepaint/react-native-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._