@croacroa/react-native-template 2.1.0 → 3.2.0

package/components/providers/index.ts

@@ -1,21 +1,24 @@
-/**
- * @fileoverview Provider components for app-wide functionality
- * @module components/providers
- *
- * Error Boundary Usage:
- * - Use `ErrorBoundary` (from components/ErrorBoundary) for app root with Sentry integration
- * - Use `LocalErrorBoundary` for local async patterns (lighter, no Sentry)
- */
-
-// Main ErrorBoundary with Sentry integration - use at app root
-export { ErrorBoundary, withErrorBoundary } from "../ErrorBoundary";
-
-// Local boundaries for async patterns - lighter weight, no Sentry
-export {
-  LocalErrorBoundary,
-  SuspenseBoundary,
-  AsyncBoundary,
-  QueryBoundary,
-  BoundaryProvider,
-  useBoundary,
-} from "./SuspenseBoundary";
+/**
+ * @fileoverview Provider components for app-wide functionality
+ * @module components/providers
+ *
+ * Error Boundary Usage:
+ * - Use `ErrorBoundary` (from components/ErrorBoundary) for app root with Sentry integration
+ * - Use `LocalErrorBoundary` for local async patterns (lighter, no Sentry)
+ */
+
+// Main ErrorBoundary with Sentry integration - use at app root
+export { ErrorBoundary, withErrorBoundary } from "../ErrorBoundary";
+
+// Local boundaries for async patterns - lighter weight, no Sentry
+export {
+  LocalErrorBoundary,
+  SuspenseBoundary,
+  AsyncBoundary,
+  QueryBoundary,
+  BoundaryProvider,
+  useBoundary,
+} from "./SuspenseBoundary";
+
+// Analytics
+export { AnalyticsProvider } from "./AnalyticsProvider";

package/components/ui/AnimatedButton.tsx

@@ -5,15 +5,10 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   withTiming,
-  interpolate,
 } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { cn } from "@/utils/cn";
 
-const AnimatedPressable = Animated.createAnimatedComponent(
-  require("react-native").Pressable
-);
-
 type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
 
@@ -61,10 +56,7 @@ const textSizeStyles: Record<ButtonSize, string> = {
  * - Opacity change on press
  * - Smooth loading state transition
  */
-export const AnimatedButton = forwardRef<
-  Animated.View,
-  AnimatedButtonProps
->(
+export const AnimatedButton = forwardRef<Animated.View, AnimatedButtonProps>(
   (
     {
       variant = "primary",

package/components/ui/AnimatedList.tsx

@@ -0,0 +1,98 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+import Animated from "react-native-reanimated";
+import type { WithTimingConfig } from "react-native-reanimated";
+
+import { useStaggeredEntry } from "@/hooks/useAnimatedEntry";
+import type { EntryAnimation } from "@/utils/animations/presets";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface AnimatedListItemProps extends Omit<ViewProps, "style"> {
+  /**
+   * Position of this item in the list (0-based).
+   * Used to calculate the stagger delay.
+   */
+  index: number;
+
+  /**
+   * Entry animation type
+   * @default 'slideUp'
+   */
+  animation?: EntryAnimation;
+
+  /**
+   * Delay between each item's animation start (ms)
+   * @default 50
+   */
+  staggerDelay?: number;
+
+  /**
+   * Timing configuration override
+   */
+  timing?: WithTimingConfig;
+
+  /**
+   * Item content
+   */
+  children: ReactNode;
+
+  /**
+   * Additional style applied to the wrapper
+   */
+  style?: ViewProps["style"];
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * List item wrapper that animates in with a stagger effect.
+ *
+ * Each item plays the same entry animation but starts after a delay
+ * proportional to its `index`, creating a cascading reveal.
+ *
+ * @example
+ * ```tsx
+ * function UserList({ users }: { users: User[] }) {
+ *   return (
+ *     <View>
+ *       {users.map((user, index) => (
+ *         <AnimatedListItem
+ *           key={user.id}
+ *           index={index}
+ *           animation="slideUp"
+ *           staggerDelay={60}
+ *         >
+ *           <UserCard user={user} />
+ *         </AnimatedListItem>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function AnimatedListItem({
+  index,
+  animation = "slideUp",
+  staggerDelay = 50,
+  timing,
+  children,
+  style,
+  ...props
+}: AnimatedListItemProps) {
+  const { animatedStyle } = useStaggeredEntry(index, {
+    animation,
+    staggerDelay,
+    timing,
+  });
+
+  return (
+    <Animated.View style={[animatedStyle, style]} {...props}>
+      {children}
+    </Animated.View>
+  );
+}

package/components/ui/AnimatedScreen.tsx

@@ -0,0 +1,89 @@
+import { ReactNode } from "react";
+import { ViewProps, StyleSheet } from "react-native";
+import Animated from "react-native-reanimated";
+import type { WithTimingConfig } from "react-native-reanimated";
+
+import { useAnimatedEntry } from "@/hooks/useAnimatedEntry";
+import type { EntryAnimation } from "@/utils/animations/presets";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface AnimatedScreenProps extends Omit<ViewProps, "style"> {
+  /**
+   * Entry animation to play when the screen mounts
+   * @default 'fadeIn'
+   */
+  animation?: EntryAnimation;
+
+  /**
+   * Delay before the animation starts (ms)
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * Timing configuration override
+   */
+  timing?: WithTimingConfig;
+
+  /**
+   * Screen content
+   */
+  children: ReactNode;
+
+  /**
+   * Additional style applied to the wrapper
+   */
+  style?: ViewProps["style"];
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Screen wrapper that plays an entry animation on mount.
+ *
+ * Wraps children in an `Animated.View` with `flex: 1` so it fills the
+ * available space, then applies the chosen entry animation via
+ * `useAnimatedEntry`.
+ *
+ * @example
+ * ```tsx
+ * export default function HomeScreen() {
+ *   return (
+ *     <AnimatedScreen animation="slideUp" delay={100}>
+ *       <Text>Welcome home!</Text>
+ *     </AnimatedScreen>
+ *   );
+ * }
+ * ```
+ */
+export function AnimatedScreen({
+  animation = "fadeIn",
+  delay = 0,
+  timing,
+  children,
+  style,
+  ...props
+}: AnimatedScreenProps) {
+  const { animatedStyle } = useAnimatedEntry({
+    animation,
+    delay,
+    timing,
+  });
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle, style]} {...props}>
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});