feat: add caret hidden option

- add caretHidden prop to TextInputOTPProvider
- update TextInputOTPSlot to conditionally render caret
- update types and context to include caretHidden property

Author: johelder

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

@@ -19,9 +19,10 @@ function TextInputOTPSlotComponent({
   slotTextStyles,
   ...rest
 }: TextInputOTPSlotProps & TextInputOTPSlotInternalProps) {
-  const { code, currentIndex, handlePress } = useTextInputOTP();
+  const { code, currentIndex, handlePress, caretHidden } = useTextInputOTP();
   const isFocused = currentIndex === index;
   const borderStyles = useSlotBorderStyles({ isFocused, isFirst, isLast });
+  const shouldRenderCaret = isFocused && !code[index] && !caretHidden;
 
   return (
     <Pressable
@@ -44,7 +45,7 @@ function TextInputOTPSlotComponent({
         </Text>
       )}
 
-      {isFocused && !code[index] && <AnimatedCaret />}
+      {shouldRenderCaret && <AnimatedCaret />}
     </Pressable>
   );
 }

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

@@ -5,10 +5,12 @@ import {
   useMemo,
   useRef,
   useState,
-  type PropsWithChildren,
 } from 'react';
 import type { TextInput } from 'react-native';
-import type { TextInputOTPContextProps, TextInputOTPProps } from '../types';
+import type {
+  TextInputOTPContextProps,
+  TextInputOTPProviderProps,
+} from '../types';
 
 const TextInputOTPContext = createContext<TextInputOTPContextProps>({
   code: '',
@@ -20,6 +22,7 @@ const TextInputOTPContext = createContext<TextInputOTPContextProps>({
   focus: () => {},
   blur: () => {},
   clear: () => {},
+  caretHidden: false,
 });
 
 export function TextInputOTPProvider({
@@ -28,13 +31,9 @@ export function TextInputOTPProvider({
   value = '',
   onFilled,
   onChangeText,
+  caretHidden = false,
   children,
-}: PropsWithChildren<
-  Pick<
-    TextInputOTPProps,
-    'autoFocus' | 'maxLength' | 'onFilled' | 'onChangeText' | 'value'
-  >
->) {
+}: TextInputOTPProviderProps) {
   const [code, setCode] = useState(value);
   const [currentIndex, setCurrentIndex] = useState(() => (autoFocus ? 0 : -1));
   const inputRef = useRef<TextInput>(null);
@@ -98,8 +97,18 @@ export function TextInputOTPProvider({
       focus,
       blur,
       clear,
+      caretHidden,
     }),
-    [clear, code, currentIndex, handleChangeText, handlePress, setValue, value]
+    [
+      clear,
+      code,
+      currentIndex,
+      handleChangeText,
+      handlePress,
+      setValue,
+      value,
+      caretHidden,
+    ]
   );
 
   return (

src/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { PropsWithChildren, ReactNode, RefObject } from 'react';
 import type {
   PressableProps,
   StyleProp,
@@ -19,8 +19,21 @@ export type TextInputOTPContextProps = {
   focus: () => void;
   blur: () => void;
   clear: () => void;
+  caretHidden: boolean;
 };
 
+export type TextInputOTPProviderProps = PropsWithChildren<
+  Pick<
+    TextInputOTPProps,
+    | 'autoFocus'
+    | 'maxLength'
+    | 'onChangeText'
+    | 'onFilled'
+    | 'value'
+    | 'caretHidden'
+  >
+>;
+
 export type TextInputOTPGroupProps = {
   groupStyles?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, 'style'>;