instea / react-native-color-picker Goto Github PK
View Code? Open in Web Editor NEWColor picker component for IOS/Android
License: Apache License 2.0
Color picker component for IOS/Android
License: Apache License 2.0
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.
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.
Maybe a stupid question but I couldn't figure out yet.
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.
The lower sliders are too close to each others on android. I want to increase the used margins
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
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!
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.
Does anybody has this warning?
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']}
/>
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.
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!
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>
)
}
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>
Hi,
Sometimes I hit this issue
Invariant Violation: [1289,"RCTView",{"top":"<>","left":"<>","backgroundColor":-16777216}] is not usable
Any clue?
Gertting error "Uncaught SyntaxError: Unexpected token export" when including.
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
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.
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!
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.
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
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
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๏ผ
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.
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.