React-native-split-input NPM

react-native-split-input

otp input for react native

Installation

npm install react-native-split-input

Usage

import React, { useState } from 'react';
import(SafeAreaView) from 'react-native';
import SplitInput from 'react-native-split-input'

const App = () => {
  
  const [value,setValue]=useState<any>('')
  const handleTexChange=(val:any)=>{
   
      let reg=/^[0-9]{0,}$/
      console.log("reg",reg.test(val))
      if(reg.test(val)){
        setValue(val)
      
    }
  }

  return (
    <SafeAreaView style={{flex:1}}>
      <SplitInput
      digits={6}
      value={value}
      setValue={setValue}
      keyboardType={'numeric'}
      autoFocus={false}
      onChangeText={(val:any)=>handleTexChange(val)}
      focusBorderColor={'cyan'}
      focusBackgroundColor={'grey'}
      focusBorderWidth={2}
      
      />
      
    </SafeAreaView>
  );
};

export default App;

List of Available Props

Prop Name	Default Value	Description
`digits`	6	Number of input fields (split digits)
`value`	-	The current input value
`secureTextEntry`	false	Enable secure text entry (e.g., for PIN entry)
`ContentContainerStyle`	{}	Style for the container of the entire component
`inputContainerStyles`	{}	Style for the container of individual input fields
`inputStyle`	{}	Style for each input field
`keyboardType`	'default'	Keyboard type for the input fields (e.g., 'numeric', 'email')
`autoFocus`	false	Automatically focus the first input field
`onChangeText`	-	Callback function to handle text changes in the input fields
`focusBorderWidth`	2	Width of the border when an input field is focused
`focusBorderColor`	-	Color of the border when an input field is focused
`focusBackgroundColor`	-	Background color when an input field is focused
`inputTextStyle`	{}	Style for the text within the input fields