diff --git a/README.md b/README.md index a3917217..b4970354 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,8 @@ The following props are applicable for the component along with **props supporte | textInputStyle | object | Yes | {} | style for text input. | | testIDPrefix | string | Yes | 'otp*input*' | testID prefix, the result will be `otp_input_0` until inputCount | | autoFocus | bool | Yes | false | Input should automatically get focus when the components loads | +| onBlur | func | Yes | n/a | Callback that is called when the text input is blurred. | +| onFocus | func | Yes | n/a | Callback that is called when the text input is focused. | #### Helper Functions diff --git a/index.tsx b/index.tsx index ea74006b..ad73fa02 100644 --- a/index.tsx +++ b/index.tsx @@ -27,6 +27,8 @@ interface IProps { keyboardType: KeyboardType; testIDPrefix: string; autoFocus: boolean; + onFocus(): void; + onBlur(): void; } const styles = StyleSheet.create({ @@ -35,14 +37,14 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', }, textInput: { - height: 50, - width: 50, borderBottomWidth: 4, - margin: 5, - textAlign: 'center', + color: '#000000', fontSize: 22, fontWeight: '500', - color: '#000000', + height: 50, + margin: 5, + textAlign: 'center', + width: 50, }, }); @@ -60,10 +62,12 @@ class OTPTextView extends Component { inputCellLength: 1, containerStyle: {}, textInputStyle: {}, - handleTextChange: () => { }, + handleTextChange: () => {}, keyboardType: DEFAULT_KEYBOARD_TYPE, testIDPrefix: DEFAULT_TEST_ID_PREFIX, autoFocus: false, + onFocus: () => {}, + onBlur: () => {}, }; inputs: TextInput[]; @@ -245,6 +249,8 @@ class OTPTextView extends Component { keyboardType, testIDPrefix, autoFocus, + onFocus, + onBlur, ...textInputProps } = this.props; @@ -286,7 +292,11 @@ class OTPTextView extends Component { value={otpText[i] || ''} style={inputStyle} maxLength={this.props.inputCellLength} - onFocus={() => this.onInputFocus(i)} + onFocus={() => { + this.props.onFocus(); + this.onInputFocus(i); + }} + onBlur={() => this.props.onBlur()} onChangeText={text => this.onTextChange(text, i)} multiline={false} onKeyPress={e => this.onKeyPress(e, i)}