reanimated-color-picker 0.0.1

package/ColorPicker.js

@@ -0,0 +1,724 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import { View, Image, I18nManager, Pressable, TextInput, Text, StyleSheet } from 'react-native';
+import { PanGestureHandler, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  useAnimatedProps,
+  withTiming,
+} from 'react-native-reanimated';
+import { ALPHA_HEX, COLOR_HSVA, CONTRAST_RATIO, HSL_HEX, HSL_RGB, HSV_HSL } from './ColorsConversionFormulas';
+
+const PANEL_IMAGE = require('./assets/Background.png'),
+  OPACITY_IMAGE = require('./assets/Opacity.png'),
+  HUE_IMAGE = require('./assets/Hue.png');
+
+const isRtl = I18nManager.isRTL,
+  HUE_MAX = 360,
+  SB_MAX = 100,
+  OPACITY_MAX = 100,
+  CONTRAST_RATIO_MIN = 4.5,
+  SWATCHE_SIZE = 30,
+  TRACKS_HEIGHT = 25,
+  HANDLES_SCALE = 1.2,
+  WIDTH = 300;
+
+const SWATCHES_COLORS = [
+  '#f44336',
+  '#E91E63',
+  '#9C27B0',
+  '#673AB7',
+  '#3F51B5',
+  '#2196F3',
+  '#03A9F4',
+  '#00BCD4',
+  '#009688',
+  '#4CAF50',
+  '#8BC34A',
+  '#CDDC39',
+  '#FFEB3B',
+  '#FFC107',
+  '#FF9800',
+  '#FF5722',
+  '#795548',
+  '#9E9E9E',
+  '#607D8B',
+];
+
+Animated.addWhitelistedNativeProps({ text: true });
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const ReText = props => {
+  const { text, style, customStyle } = { ...props };
+
+  const animatedProps = useAnimatedProps(() => ({ text: text.value }));
+
+  return (
+    <AnimatedTextInput
+      underlineColorAndroid='transparent'
+      editable={false}
+      value={text.value}
+      style={[{ fontWeight: 'bold', padding: 0, height: '100%', width: '100%', textAlign: 'center' }, customStyle, style]}
+      {...{ animatedProps }}
+    />
+  );
+};
+
+export default function ColorPicker({
+  tracksHeight = TRACKS_HEIGHT,
+  thumbsSize = TRACKS_HEIGHT * 1.4,
+  value = '#418181',
+  onChange,
+  onComplete,
+  width = WIDTH,
+  style = {},
+  children = <Text>NO CHILDREN</Text>,
+} = {}) {
+  const isFirstRender = useRef(true);
+  const initialColor = useRef(COLOR_HSVA(value));
+  const previewColorFormat = useRef('hex');
+
+  const panelThumbeSize = useRef(thumbsSize);
+  const hueThumbeSize = useRef(thumbsSize);
+  const opacityThumbeSize = useRef(thumbsSize);
+
+  const hue = useRef(initialColor.current.h);
+  const saturation = useRef(initialColor.current.s);
+  const brightness = useRef(initialColor.current.b);
+  const alpha = useRef(initialColor.current.a);
+
+  const color_hsl = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current };
+    const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
+    return `hsl(${h}, ${s}%, ${l}%)`;
+  };
+  const color_hsla = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current };
+    const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
+    return `hsla(${h}, ${s}%, ${l}%, ${color.a / 100})`;
+  };
+  const color_hex = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current };
+    const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
+    return HSL_HEX(h, s, l) + (color.a === 100 ? '' : ALPHA_HEX(color.a));
+  };
+  const color_rgb = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current };
+    const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
+    const { r, g, b } = HSL_RGB(h, s, l);
+    return `rgb(${r}, ${g}, ${b})`;
+  };
+  const color_rgba = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current };
+    const { h, s, l } = HSV_HSL(color.h, color.s, color.b);
+    const { r, g, b } = HSL_RGB(h, s, l);
+    return `rgba(${r}, ${g}, ${b}, ${color.a / 100})`;
+  };
+  const color_hsv = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current };
+    return `hsv(${color.h}, ${color.s}%, ${color.b}%)`;
+  };
+  const color_hsva = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current };
+    return `hsva(${color.h}, ${color.s}%, ${color.b}%, ${color.a / 100})`;
+  };
+
+  const returnedResults = color => {
+    color ??= { h: hue.current, s: saturation.current, b: brightness.current, a: alpha.current };
+    return {
+      hex: color_hex(color),
+      rgb: color_rgb(color),
+      rgba: color_rgba(color),
+      hsl: color_hsl(color),
+      hsla: color_hsla(color),
+      hsv: color_hsv(color),
+      hsva: color_hsva(color),
+    };
+  };
+
+  const previewColor = useSharedValue(color_hex());
+  const previewColorStyle = useAnimatedStyle(() => ({ backgroundColor: previewColor.value }));
+  const previewColorWithoutOpacity = useAnimatedStyle(() => ({
+    backgroundColor: previewColor.value.length > 7 ? previewColor.value.substring(0, 7) : previewColor.value,
+  }));
+  const activeHue = useSharedValue(HSL_HEX(hue.current, 100, 50));
+  const activeHueStyle = useAnimatedStyle(() => ({ backgroundColor: activeHue.value }));
+
+  const hue_handlePos = useSharedValue(0); // for hue
+  const saturation_handlePos = useSharedValue(0); // for saturation
+  const brightness_handlePos = useSharedValue(0); // for brightness
+  const opacity_handlePos = useSharedValue(0); // for opacity
+  const previewTextColor = useSharedValue('#ffffff'); // for result text color
+  const previewText = useSharedValue(returnedResults()[previewColorFormat.current]); // for result text
+  const scale_panelHandle = useSharedValue(1); // for handles scale.
+  const scale_hueHandle = useSharedValue(1); // for handles scale.
+  const scale_opacityHandle = useSharedValue(1); // for handles scale.
+
+  const resultTextColorST = useAnimatedStyle(() => ({ color: previewTextColor.value }));
+
+  const panel_handleStyle = useAnimatedStyle(() => ({
+    backgroundColor: previewTextColor.value === '#ffffff' ? '#ffffff50' : '#00000050',
+    borderColor: previewTextColor.value,
+    transform: [
+      { translateX: saturation_handlePos.value },
+      { translateY: brightness_handlePos.value },
+      { scale: scale_panelHandle.value },
+    ],
+  }));
+
+  const onGestureEventFinish = () => {
+    onComplete?.(returnedResults());
+  };
+
+  const updateSB = (saturationChannel, brightnessChannel) => {
+    saturation.current = saturationChannel;
+    brightness.current = brightnessChannel;
+    previewColor.value = color_hex(); // to update result color.
+    previewText.value = returnedResults()[previewColorFormat.current]; // update result text
+    // change result text color based on lightness
+    const contrast = CONTRAST_RATIO(hue.current, saturation.current, brightness.current, previewTextColor.value);
+    previewTextColor.value =
+      contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
+
+    onChange?.(returnedResults());
+  };
+
+  const updateHue = hueChannel => {
+    hue.current = hueChannel;
+    previewColor.value = color_hex(); // to update result color.
+    previewText.value = returnedResults()[previewColorFormat.current]; // update color text
+    // change result text color based on lightness
+    const contrast = CONTRAST_RATIO(hue.current, saturation.current, brightness.current, previewTextColor.value);
+    previewTextColor.value =
+      contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
+
+    activeHue.value = HSL_HEX(hueChannel, 100, 50); // to update SV background color.
+    onChange?.(returnedResults());
+  };
+
+  const updateOpacity = alphaChannel => {
+    alpha.current = alphaChannel;
+    previewColor.value = color_hex(); // to update result color.
+    previewText.value = returnedResults()[previewColorFormat.current]; // update result text
+
+    onChange?.(returnedResults());
+  };
+
+  const setHandlesPos = () => {
+    const duration = 100;
+    const { h, s, b, a } = initialColor.current;
+
+    hue.current = h;
+    saturation.current = s;
+    brightness.current = b;
+    alpha.current = a;
+    // for colors
+    previewColor.value = color_hex(); // update result color.
+    previewText.value = returnedResults()[previewColorFormat.current]; // update result text
+    activeHue.value = HSL_HEX(h, 100, 50);
+    // change result text color based on lightness
+    const contrast = CONTRAST_RATIO(hue.current, saturation.current, brightness.current, previewTextColor.value);
+    previewTextColor.value =
+      contrast < CONTRAST_RATIO_MIN ? (previewTextColor.value === '#ffffff' ? '#000000' : '#ffffff') : previewTextColor.value;
+    // saturation
+    saturation_handlePos.value = withTiming(
+      isRtl ? (s / SB_MAX) * width - width + panelThumbeSize.current / 2 : (s / SB_MAX) * width - panelThumbeSize.current / 2,
+      duration
+    );
+    // brightness
+    brightness_handlePos.value = withTiming(width - (b / SB_MAX) * width - panelThumbeSize.current / 2, duration);
+    // hue
+    hue_handlePos.value = withTiming(
+      isRtl
+        ? width - (h / HUE_MAX) * width - width + hueThumbeSize.current / 2
+        : width - (h / HUE_MAX) * width - hueThumbeSize.current / 2,
+      100
+    );
+    // opacity
+    opacity_handlePos.value = withTiming(
+      isRtl
+        ? (a / OPACITY_MAX) * width - width + opacityThumbeSize.current / 2
+        : (a / OPACITY_MAX) * width - opacityThumbeSize.current / 2,
+      duration
+    );
+  };
+
+  // when value change, update handles pos.
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      setHandlesPos();
+      return;
+    }
+    initialColor.current = COLOR_HSVA(value);
+    setHandlesPos();
+  }, [value, width]);
+
+  const RenderChildren = () =>
+    React.Children.map(children, child => {
+      switch (child.type.name) {
+        case 'Panel':
+          return React.cloneElement(child, {
+            width,
+            activeHueStyle,
+            panel_handleStyle,
+            previewColorWithoutOpacity,
+            scale_panelHandle,
+            saturation_handlePos,
+            brightness_handlePos,
+            updateSB,
+            onGestureEventFinish,
+            setHandlesPos,
+            panelThumbeSize,
+            thumbsSize,
+          });
+        case 'Preview':
+          return React.cloneElement(child, {
+            width,
+            initialColor,
+            returnedResults,
+            value,
+            previewColorStyle,
+            previewText,
+            resultTextColorST,
+            previewColorFormat,
+          });
+        case 'HueSlider':
+          return React.cloneElement(child, {
+            width,
+            hueThumbeSize,
+            setHandlesPos,
+            scale_hueHandle,
+            updateHue,
+            onGestureEventFinish,
+            hue_handlePos,
+            previewColorWithoutOpacity,
+            tracksHeight,
+            thumbsSize,
+          });
+        case 'OpacitySlider':
+          return React.cloneElement(child, {
+            width,
+            opacityThumbeSize,
+            setHandlesPos,
+            scale_opacityHandle,
+            activeHueStyle,
+            opacity_handlePos,
+            updateOpacity,
+            onGestureEventFinish,
+            previewColorWithoutOpacity,
+            tracksHeight,
+            thumbsSize,
+          });
+        case 'Swatches':
+          return React.cloneElement(child, {
+            width,
+            initialColor,
+            setHandlesPos,
+            onChange,
+            onComplete,
+            returnedResults,
+          });
+
+        default:
+          return child;
+      }
+    });
+
+  return (
+    <GestureHandlerRootView style={[styles.wrapper, style]}>
+      <RenderChildren />
+    </GestureHandlerRootView>
+  );
+}
+
+export function Panel({
+  activeHueStyle,
+  panel_handleStyle,
+  previewColorWithoutOpacity,
+  scale_panelHandle,
+  saturation_handlePos,
+  brightness_handlePos,
+  updateSB,
+  onGestureEventFinish,
+  setHandlesPos,
+  panelThumbeSize,
+  width,
+  thumbsSize,
+  borderRadius = 5, // by user
+  thumbSize = thumbsSize, // by user
+}) {
+  panelThumbeSize.current = thumbSize;
+
+  useEffect(() => {
+    setHandlesPos();
+  }, []);
+
+  const panel_GestureEvent = useAnimatedGestureHandler({
+    onStart: (event, ctx) => {
+      ctx.x = event.x;
+      ctx.y = event.y;
+      scale_panelHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+    },
+    onActive: (event, ctx) => {
+      const clamp = (v, max) => Math.min(Math.max(v, 0), max);
+
+      const x = event.translationX;
+      const y = event.translationY;
+      const posX = clamp(x + ctx.x, width);
+      const posY = clamp(y + ctx.y, width);
+      const percentX = posX / width;
+      const percentY = posY / width;
+
+      const saturationX = Math.round(percentX * SB_MAX);
+      const brightnessY = Math.round(SB_MAX - percentY * SB_MAX);
+
+      saturation_handlePos.value = isRtl ? percentX * width - width + thumbSize / 2 : percentX * width - thumbSize / 2;
+      brightness_handlePos.value = percentY * width - thumbSize / 2;
+
+      runOnJS(updateSB)(saturationX, brightnessY);
+    },
+    onFinish: () => {
+      scale_panelHandle.value = withTiming(1, { duration: 100 });
+      runOnJS(onGestureEventFinish)();
+    },
+  });
+
+  return (
+    <PanGestureHandler onGestureEvent={panel_GestureEvent} minDist={0}>
+      <Animated.View style={[styles.panel_container, { width, height: width, borderRadius }, activeHueStyle]}>
+        <Image source={PANEL_IMAGE} style={[styles.panel_image, { borderRadius }]} />
+        <Animated.View
+          style={[styles.handle, { width: thumbSize, height: thumbSize, borderRadius: thumbSize / 2 }, panel_handleStyle]}
+        >
+          <Animated.View style={[styles.handleInner, { borderRadius: thumbSize / 2 }, previewColorWithoutOpacity]} />
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}
+
+export function Preview({
+  width,
+  initialColor,
+  returnedResults,
+  value,
+  previewColorStyle,
+  previewText,
+  resultTextColorST,
+  previewColorFormat,
+  style = {}, // by user
+  textStyle = {}, // by user
+  colorFormat = 'hex', // by user
+  hideInitialColor = false, // by user
+}) {
+  previewColorFormat.current = colorFormat;
+
+  const initialColorText = useMemo(() => {
+    const { h, s, b } = initialColor.current;
+    const hsl = HSV_HSL(h, s, b);
+    const formated = returnedResults(initialColor.current)[previewColorFormat.current];
+    const color = hsl.l < 50 ? '#fff' : '#000';
+    return { formated, color };
+  }, [value, colorFormat]);
+
+  return (
+    <View style={[styles.preview, { width }, style]}>
+      {!hideInitialColor && (
+        <View style={[styles.previewChildren, { backgroundColor: value }]}>
+          <Text style={[{ color: initialColorText.color }, { fontWeight: 'bold' }, textStyle]}>{initialColorText.formated}</Text>
+        </View>
+      )}
+      <Animated.View style={[styles.previewChildren, previewColorStyle]}>
+        <ReText text={previewText} style={resultTextColorST} customStyle={textStyle} />
+      </Animated.View>
+    </View>
+  );
+}
+
+export function HueSlider({
+  width,
+  hueThumbeSize,
+  setHandlesPos,
+  scale_hueHandle,
+  updateHue,
+  onGestureEventFinish,
+  hue_handlePos,
+  previewColorWithoutOpacity,
+  tracksHeight,
+  thumbsSize,
+  thumbSize = thumbsSize, // by user
+  trackHeight = tracksHeight, // by user
+  borderRadius = 5, // by user
+}) {
+  trackHeight = trackHeight <= 80 ? trackHeight : 80;
+  hueThumbeSize.current = thumbSize;
+
+  useEffect(() => {
+    setHandlesPos();
+  }, []);
+
+  const hue_handleStyle = useAnimatedStyle(() => ({
+    backgroundColor: '#ffffff50',
+    borderColor: '#ffffff',
+    transform: [
+      { translateX: hue_handlePos.value },
+      { translateY: -(thumbSize - trackHeight) / 2 },
+      { scale: scale_hueHandle.value },
+    ],
+  }));
+
+  const HueGestureEvent = useAnimatedGestureHandler(
+    {
+      onStart: (event, ctx) => {
+        ctx.x = event.x;
+        scale_hueHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+      },
+      onActive: (event, ctx) => {
+        const clamp = (v, max) => Math.min(Math.max(v, 0), max);
+
+        const x = event.translationX;
+        const pos = clamp(x + ctx.x, width);
+        const percent = pos / width;
+
+        const hueX = HUE_MAX - Math.round(percent * HUE_MAX);
+
+        hue_handlePos.value = isRtl ? percent * width - width + thumbSize / 2 : percent * width - thumbSize / 2;
+
+        runOnJS(updateHue)(hueX);
+      },
+      onFinish: () => {
+        scale_hueHandle.value = withTiming(1, { duration: 100 });
+        runOnJS(onGestureEventFinish)();
+      },
+    },
+    [width]
+  );
+
+  return (
+    <PanGestureHandler onGestureEvent={HueGestureEvent} minDist={0}>
+      <Animated.View style={{ position: 'relative', width, height: trackHeight }}>
+        <View style={[styles.hue_opacityImageContainer, { borderRadius }]}>
+          <Image source={HUE_IMAGE} style={styles.hue_opacityImage} />
+        </View>
+        <Animated.View
+          style={[styles.handle, { width: thumbSize, height: thumbSize, borderRadius: thumbSize / 2 }, hue_handleStyle]}
+        >
+          <Animated.View style={[styles.handleInner, { borderRadius: thumbSize / 2 }, previewColorWithoutOpacity]} />
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}
+
+export function OpacitySlider({
+  width,
+  opacityThumbeSize,
+  setHandlesPos,
+  scale_opacityHandle,
+  activeHueStyle,
+  opacity_handlePos,
+  updateOpacity,
+  onGestureEventFinish,
+  previewColorWithoutOpacity,
+  tracksHeight,
+  thumbsSize,
+  thumbSize = thumbsSize, // by user
+  trackHeight = tracksHeight, // by user
+  borderRadius = 5, // by user
+}) {
+  trackHeight = trackHeight <= 80 ? trackHeight : 80;
+  opacityThumbeSize.current = thumbSize;
+
+  useEffect(() => {
+    setHandlesPos();
+  }, []);
+
+  const opacity_handleStyle = useAnimatedStyle(() => ({
+    backgroundColor: '#ffffff50',
+    borderColor: '#ffffff',
+    transform: [
+      { translateX: opacity_handlePos.value },
+      { translateY: -(thumbSize - trackHeight) / 2 },
+      { scale: scale_opacityHandle.value },
+    ],
+  }));
+
+  const opacityGestureEvent = useAnimatedGestureHandler({
+    onStart: (event, ctx) => {
+      ctx.x = event.x;
+      scale_opacityHandle.value = withTiming(HANDLES_SCALE, { duration: 100 });
+    },
+    onActive: (event, ctx) => {
+      const clamp = (v, max) => Math.min(Math.max(v, 0), max);
+
+      const x = event.translationX;
+      const pos = clamp(x + ctx.x, width);
+      const percent = pos / width;
+
+      const opacityX = Math.round(percent * OPACITY_MAX);
+
+      opacity_handlePos.value = isRtl ? percent * width - width + thumbSize / 2 : percent * width - thumbSize / 2;
+
+      runOnJS(updateOpacity)(opacityX);
+    },
+    onFinish: () => {
+      scale_opacityHandle.value = withTiming(1, { duration: 100 });
+      runOnJS(onGestureEventFinish)();
+    },
+  });
+
+  return (
+    <PanGestureHandler onGestureEvent={opacityGestureEvent} minDist={0}>
+      <Animated.View style={{ position: 'relative', width, height: trackHeight }}>
+        <Animated.View style={[styles.hue_opacityImageContainer, { borderRadius }, activeHueStyle]}>
+          <Image source={OPACITY_IMAGE} style={styles.hue_opacityImage} />
+        </Animated.View>
+        <Animated.View
+          style={[styles.handle, { width: thumbSize, height: thumbSize, borderRadius: thumbSize / 2 }, opacity_handleStyle]}
+        >
+          <Animated.View style={[styles.handleInner, { borderRadius: thumbSize / 2 }, previewColorWithoutOpacity]} />
+        </Animated.View>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}
+
+export function Swatches({
+  width,
+  initialColor,
+  setHandlesPos,
+  onChange,
+  onComplete,
+  returnedResults,
+  colors, // by user
+  style = {}, // by user
+  swatcheStyle = {}, // by user
+}) {
+  colors ??= SWATCHES_COLORS;
+  const onPress = swatch => {
+    initialColor.current = COLOR_HSVA(swatch);
+    setHandlesPos();
+    onChange?.(returnedResults());
+    onComplete?.(returnedResults());
+  };
+  return (
+    <View style={[styles.swatcheContainer, { width }, style]}>
+      {colors.map((swatch, i) => (
+        <Pressable
+          key={swatch + i}
+          onPress={() => onPress(swatch)}
+          style={[styles.swatch, swatcheStyle, { backgroundColor: swatch }]}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'column',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    alignSelf: 'center',
+    flex: 1,
+  },
+  panel_container: {
+    position: 'relative',
+    alignItems: 'center',
+    borderRadius: 5,
+    backgroundColor: 'red',
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  panel_image: {
+    width: '100%',
+    height: '100%',
+  },
+  handle: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  handleInner: {
+    width: '75%',
+    height: '75%',
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  hue_opacityImageContainer: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 5,
+    overflow: 'hidden',
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  hue_opacityImage: {
+    width: '100%',
+    height: 80,
+  },
+  preview: {
+    flexDirection: 'row',
+    height: TRACKS_HEIGHT,
+    borderRadius: 5,
+    overflow: 'hidden',
+  },
+  previewChildren: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  swatcheContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  swatch: {
+    width: SWATCHE_SIZE,
+    height: SWATCHE_SIZE,
+    borderRadius: SWATCHE_SIZE / 2,
+    marginHorizontal: 5,
+    marginBottom: 15,
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});

package/ColorsConversionFormulas.js

@@ -0,0 +1,220 @@
+import NamedColors from './NamedColors';
+
+export const HSL_RGB = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+
+  if (h === undefined) return { r: 0, g: 0, b: 0 };
+
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  let huePrime = h / 60;
+  const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
+  huePrime = Math.floor(huePrime);
+
+  let red = [0, 5].includes(huePrime) ? chroma : [1, 4].includes(huePrime) ? secondComponent : 0,
+    green = [1, 2].includes(huePrime) ? chroma : [0, 3].includes(huePrime) ? secondComponent : 0,
+    blue = [3, 4].includes(huePrime) ? chroma : [2, 5].includes(huePrime) ? secondComponent : 0;
+
+  const lightnessAdjustment = l - chroma / 2;
+
+  red += lightnessAdjustment;
+  green += lightnessAdjustment;
+  blue += lightnessAdjustment;
+
+  return { r: Math.abs(Math.round(red * 255)), g: Math.abs(Math.round(green * 255)), b: Math.abs(Math.round(blue * 255)) };
+};
+
+export const ALPHA_HEX = number => {
+  const op = Math.floor((number / 100) * 255);
+  const hex = op.toString(16);
+  return op < 16 ? '0' + hex : hex;
+};
+
+export const HSL_HEX = (h, s, l) => {
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = n => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0'); // convert to Hex and prefix "0" if needed
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+
+export const HSV_HSL = (h, s, b) => {
+  s /= 100;
+  b /= 100;
+  let l = ((2 - s) * b) / 2;
+  if (l !== 0) s = Math.round((l === 1 ? 0 : l < 0.5 ? (s * b) / (l * 2) : (s * b) / (2 - l * 2)) * 100);
+  l = Math.round(l * 100);
+  return { h, s, l };
+};
+
+export const RGB_HSV = (r, g, b) => {
+  let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
+  rabs = r / 255;
+  gabs = g / 255;
+  babs = b / 255;
+  // eslint-disable-next-line no-sequences
+  (v = Math.max(rabs, gabs, babs)), (diff = v - Math.min(rabs, gabs, babs));
+  diffc = c => (v - c) / 6 / diff + 1 / 2;
+  percentRoundFn = num => Math.round(num * 100) / 100;
+  if (diff === 0) {
+    h = s = 0;
+  } else {
+    s = diff / v;
+    rr = diffc(rabs);
+    gg = diffc(gabs);
+    bb = diffc(babs);
+
+    if (rabs === v) {
+      h = bb - gg;
+    } else if (gabs === v) {
+      h = 1 / 3 + rr - bb;
+    } else if (babs === v) {
+      h = 2 / 3 + gg - rr;
+    }
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: percentRoundFn(s * 100),
+    b: percentRoundFn(v * 100),
+  };
+};
+
+export const HEX_RGB = hex => {
+  const isValidHex = h => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(h);
+
+  const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, 'g'));
+
+  const convertHexUnitTo256 = hexStr => parseInt(hexStr.repeat(2 / hexStr.length), 16);
+
+  if (!isValidHex(hex)) throw new Error('Invalid HEX');
+
+  const chunkSize = Math.floor((hex.length - 1) / 3);
+  const hexArr = getChunksFromString(hex.slice(1), chunkSize);
+  const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
+  const alpha = Math.round((a / 255) * 100);
+  return { r, g, b, a: alpha ? alpha : 100 };
+};
+
+export const HEX_HSV = hex => {
+  const { r, g, b, a } = HEX_RGB(hex);
+  return { ...RGB_HSV(r, g, b), a };
+};
+
+export const HSL_HSV = (h, s, l) => {
+  const { r, g, b } = HSL_RGB(h, s, l);
+  return RGB_HSV(r, g, b);
+};
+
+export const COLOR_HSVA = colorStr => {
+  colorStr = colorStr.trim();
+  const isRgb = colorStr.startsWith('rgb');
+  const isRgba = colorStr.startsWith('rgba');
+  const isHex = colorStr.startsWith('#');
+  const isNamedColor = NamedColors.hasOwnProperty(colorStr);
+  const isHsl = colorStr.startsWith('hsl');
+  const isHsla = colorStr.startsWith('hsla');
+  const isHsv = colorStr.startsWith('hsv');
+  const isHsva = colorStr.startsWith('hsva');
+
+  if (isRgb) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid RGB value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 3) throw new Error('Invalid RGB value');
+    const [r, g, b] = colorValues.map(v => +v);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) throw new Error('Invalid RGB value');
+    return { ...RGB_HSV(r, g, b), a: 100 };
+  }
+
+  if (isRgba) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid RGBA value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 4) throw new Error('Invalid RGBA value');
+    const [r, g, b, a] = colorValues.map(v => +v);
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) throw new Error('Invalid RGBA value');
+    return { ...RGB_HSV(r, g, b), a: Math.round(a * 100) };
+  }
+
+  if (isHex) return HEX_HSV(colorStr);
+
+  if (isNamedColor) return HEX_HSV(NamedColors[colorStr]);
+
+  if (isHsl) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid HSL value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 3) throw new Error('Invalid HSL value');
+    const [h, s, l] = colorValues.map(v => +v);
+    if (isNaN(h) || isNaN(s) || isNaN(l)) throw new Error('Invalid HSL value');
+    return { ...HSL_HSV(h, s, l), a: 100 };
+  }
+
+  if (isHsla) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid HSLA value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 4) throw new Error('Invalid HSLA value');
+    const [h, s, l, a] = colorValues.map(v => +v);
+    if (isNaN(h) || isNaN(s) || isNaN(l) || isNaN(a)) throw new Error('Invalid HSLA value');
+    return { ...HSL_HSV(h, s, l), a: Math.round(a * 100) };
+  }
+
+  if (isHsv) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid HSV value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 3) throw new Error('Invalid HSV value');
+    const [h, s, b] = colorValues.map(n => +n);
+    if (isNaN(h) || isNaN(s) || isNaN(b)) throw new Error('Invalid HSV value');
+    return { h, s, b, a: 100 };
+  }
+
+  if (isHsva) {
+    const match = colorStr.match(/(?<=\()[^)]+/)?.[0];
+    if (!match) throw new Error('Invalid HSVA value');
+    const colorValues = match.split(',');
+    if (colorValues.length !== 4) throw new Error('Invalid HSVA value');
+    const [h, s, b, a] = colorValues.map(n => +n);
+    if (isNaN(h) || isNaN(s) || isNaN(b) || isNaN(a)) throw new Error('Invalid HSVA value');
+    return { h, s, b, a: Math.round(a * 100) };
+  }
+
+  throw new Error('Invalid color');
+};
+
+const luminanceRGB = (r, g, b) => {
+  const a = [r, g, b].map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+const luminanceHEX = hex => {
+  const { r, g, b } = HEX_RGB(hex);
+  const a = [r, g, b].map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+
+export const CONTRAST_RATIO = (h, s, v, hex) => {
+  const hsl = HSV_HSL(h, s, v),
+    { r, g, b } = HSL_RGB(hsl.h, hsl.s, hsl.l),
+    lum1 = luminanceRGB(r, g, b),
+    lum2 = luminanceHEX(hex),
+    brightest = Math.max(lum1, lum2),
+    darkest = Math.min(lum1, lum2);
+  return +((brightest + 0.05) / (darkest + 0.05)).toFixed(1);
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Doho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NamedColors.js

@@ -0,0 +1,147 @@
+export default {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32',
+};

package/index.d.ts

@@ -0,0 +1,121 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+interface returnedResults {
+  hex: string;
+  rgb: string;
+  rgba: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+}
+
+interface ColorPickerProps {
+  /** - hue and opacity sliders track height. */
+  tracksHeight?: number;
+
+  /** - sliders handles (thumbs) size (height*width). */
+  thumbsSize?: number;
+
+  /** - color picker component width. */
+  width?: number;
+
+  /**
+   * - color picker wrapper style.
+   * - if you want to change the width use the width prop.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * - initial color.
+   * - Accepts `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `named color` formats.
+   */
+  value?: string;
+
+  /** - called when the user moves the sliders. */
+  onChange?: (colors: returnedResults) => void;
+
+  /** - called when the user lifts his finger off the sliders. */
+  onComplete?: (colors: returnedResults) => void;
+
+  children?: React.ReactNode;
+}
+
+interface SwatchesPorps {
+  /**
+   * - swatch style.
+   * - **Note** `backgroundColor` is immutable.
+   */
+  swatcheStyle?: StyleProp<ViewStyle>;
+
+  /** - swatches container style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** - provide your own swatches colors. */
+  colors?: string[];
+}
+
+interface PreviewPorps {
+  /** - show color preview in specific format. */
+  colorFormat?: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva';
+
+  /** - hide initial color preview and show the picked color preview only. */
+  hideInitialColor?: boolean;
+
+  /**
+   * - preview container style.
+   * - **Note** `backgroundColor` is immutable.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * - preview text style.
+   * - **Note** `color` is immutable.
+   */
+  textStyle?: StyleProp<TextStyle>;
+}
+
+interface PanelProps {
+  /** - panel border raduis. */
+  borderRadius?: number;
+
+  /** - panel handle (thumb) size (height*width). */
+  thumbSize?: number;
+}
+
+interface HueProps {
+  /** - hue slider handle (thumb) size (height*width). */
+  thumbSize?: number;
+
+  /**
+   * - opacity slider track height.
+   * - **Note** max height is `80`
+   */
+  trackHeight?: number;
+
+  /** - hue slider border raduis. */
+  borderRadius?: number;
+}
+
+interface OpacityProps {
+  /** - opacity slider handle (thumb) size (height*width). */
+  thumbSize?: number;
+
+  /**
+   * - opacity slider track height.
+   * - **Note** max height is `80`
+   */
+  trackHeight?: number;
+
+  /** - opacity slider border raduis. */
+  borderRadius?: number;
+}
+
+declare const ColorPicker: React.FunctionComponent<ColorPickerProps>;
+export declare const Preview: React.FunctionComponent<PreviewPorps>;
+export declare const Panel: React.FunctionComponent<PanelProps>;
+export declare const HueSlider: React.FunctionComponent<HueProps>;
+export declare const OpacitySlider: React.FunctionComponent<OpacityProps>;
+export declare const Swatches: React.FunctionComponent<SwatchesPorps>;
+
+export default ColorPicker;

package/index.js

@@ -0,0 +1,4 @@
+import ColorPicker from './ColorPicker.js';
+
+export default ColorPicker;
+export { Panel, Swatches, Preview, OpacitySlider, HueSlider } from './ColorPicker.js';

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "reanimated-color-picker",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "source": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "publish": "npm publish"
+  },
+  "keywords": [
+    "react-native",
+    "color",
+    "picker",
+    "palette"
+  ],
+  "repository": "https://github.com/alabsi91/rn-color-picker",
+  "author": "Ahmed Alabsi <alabsi91@gmail.com> (https://github.com/alabsi91)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alabsi91/rn-color-picker/issues"
+  },
+  "homepage": "https://github.com/alabsi91/rn-color-picker",
+  "peerDependencies": {
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=2.0.0"
+  }
+}