r5n-dev/react-native-otp-inputs

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

Opened this issue · 3 comments

ravis-farooq commented

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

kunalsolanki1992 commented

Hello,

Any update on this?

shubham-imoney commented

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

manish-vasisst103 commented

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(