React Native implementation of color picker for both Android and iOS.
Install the color picker
npm install react-native-color-picker --save
And use it in your application
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.
For 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
.
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:
import { ColorPicker, TriangleColorPicker } from 'react-native-color-picker'
ColorPicker | TriangleColorPicker |
---|---|
![]() |
![]() |
Color pickers accepts properties below. Each property which define color is represented as a color string.
Both color pickers are PureComponents thus if you want to update it you should not mutate its properties deeply.
Property | Type | Note |
---|---|---|
color |
String\|HSV |
Color string 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 |
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. |
hideSliders |
Boolean |
Option to hide bottom sliders (holo picker only) |
hideControls |
Boolean |
Option to hide bottom buttons (triangle picker only) |
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:
{
h: number, // <0, 360>
s: number, // <0, 1>
v: number, // <0, 1>
}
To utilize HSV -> HEX/RGB conversion we provide helper functions:
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
See our examples on Expo
ScrollView
due to touch event interference.Slider
component. You need to provide Slider component as prop to overcome this. Our implementation was inspired by Android Holo ColorPicker