instea / react-native-color-picker

Color picker component for IOS/Android

react-native-color-picker

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

• works both in controlled and uncontrolled way
• old color can be displayed for visual comparison
• holo and triangle color pickers

Getting started

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.

API

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:

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

ColorPicker	TriangleColorPicker

Props

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>
}

Helper functions

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

Examples

See our examples on Expo

Limitations

• Does not work well within ScrollView due to touch event interference.
• RN has deprecated Slider component. You need to provide Slider component as prop to overcome this.
• There is known bug affecting RN 0.61. See more info about the workaround.

Thanks

Our implementation was inspired by Android Holo ColorPicker

react-native-color-picker's Issues

Add Black Color Option

I would like to request the addition of black as a color option in the React Native Color Picker library. Currently, the library does not include black as a selectable color, which is a common and important color choice in various applications.

Holo color picker outer circle missing on ios

Outer cicle is missing... This is only happening with ios

-16777216}] is not usable

Hi,

Sometimes I hit this issue

Invariant Violation: [1289,"RCTView",{"top":"<>","left":"<>","backgroundColor":-16777216}] is not usable

Any clue?

Warning: Picker has been extracted from react-native core and will be removed in a future release

Does anybody has this warning?

TypeError (TS2740) sliderComponent

I just want to use the default slider from '@react-native-community/slider'

adding this to the 'sliderComponent' prop results in an type error

Slider is an intersection type of React.Component

Fixed the issue for future release of React Native (removal of Slider extracted from react-native)

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-color-picker/src/HoloColorPicker.tsx b/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
index 51a7bcc..6707587 100644
--- a/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
+++ b/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
@@ -4,13 +4,12 @@ import {
   Image,
   InteractionManager,
   PanResponderInstance,
-  Slider,
   StyleSheet,
   TouchableOpacity,
   View,
 } from "react-native"
 import tinycolor from "tinycolor2"
-
+import Slider from '@react-native-community/slider';
 import { HsvColor, IPickerProps, Point2D } from "./typeHelpers"
 import { createPanResponder } from "./utils"
 

This issue body was partially generated by patch-package.

What does controlled/uncontrolled mean?

Maybe a stupid question but I couldn't figure out yet.

Change Slider Colors

How would I, if possible, change the color of the sliders? I have imported the Slider component from react-native-community/slider and passed it in as a prop but don't know how to pass props like slider color to the slider this way.

<ColorPicker
       sliderComponent={Slider}
       onColorSelected={color => alert(`Color selected: ${color}`)}
       onColorChange={color => setNewPaletteColor(fromHsv(color))}
       style={{ flex: 1, height: 400, width: 300 }}
       defaultColor={Constants['collectionData']['fields']['palette']['mapValue']['fields'][colorToChange]['stringValue']}
/>

onColorSelected prototype claims (color: HsvColor) arg, but it's actually (color: string)

The exported IPicker interface has HsvColor as argument for onColorSelected: onColorSelected: (selectedColor: HsvColor) => void;
But the argument is actually a string (tinycolor(...).toHexString()), which makes TypeScript sad. Will file a PR later this week.

Merry Christmas!

Feature Request: Show selected color string

It would be nice to have an option to show a textbox with the selected color string. Using the same textbox it would be good to allow editing the value and updating the color wheel based on that value.

I have tried to implement this myself by adding react-native-color-picker to a wrapper component but it seems binding the color property of the color picker to color={ this.state.mycolor} breaks the picker on IOS and stops the outer circle being able to be moved around to select a different color.

Customize colorPreview button/s in TriangleColorPicker

Hi there!

Could you please add ability (if it is possible) to customize these (colorPreview new and old) buttons.
As I see this — it can be a style prop for example.
And maybe it is necessary to add some sorta placeholder to the button, because right now it is not clear what this colored square thing do.

I attached example of what I'd want to see

Thanks in advance!

Can't install properly

I tried to install using following command but while installing getting error and can not use the color picker.
command:- "npm i react-native-color-picker"
I'm using expo.
![Uploading Screenshot 2020-08-24 at 9.51.26 PM.png…]

custom button and props for TriangleColorPicker

Hello there, I implemented some feature described here #28 for TriangleColorPicker
Could somebody apply this #29?

Setting "color" property breaks outer circle selection

Both the ColorPicker and TriangleColorPicker work perfectly with RN 0.63.2 when the "color" property is NOT used.

When this property is set, the outer circle no longer registers a tap on either component. The TriangleColorPicker does update the color when tapping within the triangle, but the marker does not move to the new position.

Any help would be greatly appreciated, cheers.

Getting Unexpected token export

Gertting error "Uncaught SyntaxError: Unexpected token export" when including.

How to change size color circle?

Warning: Slider has been extracted from react-native core and will be removed in a future release

It can now be installed and imported from '@react-native-community/slider' instead of 'react-native'. See https://github.com/react-native-community/react-native-slider

Triangle picker not working (triangle not rotating)

I tried this package on iOS and it didn't work properly,

you can see that:

• the triangle didn't rotate
• the dash has a weird rotation
• the circle is out of bounds (bcz triangle didn't rotate)
• and there's a warning about componentWillMount deprecation

Not Giving Colors Except Black Color

I am using react-native-color-picker and every time I click the it is giving me black color irrespective of where ever I click. I am not finding such issues anywhere. Following is my code

onColorChange(color) {
    console.log(color)
}

<ColorPicker
    oldColor='purple'
    color={this.state.color}
    onColorChange={this.onColorChange}
    onColorSelected={color => alert(`Color selected: ${color}`)}
    onOldColorSelected={color => alert(`Old color selected: ${color}`)}
    style={{height: 200, width: 200}}
    hideSliders={true}
/>

And the responses I received on clicking in different areas

{h: 53.023091807183505, s: 0, v: 0}

{h: 124.51081849529443, s: 0, v: 0}

{h: 205.9255659745072, s: 0, v: 0}

Any help is highly appreciable.

xcode 12 -Ios14 -colorpicker triangle single color inside triangle

xcode 12
expo init AwesomeProject

    "react-native-color-picker": "^0.6.0",

constructor(props) {
    super(props)
    this.state = { color: toHsv('red') }
    this.onColorChange = this.onColorChange.bind(this)
  }

  onColorChange(color) {
    console.log("color", color)
    this.setState({ color })
  }
 render(){
  return (
       <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
        <View style={{flex: 1, padding: 45, backgroundColor: "#212021"}}>
          <Text style={{color: "white"}}>
            React Native Color Picker - Controlled
          </Text>
          <TriangleColorPicker
            oldColor="purple"
            color={this.state.color}
            onColorChange={this.onColorChange}
            onColorSelected={color => alert(`Color selected: ${color}`)}
            onOldColorSelected={color => alert(`Old color selected: ${color}`)}
            style={{flex: 1}}
          />
        </View>
      </View>

Can you help me ColorPicker some bug in RN61

I have use the holo color picker, the handle rotates to one(left) side only, to me it happens on iOS only.

https://user-images.githubusercontent.com/29953232/69870626-6f2c2500-12eb-11ea-9438-0a8be2766d1b.png

We recently upgrade to react native 0.61, and found out it stopped working, tested on the latest v0.4.4.

Can you help me out thank you very much！

How to add title for the lower sliders and adding margins for it?

The lower sliders are too close to each others on android. I want to increase the used margins

Can't remove sliders and choose color with maximum opacity

I guess this is not an error but I would like to use the color with 1 of opacity but also hide the sliders. Currently, there is a default value for the color opacity, which is less than 1, and when the sliders are hidden there is no way of getting it back to 1.

Restrict colors for picker

TriangleColorPicker rotating with flickering on IOS

Hi there, I have some issue with TriangleColorPicker.
On IOS device, color trianlge rotating with flickering and color indicator (small black circle) don't move.
But it started working after changing screen orientation.
I use the last version of this lib - 0.52
RN - 0.59.9
React - 16.8.3

How to label the sliders

I would like to label each of the sliders so that users can tell what each one controls.

How would I do this so that I can change the text that appears above each individual slider? Here is my code so far.

<ColorPicker
      sliderComponent={renderSliderComponent}
      onColorSelected={color => alert(`Color selected: ${color}`)}
      onColorChange={color => setNewPaletteColor(fromHsv(color))}
      style={{ flex: 1, height: 400, width: 300 }}
      defaultColor={selectedColor}
/>

const renderSliderComponent = () => {
    return (
      <View>
        <Text>Testing</Text>
        <Slider 
          minimumTrackTintColor={theme.colors.medium}
        />
      </View>
    )
  }

Color picker shrinks automatically on android every time keyboard comes up.

First of all, I did not use and 'KeyboardAvoingView'. So on iOS, Color picker circle remains same even if the keyboard comes up. But on android, color circle shrinks to avoid the keyboard.
But I want the color circle to remain same at the origin place even if the keyboard comes up.

Any solutions for this?

Thank you very much!

sliderComponent

I have error when i try to add sliderComponent

My code :

<ColorPicker onColorSelected={color => alert(Color selected: ${color})} style={{ flex: 1 }} color={this.state.color} onColorChange={this.onColorChange} sliderComponent={<Slider style={{ width: 200, height: 40 }} minimumValue={0} maximumValue={10} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#000000" />} />

I get this error :

element type is invalid expected a string (for built-in components) or a class/function but got objec.

According code of https://github.com/instea/react-native-color-picker/blob/master/src/HoloColorPicker.js ,
sliderComponent is of type 'PropTypes.elementType' where PropType is a npm library
https://www.npmjs.com/package/prop-types

So on prop-types library documentation is indicated that

// A React element type (ie. MyComponent). optionalElementType: PropTypes.elementType,
So i am doing wrong , please help

Handle touchRelease

Hey there,
I'm using the TriangleColorPicker and think, that it is somehow tricky as an unexperienced user to know, that I have to press the colored bar to select a color.

So I'm trying to detect when the user releases the finger from within the triangle and use that event as onColorSelected. I was able to insert that functionality (it seems, you alreade started that in utils.js) . But unfortunately I unable to distinguish between clicking on the circle and picking the color from inside the triangle.

Is there any line where you determine that? I mean at some point you need to know whether to rotate the triangle or not, right? My fork is https://github.com/paul-git/react-native-color-picker

Thanks and Greetings,
Paul

Outer circle missing with RN62

It shows a warning:
ReactNativeFiberHostComponent: Calling getNode() on the ref of an Animated component is no longer necessary. You can now directly use the ref instead.

And the outer circle is missing:

IPicker type declarations problem

It seems like there are a few properties (onColorChange, onColorSelected, defaultColor, color) declared as required in IPicker, although even the example usage snippet shows they are optional and so does runtime. This triggers code assist to treat omitting them as an error.

Slider import from react native resolved

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-color-picker/dist/HoloColorPicker.d.ts b/node_modules/react-native-color-picker/dist/HoloColorPicker.d.ts
index e4a4a10..3df2476 100644
--- a/node_modules/react-native-color-picker/dist/HoloColorPicker.d.ts
+++ b/node_modules/react-native-color-picker/dist/HoloColorPicker.d.ts
@@ -1,5 +1,5 @@
 import React from "react";
-import { Slider } from "react-native";
+import Slider from '@react-native-community/slider';
 import { HsvColor, IPickerProps, Point2D } from "./typeHelpers";
 declare type SliderProps = {
     onValueChange?: (value: number) => void;
diff --git a/node_modules/react-native-color-picker/dist/HoloColorPicker.js b/node_modules/react-native-color-picker/dist/HoloColorPicker.js
index a177142..95280a3 100644
--- a/node_modules/react-native-color-picker/dist/HoloColorPicker.js
+++ b/node_modules/react-native-color-picker/dist/HoloColorPicker.js
@@ -12,7 +12,8 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import React from "react";
-import { I18nManager, Image, InteractionManager, Slider, StyleSheet, TouchableOpacity, View, } from "react-native";
+import { I18nManager, Image, InteractionManager, StyleSheet, TouchableOpacity, View, } from "react-native";
+import Slider from '@react-native-community/slider';
 import tinycolor from "tinycolor2";
 import { createPanResponder } from "./utils";
 var HoloColorPicker = /** @class */ (function (_super) {
diff --git a/node_modules/react-native-color-picker/src/HoloColorPicker.tsx b/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
index 51a7bcc..6707587 100644
--- a/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
+++ b/node_modules/react-native-color-picker/src/HoloColorPicker.tsx
@@ -4,13 +4,12 @@ import {
   Image,
   InteractionManager,
   PanResponderInstance,
-  Slider,
   StyleSheet,
   TouchableOpacity,
   View,
 } from "react-native"
 import tinycolor from "tinycolor2"
-
+import Slider from '@react-native-community/slider';
 import { HsvColor, IPickerProps, Point2D } from "./typeHelpers"
 import { createPanResponder } from "./utils"
 

This issue body was partially generated by patch-package.

Center color circle loose circle shape when defining 'oldColor' params

Hello here,

First of all thanks for your work on this one !

I have an issue: when I set a value for oldColor params the center circle (with old/current color) switch from a perfect circle to something strange between square and circle I would say.

Any idea of the origin of that ? Thanks a lot for infos