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<TextInput>)?.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(