How can we restrict strings and allow only numbers to be feed as otp?

[ravis-farooq]

I want to use only input type number only, I set keyboardType="phone-pad" but it is taking string from clipboard when copied.

[kunalsolanki1992]

Hello,

Any update on this?

[shubham-imoney]

I need to do this as well. Anyone has a solution?

[manish-vasisst103]

I created patch for this. It will works for everyone just follow below code and patch that library.

diff --git a/node_modules/react-native-otp-inputs/src/OtpInput.tsx b/node_modules/react-native-otp-inputs/src/OtpInput.tsx index d8a2453..a5706c5 100644 --- a/node_modules/react-native-otp-inputs/src/OtpInput.tsx +++ b/node_modules/react-native-otp-inputs/src/OtpInput.tsx @@ -43,6 +43,7 @@ const OtpInput = forwardRef<TextInput, Props>( ref, ) => { const [focused, setFocused] = useState(false);

• const [val, setVal] = useState('');

  useEffect(() => { (ref as RefObject)?.current?.setNativeProps({ @@ -61,6 +62,15 @@ const OtpInput = forwardRef<TextInput, Props>( [inputValue, rest], );

• const onChange = (v: string) => {

• const regex = /^[0-9]*$/;

• const isValid = regex.test(v);

• if (isValid) {

• handleTextChange(v);

• setVal(v);

• }

• };

• return ( // @ts-expect-error <View style={[inputContainerStyles, focused && focusStyles]}> @@ -68,7 +78,9 @@ const OtpInput = forwardRef<TextInput, Props>( <TextInput autoFocus={autoFocus} onBlur={() => setFocused(false)}

• onChangeText={handleTextChange}

• // onChangeText={handleTextChange}

• onChangeText={onChange}

• value={val} onFocus={() => setFocused(true)} onKeyPress={handleKeyPress} placeholder={placeholder} diff --git a/node_modules/react-native-otp-inputs/src/index.tsx b/node_modules/react-native-otp-inputs/src/index.tsx index 7fd9e45..ebfe28e 100644 --- a/node_modules/react-native-otp-inputs/src/index.tsx +++ b/node_modules/react-native-otp-inputs/src/index.tsx @@ -118,6 +118,8 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>( );

  const handleInputTextChange = (text: string, index: number): void => {

• const regex = /^[0-9]*$/;

• const isValid = regex.test(text); if (!text.length) { handleClearInput(index); } @@ -128,7 +130,7 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>( return fillInputs(text); }

• if (text) {

• if (text && isValid) { dispatch({ type: 'setOtpTextForIndex', payload: { @@ -160,9 +162,9 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>( ) => { const text = key === 'Backspace' || key.length > 1 ? '' : key; handleInputTextChange(text, index);

• if (Platform.OS === 'android' && !hasKeySupport && !isNaN(parseInt(key)))

• if (Platform.OS === 'android' && !hasKeySupport && !isNaN(parseInt(key))) { dispatch({ type: 'setHasKeySupport', payload: true });

• } };

  const focusInput = useCallback(