Triangle picker not working (triangle not rotating)

[Sofianio]

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

[Sofianio]

@sodik82 If this module is not maintained please say so, so I can look for an alternative.

[sodik82]

we plan to incorporate PR https://github.com/instea/react-native-color-picker/pull/16 and see how it looks like (this week) however no promises about your actual problem.

[Sofianio]

Ok, thanks for the info

[sodik82]

I have released PR fixing warning. I test our examples on IOS simulator and triangle example worked well. can you try our expo examples or there must be something "extraordinary" in your setup

[Sofianio]

The Expo example works fine, I'll try my code in Expo and Expo code in my App and tell you what I find.

[Sofianio]

I tried my code in Expo: It worked I tried Example code in my app: It didn't work react-native info gave this:

System:
    OS: macOS Mojave 10.14.3B
  Binaries:
    Node: 8.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 25, 26, 27, 28
      Build Tools: 26.0.2, 27.0.3, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  IDEs:
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    create-react-native-app: 1.0.0
    react-native-cli: 2.0.1
    react-native-rename: 2.2.2

Maybe it works on Expo only? Or the issue appears on RN 0.61 only? I would suspect the OS version but it doesn't work on both Android and iOS with same behavior

[elliscwc]

I have this issue too but with the holo color picker, the handle rotates to one(left) side only, to me it happens on iOS only. We recently upgrade to react native 0.61, and found out it stopped working, tested on the latest v0.4.4.

[Sofianio]

The issue above (holo picker) happens to me too

[ilyafriedman]

Same here

[fullstackfool]

Same here, a styling issue that can be solved at the user end?

[sodik82]

it looks like IOS somehow does not update rotation transform on the view as the angle changes. however initial value works fine.... but I can't find anything special about it in change log

[sodik82]

can you try version 0.4.5 ?

[elliscwc]

I apply the rotation hack to Holo picker myself, but didn't work..

[Sofianio]

@sodik82 I've tried the version 0.4.5 and the current issue of the triangle not rotating was fixed, but some other issues appeared:

• The triangle flickers and vibrates when moving the little circle (not in initial hue value)
• Upon dragging the little circle to the edge .. the hue snaps back to the initial hue
• Some times clicking the hue circle doesn't do anything

I captured all these symptoms in this little video

[sodik82]

hm... I have seen small flickering but it looked "okeyish". It is the price for the forcing IOS to update the transform - rotate. Does anyone know more about that issue?

Maybe I can "reduce" the effect by playing how often to force rendering....

Any other thoughts?

[Sofianio]

The flickering happens when moving the little circle inside the triangle, Can you limit the "force update" only to the hue change event (the big circle)?

[sodik82]

hi there.... I have just released 0.4.6 that should be less aggressive. I have also added a property rotationHackFactor that allows you to more fine-tune the hack or even disable it with value 0

Simple example: <TriangleColorPicker oldColor='purple' onColorSelected={color => alert(Color selected: ${color})} style={{flex: 1}} rotationHackFactor={100} />

[sodik82]

However it looks strange that triangle rotate if you just play inside.... It should not happen if you use advice from README

When using color picker as a controlled component you should always use HSV color representation to avoid conversion from/to HEX or RGB.

what is your case - controlled or uncontrolled?

[Sofianio]

I use a controlled component and I use the provided toHsv to pass the color

<TriangleColorPicker
  color={toHsv(this.state.color)}
  onColorChange={color => this.setState({color: fromHsv(color)})}
  style={{height:'100%', width: '100%'}}
  onColorSelected={color => this.setState({color})} />

I'll test the 0.4.6 and get back to you

[Sofianio]

I tried rotationHackFactor 50 & 100 unfortunately the flickering is still there and very noticeable the snap back to red is also present. But there were some also times where there was no flickering in hues other than default red, so it was definitely an improvement.

[sodik82]

Hi @Sofianio ,

as mentioned earlier, you should NOT convert color fromHsv (and back toHsv) when using controlled component. Use something like this instead:

<TriangleColorPicker
  color={this.state.hsv}
  onColorChange={hsv => this.setState({color: fromHsv(hsv), hsv})}
  style={{height:'100%', width: '100%'}}
  onColorSelected={...} />

i.e. use HSV representation for color picker and color anywhere else you need

[Sofianio]

Hi @sodik82 It appears I misunderstood the instructions, I did as you suggested and the flickering stopped when dragging inside the triangle. The triangle color still flickers when I drag the hue circle (rotate)

Nice work.

[carstenblt]

I have this problem on Android with 0.4.6. The triangle is not rotating. Edit: also with 0.5.0, RN 0.61.

[Sofianio]

@sodik82, the issue is fixed in iOS but not in Android (v0.4.6)

[Sofianio]

I didn't notice there was a newer version 0.5.2 I tried it and Android works fine now You could've said that, instead of closing the issue without comment

[carstenblt]

Calm down, the commit is linked and includes the version bump.

Thank you for your great work @sodik82

[Sofianio]

Don't get me wrong, I am thankful for this module and I want it to be working perfectly for me and others.

[sodik82]

thanks everyone for contributions (incl. reports) and patience :)

[rmanalo-getdevs]

I have this issue too but with the holo color picker, the handle rotates to one(left) side only, to me it happens on iOS only. We recently upgrade to react native 0.61, and found out it stopped working, tested on the latest v0.4.4.

still happens in version : 0.5.2

[ilyafriedman]

I ended up learning that in my case the issue was somehow linked to my navigation library. When I isolated this screen in its own navigation stack the issue went away but when I had this screen as part of a larger navigation stack it persisted.

[rmanalo-getdevs]

I ended up learning that in my case the issue was somehow linked to my navigation library. When I isolated this screen in its own navigation stack the issue went away but when I had this screen as part of a larger navigation stack it persisted.

Thanks man! it did work

[monicse09ku]

I am having this issue on android, "react-native": "0.62.2" and "react-native-color-picker": "^0.5.2"

<ColorPicker
    oldColor='purple'                                        
    style={{height: 180, width: 180, flex: 1}}
    onColorChange={this.onColorChange}
/>

Is there any solution?