@croacroa/react-native-template 1.0.0

package/components/onboarding/OnboardingScreen.tsx

@@ -0,0 +1,370 @@
+import { useRef, useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  Dimensions,
+  ViewToken,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+  Extrapolation,
+} from "react-native-reanimated";
+import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { storage } from "@/services/storage";
+import { Button } from "@/components/ui/Button";
+import { cn } from "@/utils/cn";
+import { STORAGE_KEYS } from "@/constants/config";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export interface OnboardingSlide {
+  id: string;
+  title: string;
+  description: string;
+  icon: keyof typeof Ionicons.glyphMap;
+  iconColor?: string;
+  backgroundColor?: string;
+}
+
+interface OnboardingScreenProps {
+  /**
+   * Slides to display
+   */
+  slides?: OnboardingSlide[];
+
+  /**
+   * Called when onboarding is completed
+   */
+  onComplete?: () => void;
+
+  /**
+   * Whether to show skip button
+   */
+  showSkip?: boolean;
+
+  /**
+   * Text for the final button
+   */
+  finalButtonText?: string;
+}
+
+const DEFAULT_SLIDES: OnboardingSlide[] = [
+  {
+    id: "1",
+    title: "Welcome to the App",
+    description:
+      "Discover a new way to manage your tasks and boost your productivity.",
+    icon: "rocket-outline",
+    iconColor: "#10b981",
+  },
+  {
+    id: "2",
+    title: "Stay Organized",
+    description:
+      "Keep all your important information in one place. Access it anywhere, anytime.",
+    icon: "folder-outline",
+    iconColor: "#3b82f6",
+  },
+  {
+    id: "3",
+    title: "Secure & Private",
+    description:
+      "Your data is encrypted and protected. Only you have access to your information.",
+    icon: "shield-checkmark-outline",
+    iconColor: "#8b5cf6",
+  },
+  {
+    id: "4",
+    title: "Ready to Start?",
+    description:
+      "Create your account and start your journey towards better productivity.",
+    icon: "checkmark-circle-outline",
+    iconColor: "#10b981",
+  },
+];
+
+export function OnboardingScreen({
+  slides = DEFAULT_SLIDES,
+  onComplete,
+  showSkip = true,
+  finalButtonText = "Get Started",
+}: OnboardingScreenProps) {
+  const { isDark } = useTheme();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const flatListRef = useRef<FlatList>(null);
+  const scrollX = useSharedValue(0);
+
+  const isLastSlide = currentIndex === slides.length - 1;
+
+  const handleComplete = useCallback(async () => {
+    await storage.set(STORAGE_KEYS.ONBOARDING_COMPLETED, true);
+    onComplete?.();
+    router.replace("/(public)/login");
+  }, [onComplete]);
+
+  const handleSkip = useCallback(() => {
+    handleComplete();
+  }, [handleComplete]);
+
+  const handleNext = useCallback(() => {
+    if (isLastSlide) {
+      handleComplete();
+    } else {
+      flatListRef.current?.scrollToIndex({
+        index: currentIndex + 1,
+        animated: true,
+      });
+    }
+  }, [currentIndex, isLastSlide, handleComplete]);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      scrollX.value = event.nativeEvent.contentOffset.x;
+    },
+    [scrollX]
+  );
+
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      if (viewableItems.length > 0 && viewableItems[0].index !== null) {
+        setCurrentIndex(viewableItems[0].index);
+      }
+    },
+    []
+  );
+
+  const viewabilityConfig = useRef({
+    viewAreaCoveragePercentThreshold: 50,
+  }).current;
+
+  const renderSlide = ({
+    item,
+    index,
+  }: {
+    item: OnboardingSlide;
+    index: number;
+  }) => (
+    <SlideItem item={item} index={index} scrollX={scrollX} isDark={isDark} />
+  );
+
+  return (
+    <View
+      className={cn(
+        "flex-1",
+        isDark ? "bg-background-dark" : "bg-background-light"
+      )}
+    >
+      {/* Skip button */}
+      {showSkip && !isLastSlide && (
+        <View className="absolute top-16 right-6 z-10">
+          <Button
+            variant="ghost"
+            size="sm"
+            onPress={handleSkip}
+            accessibilityLabel="Skip onboarding"
+            accessibilityRole="button"
+          >
+            Skip
+          </Button>
+        </View>
+      )}
+
+      {/* Slides */}
+      <FlatList
+        ref={flatListRef}
+        data={slides}
+        renderItem={renderSlide}
+        keyExtractor={(item) => item.id}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        bounces={false}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
+        getItemLayout={(_, index) => ({
+          length: SCREEN_WIDTH,
+          offset: SCREEN_WIDTH * index,
+          index,
+        })}
+      />
+
+      {/* Bottom section */}
+      <View className="px-6 pb-12">
+        {/* Pagination dots */}
+        <View className="flex-row justify-center items-center mb-8">
+          {slides.map((_, index) => (
+            <PaginationDot
+              key={index}
+              index={index}
+              scrollX={scrollX}
+              isDark={isDark}
+            />
+          ))}
+        </View>
+
+        {/* Action button */}
+        <Button
+          variant="primary"
+          size="lg"
+          onPress={handleNext}
+          className="w-full"
+          accessibilityLabel={isLastSlide ? finalButtonText : "Next slide"}
+          accessibilityRole="button"
+        >
+          {isLastSlide ? finalButtonText : "Next"}
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Individual slide component
+ */
+interface SlideItemProps {
+  item: OnboardingSlide;
+  index: number;
+  scrollX: Animated.SharedValue<number>;
+  isDark: boolean;
+}
+
+function SlideItem({ item, index, scrollX, isDark }: SlideItemProps) {
+  const animatedStyle = useAnimatedStyle(() => {
+    const inputRange = [
+      (index - 1) * SCREEN_WIDTH,
+      index * SCREEN_WIDTH,
+      (index + 1) * SCREEN_WIDTH,
+    ];
+
+    const scale = interpolate(
+      scrollX.value,
+      inputRange,
+      [0.8, 1, 0.8],
+      Extrapolation.CLAMP
+    );
+
+    const opacity = interpolate(
+      scrollX.value,
+      inputRange,
+      [0.5, 1, 0.5],
+      Extrapolation.CLAMP
+    );
+
+    const translateY = interpolate(
+      scrollX.value,
+      inputRange,
+      [50, 0, 50],
+      Extrapolation.CLAMP
+    );
+
+    return {
+      transform: [{ scale }, { translateY }],
+      opacity,
+    };
+  });
+
+  return (
+    <View
+      style={{ width: SCREEN_WIDTH }}
+      className="flex-1 items-center justify-center px-8"
+      accessibilityRole="text"
+      accessibilityLabel={`${item.title}. ${item.description}`}
+    >
+      <Animated.View style={animatedStyle} className="items-center">
+        {/* Icon */}
+        <View
+          className={cn(
+            "w-32 h-32 rounded-full items-center justify-center mb-8",
+            isDark ? "bg-surface-dark" : "bg-gray-100"
+          )}
+        >
+          <Ionicons
+            name={item.icon}
+            size={64}
+            color={item.iconColor || "#10b981"}
+          />
+        </View>
+
+        {/* Title */}
+        <Text
+          className={cn(
+            "text-2xl font-bold text-center mb-4",
+            isDark ? "text-text-dark" : "text-text-light"
+          )}
+        >
+          {item.title}
+        </Text>
+
+        {/* Description */}
+        <Text
+          className={cn(
+            "text-base text-center leading-6",
+            isDark ? "text-muted-dark" : "text-muted-light"
+          )}
+        >
+          {item.description}
+        </Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+/**
+ * Pagination dot component
+ */
+interface PaginationDotProps {
+  index: number;
+  scrollX: Animated.SharedValue<number>;
+  isDark: boolean;
+}
+
+function PaginationDot({ index, scrollX, isDark }: PaginationDotProps) {
+  const animatedStyle = useAnimatedStyle(() => {
+    const inputRange = [
+      (index - 1) * SCREEN_WIDTH,
+      index * SCREEN_WIDTH,
+      (index + 1) * SCREEN_WIDTH,
+    ];
+
+    const width = interpolate(
+      scrollX.value,
+      inputRange,
+      [8, 24, 8],
+      Extrapolation.CLAMP
+    );
+
+    const opacity = interpolate(
+      scrollX.value,
+      inputRange,
+      [0.4, 1, 0.4],
+      Extrapolation.CLAMP
+    );
+
+    return {
+      width: withSpring(width, { damping: 15, stiffness: 200 }),
+      opacity,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className={cn(
+        "h-2 rounded-full mx-1",
+        isDark ? "bg-primary-400" : "bg-primary-500"
+      )}
+    />
+  );
+}
+
+export default OnboardingScreen;

package/components/onboarding/index.ts

@@ -0,0 +1,2 @@
+export { OnboardingScreen } from "./OnboardingScreen";
+export type { OnboardingSlide } from "./OnboardingScreen";

package/components/ui/AnimatedButton.tsx

@@ -0,0 +1,156 @@
+import { forwardRef } from "react";
+import { Text, ActivityIndicator, PressableProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  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";
+
+interface AnimatedButtonProps extends Omit<PressableProps, "style"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  className?: string;
+  textClassName?: string;
+  children: React.ReactNode;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary: "bg-primary-600",
+  secondary: "bg-gray-200 dark:bg-gray-700",
+  outline: "border-2 border-gray-300 dark:border-gray-600 bg-transparent",
+  ghost: "bg-transparent",
+  danger: "bg-red-600",
+};
+
+const variantTextStyles: Record<ButtonVariant, string> = {
+  primary: "text-white",
+  secondary: "text-text-light dark:text-text-dark",
+  outline: "text-text-light dark:text-text-dark",
+  ghost: "text-primary-600 dark:text-primary-400",
+  danger: "text-white",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-6 py-4",
+};
+
+const textSizeStyles: Record<ButtonSize, string> = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+/**
+ * Animated Button component with spring physics
+ * Features:
+ * - Scale down on press with spring animation
+ * - Opacity change on press
+ * - Smooth loading state transition
+ */
+export const AnimatedButton = forwardRef<
+  Animated.View,
+  AnimatedButtonProps
+>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      disabled,
+      className,
+      textClassName,
+      children,
+      onPress,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || isLoading;
+    const scale = useSharedValue(1);
+    const opacity = useSharedValue(1);
+
+    const tap = Gesture.Tap()
+      .enabled(!isDisabled)
+      .onBegin(() => {
+        scale.value = withSpring(0.95, {
+          damping: 15,
+          stiffness: 400,
+        });
+        opacity.value = withTiming(0.8, { duration: 100 });
+      })
+      .onFinalize(() => {
+        scale.value = withSpring(1, {
+          damping: 15,
+          stiffness: 400,
+        });
+        opacity.value = withTiming(1, { duration: 100 });
+      })
+      .onEnd(() => {
+        if (onPress) {
+          // Run on JS thread
+          onPress({} as any);
+        }
+      });
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scale.value }],
+      opacity: isDisabled ? 0.5 : opacity.value,
+    }));
+
+    return (
+      <GestureDetector gesture={tap}>
+        <Animated.View
+          ref={ref}
+          style={animatedStyle}
+          className={cn(
+            "flex-row items-center justify-center rounded-xl overflow-hidden",
+            variantStyles[variant],
+            sizeStyles[size],
+            className
+          )}
+          {...props}
+        >
+          {isLoading ? (
+            <ActivityIndicator
+              color={
+                variant === "primary" || variant === "danger"
+                  ? "#ffffff"
+                  : "#3b82f6"
+              }
+              size="small"
+            />
+          ) : typeof children === "string" ? (
+            <Text
+              className={cn(
+                "font-semibold",
+                variantTextStyles[variant],
+                textSizeStyles[size],
+                textClassName
+              )}
+            >
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </Animated.View>
+      </GestureDetector>
+    );
+  }
+);
+
+AnimatedButton.displayName = "AnimatedButton";

package/components/ui/AnimatedCard.tsx

@@ -0,0 +1,108 @@
+import { ReactNode } from "react";
+import { ViewProps, Pressable } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  FadeIn,
+  FadeOut,
+  Layout,
+} from "react-native-reanimated";
+import { cn } from "@/utils/cn";
+
+interface AnimatedCardProps extends Omit<ViewProps, "style"> {
+  variant?: "default" | "elevated" | "outlined";
+  className?: string;
+  children: ReactNode;
+  onPress?: () => void;
+  entering?: boolean;
+  index?: number;
+}
+
+/**
+ * Animated Card component with various effects
+ * Features:
+ * - Entrance animation with stagger based on index
+ * - Press animation with scale
+ * - Layout animation for list reordering
+ */
+export function AnimatedCard({
+  variant = "default",
+  className,
+  children,
+  onPress,
+  entering = true,
+  index = 0,
+  ...props
+}: AnimatedCardProps) {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    if (onPress) {
+      scale.value = withSpring(0.98, { damping: 15, stiffness: 400 });
+    }
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1, { damping: 15, stiffness: 400 });
+  };
+
+  const content = (
+    <Animated.View
+      entering={entering ? FadeIn.delay(index * 50).springify() : undefined}
+      exiting={FadeOut.duration(200)}
+      layout={Layout.springify()}
+      style={animatedStyle}
+      className={cn(
+        "rounded-xl",
+        variant === "default" && "bg-surface-light dark:bg-surface-dark",
+        variant === "elevated" &&
+          "bg-surface-light shadow-lg dark:bg-surface-dark",
+        variant === "outlined" &&
+          "border-2 border-gray-200 bg-transparent dark:border-gray-700",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Animated.View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+}
+
+/**
+ * Animated list wrapper for staggered animations
+ */
+export function AnimatedList({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Animated.View
+      entering={FadeIn.duration(300)}
+      className={cn("gap-3", className)}
+    >
+      {children}
+    </Animated.View>
+  );
+}