react-native-input-code-otp/lib/module/components/caret.js

react-native-input-code-otp is a high-performance and fully customizable OTP input component for React Native, inspired by @shadcn/ui.

"use strict";

import { useEffect } from 'react';
import { StyleSheet, Animated, useAnimatedValue } from 'react-native';
import { DEFAULT_DARK_COLOR } from "../constants.js";
import { useTextInputOTP } from "../hooks/use-text-input-otp.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function Caret() {
  const opacity = useAnimatedValue(0);
  const {
    caretColor
  } = useTextInputOTP();
  useEffect(() => {
    Animated.loop(Animated.sequence([Animated.timing(opacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true
    }), Animated.timing(opacity, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true
    })])).start();
  }, [opacity]);
  return /*#__PURE__*/_jsx(Animated.View, {
    testID: "caret",
    style: [styles.caret, {
      opacity,
      backgroundColor: caretColor ?? DEFAULT_DARK_COLOR
    }]
  });
}
const styles = StyleSheet.create({
  caret: {
    width: 2,
    height: 16,
    borderRadius: 16
  }
});
//# sourceMappingURL=caret.js.map