From c71fe3ad9bad27c115684727bec8a3b7400e5d9e Mon Sep 17 00:00:00 2001
From: Malik Kawee <malik.kawee@gmail.com>
Date: Wed, 1 Jun 2022 21:36:37 +0500
Subject: [PATCH 1/2] #added filled input styles  #updated readme

---
 README.md  | 1 +
 index.d.ts | 8 ++++++--
 index.tsx  | 8 ++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index feb7c99..6f3846f 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,7 @@ const styles = StyleSheet.create({
 | code                    | NO       | You can use this library as a controlled / uncontrolled component by supplying this prop or not |
 | codeInputFieldStyle     | NO       | The style of the input field which is NOT focused                                               |
 | codeInputHighlightStyle | NO       | The style of the input field which is focused                                                   |
+| codeInputFilledStyle | NO       | The style of the input field which are filled                                                   |
 | autoFocusOnLoad         | NO       | Auto activate the input and bring up the keyboard when component is loaded                      |
 | onCodeChanged           | NO       | Callback when the digits are changed                                                            |
 | onCodeFilled            | NO       | Callback when the last digit is entered                                                         |
diff --git a/index.d.ts b/index.d.ts
index aec5d5b..571dc20 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -27,6 +27,10 @@ declare module '@twotalltotems/react-native-otp-input' {
      * Style of highlighted status for input fields
      */
     codeInputHighlightStyle?: TextStyle;
+    /**
+     * Style of the filled input fields
+     */
+    codeInputFilledStyle?: TextStyle;
     /**
      * Callback function
      * Trigger when all fields of the OTP has been filled
@@ -89,8 +93,8 @@ declare module '@twotalltotems/react-native-otp-input' {
   }
 
   export interface OTPInputViewState {
-      digits: string[];
-      selectedIndex: number;
+    digits: string[];
+    selectedIndex: number;
   }
 
   export default class OTPInputView extends React.Component<InputProps, OTPInputViewState> {
diff --git a/index.tsx b/index.tsx
index 6c56ef8..2cbd5aa 100644
--- a/index.tsx
+++ b/index.tsx
@@ -125,7 +125,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
                 }
             } else {
                 text.split("").forEach((value) => {
-                    if(index < pinCount) {
+                    if (index < pinCount) {
                         newdigits[index] = value;
                         index += 1;
                     }
@@ -182,7 +182,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
     }
 
     renderOneInputField = (_: TextInput, index: number) => {
-        const { codeInputFieldStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props
+        const { codeInputFieldStyle, codeInputFilledStyle, codeInputHighlightStyle, secureTextEntry, editable, keyboardType, selectionColor, keyboardAppearance } = this.props
         const { defaultTextFieldStyle } = styles
         const { selectedIndex, digits } = this.state
         const { clearInputs, placeholderCharacter, placeholderTextColor } = this.props
@@ -192,13 +192,13 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
                 <TextInput
                     testID="textInput"
                     underlineColorAndroid='rgba(0,0,0,0)'
-                    style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : [defaultTextFieldStyle, codeInputFieldStyle]}
+                    style={selectedIndex === index ? [defaultTextFieldStyle, codeInputFieldStyle, codeInputHighlightStyle] : (selectedIndex < index ? [defaultTextFieldStyle, codeInputFieldStyle] : [defaultTextFieldStyle, codeInputFilledStyle])}
                     ref={ref => { this.fields[index] = ref }}
                     onChangeText={text => {
                         this.handleChangeText(index, text)
                     }}
                     onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key) }}
-                    value={ !clearInputs ? digits[index]: "" }
+                    value={!clearInputs ? digits[index] : ""}
                     keyboardAppearance={keyboardAppearance}
                     keyboardType={keyboardType}
                     textContentType={isAutoFillSupported ? "oneTimeCode" : "none"}

From 5a1af4422808ac7a25e13bf2aea0868ff045e53e Mon Sep 17 00:00:00 2001
From: Malik Kawee <malik.kawee@gmail.com>
Date: Wed, 1 Jun 2022 21:42:38 +0500
Subject: [PATCH 2/2] #retained original formatting

---
 index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.tsx b/index.tsx
index 2cbd5aa..13b7a12 100644
--- a/index.tsx
+++ b/index.tsx
@@ -125,7 +125,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
                 }
             } else {
                 text.split("").forEach((value) => {
-                    if (index < pinCount) {
+                    if(index < pinCount) {
                         newdigits[index] = value;
                         index += 1;
                     }
@@ -198,7 +198,7 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
                         this.handleChangeText(index, text)
                     }}
                     onKeyPress={({ nativeEvent: { key } }) => { this.handleKeyPressTextInput(index, key) }}
-                    value={!clearInputs ? digits[index] : ""}
+                    value={ !clearInputs ? digits[index]: "" }
                     keyboardAppearance={keyboardAppearance}
                     keyboardType={keyboardType}
                     textContentType={isAutoFillSupported ? "oneTimeCode" : "none"}
@@ -248,4 +248,4 @@ export default class OTPInputView extends Component<InputProps, OTPInputViewStat
             </View>
         );
     }
-}
+}
\ No newline at end of file