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

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

import React, { useCallback, useEffect, useState } from 'react';
import { useTimeout } from './useTimer';
export const DEFAULT_BLINKING_SPEED = 500;
export function MaskSymbol({ isLastFilledCell, children: symbol, maskSymbol, delay = DEFAULT_BLINKING_SPEED, }) {
    'use memo';
    const [visibleFlag, setFlag] = useState(true);
    const toggleVisibility = useCallback(function toggleMaskVisibility() {
        setFlag((prev) => !prev);
    }, []);
    useTimeout(toggleVisibility, delay);
    useEffect(() => {
        if (isLastFilledCell) {
            setFlag(false);
        }
    }, [isLastFilledCell]);
    return <>{visibleFlag ? symbol : maskSymbol}</>;
}
MaskSymbol.displayName = 'MaskSymbol';