@croacroa/react-native-template 2.1.0 → 3.2.0

package/constants/config.ts

@@ -1,97 +1,135 @@
-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;
-
-// Security Configuration
-export const SECURITY = {
-  /**
-   * SSL Pinning configuration for enhanced network security.
-   * Add your API server's certificate public key hashes here.
-   *
-   * To generate a pin from your certificate:
-   * 1. Get your server's certificate: openssl s_client -connect api.yourapp.com:443
-   * 2. Extract public key: openssl x509 -pubkey -noout -in cert.pem
-   * 3. Generate hash: openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
-   *
-   * @example
-   * SSL_PINS: {
-   *   "api.yourapp.com": [
-   *     "sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=", // Primary cert
-   *     "sha256/BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB=", // Backup cert
-   *   ],
-   * }
-   */
-  SSL_PINS: {
-    // TODO: Add your production API certificate pins
-    // "api.yourapp.com": [
-    //   "sha256/YOUR_CERTIFICATE_HASH_HERE=",
-    // ],
-  } as Record<string, string[]>,
-
-  /**
-   * Enable SSL pinning in production
-   * Set to true once you've configured the SSL_PINS above
-   */
-  ENABLE_SSL_PINNING: IS_PROD && false, // Enable when pins are configured
-
-  /**
-   * Request signing configuration
-   * Used to sign API requests for added security
-   */
-  REQUEST_SIGNING: {
-    ENABLED: false,
-    ALGORITHM: "sha256",
-    HEADER_NAME: "X-Request-Signature",
-  },
-} as const;
+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,
+  ENABLE_SOCIAL_LOGIN: true,
+  ENABLE_PAYMENTS: false,
+} 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;
+export const ENABLE_SOCIAL_LOGIN = FEATURES.ENABLE_SOCIAL_LOGIN;
+export const ENABLE_PAYMENTS = FEATURES.ENABLE_PAYMENTS;
+
+// 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",
+  PERMISSION_PREFIX: "@permission_asked_",
+  ANALYTICS_USER_ID: "@analytics_user_id",
+} as const;
+
+// Social Auth Configuration
+export const socialAuth = {
+  google: {
+    clientId: process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID || "",
+    iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID || "",
+    androidClientId: process.env.EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID || "",
+  },
+} as const;
+
+// Force Update Configuration
+export const FORCE_UPDATE = {
+  CHECK_URL: "", // Empty by default — set to your API endpoint
+  ENABLED: false,
+} as const;
+
+// In-App Review Configuration
+export const IN_APP_REVIEW = {
+  MIN_SESSIONS: 5,
+  DAYS_BETWEEN_PROMPTS: 30,
+} as const;
+
+// Feature Flags (Remote)
+export const FEATURE_FLAGS = {
+  REFRESH_INTERVAL_MS: 5 * 60 * 1000, // 5 minutes
+  ENABLED: true,
+} as const;
+
+// API Advanced Configuration
+export const API_CONFIG = {
+  ENABLE_ETAG_CACHE: true,
+} as const;
+
+// Security Configuration
+export const SECURITY = {
+  /**
+   * SSL Pinning configuration for enhanced network security.
+   * Add your API server's certificate public key hashes here.
+   *
+   * To generate a pin from your certificate:
+   * 1. Get your server's certificate: openssl s_client -connect api.yourapp.com:443
+   * 2. Extract public key: openssl x509 -pubkey -noout -in cert.pem
+   * 3. Generate hash: openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+   *
+   * @example
+   * SSL_PINS: {
+   *   "api.yourapp.com": [
+   *     "sha256/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=", // Primary cert
+   *     "sha256/BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB=", // Backup cert
+   *   ],
+   * }
+   */
+  SSL_PINS: {
+    // TODO: Add your production API certificate pins
+    // "api.yourapp.com": [
+    //   "sha256/YOUR_CERTIFICATE_HASH_HERE=",
+    // ],
+  } as Record<string, string[]>,
+
+  /**
+   * Enable SSL pinning in production
+   * Set to true once you've configured the SSL_PINS above
+   */
+  ENABLE_SSL_PINNING: IS_PROD && false, // Enable when pins are configured
+
+  /**
+   * Request signing configuration
+   * Used to sign API requests for added security
+   */
+  REQUEST_SIGNING: {
+    ENABLED: false,
+    ALGORITHM: "sha256",
+    HEADER_NAME: "X-Request-Signature",
+  },
+} as const;

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

@@ -1,79 +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)
+# 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

@@ -1,130 +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/)
+# 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/)