Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ravis-farooq opened this issue Dec 4, 2022 · 3 comments

Comments

@ravis-farooq
Copy link

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

@kunalsolanki1992
Copy link

Hello,

Any update on this?

@shubham-imoney
Copy link

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

@manish-vasisst103
Copy link

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(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants