Build a React Native OTP Number Input Component Using react-native-otp-input Library in Javascript Full Project For Beginners

 

 

npm i react-native-otp-input

 

 

 

 

 

Basic Usage

 

 

import OTPInputView from '@twotalltotems/react-native-otp-input'
 
...
 
<OTPInputView pinCount={4} />

 

 

More Advanced Usage

 

 

import OTPInputView from '@twotalltotems/react-native-otp-input'
 
...
 
<OTPInputView
    style={{width: '80%', height: 200}}
    pinCount={4}
    // code={this.state.code} //You can supply this prop or not. The component will be used as a controlled / uncontrolled component respectively.
    // onCodeChanged = {code => { this.setState({code})}}
    autoFocusOnLoad
    codeInputFieldStyle={styles.underlineStyleBase}
    codeInputHighlightStyle={styles.underlineStyleHighLighted}
    onCodeFilled = {(code => {
        console.log(`Code is ${code}, you are good to go!`)
    })}
/>
 
const styles = StyleSheet.create({
  borderStyleBase: {
    width: 30,
    height: 45
  },
 
  borderStyleHighLighted: {
    borderColor: "#03DAC6",
  },
 
  underlineStyleBase: {
    width: 30,
    height: 45,
    borderWidth: 0,
    borderBottomWidth: 1,
  },
 
  underlineStyleHighLighted: {
    borderColor: "#03DAC6",
  },
});

Leave a Reply