react-native-confirmation-code-field/esm/MaskSymbol.js

A react-native component to input confirmation code for both Android and IOS

import { useCallback, useEffect, useState } from 'react';
import { useTimeout } from './useTimer';
export const DEFAULT_BLINKING_SPEED = 500;
export const MaskSymbol = ({ isLastFilledCell, children: symbol, maskSymbol, delay = DEFAULT_BLINKING_SPEED, }) => {
    'use memo';
    const [visibleFlag, setFlag] = useState(true);
    const toggleVisibility = useCallback(() => {
        setFlag((prev) => !prev);
    }, []);
    useTimeout(toggleVisibility, delay);
    useEffect(() => {
        if (isLastFilledCell) {
            // eslint-disable-next-line react-hooks/set-state-in-effect
            setFlag(false);
        }
    }, [isLastFilledCell]);
    return <>{visibleFlag ? symbol : maskSymbol}</>;
};
MaskSymbol.displayName = 'MaskSymbol';