From d936129b96f8cd22b0112cba623a599c7272c730 Mon Sep 17 00:00:00 2001
From: Matheus Santos <matmelous@gmail.com>
Date: Mon, 1 May 2023 18:38:07 -0300
Subject: [PATCH] Add input groups

---
 index.d.ts |  1 +
 index.tsx  | 21 ++++++++++++++++++---
 yarn.lock  |  5 +++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index aec5d5b..2536c65 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -15,6 +15,7 @@ declare module '@twotalltotems/react-native-otp-input' {
   type KeyboardType = 'default' | 'email-address' | 'number-pad' | 'phone-pad';
 
   export interface InputProps {
+    pinGroups: number;
     /**
      * Digits of pins in the OTP
      */
diff --git a/index.tsx b/index.tsx
index 6c56ef8..23ce013 100644
--- a/index.tsx
+++ b/index.tsx
@@ -18,6 +18,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
         clearInputs: false,
         placeholderCharacter: "",
         selectionColor: '#000',
+        pinGroups: 1,
     }
 
     private fields: TextInput[] | null[] = []
@@ -213,10 +214,24 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
         )
     }
 
+    renderTextGroups = (pinList: TextInput[],groupIndex: number, pinPerGroups: number)=>{
+        const currentIndex= (groupIndex*pinPerGroups)
+
+        return ( 
+        <View pointerEvents="none" key={groupIndex + "view"} testID="inputGroupSlotView" style={{marginHorizontal:15}}>
+            {pinList.slice(currentIndex,(currentIndex+pinPerGroups)).map((pinVal,pinIndex) =>{
+            this.renderOneInputField(pinVal,(currentIndex+pinIndex))
+        })}
+        </View>)
+    }
     renderTextFields = () => {
-        const { pinCount } = this.props
-        const array = new Array(pinCount).fill(0)
-        return array.map(this.renderOneInputField)
+        const { pinCount, pinGroups } = this.props
+        const pinPerGrops = Math.ceil(pinCount/pinGroups);            
+        const pinCountArray = new Array(pinCount).fill(0)
+        const pinGroupsArray = new Array(pinGroups).fill(0)
+        return pinGroupsArray.map((_,index)=>{
+            return this.renderTextGroups(pinCountArray,index,pinPerGrops)
+        })
     }
 
     render() {
diff --git a/yarn.lock b/yarn.lock
index f826a0c..b136d9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1050,6 +1050,11 @@
     wcwidth "^1.0.1"
     ws "^1.1.0"
 
+"@react-native-community/clipboard@^1.2.2":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/clipboard/-/clipboard-1.5.1.tgz#32abb3ea2eb91ee3f9c5fb1d32d5783253c9fabe"
+  integrity sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==
+
 "@sinonjs/commons@^1.7.0":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"