npm i react-native-otp-input
Basic Usage
|
1 2 3 4 5 |
import OTPInputView from '@twotalltotems/react-native-otp-input' ... <OTPInputView pinCount={4} /> |
More Advanced Usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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", }, }); |
