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 |

table is created with the ChatGPT

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library