reanimated-color-picker/lib/module/components/PreviewText.js

A Pure JavaScript Color Picker for React Native

import React, { useEffect, useState } from 'react';
import { TextInput } from 'react-native';
import Animated, { useAnimatedProps, useAnimatedRef, useDerivedValue } from 'react-native-reanimated';
import usePickerContext from '../AppContext';
import { styles } from '../styles';
import { isWeb } from '../utils';
Animated.addWhitelistedNativeProps({
  text: true,
});
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
export function PreviewText({ style = {}, colorFormat = 'hex' }) {
  const { returnedResults, hueValue, saturationValue, brightnessValue, alphaValue } = usePickerContext();
  const inputRef = useAnimatedRef();
  const [defaultValue, setDefaultValue] = useState('');
  useEffect(() => {
    setDefaultValue(returnedResults()[colorFormat]);
  }, []);
  const colorString = useDerivedValue(() => {
    [colorFormat, hueValue, saturationValue, brightnessValue, alphaValue]; // track changes on Native

    if (isWeb && inputRef.current) {
      // @ts-expect-error value doesn't exist
      inputRef.current.value = returnedResults()[colorFormat];
      return;
    }
    return returnedResults()[colorFormat];
  }, [colorFormat, hueValue, saturationValue, brightnessValue, alphaValue]); // track changes on WEB

  const animatedProps = useAnimatedProps(
    () => ({
      text: colorString.value,
    }),
    [colorString],
  );
  return /*#__PURE__*/ React.createElement(AnimatedTextInput, {
    ref: inputRef,
    underlineColorAndroid: 'transparent',
    editable: false,
    defaultValue: defaultValue,
    style: [styles.previewText, style],
    animatedProps: animatedProps,
    pointerEvents: 'none',
  });
}