Seamless UI Thread Integration: Replacing Utils with colorKit Methods

src/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import colorKit from '@colorKit';
 import { PickerContextProvider } from '@context';
@@ -50,36 +50,79 @@ const ColorPicker = forwardRef<ColorPickerRef, ColorPickerProps>(
     const brightnessValue = useSharedValue(initialColor.v);
     const alphaValue = useSharedValue(initialColor.a);
 
-    const returnedResults = (color?: SupportedColorFormats) => {
-      color = color ?? {
+    const returnedResults = (inputColor?: SupportedColorFormats) => {
+      'worklet';
+
+      const color = inputColor ?? {
         h: hueValue.value,
         s: saturationValue.value,
         v: brightnessValue.value,
         a: alphaValue.value,
       };
+
       return {
-        hex: colorKit.HEX(color),
-        rgb: colorKit.RGB(color).string(false),
-        rgba: colorKit.RGB(color).string(true),
-        hsl: colorKit.HSL(color).string(false),
-        hsla: colorKit.HSL(color).string(true),
-        hsv: colorKit.HSV(color).string(false),
-        hsva: colorKit.HSV(color).string(true),
-        hwb: colorKit.HWB(color).string(false),
-        hwba: colorKit.HWB(color).string(true),
+        get hex() {
+          return colorKit.runOnUI().HEX(color);
+        },
+        get rgb() {
+          return colorKit.runOnUI().RGB(color).string(false);
+        },
+        get rgba() {
+          return colorKit.runOnUI().RGB(color).string(true);
+        },
+        get hsl() {
+          return colorKit.runOnUI().HSL(color).string(false);
+        },
+        get hsla() {
+          return colorKit.runOnUI().HSL(color).string(true);
+        },
+        get hsv() {
+          return colorKit.runOnUI().HSV(color).string(false);
+        },
+        get hsva() {
+          return colorKit.runOnUI().HSV(color).string(true);
+        },
+        get hwb() {
+          return colorKit.runOnUI().HWB(color).string(false);
+        },
+        get hwba() {
+          return colorKit.runOnUI().HWB(color).string(true);
+        },
       };
     };
 
     const onGestureEnd = (color?: SupportedColorFormats) => {
-      onComplete?.(returnedResults(color));
+      'worklet';
+
+      if (!onComplete) return;
+      const colorObject = returnedResults(color);
+
+      try {
+        // run on the UI thread
+        onComplete(colorObject);
+      } catch (error) {
+        // run on the JS thread
+        runOnJS(onComplete)(colorObject);
+      }
     };
 
     const onGestureChange = (color?: SupportedColorFormats) => {
-      onChange?.(returnedResults(color));
+      'worklet';
+
+      if (!onChange) return;
+      const colorObject = returnedResults(color);
+
+      try {
+        // run on the UI thread
+        onChange(colorObject);
+      } catch (error) {
+        // run on the JS thread
+        runOnJS(onChange)(colorObject);
+      }
     };
 
-    const setColor = (color: string, duration = thumbAnimationDuration) => {
-      const { h, s, v, a } = colorKit.HSV(color).object();
+    const setColor = (color: SupportedColorFormats, duration = thumbAnimationDuration) => {
+      const { h, s, v, a } = colorKit.HSV(color).object(false);
 
       hueValue.value = withTiming(h, { duration });
       saturationValue.value = withTiming(s, { duration });

src/components/Panels/Panel1.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Image, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import { styles } from '@styles';
@@ -83,7 +83,7 @@ export function Panel1({
 
     saturationValue.value = newSaturationValue;
     brightnessValue.value = newBrightnessValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -93,7 +93,7 @@ export function Panel1({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Panels/Panel2.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import { styles } from '@styles';
@@ -95,7 +95,7 @@ export function Panel2({
 
     hueValue.value = newHueValue;
     channelValue.value = newChannelValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -105,7 +105,7 @@ export function Panel2({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Panels/Panel3.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Image, ImageBackground, StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import { styles } from '@styles';
@@ -103,7 +103,7 @@ export function Panel3({
 
     hueValue.value = newHueValue;
     channelValue.value = newChannelValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -113,7 +113,7 @@ export function Panel3({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Panels/Panel4.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Image, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import { styles } from '@styles';
@@ -107,7 +107,7 @@ export function Panel4({
     hueValue.value = newHueValue;
     saturationValue.value = newSaturationValue;
     brightnessValue.value = newBrightnessValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -117,7 +117,7 @@ export function Panel4({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Preview.tsx

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue } from 'rea
 import colorKit from '@colorKit';
 import usePickerContext from '@context';
 import { styles } from '@styles';
-import { ConditionalRendering, contrastRatio, getStyle, HSVA2HEX, isWeb } from '@utils';
+import { ConditionalRendering, getStyle, isWeb } from '@utils';
 import { PreviewText } from './PreviewText';
 
 import type { PreviewProps } from '@types';
@@ -41,12 +41,14 @@ export function Preview({
   useDerivedValue(() => {
     const currentColor = { h: hueValue.value, s: saturationValue.value, v: brightnessValue.value, a: alphaValue.value };
 
-    previewColor.value = HSVA2HEX(hueValue.value, saturationValue.value, brightnessValue.value, alphaValue.value);
+    previewColor.value = colorKit
+      .runOnUI()
+      .HEX({ h: hueValue.value, s: saturationValue.value, v: brightnessValue.value, a: alphaValue.value });
 
     // calculate the contrast ratio
     const compareColor1 = alphaValue.value > 0.5 ? currentColor : { h: 0, s: 0, v: 70 };
     const compareColor2 = textColor.value === '#000000' ? { h: 0, s: 0, v: 0 } : { h: 0, s: 0, v: 100 };
-    const contrast = contrastRatio(compareColor1, compareColor2);
+    const contrast = colorKit.runOnUI().contrastRatio(compareColor1, compareColor2);
     const reversedColor = textColor.value === '#ffffff' ? '#000000' : '#ffffff';
     textColor.value = contrast < 4.5 ? reversedColor : textColor.value;
   }, [hueValue, saturationValue, brightnessValue, alphaValue]);

src/components/Sliders/HSB/BrightnessSlider.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import Thumb from '@thumb';
@@ -86,7 +86,7 @@ export function BrightnessSlider({
     if (brightnessValue.value === newBrightnessValue) return;
 
     brightnessValue.value = newBrightnessValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -96,7 +96,7 @@ export function BrightnessSlider({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Sliders/HSB/HueSlider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import Thumb from '@thumb';
@@ -93,7 +93,7 @@ export function HueSlider({
     if (hueValue.value === newHueValue) return;
 
     hueValue.value = newHueValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -103,7 +103,7 @@ export function HueSlider({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Sliders/HSB/SaturationSlider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import Thumb from '@thumb';
@@ -92,7 +92,7 @@ export function SaturationSlider({
     if (saturationValue.value === newSaturationValue) return;
 
     saturationValue.value = newSaturationValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -102,7 +102,7 @@ export function SaturationSlider({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Sliders/HueCircular.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import { styles } from '@styles';
@@ -105,7 +105,7 @@ export function HueCircular({
     if (hueValue.value === newHueValue) return;
 
     hueValue.value = newHueValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -122,7 +122,7 @@ export function HueCircular({
     isGestureActive.value = false;
 
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);

src/components/Sliders/OpacitySlider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import usePickerContext from '@context';
 import Thumb from '@thumb';
@@ -97,7 +97,7 @@ export function OpacitySlider({
     if (alphaValue.value === newOpacityValue) return;
 
     alphaValue.value = newOpacityValue;
-    runOnJS(onGestureChange)();
+    onGestureChange();
   };
   const onGestureBegin = (event: PanGestureHandlerEventPayload) => {
     'worklet';
@@ -107,7 +107,7 @@ export function OpacitySlider({
   const onGestureFinish = () => {
     'worklet';
     handleScale.value = withTiming(1, { duration: 100 });
-    runOnJS(onGestureEnd)();
+    onGestureEnd();
   };
 
   const pan = Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish);