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

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

import { Platform, TextInput, View } from 'react-native';
import { styles } from './CodeField.styles';
import { useFocusState } from './useFocusState';
import { getSymbols } from './utils';
const DEFAULT_CELL_COUNT = 4;
const autoComplete = Platform.select({
    android: 'sms-otp',
    default: 'one-time-code',
});
export const CodeField = ({ rootStyle, textInputStyle, value, renderCell, cellCount = DEFAULT_CELL_COUNT, RootProps, RootComponent = View, InputComponent = TextInput, ref, ...rest }) => {
    'use memo';
    const [isFocused, onFocus, onBlur] = useFocusState(rest.onBlur, rest.onFocus);
    const symbols = getSymbols(value || '', cellCount);
    const cells = symbols.map((symbol, index, symbols) => {
        const isFirstEmptySymbol = symbols.indexOf('') === index;
        return renderCell({
            index,
            symbol,
            isFocused: isFocused && isFirstEmptySymbol,
        });
    });
    return (<RootComponent {...RootProps} style={rootStyle ? [styles.root, rootStyle] : styles.root}>
      {cells}
      <InputComponent disableFullscreenUI 
    // Use `caretHidden={false}` when `value={''}` and user can't paste\copy text because menu doesn't appear
    // See more: https://github.com/retyui/react-native-confirmation-code-field/issues/140
    caretHidden={true} spellCheck={false} autoCorrect={false} blurOnSubmit={false} clearButtonMode="never" autoCapitalize="characters" underlineColorAndroid="transparent" maxLength={cellCount} autoComplete={autoComplete} {...rest} value={value} onBlur={onBlur} onFocus={onFocus} style={textInputStyle ? [styles.textInput, textInputStyle] : styles.textInput} ref={ref}/>
    </RootComponent>);
};
CodeField.displayName = 'CodeField';