feat: added multiple color feature for tint shade

Author: naveenvignesh5

index.js

@@ -42,8 +42,29 @@ class OTPTextView extends Component {
     };
 
     this.inputs = [];
+
+    this.checkTintColorCount();
   }
 
+  checkTintColorCount = () => {
+    const { tintColor, offTintColor, inputCount } = this.props;
+
+    if (typeof tintColor !== "string" && tintColor.length !== inputCount) {
+      throw new Error(
+        "If tint color is an array it's length should be equal to input count"
+      );
+    }
+
+    if (
+      typeof offTintColor !== "string" &&
+      offTintColor.length !== inputCount
+    ) {
+      throw new Error(
+        "If off tint color is an array it's length should be equal to input count"
+      );
+    }
+  };
+
   basicValidation = (text) => {
     const validText = /^[0-9a-zA-Z]+$/;
     return text.match(validText);
@@ -92,26 +113,27 @@ class OTPTextView extends Component {
     const val = this.state.otpText[i] || "";
     const { handleTextChange, inputCellLength } = this.props;
     const { otpText } = this.state;
+
     if (e.nativeEvent.key === "Backspace" && i !== 0) {
-      if (val.length === 0) {
-        if (otpText[i - 1].length === inputCellLength) {
-          this.setState(
-            (prevState) => {
-              let { otpText } = prevState;
-              otpText[i - 1] = otpText[i - 1]
-                .split("")
-                .splice(0, otpText[i - 1].length - 1)
-                .join("");
-              return {
-                otpText,
-              };
-            },
-            () => {
-              handleTextChange(this.state.otpText.join(""));
-              this.inputs[i - 1].focus();
-            }
-          );
-        }
+      if (!val.length && otpText[i - 1].length === inputCellLength) {
+        this.setState(
+          (prevState) => {
+            let { otpText } = prevState;
+
+            otpText[i - 1] = otpText[i - 1]
+              .split("")
+              .splice(0, otpText[i - 1].length - 1)
+              .join("");
+
+            return {
+              otpText,
+            };
+          },
+          () => {
+            handleTextChange(this.state.otpText.join(""));
+            this.inputs[i - 1].focus();
+          }
+        );
       }
     }
   };
@@ -169,11 +191,16 @@ class OTPTextView extends Component {
       const inputStyle = [
         styles.textInput,
         textInputStyle,
-        { borderColor: offTintColor },
+        {
+          borderColor:
+            typeof offTintColor === "string" ? offTintColor : offTintColor[i],
+        },
       ];
 
       if (focusedInput === i) {
-        inputStyle.push({ borderColor: tintColor });
+        inputStyle.push({
+          borderColor: typeof tintColor === "string" ? tintColor : tintColor[i],
+        });
       }
 
       TextInputs.push(
@@ -208,8 +235,14 @@ OTPTextView.propTypes = {
   containerStyle: PropTypes.any,
   textInputStyle: PropTypes.any,
   inputCellLength: PropTypes.number,
-  tintColor: PropTypes.string,
-  offTintColor: PropTypes.string,
+  tintColor: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  offTintColor: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
   handleTextChange: PropTypes.func,
   inputType: PropTypes.string,
   keyboardType: PropTypes.string,