From 2b81b43eef2063bca79349d59ba2740fd900121a Mon Sep 17 00:00:00 2001
From: "quan.nguyen" <anhquan291@gmail.com>
Date: Mon, 4 Dec 2023 18:28:07 -0500
Subject: [PATCH] add editable params

---
 README.md     | 3 ++-
 package.json  | 2 +-
 src/Type.ts   | 4 ++++
 src/index.tsx | 5 ++++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 82b8334..4a248ed 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,7 @@ const OTPInput = () => {
 }
 ```
 
-## Parameters
+## Params
 
 | Parameter               | required | Description                                                                                     |
 | ----------------------- | -------- | ----------------------------------------------------------------------------------------------- |
@@ -60,6 +60,7 @@ const OTPInput = () => {
 | autoFocus               | 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                                                         |
+| editable                | NO       | Set editable for inputs                                                                         |
 | rest                    | NO       | The other text input props                                                                      |
 | enteringAnimated        | NO       | The entering animation using reanimated layout                                                  |
 | exitingAnimated         | NO       | The exiting animation using reanimated layout                                                   |
diff --git a/package.json b/package.json
index 806ed9b..d4c2bc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-animated-otp-input",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "@anhquan291/react-native-animated-otp-input is a tiny library which provides an elegant UI with smooth Animation for the end user to input one time passcode (OTP). It also handles the input suggestion on iOS when the OTP SMS is received.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
diff --git a/src/Type.ts b/src/Type.ts
index 1816d94..246851b 100644
--- a/src/Type.ts
+++ b/src/Type.ts
@@ -26,6 +26,10 @@ export interface IOtpInput extends TextInputProps {
    * If keyboard is automatically brought up when OTP is loaded.
    */
   autoFocus?: boolean;
+  /**
+   * Set editable for inputs
+   */
+  editable?: boolean;
   /**
    * Callback function
    * Trigger when all text input fields are fulfill
diff --git a/src/index.tsx b/src/index.tsx
index 028f8df..cad6957 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -31,6 +31,7 @@ const OtpItem = ({ i }: { i: number }) => {
     inputStyle,
     textStyle,
     otpCount,
+    editable,
     enteringAnimated,
     exitingAnimated,
     rest,
@@ -74,7 +75,7 @@ const OtpItem = ({ i }: { i: number }) => {
         autoFocus={autoFocus && i === 0}
         {...rest}
       />
-      <Pressable onPress={onPress} style={styles.overlay}>
+      <Pressable disabled={editable} onPress={onPress} style={styles.overlay}>
         <Animated.View
           style={[
             {
@@ -108,6 +109,7 @@ export const OtpInput = ({
   textStyle = {},
   focusColor = '#4497ce',
   autoFocus = false,
+  editable = true,
   enteringAnimated = FadeInDown,
   exitingAnimated = FadeOut,
   onCodeFilled,
@@ -174,6 +176,7 @@ export const OtpInput = ({
     textStyle,
     focusColor,
     otpCount,
+    editable,
     enteringAnimated,
     exitingAnimated,
     rest,