Add onBlur and onFocus methods

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
 

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<IProps, IState> {
     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<IProps, IState> {
       keyboardType,
       testIDPrefix,
       autoFocus,
+      onFocus,
+      onBlur,
       ...textInputProps
     } = this.props;
 
@@ -286,7 +292,11 @@ class OTPTextView extends Component<IProps, IState> {
           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)}