gistfile1.txt

import React, { useMemo } from 'react';
import {
  TouchableWithoutFeedbackProps,
  TouchableWithoutFeedback,
  TextStyle
} from 'react-native';

import { ViewStyleProp } from '../../../types';
import Animated, {
  useSharedValue,
  useDerivedValue,
  withTiming,
  Easing,
  useAnimatedStyle,
  interpolate,
  Extrapolate
} from 'react-native-reanimated';

export enum BaseTagType {
  DEFAULT,
  PRESSED
}

export type BaseTagProps = {
  id: string;
  type?: BaseTagType;
  label: string;
  onPress?: TouchableWithoutFeedbackProps['onPress'];
} & ViewStyleProp;

export const BaseTag = ({
  type = BaseTagType.DEFAULT,
  label,
  style,
  onPress
}: BaseTagProps) => {
  const prevTypeSharedValue = useSharedValue(type);

  useMemo(() => {
    prevTypeSharedValue.value = type === BaseTagType.DEFAULT ? 0 : 1;
  }, [type, prevTypeSharedValue]);

  const progress = useDerivedValue(() => {
    return withTiming(prevTypeSharedValue.value, {
      duration: 150,
      easing: Easing.out(Easing.ease)
    });
  });

  const backgroundColor = useDerivedValue(() => {
    const r = interpolate(progress.value, [0, 1], [255, 45], Extrapolate.CLAMP);
    const g = interpolate(
      progress.value,
      [0, 1],
      [255, 154],
      Extrapolate.CLAMP
    );
    const b = interpolate(
      progress.value,
      [0, 1],
      [255, 252],
      Extrapolate.CLAMP
    );
    const a = interpolate(progress.value, [0, 1], [0, 0.15], Extrapolate.CLAMP);
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  });

  const borderColor = useDerivedValue(() => {
    const r = interpolate(progress.value, [0, 1], [68, 45], Extrapolate.CLAMP);
    const g = interpolate(progress.value, [0, 1], [82, 154], Extrapolate.CLAMP);
    const b = interpolate(progress.value, [0, 1], [95, 252], Extrapolate.CLAMP);
    const a = interpolate(
      progress.value,
      [0, 1],
      [0.08, 0.15],
      Extrapolate.CLAMP
    );
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  });

  const textColor = useDerivedValue(() => {
    const r = interpolate(progress.value, [0, 1], [68, 45], Extrapolate.CLAMP);
    const g = interpolate(progress.value, [0, 1], [82, 154], Extrapolate.CLAMP);
    const b = interpolate(progress.value, [0, 1], [95, 252], Extrapolate.CLAMP);
    const a = interpolate(progress.value, [0, 1], [0.9, 1], Extrapolate.CLAMP);
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  });

  const viewAnimatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: backgroundColor.value,
      borderColor: borderColor.value
    };
  });

  const textAnimatedStyle = useAnimatedStyle<TextStyle, unknown, unknown>(
    () => {
      return {
        color: textColor.value
      };
    }
  );

  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <Animated.View
        style={[
          {
            minHeight: 44,
            borderWidth: 2,
            borderColor: 'rgba(68, 82, 95, 0.08)',
            borderRadius: 100,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center'
          },
          viewAnimatedStyle,
          style
        ]}
      >
        <Animated.Text
          style={[
            {
              fontFamily: 'Gilroy-SemiBold',
              fontSize: 17,
              textAlign: 'center',
              textAlignVertical: 'center',
              marginLeft: 20,
              marginRight: 20
            },
            textAnimatedStyle
          ]}
        >
          {label}
        </Animated.Text>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};