alabsi91/reanimated-color-picker

A Pure JavaScript Color Picker for React Native

reanimated-color-picker's Issues

Shadow calculation of Swatch is inefficient

Description

Getting this warniong with the <Swatches/> component:

WARN  (ADVICE) View #963 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

Steps to reproduce

Use the <Swatches/> component like:

 <Swatches
     style={{ paddingTop: 10, paddingHorizontal: 10 }}
     swatchStyle={{
                shadowOpacity: enableSwatchShadow ? 0.2 : 0,
                shadowRadius: 4,
                width: 30,
                height: 30
     }}
     colors={SWATCHES_COLORS}
/>

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.1

React Native version

0.73.4

React Native Reanimated version

3.8.1

React Native Gesture Handler version

2.14.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

TypeError: (0 , _reactNativeReanimated.useSharedValue) is not a function

Error tips reactNativeReanimated.useSharedValue is not a function

When I look in ColorPicker.js, find that import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';, goto react-native-reanimated package, I do not find useSharedValuevalue or function, I guess its version was wrong.

ColorPicker Panel3 is not working properly in ScrollView

Description

ColorPicker is not working properly when using Panel3 and wrapping that component in ScrollView, It works fine when disabling the scroll in ScrollView. Ideally, it should work seamlessly with ScrollView as well

Steps to reproduce

1. Create a component using ColorPicker and Panel3
2. Use a component in a screen and wrap that in ScrollView
3. ColorPicker doesn't work properly with scroll

Snack or a link to a repository

No response

Reanimated Color Picker version

2.4.2

React Native version

0.68.0

React Native Reanimated version

2.11.0

React Native Gesture Handler version

2.5.0

Platforms

Android, iOS

JavaScript runtime

V8

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Thumbs animate from 0 to the initial value prop's position on mount

Reproducible Example:

https://snack.expo.dev/@adamhari/reanimated-color-picker

Is there a way to modify the thumb scaling value?

Hey there! 👋 This is probably one of the best color pickers! Awesome work :)

I was wondering if there's a way to adjust thumb scaling when a pan gesture starts, and as far as I can see, it isn't possible (yet). Do you want me to open a new PR with the implementation of this feature?

The lib is crashing my App

Description

I'm having a memory leak problem when using the library, when I do excessive color change actions on the panel or slider the app crashes and closes. One of the solutions I thought of would be to activate the input or slider only in the ColorPicker OnComplete action and not automatically when the user changes the color but I don't know how to implement it:
<ColorPicker
value="red"
onComplete={onSelectColor}
boundedThumb
thumbSize={18}
thumbStyle={{ borderWidth: 10 }}
thumbInnerStyle={{ backgroundColor: 'transparent' }}
>
<Panel1
style={{
height: 150,
}}
/>

			<InputWidget
				containerStyle={{
					marginTop: 10,
				}}
				inputTitleStyle={{ display: 'none' }}
				iconStyle={{
					display: 'none',
					width: 0,
				}}
				inputStyle={{
					height: 30,
					width: 85,
					backgroundColor: theme.colors.back1,
					borderColor: theme.colors.sysGrey4,
					alignSelf: 'flex-end',
					textTransform: 'uppercase',
					color: theme.colors.text1,
					fontSize: 15,
					borderRadius: 5,
					marginRight: 0,
				}}
			/>

			<HueSlider
				style={{ marginTop: 10, borderRadius: 22 }}
				sliderThickness={18}
			/>

Steps to reproduce

1. I suddenly change color on the panel
2. I suddenly change color on the slider
3. The app displays a not responding message

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.2

React Native version

0.66.3

React Native Reanimated version

2.2.4

React Native Gesture Handler version

2.8.0

Platforms

Android, iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Add ability to pass initial color

description

It would be really useful to be able to pass the initial color when opening the color panel. I could look into adding it as a functionality if any help is needed.

Using <Panel5 />, when first loading the picker, the color set as "value" is not reflected in the selector.

Description

Using <Panel5 />, when first loading the picker, the color set as "value" is not reflected in the selector. The color is indeed selected, but the selector remains on "white". This happens on some colors, not all.

For example, if setting "black", "#785800" or "#0056d6" to "value", the selector stays on those colors when the picker in loaded.

But if setting "#0041a8", "#bd3812" or "#f5ed00" to "value", the right color is set and shows in the preview, but the selector stays on the "white" square. Even though all these colors are available on the grid. Again, the value color is selected, but visually the selector stays on "white".

Steps to reproduce

1. set <ColorPicker value={'#0041a8'}
2. load <Panel5 />
3. The selector remains on "white" but the right color '#0041a8' is displayed in the Preview and is set.

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.5

React Native version

0.72.4

React Native Reanimated version

3.5.4

React Native Gesture Handler version

2.12.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Color Slider

description

Is there a way to have a color slider without having the swatches? It seems that using a hue slider only works when you add a swatches component, and I just want a color slider

Bug: At least Panel1 and HueSlider have a weird behaviour when choose a pure color (black or white)

Description

The problem is Panel1 can modifiy HueSlider position when you move to a pure black or pure white (see video).

HueSlider is move too from right to left if you move to the righest position.

Untitled.mov

This occours in iOS and Android

Example Code:

  const [internalColor, setInternalColor] = useState<string>(color);

  const onColorSelect = ({ hex }: { hex: string }) => setInternalColor(hex);
  
  return (
          <ColorPicker
            value={internalColor}
            sliderThickness={16}
            thumbSize={32}
            thumbShape="circle"
            onComplete={onColorSelect}
            boundedThumb
          >
            <Panel1  />
            <HueSlider  />
            <View>
              <View>
                <Text>{translate('addIncomeForm.customColorPicker.hex')}</Text>
                <InputWidget
                  disableAlphaChannel
                  formats={['HEX']}
                />
              </View>
              <View>
                <Text>{translate('addIncomeForm.customColorPicker.rgb')}</Text>
                <InputWidget
                  disableAlphaChannel
                  formats={['RGB']}
                />
              </View>
            </View>
          </ColorPicker>
)

Steps to reproduce

1. Move the Panel1 to a pure black or pure white
2. You can see that HueSlider automatic move to left position

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.4

React Native version

0.71.13

React Native Reanimated version

3.5.4

React Native Gesture Handler version

2.13.1

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Swatches does not return the same color defined in "color" property

Hi!, I'm using the Swatches to assign a color to some object, the component is so defined:

<ColorPicker
    value={ac.dc.color.value}
    sliderThickness={25}
    thumbSize={30}
    style={{ width: '75%', justifyContent: 'center' }}
    onComplete={ac.dc.onSelectColor}>
    <Swatches
    swatchStyle={styles.swatchStyle}
    colors={PedalsColourCode}
/>
</ColorPicker>

the colors assigned to "colors" are the following:

    '#FF9800',
    '#FF5722',
    '#795548',
    '#9E9E9E',
    '#607D8B',

When I assign the color to my object, with onSelectColor, the "hex" assigned is similar BUT different from that one defined.
Eg:

PedalsColourCode:  ["#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"]
hexColourAssigned: #795649

The assigned hex #795649 is different from the defined #795548.

Am I missing something?

[Expo 51 SDK] Cannot access 'colorKitUI' before initialization on Expo SDK Web

Description

When trying to use the color picker with Expo SDK 51 the following error occurs. This issue only occurs on Web. I can confirm it doesn't happen on Android, not sure about iOS.

Static Rendering Error (Node.js)
Cannot access 'colorKitUI' before initialization
Call Stack
factory
node_modules/reanimated-color-picker/lib/commonjs/colorKit/index.js
loadModuleImplementation
node_modules/metro-runtime/src/polyfills/require.js
guardedLoadModule
node_modules/metro-runtime/src/polyfills/require.js
require
node_modules/metro-runtime/src/polyfills/require.js
factory
node_modules/reanimated-color-picker/lib/commonjs/ColorPicker.js
loadModuleImplementation
node_modules/metro-runtime/src/polyfills/require.js
guardedLoadModule
node_modules/metro-runtime/src/polyfills/require.js
require
node_modules/metro-runtime/src/polyfills/require.js
factory
node_modules/reanimated-color-picker/lib/commonjs/index.js
loadModuleImplementation
node_modules/metro-runtime/src/polyfills/require.js

Steps to reproduce

Create a bare Expo SDK 51 project and import reanimated-color-picker

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.3

React Native version

0.74.1

React Native Reanimated version

3.10.1

React Native Gesture Handler version

2.16.1

Platforms

Web

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Another Panel that allows darker colors without added slider

Hi - love this project. I am currently using it to work on a basic react app. I was wondering if there was any roadmap to expand and add more Panels? Ideally I am looking for one that gives Panel 3 level control but also allows the brightness slider to be embedded into the Panel such that the end user can get darker shades without needing to adjust another slider.

I'd be happy to give implementing a go if you're open to a pull request.

HSV convertion error

Description

When I use the colorpicker, the library calculates all the color convention values, but the HSV variant throws an error:

index.ts:1359 [colorKit.HSV] An error occurred while attempting to convert the provided parameter into an HSV color. As a result, the default color "black" will be used instead.

I use the <Panel5 /> picker and the hex value as output. I don't use the HSV at all.

Steps to reproduce

1. Implement Colorpicker
2. choose a color
3. See log.

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.1

React Native version

0.72.6

React Native Reanimated version

~3.3.0

React Native Gesture Handler version

~2.12.0

Platforms

Android, iOS, Web

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Preview transparancy background overlaps

Description

When the preview style there is a set border radius that is bigger than zero it causes a unclean overlay of the transparancy grid below it to overlap which results in an ugly looking edge.

‏‎‌‎‌‍‎‍‎‎‏‎‏‎‌‏‍‌‏‍‎‍‍‎‏‏‌‌‏‌‎‎‍‌‌‍‌‎‌‏‎‌‍‏‏‌‏‍‍‎‎‎‍‏‎‍‌‏‌‏‎‏‎‎‏‎‍‏‎‍‌‌‎‌‌‍‍‍‍‏‏‎‎‏‍‌‎‏‏‍‌‌‌‌‍‏

Steps to reproduce

1. Add a <Preview /> Component
2. Add a style prop with a border radius > 0

Snack or a link to a repository

No response

Reanimated Color Picker version

2.2.0

React Native version

0.71.6

React Native Reanimated version

2.14.4

React Native Gesture Handler version

2.9.0

Platforms

Android, Web

JavaScript runtime

JSC

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Property `text` was whitelisted both as UI and native prop. Please remove it from one of the lists., js engine: hermes

Description

I'm randomly getting this error with reanimated latest version, and I think it might be related to the Preview componet and its animatedProps.

Will do more research later and complete with more info.

Steps to reproduce

No steps

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.3

React Native version

0.73.4

React Native Reanimated version

3.6.2

React Native Gesture Handler version

2.14.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Release mode

Support React Native 0.69.x

Thanks for your libs, but your example does not work with RN 0.69.4
"react-native-reanimated": "2.10.0",
"react-native-gesture-handler": "2.6.0",

• fabric is off
  when drag point crash with log
  

[3.0] Setting thumbColor overrides active fill color

Description

In 2.x versions, setting the thumbColor, atleast on the default thumb, would set the color of the ring surrounding the thumb, but the inner color would still reflect the color selection.

In 3.0, setting the thumbColor will control the fill color and the surrounding ring color.

Is there a way to control the default thumb's outer ring color without overriding the fill color like in 2.x?

Thank you for all the incredible work you've done with this library!

Steps to reproduce

Render a Panel3 with the thumbColor prop

Snack or a link to a repository

https://snack.expo.dev/@adamhari-kashoo/reanimated-color-picker

(visit Panel3 Brightness)

Reanimated Color Picker version

3.0.0

React Native version

0.73.2

React Native Reanimated version

3.6.1

React Native Gesture Handler version

2.14.0

Platforms

Web

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

in ios slider does not working

Description

in ios slider does not work but in Android, it works fine.

yes, put 'react-native-reanimated/plugin' in babel.config.js

all steps I did as your mentioned in the documentation, but does not work

Screen.Recording.2023-05-21.at.3.13.04.PM.mov

Steps to reproduce

you can use any example code

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.0

React Native version

0.71.7

React Native Reanimated version

3.1.0

React Native Gesture Handler version

2.10.1

Platforms

iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Running failed

Description

Error: Exception in HostFunction: java.lang.UnsatisfiedLinkError: dlopen failed: cannot locate symbol "_ZN8facebook5react19ReadableNativeArrayC1EN5folly7dynamicE" referenced by...

Steps to reproduce

1. npm i reanimated-color-picker
2. import ColorPicker, {
   Panel1,
   Swatches,
   Preview,
   OpacitySlider,
   HueSlider,
   } from 'reanimated-color-picker';

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.2

React Native version

0.72.3

React Native Reanimated version

2.17.0

React Native Gesture Handler version

2.12.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

function passed to `onChange` prop of `ColorPicker` doesn't get executed

Description

Hi, thank you for the nice library.

I am trying to use the Panel5 component to allow users to pick colors, but the function passed to the onChange prop of the ColorPicker wrapper doesn't execute.

I am using react-native-reanimated version 2.8.0, and have found out that when I upgrade react-native-reanimated to a version higher than 3.0.0, the passed function gets executed as expected.

However, due to other libraries depending on react-native-reanimated, it is difficult for me to upgrade the version react-native-reanimated.

additional information

In the ColorPicker component in your library, the below changes do make the component work as I have expected. But I have no deep understanding of the code. Just adding this in case it might help :)

      // onGestureChange function inside ColorPicker.tsx
    const onGestureChange = (color?: SupportedColorFormats) => {
      'worklet';

      if (!onChange) return;
      const colorObject = returnedResults(color);

      // executing runOnJS makes it work, but I have no understanding of why..
      runOnJS(onChange)(colorObject)

      // below is the original code,
      // try {
      //   // run on the UI thread
      //   onChange(colorObject);
      // } catch (error) {
      //   // run on the JS thread
      //   runOnJS(onChange)(colorObject);
      // }
    };

Steps to reproduce

1. install react-native-reanimated version 2.8.0, react-native-gesture-handler version 2.10.1 with reanimated-color-picker version 3.0.3
2. pass a function to the onChange prop of the ColorPicker wrapper component
3. add Panel5 as a child to the Colorpicker wrapper.
4. press any color in the Panel5 component -> doesn't trigger function passed to the onChange prop, making it impossible to get the pressed color value.

Snack or a link to a repository

No response

Reanimated Color Picker version

3.0.3

React Native version

0.66.4

React Native Reanimated version

2.8.0

React Native Gesture Handler version

2.10.1

Platforms

iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Changing color value from Panel3 is not working (state or useSharedValue)

Description

Enregistrement.de.l.ecran.2024-02-22.a.18.00.56.mov

I am just copy pasting one of your examples but it is not working on my side.
color.hex is not moving when I press anywhere on the Color picker.
selectedColor.value is not updating.

Plus I am inside a react-native Modal, I am using ScrollView from react-native-gesture-handler and it is not working as expected, i cant move inside the Panel3.
https://github.com/alabsi91/reanimated-color-picker/blob/main/Example/src/Panel3Saturation.tsx

const selectedColor = useSharedValue(colors.cards.black);

  const onColorSelect = (color: returnedResults) => {
    'worklet';
    console.log('color.hex:', color.hex);
    selectedColor.value = color.hex;
  };

  const backgroundColorStyle = useAnimatedStyle(() => ({
    backgroundColor: selectedColor.value,
  }));
  
  return (
    <Animated.View style={[styles.header, backgroundColorStyle]}>
        <Text>Test</Text>
        <ScrollView style={styles.scrollView}>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              thumbSize={THUMB_SIZE}
              style={styles.colorPicker}
              value={selectedColor.value}
              onChange={onColorSelect}>
              <Panel3 />
            </ColorPicker>
          </View>
      </ScrollView>
    </Animated.View>
  )

Thank you for your help!

Steps to reproduce

Copy paste this example:
https://github.com/alabsi91/reanimated-color-picker/blob/main/Example/src/Panel3Saturation.tsx

Snack or a link to a repository

No response

Reanimated Color Picker version

^3.0.3

React Native version

0.73.4

React Native Reanimated version

^3.7.0

React Native Gesture Handler version

^2.15.0

Platforms

Android, iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Issue with ColorPicker and Panel3 in React Native

Description

I am experiencing an issue with the ColorPicker component when used with Panel3. Specifically, the ColorPicker scrolls along with the page when it should remain stationary.

Here are the details:

Scrolling Issue: The ColorPicker moves when scrolling within a KeyboardAwareScrollView. I also tried using react-native-gesture-handler's ScrollView but encountered the same problem.

Function Callbacks: We are using two functions, onChange and onComplete. When the scrolling issue occurs, the onComplete function does not get called.

Problems:

1. The ColorPicker scrolls along with the content when it should remain fixed.
2. When the ColorPicker scrolls, the onComplete function is not triggered.

I am sharing the problem video for a better understanding.

Screen.Recording.2024-05-17.at.1.28.54.PM.mov

here is my code:

 <View style={styles.container}>

            <GestureHandlerRootView style={{ paddingBottom: 150 }}>
                <KeyboardAwareScrollView
                    enableOnAndroid
                    bounces={false}
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{ paddingBottom: normalize(36) }}
                    keyboardShouldPersistTaps="handled"
                    enableResetScrollToCoords={false}
                >
                    <View style={styles.colorWheelContainer}>
                        <ColorPicker
                            value={defaultColor}
                            thumbInnerStyle={[styles.thumbStyle, thumbStyle]}
                            onChange={onChange}
                            onComplete={(color) => {
                                onComplete(color?.hex)
                            }}
                        >
                            <Panel3 style={[styles.panelStyle, colorWheelStyle]} />
                        </ColorPicker>
                    </View>

                </KeyboardAwareScrollView>
            </GestureHandlerRootView>

        </View>

Steps to reproduce

To reproduce do the same thing which is in the video, Just press press and drag.

Screen.Recording.2024-05-17.at.1.28.54.PM.mov

Snack or a link to a repository

No response

Reanimated Color Picker version

3.4.2

React Native version

0.70.10

React Native Reanimated version

2.14.0

React Native Gesture Handler version

2.5.0

Platforms

Android, iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Disable alpha setting at will

description

There should be a setting to say if the colorpicker should support transparancy or is always to be at full visibility.

cant read useSharedValue, useAnimatedStyle

Description

getting this error message 'TypeError: (0 , _$$_REQUIRE(...).useSharedValue) is not a function' whenever im importing useSharedValue, useAnimatedStyle

Steps to reproduce

import useSharedValue, useAnimatedStyle

Snack or a link to a repository

No response

Reanimated Color Picker version

2.3.2

React Native version

0.66

React Native Reanimated version

1.7.0

React Native Gesture Handler version

1.9

Platforms

Android, iOS

JavaScript runtime

JSC

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode