refactor: simplify theme handling and improve performance

- remove theme-related files and dependencies
- inline color values in components
- optimize hooks with useCallback and useMemo
- simplify AnimatedCaret component
- remove unnecessary theme-related props and styles

Author: johelder

src/components/animated-caret.tsx

@@ -1,43 +1,34 @@
-import { StyleSheet, Animated, useAnimatedValue } from 'react-native';
-import { useThemeColor } from '../theme/use-theme-color';
-import { theme } from '../theme/theme';
 import { useEffect } from 'react';
+import { StyleSheet, Animated, useAnimatedValue } from 'react-native';
 
 export function AnimatedCaret() {
-  const backgroundColor = useThemeColor({
-    light: theme.colorBlack,
-    dark: theme.colorWhite,
-  });
-  const opacityValue = useAnimatedValue(0);
+  const opacity = useAnimatedValue(0);
 
   useEffect(() => {
     Animated.loop(
       Animated.sequence([
-        Animated.timing(opacityValue, {
+        Animated.timing(opacity, {
           toValue: 0,
           duration: 500,
           useNativeDriver: true,
         }),
-        Animated.timing(opacityValue, {
+        Animated.timing(opacity, {
           toValue: 1,
           duration: 500,
           useNativeDriver: true,
         }),
       ])
     ).start();
-  }, [opacityValue]);
+  }, [opacity]);
 
-  return (
-    <Animated.View
-      style={[styles.caret, { backgroundColor, opacity: opacityValue }]}
-    />
-  );
+  return <Animated.View style={[styles.caret, { opacity }]} />;
 }
 
 const styles = StyleSheet.create({
   caret: {
     width: 2,
     height: 16,
     borderRadius: 16,
+    backgroundColor: '#030712',
   },
 });

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

@@ -1,24 +1,11 @@
 import { View, StyleSheet } from 'react-native';
-import { useThemeColor } from '../theme/use-theme-color';
-import { theme } from '../theme/theme';
 import type { TextInputOTPSeparatorProps } from '../types';
 
 export function TextInputOTPSeparator({
   separatorStyles,
 }: TextInputOTPSeparatorProps) {
-  const backgroundColor = useThemeColor({
-    light: theme.colorBlack,
-    dark: theme.colorDarkGrey,
-  });
-
   return (
-    <View
-      style={StyleSheet.flatten([
-        styles.separator,
-        { backgroundColor },
-        separatorStyles,
-      ])}
-    />
+    <View style={StyleSheet.flatten([styles.separator, separatorStyles])} />
   );
 }
 

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

@@ -1,15 +1,13 @@
 import { memo } from 'react';
 import { Pressable, Text, StyleSheet } from 'react-native';
+import { AnimatedCaret } from './animated-caret';
 import { useTextInputOTP } from '../hooks/use-text-input-otp';
+import { useSlotBorderStyles } from '../hooks/use-slot-border-styles';
+import { SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
 import type {
   TextInputOTPSlotInternalProps,
   TextInputOTPSlotProps,
 } from '../types';
-import { useSlotBorderStyles } from '../hooks/use-slot-border-styles';
-import { useThemeColor } from '../theme/use-theme-color';
-import { theme } from '../theme/theme';
-import { AnimatedCaret } from './animated-caret';
-import { SLOT_HEIGHT, SLOT_WIDTH } from '../constants';
 
 function TextInputOTPSlotComponent({
   index,
@@ -24,10 +22,6 @@ function TextInputOTPSlotComponent({
   const { code, currentIndex, handlePress } = useTextInputOTP();
   const isFocused = currentIndex === index;
   const borderStyles = useSlotBorderStyles({ isFocused, isFirst, isLast });
-  const slotTextColor = useThemeColor({
-    light: theme.colorBlack,
-    dark: theme.colorWhite,
-  });
 
   return (
     <Pressable
@@ -43,7 +37,6 @@ function TextInputOTPSlotComponent({
         <Text
           style={StyleSheet.flatten([
             styles.slotText,
-            { color: slotTextColor },
             isFocused ? focusedSlotTextStyles : slotTextStyles,
           ])}
         >
@@ -66,6 +59,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   slotText: {
+    color: '#030712',
     fontSize: 14,
     fontWeight: 'bold',
   },

src/hooks/use-slot-border-styles.ts

@@ -1,24 +1,13 @@
-import { theme } from '../theme/theme';
-import { useThemeColor } from '../theme/use-theme-color';
 import type { UseSlotBorderStylesProps } from '../types/text-input-otp-slot';
 
 export function useSlotBorderStyles({
   isFocused,
   isFirst,
   isLast,
 }: UseSlotBorderStylesProps) {
-  const blurredBorderColor = useThemeColor({
-    light: theme.colorLightGrey,
-    dark: theme.colorDarkGrey,
-  });
-  const focusedBorderColor = useThemeColor({
-    light: theme.colorBlack,
-    dark: theme.colorWhite,
-  });
-
   return {
     height: isFocused ? 54 : 50,
-    borderColor: isFocused ? focusedBorderColor : blurredBorderColor,
+    borderColor: isFocused ? '#030712' : '#E4E7EC',
     borderTopWidth: 2,
     borderBottomWidth: 2,
     borderLeftWidth: isFocused || isFirst ? 2 : 1,

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

@@ -1,6 +1,8 @@
 import {
   createContext,
+  useCallback,
   useContext,
+  useMemo,
   useRef,
   useState,
   type PropsWithChildren,
@@ -38,61 +40,71 @@ export function TextInputOTPProvider({
   const [currentIndex, setCurrentIndex] = useState(autoFocus ? 0 : -1);
   const inputRef = useRef<TextInput>(null);
 
-  function updateCodeAtIndex(index: number, value: string) {
-    const newCode = [...code];
-    newCode[index] = value;
-    setCode(newCode);
+  const updateCodeAtIndex = useCallback(
+    (index: number, value: string) => {
+      const newCode = [...code];
+      newCode[index] = value;
+      setCode(newCode);
 
-    return newCode;
-  }
+      return newCode;
+    },
+    [code]
+  );
 
-  function handleKeyPress(
-    event: NativeSyntheticEvent<TextInputKeyPressEventData>
-  ) {
-    const { key } = event.nativeEvent;
+  const handleKeyPress = useCallback(
+    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      const { key } = event.nativeEvent;
 
-    if (key !== BACKSPACE_KEY) {
-      return;
-    }
+      if (key !== BACKSPACE_KEY) {
+        return;
+      }
 
-    if (!code[currentIndex] && currentIndex > 0) {
-      updateCodeAtIndex(currentIndex - 1, '');
-      setCurrentIndex((prev) => prev - 1);
-      return;
-    }
+      if (!code[currentIndex] && currentIndex > 0) {
+        updateCodeAtIndex(currentIndex - 1, '');
+        setCurrentIndex((prev) => prev - 1);
+        return;
+      }
 
-    updateCodeAtIndex(currentIndex, '');
-  }
+      updateCodeAtIndex(currentIndex, '');
+    },
+    [code, currentIndex, updateCodeAtIndex]
+  );
 
-  function handleChangeText(text: string) {
-    if (text.length > 1) {
-      return;
-    }
+  const handleChangeText = useCallback(
+    (text: string) => {
+      if (text.length > 1) {
+        return;
+      }
 
-    const updatedCode = updateCodeAtIndex(currentIndex, text);
+      const updatedCode = updateCodeAtIndex(currentIndex, text);
 
-    if (currentIndex < maxLength - 1) {
-      setCurrentIndex((prev) => prev + 1);
-      return;
-    }
+      if (currentIndex < maxLength - 1) {
+        setCurrentIndex((prev) => prev + 1);
+        return;
+      }
 
-    const finalCode = [...updatedCode].join('');
+      const finalCode = [...updatedCode].join('');
 
-    if (finalCode.length === maxLength) {
-      onFilled?.(finalCode);
-    }
-  }
+      if (finalCode.length === maxLength) {
+        onFilled?.(finalCode);
+      }
+    },
+    [currentIndex, maxLength, onFilled, updateCodeAtIndex]
+  );
 
   function handlePress(index: number) {
     setCurrentIndex(index);
     inputRef.current?.focus();
   }
 
-  function setValue(text: string) {
-    const value = text.length > maxLength ? text.slice(0, maxLength) : text;
-    setCode(Array.from(value));
-    setCurrentIndex(maxLength - 1);
-  }
+  const setValue = useCallback(
+    (text: string) => {
+      const value = text.length > maxLength ? text.slice(0, maxLength) : text;
+      setCode(Array.from(value));
+      setCurrentIndex(maxLength - 1);
+    },
+    [maxLength]
+  );
 
   function focus() {
     inputRef.current?.focus();
@@ -102,26 +114,29 @@ export function TextInputOTPProvider({
     inputRef.current?.blur();
   }
 
-  function clear() {
+  const clear = useCallback(() => {
     setCode(Array(maxLength).fill(''));
     setCurrentIndex(0);
-  }
+  }, [maxLength]);
+
+  const contextValue = useMemo(
+    () => ({
+      code,
+      currentIndex,
+      inputRef,
+      handleKeyPress,
+      handleChangeText,
+      handlePress,
+      setValue,
+      focus,
+      blur,
+      clear,
+    }),
+    [clear, code, currentIndex, handleChangeText, handleKeyPress, setValue]
+  );
 
   return (
-    <TextInputOTPContext.Provider
-      value={{
-        code,
-        currentIndex,
-        inputRef,
-        handleKeyPress,
-        handleChangeText,
-        handlePress,
-        setValue,
-        focus,
-        blur,
-        clear,
-      }}
-    >
+    <TextInputOTPContext.Provider value={contextValue}>
       {children}
     </TextInputOTPContext.Provider>
   );