@croacroa/react-native-template 1.0.0

package/components/ui/Skeleton.tsx

@@ -0,0 +1,180 @@
+import { useEffect } from "react";
+import { View, ViewProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  interpolate,
+} from "react-native-reanimated";
+import { cn } from "@/utils/cn";
+import { useTheme } from "@/hooks/useTheme";
+
+interface SkeletonProps extends ViewProps {
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  className?: string;
+}
+
+/**
+ * Animated skeleton loader component
+ * Features shimmer effect that works in both light and dark mode
+ */
+export function Skeleton({
+  width = "100%",
+  height = 20,
+  borderRadius = 8,
+  className,
+  style,
+  ...props
+}: SkeletonProps) {
+  const { isDark } = useTheme();
+  const shimmer = useSharedValue(0);
+
+  useEffect(() => {
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: 1500 }),
+      -1, // infinite
+      false // no reverse
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(shimmer.value, [0, 0.5, 1], [0.3, 0.6, 0.3]);
+    return { opacity };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: width as number | `${number}%`,
+          height: height as number | `${number}%`,
+          borderRadius,
+          backgroundColor: isDark ? "#334155" : "#e2e8f0",
+        },
+        animatedStyle,
+        style,
+      ]}
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Text skeleton - for single line text
+ */
+export function SkeletonText({
+  width = "100%",
+  height = 16,
+  className,
+  ...props
+}: SkeletonProps) {
+  return (
+    <Skeleton
+      width={width}
+      height={height}
+      borderRadius={4}
+      className={className}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Circle skeleton - for avatars
+ */
+export function SkeletonCircle({
+  size = 48,
+  className,
+  ...props
+}: Omit<SkeletonProps, "width" | "height" | "borderRadius"> & { size?: number }) {
+  return (
+    <Skeleton
+      width={size}
+      height={size}
+      borderRadius={size / 2}
+      className={className}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Card skeleton - common pattern for list items
+ */
+export function SkeletonCard({ className }: { className?: string }) {
+  return (
+    <View
+      className={cn(
+        "rounded-xl bg-surface-light p-4 dark:bg-surface-dark",
+        className
+      )}
+    >
+      <View className="flex-row items-center gap-3">
+        <SkeletonCircle size={48} />
+        <View className="flex-1 gap-2">
+          <SkeletonText width="60%" height={14} />
+          <SkeletonText width="40%" height={12} />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Profile skeleton - for profile screens
+ */
+export function SkeletonProfile({ className }: { className?: string }) {
+  return (
+    <View className={cn("items-center gap-4", className)}>
+      <SkeletonCircle size={96} />
+      <SkeletonText width={150} height={24} />
+      <SkeletonText width={200} height={14} />
+    </View>
+  );
+}
+
+/**
+ * List skeleton - for list views
+ */
+export function SkeletonList({
+  count = 5,
+  className,
+}: {
+  count?: number;
+  className?: string;
+}) {
+  return (
+    <View className={cn("gap-3", className)}>
+      {Array.from({ length: count }).map((_, index) => (
+        <SkeletonCard key={index} />
+      ))}
+    </View>
+  );
+}
+
+/**
+ * Form skeleton - for form screens
+ */
+export function SkeletonForm({ className }: { className?: string }) {
+  return (
+    <View className={cn("gap-4", className)}>
+      <View className="gap-2">
+        <SkeletonText width={60} height={12} />
+        <Skeleton height={48} />
+      </View>
+      <View className="gap-2">
+        <SkeletonText width={80} height={12} />
+        <Skeleton height={48} />
+      </View>
+      <View className="gap-2">
+        <SkeletonText width={70} height={12} />
+        <Skeleton height={48} />
+      </View>
+      <Skeleton height={48} className="mt-4" />
+    </View>
+  );
+}

package/components/ui/index.ts

@@ -0,0 +1,18 @@
+export { Button } from "./Button";
+export { Input } from "./Input";
+export { Card } from "./Card";
+export { Modal } from "./Modal";
+export { AnimatedButton } from "./AnimatedButton";
+export { AnimatedCard, AnimatedList } from "./AnimatedCard";
+export { Select } from "./Select";
+export type { SelectOption } from "./Select";
+export { Checkbox, CheckboxGroup } from "./Checkbox";
+export { BottomSheet, useBottomSheet } from "./BottomSheet";
+export type { BottomSheetRef } from "./BottomSheet";
+export { Avatar, AvatarGroup } from "./Avatar";
+export { Badge, Chip, CountBadge } from "./Badge";
+export {
+  OptimizedImage,
+  BackgroundImage,
+  ProgressiveImage,
+} from "./OptimizedImage";

package/constants/config.ts

@@ -0,0 +1,54 @@
+import Constants from "expo-constants";
+
+// Environment detection
+export const IS_DEV = __DEV__;
+export const IS_PREVIEW =
+  Constants.expoConfig?.extra?.APP_VARIANT === "preview";
+export const IS_PROD = !IS_DEV && !IS_PREVIEW;
+
+// API Configuration
+// TODO: Replace with your actual API URLs
+export const API_URL = IS_PROD
+  ? "https://api.yourapp.com"
+  : IS_PREVIEW
+    ? "https://staging-api.yourapp.com"
+    : "http://localhost:3000";
+
+// App Configuration
+export const APP_NAME = Constants.expoConfig?.name || "YourApp";
+export const APP_VERSION = Constants.expoConfig?.version || "1.0.0";
+export const APP_SCHEME = Constants.expoConfig?.scheme || "yourapp";
+
+// Feature Flags
+export const FEATURES = {
+  ENABLE_ANALYTICS: IS_PROD,
+  ENABLE_CRASH_REPORTING: IS_PROD,
+  ENABLE_PUSH_NOTIFICATIONS: true,
+  ENABLE_BIOMETRIC_AUTH: true,
+  ENABLE_PERFORMANCE_MONITORING: IS_DEV || IS_PREVIEW,
+} as const;
+
+// Export individual flags for convenience
+export const ENABLE_ANALYTICS = FEATURES.ENABLE_ANALYTICS;
+export const ENABLE_CRASH_REPORTING = FEATURES.ENABLE_CRASH_REPORTING;
+export const ENABLE_PUSH_NOTIFICATIONS = FEATURES.ENABLE_PUSH_NOTIFICATIONS;
+export const ENABLE_BIOMETRIC_AUTH = FEATURES.ENABLE_BIOMETRIC_AUTH;
+export const ENABLE_PERFORMANCE_MONITORING =
+  FEATURES.ENABLE_PERFORMANCE_MONITORING;
+
+// Timing Constants
+export const TIMING = {
+  DEBOUNCE_MS: 300,
+  ANIMATION_DURATION_MS: 200,
+  TOAST_DURATION_MS: 3000,
+  API_TIMEOUT_MS: 30000,
+} as const;
+
+// Storage Keys
+export const STORAGE_KEYS = {
+  AUTH_TOKEN: "auth_token",
+  USER: "auth_user",
+  THEME: "theme_mode",
+  ONBOARDING_COMPLETED: "onboarding_completed",
+  PUSH_TOKEN: "push_token",
+} as const;

package/docs/adr/001-state-management.md

@@ -0,0 +1,79 @@
+# ADR-001: Use Zustand for State Management
+
+## Status
+
+Accepted
+
+## Date
+
+2024-01-01
+
+## Context
+
+We need a state management solution for our React Native application. The requirements are:
+
+1. Simple API with minimal boilerplate
+2. Good TypeScript support
+3. Small bundle size (mobile performance matters)
+4. Support for persistence
+5. Devtools support for debugging
+6. No need for complex middleware or actions
+
+Options considered:
+
+- **Redux Toolkit**: Industry standard, but verbose for our needs
+- **MobX**: Powerful but adds complexity with observables
+- **Jotai**: Atomic state, good for simple cases
+- **Zustand**: Simple, small, flexible
+- **React Context**: Built-in, but can cause performance issues
+
+## Decision
+
+We chose **Zustand** for global state management.
+
+## Rationale
+
+1. **Simplicity**: Creating a store is just a function call
+
+   ```ts
+   const useStore = create((set) => ({
+     count: 0,
+     increment: () => set((s) => ({ count: s.count + 1 })),
+   }));
+   ```
+
+2. **Bundle size**: ~1KB gzipped vs Redux's ~7KB
+
+3. **TypeScript**: Excellent inference, minimal type annotations needed
+
+4. **Persistence**: Easy integration with AsyncStorage via middleware
+
+5. **No Providers**: Works outside React components, useful for API services
+
+6. **Selective subscriptions**: Components only re-render when selected state changes
+
+## Consequences
+
+### Positive
+
+- Faster development with less boilerplate
+- Smaller bundle size
+- Easy to test stores
+- Can use stores outside React (e.g., in API handlers)
+
+### Negative
+
+- Less structured than Redux (could lead to inconsistent patterns)
+- Smaller ecosystem than Redux
+- Team needs to establish conventions
+
+### Mitigation
+
+- Document store patterns in CONTRIBUTING.md
+- Use TypeScript for store definitions
+- Keep stores focused (one concern per store)
+
+## References
+
+- [Zustand Documentation](https://github.com/pmndrs/zustand)
+- [React Native Performance](https://reactnative.dev/docs/performance)

package/docs/adr/002-styling-approach.md

@@ -0,0 +1,130 @@
+# ADR-002: Use NativeWind (Tailwind CSS) for Styling
+
+## Status
+
+Accepted
+
+## Date
+
+2024-01-01
+
+## Context
+
+We need a consistent styling approach for our React Native application. The requirements are:
+
+1. Developer productivity (fast to write styles)
+2. Consistent design system
+3. Dark mode support
+4. Good performance
+5. Familiar to web developers
+
+Options considered:
+
+- **StyleSheet.create**: React Native's built-in solution
+- **Styled Components**: CSS-in-JS, popular in web
+- **NativeWind**: Tailwind CSS for React Native
+- **Tamagui**: Universal design system
+- **Dripsy**: Responsive design system
+
+## Decision
+
+We chose **NativeWind** (Tailwind CSS for React Native).
+
+## Rationale
+
+1. **Developer Experience**: Utility classes are fast to write
+
+   ```tsx
+   // NativeWind
+   <View className="p-4 bg-white rounded-xl shadow-lg">
+
+   // StyleSheet
+   <View style={[styles.container, styles.rounded, styles.shadow]}>
+   ```
+
+2. **Design System**: Tailwind's design tokens ensure consistency
+
+3. **Dark Mode**: Built-in support with `dark:` prefix
+
+   ```tsx
+   <View className="bg-white dark:bg-slate-900">
+   ```
+
+4. **Responsive Design**: Support for breakpoints
+
+   ```tsx
+   <View className="p-2 md:p-4 lg:p-6">
+   ```
+
+5. **Familiarity**: Web developers already know Tailwind
+
+6. **Performance**: Compiled at build time, no runtime overhead
+
+## Consequences
+
+### Positive
+
+- Faster styling with utility classes
+- Consistent spacing, colors, typography
+- Easy dark mode implementation
+- Small runtime footprint
+- Web developers can contribute quickly
+
+### Negative
+
+- Long className strings can be hard to read
+- Learning curve for Tailwind utilities
+- Some RN-specific styles need custom config
+
+### Mitigation
+
+- Use `cn()` utility to organize classes
+- Create component abstractions for complex patterns
+- Document custom Tailwind config
+
+## Implementation
+
+### Configuration
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: ["./app/**/*.{js,tsx}", "./components/**/*.{js,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          /* ... */
+        },
+        background: { light: "#fff", dark: "#0f172a" },
+      },
+    },
+  },
+};
+```
+
+### Usage Pattern
+
+```tsx
+import { cn } from "@/utils/cn";
+
+function Card({ className, ...props }) {
+  return (
+    <View
+      className={cn(
+        "p-4 rounded-xl",
+        "bg-white dark:bg-slate-800",
+        "border border-gray-200 dark:border-gray-700",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## References
+
+- [NativeWind Documentation](https://www.nativewind.dev/)
+- [Tailwind CSS](https://tailwindcss.com/)

package/docs/adr/003-data-fetching.md

@@ -0,0 +1,155 @@
+# ADR-003: Use React Query for Data Fetching
+
+## Status
+
+Accepted
+
+## Date
+
+2024-01-01
+
+## Context
+
+We need a data fetching solution that handles:
+
+1. Caching and cache invalidation
+2. Loading and error states
+3. Optimistic updates
+4. Offline support
+5. Request deduplication
+6. Background refetching
+
+Options considered:
+
+- **fetch/axios only**: Manual state management
+- **SWR**: Lightweight, good for web
+- **React Query (TanStack Query)**: Full-featured
+- **RTK Query**: Redux-based
+- **Apollo Client**: GraphQL-focused
+
+## Decision
+
+We chose **React Query (TanStack Query)** for server state management.
+
+## Rationale
+
+1. **Comprehensive Feature Set**
+   - Automatic caching and cache invalidation
+   - Background refetching
+   - Optimistic updates
+   - Infinite queries for pagination
+   - Offline support with persistence
+
+2. **Excellent Developer Experience**
+
+   ```tsx
+   const { data, isLoading, error } = useQuery({
+     queryKey: ["users", userId],
+     queryFn: () => api.get(`/users/${userId}`),
+   });
+   ```
+
+3. **Offline Support**: Works great with AsyncStorage persister
+
+   ```tsx
+   const persister = createAsyncStoragePersister({
+     storage: AsyncStorage,
+   });
+
+   <PersistQueryClientProvider
+     client={queryClient}
+     persistOptions={{ persister }}
+   >
+   ```
+
+4. **Performance**: Smart refetching, request deduplication
+
+5. **DevTools**: React Query DevTools for debugging
+
+## Consequences
+
+### Positive
+
+- No need for manual cache management
+- Automatic loading/error states
+- Works offline with persisted cache
+- Reduces boilerplate significantly
+- Battle-tested and well-documented
+
+### Negative
+
+- Learning curve for query keys and cache invalidation
+- Can be overkill for simple apps
+- Adds bundle size (~12KB gzipped)
+
+### Mitigation
+
+- Create query key factories for consistency
+- Document common patterns
+- Create custom hooks for reusable queries
+
+## Implementation
+
+### Query Client Configuration
+
+```ts
+// services/queryClient.ts
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 30 * 60 * 1000, // 30 minutes
+      retry: 3,
+      refetchOnReconnect: true,
+    },
+  },
+});
+```
+
+### Query Keys Factory
+
+```ts
+// hooks/useApi.ts
+export const queryKeys = {
+  users: {
+    all: ["users"] as const,
+    detail: (id: string) => ["users", id] as const,
+    me: () => ["users", "me"] as const,
+  },
+  posts: {
+    all: ["posts"] as const,
+    list: (filters: PostFilters) => ["posts", filters] as const,
+    detail: (id: string) => ["posts", id] as const,
+  },
+};
+```
+
+### Custom Hook Pattern
+
+```ts
+export function useUser(userId: string) {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId),
+    queryFn: () => api.get<User>(`/users/${userId}`),
+    enabled: !!userId,
+  });
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: UpdateUserInput) => api.patch<User>("/users/me", data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.users.me(),
+      });
+    },
+  });
+}
+```
+
+## References
+
+- [TanStack Query Documentation](https://tanstack.com/query)
+- [React Query Offline Support](https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient)