Function HelperText

src/components/HelperText/HelperText.tsx:81–156

({
  style,
  type = 'info',
  visible = true,
  theme: themeOverrides,
  onLayout,
  padding = 'normal',
  disabled,
  ...rest
}: Props)

 * ```
 */
const HelperText = ({
  style,
  type = 'info',
  visible = true,
  theme: themeOverrides,
  onLayout,
  padding = 'normal',
  disabled,
  ...rest
}: Props) => {
  const theme = useInternalTheme(themeOverrides);
  const { current: shown } = React.useRef<Animated.Value>(
    new Animated.Value(visible ? 1 : 0)
  );

  let { current: textHeight } = React.useRef<number>(0);

  const { scale } = theme.animation;

  const { maxFontSizeMultiplier = 1.5 } = rest;

  React.useEffect(() => {
    if (visible) {
      // show text
      Animated.timing(shown, {
        toValue: 1,
        duration: 150 * scale,
        useNativeDriver: true,
      }).start();
    } else {
      // hide text
      Animated.timing(shown, {
        toValue: 0,
        duration: 180 * scale,
        useNativeDriver: true,
      }).start();
    }
  }, [visible, scale, shown]);

  const handleTextLayout = (e: LayoutChangeEvent) => {
    onLayout?.(e);
    textHeight = e.nativeEvent.layout.height;
  };

  const textColor = getTextColor({ theme, disabled, type });

  return (
    <AnimatedText
      onLayout={handleTextLayout}
      style={[
        styles.text,
        padding !== 'none' ? styles.padding : {},
        {
          color: textColor,
          opacity: shown,
          transform:
            visible && type === 'error'
              ? [