naeemur / react-native-wheel-color-picker Goto Github PK
View Code? Open in Web Editor NEWA color picker component for react native.
A color picker component for react native.
It would be nice if we could have styling options to position the well and all the other components.
Calling "revert()" API sometimes throws Uncaught Error: null is not an object (evaluating 'rgb.r')
from hex2Hsv
method.
Version of react-native-wheel-color-picker
^1.2.0
Version of react-native
0.66.3
Platforms you faced the error (IOS or Android or both?)
iOS
Expected behavior
revert() should not throw
Actual behavior
It is random occurance. Sometimes it throws above error, other times it works as expected.
Tested environment (Emulator? Real Device?)
Emulator
Steps to reproduce the behavior
const colorPickerRef = useRef();
const [color, setColor] = React.useState(props.color || "#FFF");
return (<View style={styles.wrapper}>
<ColorPicker
ref={(ref) => (colorPickerRef.current = ref)}
color={props.color || "#000000"}
swatchesOnly={false}
onColorChangeComplete={setColor}
thumbSize={40}
sliderHidden
sliderSize={10}
noSnap={true}
row={false}
swatchesLast={true}
swatches={false}
discrete={false}
/>
<Button text="Cancel" onPress={() => colorPickerRef.current?.revert()} />
</View>)
I am using this module on react-native-web
:
Failed to compile.
./node_modules/react-native-wheel-color-picker/ColorPicker.js
SyntaxError: /Users/kasra/Documents/realnote_app/react/node_modules/react-native-wheel-color-picker/ColorPicker.js: Support for the experimental syntax 'jsx' isn't currently enabled (499:4):
497 | renderSwatches () {
498 | this.swatches = PALLETE.map((c,i) => (
> 499 | <View style={[ss.swatch,{backgroundColor:c}]} key={'S'+i}>
| ^
500 | <TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)}>
501 | <Animated.View style={[ss.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
502 | </TouchableWithoutFeedback>
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-wheel-color-picker": "^1.1.0",
When I change the picture, the color I get is wrong
Hello there,
when using onColorChangeComplete the call back function is executed thrice.
<ColorPicker color={this.state.rgbObject.rgbHex} style={{paddingBottom: 40, marginTop: 20}} onColorChangeComplete={this.onChangeColor} thumbSize={30} sliderSize={30} gapSize={10} swatchesLast={false} row={false} />
where
onChangeColor = (color) => { console.log('onChangeColor Called', color) }
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.
Currently, all props on the ColorPicker component needs to be specified even though in reality it doesn't need to as you have defined static default props in the component itself. onColorChange and onColorChangeComplete also had wrong types. This patch fixes both of the issues that I mentioned, feel free to incorporate them if you agree with the changes.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-wheel-color-picker/types.d.ts b/node_modules/react-native-wheel-color-picker/types.d.ts
index 365aab5..6fec768 100644
--- a/node_modules/react-native-wheel-color-picker/types.d.ts
+++ b/node_modules/react-native-wheel-color-picker/types.d.ts
@@ -1,20 +1,20 @@
import * as React from 'react';
export interface ColorPickerProps extends React.Props<ColorPicker> {
- row: boolean,
- noSnap: boolean,
- thumbSize: number,
- sliderSize: number,
- discrete: boolean,
- swatches: boolean,
- swatchesLast: boolean,
- swatchesOnly: boolean,
- color: string,
- shadeWheelThumb: boolean,
- shadeSliderThumb: boolean,
- autoResetSlider: boolean,
- onColorChange(): void,
- onColorChangeComplete(): void,
+ row?: boolean,
+ noSnap?: boolean,
+ thumbSize?: number,
+ sliderSize?: number,
+ discrete?: boolean,
+ swatches?: boolean,
+ swatchesLast?: boolean,
+ swatchesOnly?: boolean,
+ color?: string,
+ shadeWheelThumb?: boolean,
+ shadeSliderThumb?: boolean,
+ autoResetSlider?: boolean,
+ onColorChange?(color: string): void,
+ onColorChangeComplete?(color: string): void,
}
declare class ColorPicker extends React.Component<ColorPickerProps, any> {
This issue body was partially generated by patch-package.
When i use this color picker inside scrollview the color picker is not working smoothly
I am trying to use the library with expo web which is working great so far.
But there is one issue when used in mobile, which is that the dragging of the window is interfering with the dragging of the color-dragger.
This is not working on iOS nor Android. Is there any way to fix this easily?
Issue reproduced on mobile:
https://snack.expo.io/@hit-em/excited-salsa
I'd like to be able to call
<ColorPicker ... disabled={true} />
which would then show the color picker with its current input but without the ability to select a new color.
Is it possible with the current API?
When user changes color on the picker onColorChange fires multiple times, probably the "state" being applied again.
I think when the state sets color={currentColor}
, there shouldn't be an event fired.
const someEvent = () => {
setCurrentColor('#cccccc');
}
const [currentColor, setCurrentColor} = useState('#ffffff');
<ColorPicker
color={currentColor}
onColorChange={setCurrentColor}
/>
Possibly related #5
I've been reading the docs but couldn't find any solutions so increase/decrease the swatches size, but I found in the source code that this is made with just a simple style.
By now i'm just a begginer in react native and cant make a fork to code a solution for that, could you please make a parameter for that?
Hello, I'm from Brazil, in my project I would like to use only the wheel without slider. Could this option/feature be available soon ?
Could not find a declaration file for module 'react-native-wheel-color-picker'.
May it be possible that a type declaration is added to this package?
My setup is basically something like this:
`
const someEvent = () => {
setCurrentColor('#cccccc');
}
const [currentColor, setCurrentColor} = useState('#ffffff');
<ColorPicker
color={currentColor}
onColorChange={setCurrentColor}
/>
`
When someEvent
function is triggered, currentColor
is not affecting <ColorPicker/>
component.
Would appreciate any help with this
Would it be possible for you to add an ActivityIndicator while the image is loading. Maybe a configurable property for that?
I'm using this for a project with a very constrained bandwidth. The user therefore just sees an empty field at the beginning which is a bit annoying.
I can't seem to update the discreteLength and palettes props to a specific or desired value.
Version of react-native-wheel-color-picker
^1.1.0
Version of react-native
0.65.1
Platforms you faced the error (IOS or Android or both?)
IOS and Android
Expected behavior
Replacing discreteLength: 10 to 6 would display only 6 shades from swatch along with replacing color palettes to desired colors.
Actual behavior
Does nothing basically.
Tested environment (Emulator? Real Device?)
Emulator
Steps to reproduce the behavior
Replace the props with desired values.
<ColorPicker
color={color}
onColorChangeComplete={(color) => setColor(color)}
swatchesLast={false}
sliderSize={30}
thumbSize={30}
discrete={true}
discreteLength={6}
palette={PALETTE}
/>
const PALETTE = ['#ed1c24', '#d11cd5', '#1633e6', '#00c85d', '#ffde17'];
I am using react-native-wheel-color-picker to select a color, and then generate a color scheme from that color. I thought it would be cool if I used the palette
prop to show the generated colors but I found that the colors of the palette prop doesnt update after the first render.
(Full code here)
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import ColorPicker from 'react-native-wheel-color-picker';
import {genColorScheme} from './helpers/colorGenerator'
export default function App() {
const [ colors, setColors ] = React.useState(genColorScheme());
// unmounting and remounting color picker shows correct palette
const [showPicker , setShowPicker] = React.useState(true);
const rerenderColorPicker = ()=>{
setShowPicker(false);
setTimeout(()=>{
setShowPicker(true)
},0)
}
return (
<View style={styles.container}>
<Button
title="Force Picker Rerender"
onPress={rerenderColorPicker}
/>
<View style={styles.pickerContainer}>
<Text>Actual Palette:</Text>
<View style={styles.row}>
{colors.map(color=>
<View style={[styles.circle,{backgroundColor:color}]}/>
)}
</View>
{showPicker && <ColorPicker
style={styles.picker}
color={colors[0]}
onColorChange={color=>{
setColors(genColorScheme(color))
}}
thumbSize={24}
palette={colors}
/>
}
</View>
</View>
);
}
Further inspection into the source code revealed that palette is generated by this.renderSwatches
. renderSwatches
is called in the only called in the constructor. And because the constructor only runs once, the swatches doesnt update when palette changes
<ColorPicker
style={styles.colorPickerStyle}
color={ThemeObj.bgColor}
onColorChangeComplete={color => {
//console.log('onColorChangeComplete===>', color);
selectedPickerColor = color;
}}
thumbSize={30}
sliderSize={30}
noSnap={false}
swatches={false}
row={false}
gapSize={1000}
/>
how we can solve this issue?
Would you be interested in updating the current code base to use React hooks, functional components & TypeScript?
onColorChangeComplete and onColorChange method return wrong color code when color selected and set in TextInput . Even if select same color it's value change .
please fix this problem (in the video) in the RTL application.
thanks.
Not sure why but on my physical device the thumb for the color wheel & slider refuse to move. Unable to recreate the bug in the simulator on on device but basically the thumb is stuck on the upper left corner of the wheel and for the slider it's just stuck on the left.
Hello,
As far as I can see there is no support for alpha/transparency?
The following snippet will crash and there is no way to control transparency of color?
<ColorPicker
shadeWheelThumb
sliderSize={16}
thumbSize={20}
swatches={false}
color={value} // if values is: "transparent" or "rgba(0, 0, 0, 0)" or "#00000000" ColorPicker crashes.
Hello! I'm getting a warning when adding this to my react native project:
Animated:
useNativeDriverwas not specified. This is a required option and must be explicitly set to
trueor
false``
Here is the code I use. I added useNativeDriver at the end to try to fix the issue, but true/false still gives the same error.
<ColorPicker
color={'#ffffff'}
// onColorChange={(color) => setColor(color)}
// onColorChangeComplete={(color) => setColor(color)}
thumbSize={40}
sliderSize={20}
noSnap={true}
row={false}
swatchesLast={false}
swatches={false}
discrete={false}
useNativeDriver={true}
/>
Would appreciate any help with this! Thank you!
I believe this prop should receive a function with color as the argument as that's the whole point of this prop. I console logged 'color' and indeed got a color as a string.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.