Function Underline

src/components/TextInput/Addons/Underline.tsx:23–64

({
  parentState,
  error,
  colors,
  activeColor,
  underlineColorCustom,
  hasActiveOutline,
  style,
  theme: themeOverrides,
}: UnderlineProps)

};

export const Underline = ({
  parentState,
  error,
  colors,
  activeColor,
  underlineColorCustom,
  hasActiveOutline,
  style,
  theme: themeOverrides,
}: UnderlineProps) => {
  const { isV3 } = useInternalTheme(themeOverrides);

  let backgroundColor = parentState.focused
    ? activeColor
    : underlineColorCustom;

  if (error) backgroundColor = colors?.error;

  const activeScale = isV3 ? 2 : 1;

  return (
    <Animated.View
      testID="text-input-underline"
      style={[
        styles.underline,
        isV3 && styles.md3Underline,
        {
          backgroundColor,
          // Underlines is thinner when input is not focused
          transform: [
            {
              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
                ? activeScale
                : 0.5,
            },
          ],
        },
        style,
      ]}
    />
  );
};

const styles = StyleSheet.create({
  underline: {