react-native-otp-input-code

• A react native dynamic component that can be used for OTP's and Pins as a secure pin input and can have a dynamic number of inputes.

• It comes with a built-in TypeScript typings and is compatible with all popular JavaScript frameworks. You can use it directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

Example:

How to use:

import VerificationCodeInput from 'react-native-otp-input-code';

 const [isVarificationCodeValide, setIsVarificationCodeValide] =
    useState(true);
  const [isVarificationCodeSuccess, setIsVarificationCodeSuccess] =
    useState(false);
 const inputRef = useRef(null);

   <VerificationCodeInput
        ref={inputRef}
        isSecure={true}
        textContentType="oneTimeCode"
        keyboardType={KeyboardType.number_pad}
        cellCount={4}
        onComplete={checkVerificationCode}
        onChangeText={(value) => {
          if (value.length < 4) {
            resetBoxes();
          }
        }}
        isValid={isVarificationCodeValide}
         isSuccess={isVarificationCodeSuccess}
        textStyle={{color: "#FFFF"}}
        containerStyle={{borderWidth: 1}}
        errorTextStyle={{color: "red"}}
        errorContainerStyle={{borderColor: "red", borderWidth: 2}}
      />

VerificationCodeInputProps Props extends TextInputProps :

Name	Type
isValid?	boolean
isSuccess?	boolean
onComplete	(val: string) => void
onChangeText	(val: string) => void
uppercase?	boolean
keyboardType	KeyboardType
cellCount	number
textContentType	textInputContentType
textStyle?	TextStyle
containerStyle?	ViewStyle
errorTextStyle?	TextStyle
errorContainerStyle?	ViewStyle
isSecure?	boolean
...props	TextInputProps