feat: add method to listen cell text change

Author: naveenvignesh5

README.md

@@ -27,18 +27,19 @@ Supports both Android and iOS.
 
 The following props are applicable for the component along with **props supported by react native `TextInput` component**
 
-| Prop             | Type   | Optional | Default      | Description                                                                      |
-| ---------------- | ------ | -------- | ------------ | -------------------------------------------------------------------------------- |
-| defaultValue     | string | Yes      | ''           | Default Value that can be set based on OTP / Pin received from parent container. |
-| handleTextChange | func   | No       | n/a          | callback with concated string of all cells as argument.                          |
-| inputCount       | number | Yes      | 4            | Number of Text Input Cells to be present.                                        |
-| tintColor        | string | Yes      | #3CB371      | Color for Cell Border on being focused.                                          |
-| offTintColor     | string | Yes      | #DCDCDC      | Color for Cell Border Border not focused.                                        |
-| inputCellLength  | number | Yes      | 1            | Number of character that can be entered inside a single cell.                    |
-| containerStyle   | object | Yes      | {}           | style for overall container.                                                     |
-| 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                   |
+| Prop                 | Type   | Optional | Default      | Description                                                                            |
+| -------------------- | ------ | -------- | ------------ | -------------------------------------------------------------------------------------- |
+| defaultValue         | string | Yes      | ''           | Default Value that can be set based on OTP / Pin received from parent container.       |
+| handleTextChange     | func   | No       | n/a          | callback with concated string of all cells as argument.                                |
+| handleCellTextChange | func   | Yes      | n/a          | callback for text change in individual cell with cell text and cell index as arguments |
+| inputCount           | number | Yes      | 4            | Number of Text Input Cells to be present.                                              |
+| tintColor            | string | Yes      | #3CB371      | Color for Cell Border on being focused.                                                |
+| offTintColor         | string | Yes      | #DCDCDC      | Color for Cell Border Border not focused.                                              |
+| inputCellLength      | number | Yes      | 1            | Number of character that can be entered inside a single cell.                          |
+| containerStyle       | object | Yes      | {}           | style for overall container.                                                           |
+| 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                         |
 
 #### Helper Functions
 
@@ -83,7 +84,7 @@ const ParentComponent = () => {
         <View>
             <OTPTextInput ref={e => (otpInput = e)} >
             <Button title="clear" onClick={clearText}>
-        </View> ̰
+        </View>
     );
 }
 ```
@@ -93,3 +94,4 @@ const ParentComponent = () => {
 If you think I have helped you, feel free to get me coffee. 😊
 
 <a href="https://www.buymeacoffee.com/naveenvignesh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" height="60" ></a>
+

index.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { View, TextInput, StyleSheet, ViewStyle, KeyboardType, NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
+
 interface IState {
   focusedInput: number;
   otpText: string[];
@@ -13,6 +14,7 @@ interface IProps {
   tintColor: string | string[];
   offTintColor: string | string[];
   handleTextChange(text: string): void;
+  handleCellTextChange?(text: string, cellIndex: number): void;
   keyboardType: KeyboardType;
   testIDPrefix: string;
   autoFocus: boolean;
@@ -106,7 +108,7 @@ class OTPTextView extends Component<IProps, IState> {
   };
 
   onTextChange = (text: string, i: number) => {
-    const { inputCellLength, inputCount, handleTextChange } = this.props;
+    const { inputCellLength, inputCount, handleTextChange, handleCellTextChange } = this.props;
 
     if (text && !this.basicValidation(text)) {
       return;
@@ -124,6 +126,7 @@ class OTPTextView extends Component<IProps, IState> {
       },
       () => {
         handleTextChange(this.state.otpText.join(""));
+        handleCellTextChange && handleCellTextChange(text, i);
         if (text.length === inputCellLength && i !== inputCount - 1) {
           this.inputs[i + 1].focus();
         }
@@ -190,10 +193,10 @@ class OTPTextView extends Component<IProps, IState> {
     );
   };
 
-  setValue = (value: string) => {
+  setValue = (value: string, isPaste: boolean = false) => {
     const { inputCount, inputCellLength } = this.props;
 
-    const updatedFocusInput = value.length - 1;
+    const updatedFocusInput = isPaste ? inputCount - 1 : value.length - 1;
 
     this.setState(
       {