refactor: change input logic to handle with focus and add support to react-hook-form

Author: johelder

example/src/App.tsx

@@ -1,25 +1,15 @@
-import { useRef } from 'react';
-import { StyleSheet, View, useColorScheme } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import {
   TextInputOTP,
   TextInputOTPSlot,
   TextInputOTPGroup,
   TextInputOTPSeparator,
-  type TextInputOTPRef,
 } from 'react-native-input-code-otp';
 
 export default function App() {
-  const colorSchema = useColorScheme();
-  const inputRef = useRef<TextInputOTPRef>(null);
-  const backgroundColor = colorSchema === 'light' ? 'white' : 'black';
-
-  function handleSubmit(code: string) {
-    console.log({ code });
-  }
-
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <TextInputOTP ref={inputRef} maxLength={6} onFilled={handleSubmit}>
+    <View style={styles.container}>
+      <TextInputOTP maxLength={6} onFilled={(code) => console.log(code)}>
         <TextInputOTPGroup>
           <TextInputOTPSlot index={0} />
           <TextInputOTPSlot index={1} />

src/components/text-input-otp-slot.tsx

@@ -25,12 +25,12 @@ function TextInputOTPSlotComponent({
 
   return (
     <Pressable
+      onPress={handlePress}
       style={StyleSheet.flatten([
         styles.slot,
         borderStyles,
         isFocused ? focusedSlotStyles : slotStyles,
       ])}
-      onPress={() => handlePress(index)}
       {...rest}
     >
       {code[index] && (

src/components/text-input.tsx

@@ -7,15 +7,8 @@ export const TextInput = forwardRef<
   TextInputOTPRef,
   Omit<TextInputOTPProps, 'children'>
 >(({ autoFocus = true, ...rest }, ref) => {
-  const {
-    inputRef,
-    handleKeyPress,
-    handleChangeText,
-    setValue,
-    focus,
-    blur,
-    clear,
-  } = useTextInputOTP();
+  const { inputRef, handleChangeText, setValue, focus, blur, clear } =
+    useTextInputOTP();
 
   useImperativeHandle(ref, () => ({
     setValue,
@@ -26,14 +19,12 @@ export const TextInput = forwardRef<
 
   return (
     <RNTextInput
-      value=""
       ref={inputRef}
-      onKeyPress={handleKeyPress}
-      onChangeText={handleChangeText}
-      style={styles.input}
       keyboardType="number-pad"
       autoFocus={autoFocus}
+      style={styles.input}
       {...rest}
+      onChangeText={handleChangeText}
     />
   );
 });

src/hooks/use-text-input-otp.tsx

@@ -7,19 +7,13 @@ import {
   useState,
   type PropsWithChildren,
 } from 'react';
-import type {
-  NativeSyntheticEvent,
-  TextInput,
-  TextInputKeyPressEventData,
-} from 'react-native';
-import { BACKSPACE_KEY } from '../constants';
+import type { TextInput } from 'react-native';
 import type { TextInputOTPContextProps, TextInputOTPProps } from '../types';
 
 const TextInputOTPContext = createContext<TextInputOTPContextProps>({
-  code: [],
+  code: '',
   currentIndex: 0,
   inputRef: { current: null },
-  handleKeyPress: () => {},
   handleChangeText: () => {},
   handlePress: () => {},
   setValue: () => {},
@@ -31,76 +25,50 @@ const TextInputOTPContext = createContext<TextInputOTPContextProps>({
 export function TextInputOTPProvider({
   autoFocus = true,
   maxLength,
+  value = '',
   onFilled,
+  onChangeText,
   children,
 }: PropsWithChildren<
-  Pick<TextInputOTPProps, 'autoFocus' | 'maxLength' | 'onFilled'>
+  Pick<
+    TextInputOTPProps,
+    'autoFocus' | 'maxLength' | 'onFilled' | 'onChangeText' | 'value'
+  >
 >) {
-  const [code, setCode] = useState(Array(maxLength).fill(''));
-  const [currentIndex, setCurrentIndex] = useState(autoFocus ? 0 : -1);
+  const [code, setCode] = useState(value);
+  const [currentIndex, setCurrentIndex] = useState(() => (autoFocus ? 0 : -1));
   const inputRef = useRef<TextInput>(null);
 
-  const updateCodeAtIndex = useCallback(
-    (index: number, value: string) => {
-      const newCode = [...code];
-      newCode[index] = value;
-      setCode(newCode);
-
-      return newCode;
-    },
-    [code]
-  );
-
-  const handleKeyPress = useCallback(
-    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      const { key } = event.nativeEvent;
-
-      if (key !== BACKSPACE_KEY) {
-        return;
-      }
-
-      if (!code[currentIndex] && currentIndex > 0) {
-        updateCodeAtIndex(currentIndex - 1, '');
-        setCurrentIndex((prev) => prev - 1);
-        return;
-      }
-
-      updateCodeAtIndex(currentIndex, '');
-    },
-    [code, currentIndex, updateCodeAtIndex]
-  );
-
   const handleChangeText = useCallback(
     (text: string) => {
-      if (text.length > 1) {
+      if (text.length > maxLength) {
         return;
       }
 
-      const updatedCode = updateCodeAtIndex(currentIndex, text);
+      setCode(text);
+      onChangeText?.(text);
 
-      if (currentIndex < maxLength - 1) {
-        setCurrentIndex((prev) => prev + 1);
-        return;
+      if (text.length === maxLength) {
+        onFilled?.(text);
       }
 
-      const finalCode = [...updatedCode].join('');
-
-      if (finalCode.length === maxLength) {
-        onFilled?.(finalCode);
+      if (text.length < maxLength) {
+        setCurrentIndex(text.length);
       }
     },
-    [currentIndex, maxLength, onFilled, updateCodeAtIndex]
+    [maxLength, onChangeText, onFilled]
   );
 
-  function handlePress(index: number) {
-    setCurrentIndex(index);
+  const handlePress = useCallback(() => {
+    setCurrentIndex(code.length);
     inputRef.current?.focus();
-  }
+  }, [code.length]);
 
   const setValue = useCallback(
     (text: string) => {
-      const value = text.length > maxLength ? text.slice(0, maxLength) : text;
-      setCode(Array.from(value));
+      const filledCode =
+        text.length > maxLength ? text.slice(0, maxLength) : text;
+      setCode(filledCode);
       setCurrentIndex(maxLength - 1);
     },
     [maxLength]
@@ -115,24 +83,23 @@ export function TextInputOTPProvider({
   }
 
   const clear = useCallback(() => {
-    setCode(Array(maxLength).fill(''));
+    setCode('');
     setCurrentIndex(0);
-  }, [maxLength]);
+  }, []);
 
   const contextValue = useMemo(
     () => ({
-      code,
+      code: value || code,
       currentIndex,
       inputRef,
-      handleKeyPress,
       handleChangeText,
       handlePress,
       setValue,
       focus,
       blur,
       clear,
     }),
-    [clear, code, currentIndex, handleChangeText, handleKeyPress, setValue]
+    [clear, code, currentIndex, handleChangeText, handlePress, setValue, value]
   );
 
   return (

src/types.ts

@@ -0,0 +1,64 @@
+import type { ReactNode, RefObject } from 'react';
+import type {
+  PressableProps,
+  StyleProp,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+export type TextInputOTPContextProps = {
+  code: string;
+  currentIndex: number;
+  inputRef: RefObject<TextInput | null>;
+  handleChangeText: (text: string) => void;
+  handlePress: () => void;
+  setValue: (text: string) => void;
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+};
+
+export type TextInputOTPGroupProps = {
+  groupStyles?: StyleProp<ViewStyle>;
+} & Omit<ViewProps, 'style'>;
+
+export type TextInputOTPRef = {
+  setValue: (text: string) => void;
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+};
+
+export type TextInputOTPSeparatorProps = {
+  separatorStyles?: StyleProp<ViewStyle>;
+} & Omit<ViewProps, 'style'>;
+
+export type TextInputOTPSlotProps = {
+  index: number;
+  focusedSlotStyles?: StyleProp<ViewStyle>;
+  slotStyles?: StyleProp<ViewStyle>;
+  focusedSlotTextStyles?: StyleProp<TextStyle>;
+  slotTextStyles?: StyleProp<TextStyle>;
+} & PressableProps;
+
+export type TextInputOTPSlotInternalProps = {
+  isFirst?: boolean;
+  isLast?: boolean;
+};
+
+export type UseSlotBorderStylesProps = {
+  isFocused: boolean;
+  isFirst?: boolean;
+  isLast?: boolean;
+};
+
+export type TextInputOTPProps = {
+  children: ReactNode;
+  autoFocus?: boolean;
+  maxLength: number;
+  onFilled?: (text: string) => void;
+  containerStyles?: StyleProp<ViewStyle>;
+} & Omit<TextInputProps, 'style'>;