# 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)