Add onFocus and onBlur methods

README.MD

@@ -95,6 +95,8 @@ The `react-native-otp-entry` component accepts the following props:
 | `disabled`                   | boolean                                | _Default: false_. Disables the input                                                                           |
 | `type`                       | 'alpha' \| 'numeric' \| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers.         |
 | `secureTextEntry`            | boolean                                | _Default: false_. Obscures the text entered so that sensitive text like PIN stay secure.                       |
+| `onFocus`                    | () => void                             | A callback function is invoked when the OTP input is focused.                                                  |
+| `onBlur`                     | () => void                             | A callback function is invoked when the OTP input is blurred.                                                  |
 
 | Theme                           | Type      | Description                                                                        |
 | ------------------------------- | --------- | ---------------------------------------------------------------------------------- |

src/OtpInput/OtpInput.types.ts

@@ -6,6 +6,8 @@ export interface OtpInputProps {
   focusColor?: ColorValue;
   onTextChange?: (text: string) => void;
   onFilled?: (text: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
   blurOnFilled?: boolean;
   hideStick?: boolean;
   focusStickBlinkingDuration?: number;

src/OtpInput/__tests__/useOtpInput.test.ts

@@ -163,33 +163,33 @@ describe("useOtpInput", () => {
     });
   });
 
-   test("handleTextChange() should NOT call setText() and onTextChange() with value when type is numeric and value has letters", () => {
-     const value = "abc123";
-     const mockOnTextChange = jest.fn();
-     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
-
-     const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "numeric" });
-     result.current.actions.handleTextChange(value);
-
-     act(() => {
-       expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
-       expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
-     });
-   });
-
-   test("handleTextChange() should NOT call setText() and onTextChange() with value when type is alphanumeric and value has special characters", () => {
-     const value = "a1/*-+";
-     const mockOnTextChange = jest.fn();
-     jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
-
-     const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alphanumeric" });
-     result.current.actions.handleTextChange(value);
-
-     act(() => {
-       expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
-       expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
-     });
-   });
+  test("handleTextChange() should NOT call setText() and onTextChange() with value when type is numeric and value has letters", () => {
+    const value = "abc123";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "numeric" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
+    });
+  });
+
+  test("handleTextChange() should NOT call setText() and onTextChange() with value when type is alphanumeric and value has special characters", () => {
+    const value = "a1/*-+";
+    const mockOnTextChange = jest.fn();
+    jest.spyOn(React, "useState").mockImplementation(() => ["", jest.fn()]);
+
+    const { result } = renderUseOtInput({ onTextChange: mockOnTextChange, type: "alphanumeric" });
+    result.current.actions.handleTextChange(value);
+
+    act(() => {
+      expect(result.current.forms.setText).not.toHaveBeenCalledWith(value);
+      expect(mockOnTextChange).not.toHaveBeenCalledWith(value);
+    });
+  });
 
   test("handleTextChange() should not proceed if the input is disabled", () => {
     const value = "123456";
@@ -249,6 +249,32 @@ describe("useOtpInput", () => {
     });
   });
 
+  test("handleFocus() should run user provided callback", () => {
+    const mockOnFocus = jest.fn();
+
+    const { result } = renderUseOtInput({
+      onFocus: mockOnFocus,
+    });
+    result.current.actions.handleFocus();
+
+    act(() => {
+      expect(mockOnFocus).toBeCalled();
+    });
+  });
+
+  test("handleBlur() should run user provided callback", () => {
+    const mockOnBlur = jest.fn();
+
+    const { result } = renderUseOtInput({
+      onBlur: mockOnBlur,
+    });
+    result.current.actions.handleBlur();
+
+    act(() => {
+      expect(mockOnBlur).toBeCalled();
+    });
+  });
+
   test("should blur the input when filled if blurOnFilled is 'true'", () => {
     jest.spyOn(React, "useRef").mockReturnValue({ current: { blur: jest.fn() } } as any);
 

src/OtpInput/useOtpInput.ts

@@ -10,6 +10,8 @@ export const useOtpInput = ({
   autoFocus = true,
   blurOnFilled,
   type,
+  onFocus,
+  onBlur,
 }: OtpInputProps) => {
   const [text, setText] = useState("");
   const [isFocused, setIsFocused] = useState(autoFocus);
@@ -55,10 +57,12 @@ export const useOtpInput = ({
 
   const handleFocus = () => {
     setIsFocused(true);
+    onFocus?.();
   };
 
   const handleBlur = () => {
     setIsFocused(false);
+    onBlur?.();
   };
 
   return {