@hoddy-ui/core 1.1.4 → 2.5.0

package/README.md

@@ -27,15 +27,17 @@ yarn add @hoddy-ui/core
 Install the required peer dependencies:
 
 ```bash
-npm install @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters
+npm install @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated
 ```
 
 Or with yarn:
 
 ```bash
-yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters
+yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated
 ```
 
+**Important**: Make sure to follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/3.x/fundamentals/getting-started) for platform-specific setup as it requires additional configuration for iOS and Android.
+
 ## 🚀 Quick Start
 
 ### Basic Setup
@@ -257,6 +259,7 @@ const colors = {
 
 - **`TextField`** - Material Design text input with variants
 - **`TextField2`** - Alternative text field design
+- **`OTPInput`** - One-Time Password input with auto-advance and paste support
 - **`Locator`** - Location picker with Google Maps integration
 
 ### Interactive Elements
@@ -433,6 +436,57 @@ A Material Design text input component with comprehensive features.
 />
 ```
 
+### OTPInput
+
+A specialized input component for One-Time Password entry with auto-advance, paste support, and backspace handling.
+
+**Props:**
+
+| Prop       | Type                                  | Default      | Description                      |
+| ---------- | ------------------------------------- | ------------ | -------------------------------- |
+| `length`   | `number`                              | `6`          | Number of OTP digits             |
+| `onChange` | `(value: string) => void`             | -            | Change handler for OTP value     |
+| `value`    | `string`                              | `""`         | Current OTP value                |
+| `variant`  | `"outlined" \| "text" \| "contained"` | `"outlined"` | Input variant style              |
+| `spacing`  | `number`                              | `1`          | Spacing between input boxes      |
+| `size`     | `number`                              | `45`         | Size of each input box in pixels |
+
+**Features:**
+
+- **Auto-advance**: Automatically moves to next input after digit entry
+- **Paste support**: Handles pasting of complete OTP codes
+- **Backspace handling**: Moves to previous input on backspace
+- **Number-only input**: Automatically filters non-numeric characters
+- **Customizable styling**: Supports different variants and sizes
+
+**Example:**
+
+```tsx
+const [otp, setOtp] = useState('');
+
+<OTPInput
+  length={6}
+  value={otp}
+  onChange={setOtp}
+  variant="outlined"
+  size={50}
+  spacing={2}
+/>
+
+// Usage with form validation
+<OTPInput
+  length={4}
+  value={otp}
+  onChange={(value) => {
+    setOtp(value);
+    if (value.length === 4) {
+      verifyOTP(value);
+    }
+  }}
+  variant="contained"
+/>
+```
+
 ### Locator
 
 A location picker component with Google Maps integration.
@@ -674,6 +728,8 @@ A modal component for overlays, dialogs, and bottom sheets.
 | `sheet`                  | `boolean \| number` | `false` | Bottom sheet mode/height  |
 | `bare`                   | `boolean`           | `false` | Hide header and padding   |
 | `keyboardVerticalOffset` | `number`            | -       | Keyboard avoidance offset |
+| `onModalShow`            | `() => void`        | -       | Callback when modal shows |
+| `onModalHide`            | `() => void`        | -       | Callback when modal hides |
 | `style`                  | `ViewStyle`         | `{}`    | Container style overrides |
 
 **Example:**
@@ -684,6 +740,8 @@ A modal component for overlays, dialogs, and bottom sheets.
   onClose={() => setIsOpen(false)}
   title="Confirm Action"
   sheet={400}
+  onModalShow={() => console.log("Modal is now visible")}
+  onModalHide={() => console.log("Modal is now hidden")}
 >
   <Typography>Are you sure you want to delete this item?</Typography>
   <Button title="Delete" color="error" />
@@ -713,7 +771,7 @@ A loading indicator component with customizable appearance.
 
 ### Animator
 
-A unified component that provides a single interface for all animation types with generic props.
+A unified component that provides a single interface for all animation types with generic props. Built with **react-native-reanimated** for optimal performance and smooth animations.
 
 **Features:**
 
@@ -721,7 +779,12 @@ A unified component that provides a single interface for all animation types wit
 - **Generic Props**: Consistent prop naming across all animations (e.g., `closeAfter` instead of animation-specific names)
 - **Modular Hooks**: Animation logic is separated into individual custom hooks
 - **Type Safety**: Full TypeScript support with proper typing
-- **Performance**: Only the specified animation runs, others are not loaded
+- **Performance**: Built with react-native-reanimated for native performance
+- **Smooth Animations**: Runs on the UI thread for 60fps animations
+
+**Requirements:**
+
+Requires `react-native-reanimated` as peer dependencies. Make sure to follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/3.x/fundamentals/getting-started) for platform-specific setup.
 
 **Generic Props:**
 
@@ -804,20 +867,23 @@ All animation types support these generic props:
 
 **Available Animation Types:**
 
-1. **fade**: Simple fade in/out
-2. **grow**: Scale-based growth animation
-3. **slide**: Directional slide animations
-4. **blink**: Continuous opacity blinking
-5. **float**: Floating up/down motion with fade
-6. **roll**: Combined rotation and translation
-7. **thrownup**: Spring-based upward animation
+1. **fade**: Simple fade in/out using opacity (native performance)
+2. **grow**: Scale-based growth animation with easing
+3. **slide**: Directional slide animations from screen edges
+4. **blink**: Continuous opacity blinking with repeat
+5. **float**: Floating up/down motion with fade effects
+6. **roll**: Combined rotation and translation effects
+7. **thrownup**: Spring-based upward animation with physics
+
+All animations run on the UI thread for optimal performance and smooth 60fps animations.
 
 **Using Animation Hooks Directly:**
 
-You can also use the animation hooks directly for custom implementations:
+You can also use the animation hooks directly for custom implementations with react-native-reanimated:
 
 ```tsx
 import { useFadeAnimation, useSlideAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 const MyComponent = () => {
   const { animatedStyle } = useFadeAnimation({
@@ -833,7 +899,17 @@ const MyComponent = () => {
 };
 ```
 
-**Migration from Old Components:**
+**Performance Benefits:**
+
+With react-native-reanimated, all animations:
+
+- **Run on the UI thread** for better performance
+- **Maintain 60fps** even during JavaScript thread blocking
+- **Use native drivers** automatically
+- **Support worklets** for complex animation logic
+- **Provide smooth gestures** and interactions
+
+**Migration from Legacy API:**
 
 Replace old individual animation components:
 
@@ -933,12 +1009,13 @@ function MyScreen() {
 
 ### Animation Hooks
 
-Access animation logic directly for custom implementations:
+Access animation logic directly for custom implementations using react-native-reanimated:
 
 #### useFadeAnimation
 
 ```tsx
 import { useFadeAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function FadeComponent() {
   const { animatedStyle } = useFadeAnimation({
@@ -958,6 +1035,7 @@ function FadeComponent() {
 
 ```tsx
 import { useSlideAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function SlideComponent() {
   const { animatedStyle } = useSlideAnimation({
@@ -978,6 +1056,7 @@ function SlideComponent() {
 
 ```tsx
 import { useGrowAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function GrowComponent() {
   const { animatedStyle } = useGrowAnimation({
@@ -1000,7 +1079,7 @@ function GrowComponent() {
 - `useRollAnimation` - For rotation and translation effects
 - `useThrownUpAnimation` - For spring-based upward animations
 
-All animation hooks accept similar configuration objects with properties like `duration`, `delay`, and animation-specific options.
+All animation hooks accept similar configuration objects with properties like `duration`, `delay`, and animation-specific options. They return `animatedStyle` objects that work with `Animated.View` from react-native-reanimated for optimal performance.
 
 ## 🎯 Advanced Usage
 
@@ -1110,4 +1189,4 @@ MIT © [Hoddy Inc](https://github.com/kinghoddy)
 
 ---
 
-**Need help?** [Open an issue](https://github.com/kinghoddy/hoddy-ui/issues) or check out our [examples](../../test/hoddyui).
+**Need help?** [Open an issue](https://github.com/kinghoddy/hoddy-ui/issues) or check out our [examples](../../test/my-app).

package/next/package.json

@@ -19,17 +19,17 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
-    "@types/react": "^18.2.6",
+    "@types/react": ">=18.2.6",
     "@types/react-native": "^0.72.0",
     "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
     "expo-router": ">=1.0.0",
     "expo-system-ui": ">=2.2.1",
-    "react": "^18.2.0",
+    "react": ">=18.2.0",
     "react-native": ">=0.71.8",
     "react-native-safe-area-context": ">=4.5.3",
-    "typescript": "^5.0.4"
+    "typescript": ">=5.0.4"
   },
   "keywords": [
     "react-native",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.1.4",
+  "version": "2.5.0",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -13,7 +13,7 @@
   "private": false,
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
-    "@react-navigation/native": ">=6.1.7",
+    "@react-navigation/native": ">=6.1.6",
     "@types/react": ">=18.2.6",
     "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
@@ -22,6 +22,7 @@
     "expo-system-ui": ">=2.2.1",
     "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
     "typescript": ">=5.0.4"
   },
@@ -34,9 +35,10 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.18.1",
-    "react-native-size-matters": "^0.4.0"
+    "react-native-size-matters": "^0.4.2"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "devDependencies": {}
 }

package/src/Components/Animators/Animator.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Animated } from "react-native";
+import Animated from "react-native-reanimated";
 import { AnimatorProps } from "../../types";
 import { useBlinkAnimation } from "./hooks/useBlinkAnimation";
 import { useFadeAnimation } from "./hooks/useFadeAnimation";

package/src/Components/Animators/hooks/useAppState.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { AppState, Platform } from "react-native";
 
 const useAppState = () => {
-  const [isActive, setIsActive] = useState(true);
+  const [isActive, setIsActive] = useState(AppState.currentState === "active");
 
   useEffect(() => {
     const handleAppStateChange = (nextAppState: string) => {
@@ -10,24 +10,17 @@ const useAppState = () => {
     };
 
     let subscription: any;
-    let blurSub: any;
-    let focusSub: any;
 
     if (Platform.OS === "android") {
-      blurSub = AppState.addEventListener("blur", () =>
-        handleAppStateChange("inactive")
-      );
-      focusSub = AppState.addEventListener("focus", () =>
-        handleAppStateChange("active")
-      );
+      // For Android, use the change event which covers both blur and focus
+      subscription = AppState.addEventListener("change", handleAppStateChange);
     } else {
+      // For iOS, use the change event as well
       subscription = AppState.addEventListener("change", handleAppStateChange);
     }
 
     return () => {
       subscription?.remove();
-      blurSub?.remove();
-      focusSub?.remove();
     };
   }, []);
 

package/src/Components/Animators/hooks/useBlinkAnimation.ts

@@ -1,5 +1,13 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseBlinkAnimationProps {
@@ -15,57 +23,56 @@ export const useBlinkAnimation = ({
   minOpacity = 0.5,
   maxOpacity = 1,
 }: UseBlinkAnimationProps = {}) => {
-  const opacity = useRef(new Animated.Value(maxOpacity)).current;
+  const opacity = useSharedValue(maxOpacity);
   const { isActive } = useAppState();
-  const blinkAnim = useRef<Animated.CompositeAnimation | null>(null);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
 
   const startBlinking = () => {
-    blinkAnim.current = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: minOpacity,
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(minOpacity, {
           duration: blinkDuration / 2,
           easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
         }),
-        Animated.timing(opacity, {
-          toValue: maxOpacity,
+        withTiming(maxOpacity, {
           duration: blinkDuration / 2,
           easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-      ])
+        })
+      ),
+      -1,
+      false
     );
-    blinkAnim.current.start();
   };
 
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      opacity.stopAnimation();
+      opacity.value = maxOpacity;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     if (delay > 0) {
       const timer = setTimeout(() => {
         startBlinking();
       }, delay);
       return () => {
         clearTimeout(timer);
-        opacity.stopAnimation();
-        blinkAnim.current?.stop();
+        opacity.value = maxOpacity;
       };
     } else {
       startBlinking();
     }
 
     return () => {
-      opacity.stopAnimation();
-      blinkAnim.current?.stop();
+      opacity.value = maxOpacity;
     };
-  }, [delay, blinkDuration, minOpacity, maxOpacity]);
+  }, [delay, blinkDuration, minOpacity, maxOpacity, isActive]);
 
   return {
-    animatedStyle: { opacity },
+    animatedStyle,
   };
 };

package/src/Components/Animators/hooks/useFadeAnimation.ts

@@ -1,5 +1,11 @@
-import { useEffect, useRef } from "react";
-import { Animated, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseFadeAnimationProps {
@@ -11,40 +17,38 @@ interface UseFadeAnimationProps {
 export const useFadeAnimation = ({
   duration = 1000,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
 }: UseFadeAnimationProps = {}) => {
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      opacity.stopAnimation();
+      opacity.value = 0;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Fade-in animation
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
+    opacity.value = withDelay(
       delay,
-      useNativeDriver: true,
-    }).start(() => {
-      if (closeAfter) {
-        setTimeout(() => {
-          Animated.timing(opacity, {
-            toValue: 0,
-            duration,
-            useNativeDriver: true,
-          }).start();
-        }, closeAfter);
-      }
-    });
-
-    return () => opacity.stopAnimation();
-  }, [opacity, duration, delay, closeAfter]);
+      withTiming(1, { duration }, () => {
+        if (closeAfter) {
+          // Schedule fade-out after closeAfter duration
+          setTimeout(() => {
+            opacity.value = withTiming(0, { duration });
+          }, closeAfter);
+        }
+      })
+    );
+  }, [opacity, duration, delay, closeAfter, isActive]);
 
   return {
-    animatedStyle: { opacity },
+    animatedStyle,
   };
 };

package/src/Components/Animators/hooks/useFloatAnimation.ts

@@ -1,5 +1,14 @@
 import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseFloatAnimationProps {
@@ -14,76 +23,79 @@ interface UseFloatAnimationProps {
 export const useFloatAnimation = ({
   duration = 800,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
   closeDuration = 600,
   floatDistance = 10,
   floatDuration = 1200,
 }: UseFloatAnimationProps = {}) => {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const translateY = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(0);
   const { isActive } = useAppState();
-  const floatAnim = useRef<Animated.CompositeAnimation | null>(null);
+  const isFloating = useRef(false);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }],
+    };
+  });
 
   const startFloating = () => {
-    floatAnim.current = Animated.loop(
-      Animated.sequence([
-        Animated.timing(translateY, {
-          toValue: -floatDistance,
-          duration: floatDuration / 2,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-        Animated.timing(translateY, {
-          toValue: floatDistance,
-          duration: floatDuration,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-        Animated.timing(translateY, {
-          toValue: 0,
-          duration: floatDuration / 2,
-          easing: Easing.inOut(Easing.quad),
-          useNativeDriver: true,
-        }),
-      ])
-    );
-    floatAnim.current.start();
+    if (!isFloating.current) {
+      isFloating.current = true;
+      translateY.value = withRepeat(
+        withSequence(
+          withTiming(-floatDistance, {
+            duration: floatDuration / 2,
+            easing: Easing.inOut(Easing.quad),
+          }),
+          withTiming(floatDistance, {
+            duration: floatDuration,
+            easing: Easing.inOut(Easing.quad),
+          }),
+          withTiming(0, {
+            duration: floatDuration / 2,
+            easing: Easing.inOut(Easing.quad),
+          })
+        ),
+        -1,
+        false
+      );
+    }
+  };
+
+  const stopFloating = () => {
+    isFloating.current = false;
+    translateY.value = withTiming(0, { duration: 200 });
   };
 
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      opacity.stopAnimation();
-      translateY.stopAnimation();
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Fade-in
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
+    opacity.value = withDelay(
       delay,
-      useNativeDriver: true,
-    }).start(() => {
-      startFloating();
+      withTiming(1, { duration }, () => {
+        startFloating();
 
-      if (closeAfter) {
-        setTimeout(() => {
-          floatAnim.current?.stop();
-
-          Animated.timing(opacity, {
-            toValue: 0,
-            duration: closeDuration,
-            useNativeDriver: true,
-          }).start();
-        }, closeAfter);
-      }
-    });
+        if (closeAfter) {
+          setTimeout(() => {
+            stopFloating();
+            opacity.value = withTiming(0, { duration: closeDuration });
+          }, closeAfter);
+        }
+      })
+    );
 
     return () => {
-      opacity.stopAnimation();
-      translateY.stopAnimation();
-      floatAnim.current?.stop();
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
     };
   }, [
     duration,
@@ -92,12 +104,10 @@ export const useFloatAnimation = ({
     closeDuration,
     floatDistance,
     floatDuration,
+    isActive,
   ]);
 
   return {
-    animatedStyle: {
-      opacity,
-      transform: [{ translateY }],
-    },
+    animatedStyle,
   };
 };