create-stackr 0.2.0

package/templates/base/mobile/app.json.ejs

@@ -0,0 +1,88 @@
+{
+  "expo": {
+    "name": "<%= projectName %>",
+    "slug": "<%= projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-') %>",
+    "scheme": "<%= appScheme %>",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.yourcompany.<%= projectName.toLowerCase().replace(/[^a-z0-9]/g, '') %>"<% if (features.authentication.providers.apple) { %>,
+      "usesAppleSignIn": true<% } %><% if (integrations.att.enabled) { %>,
+      "infoPlist": {
+        "NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
+      }<% } %>
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.yourcompany.<%= projectName.toLowerCase().replace(/[^a-z0-9]/g, '') %>"<% if (integrations.adjust.enabled || integrations.scate.enabled) { %>,
+      "permissions": [
+        "android.permission.INTERNET",
+        "android.permission.ACCESS_NETWORK_STATE"
+      ]<% } %>
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"<% if (integrations.att.enabled) { %>,
+      "expo-tracking-transparency"<% } %><% if (features.authentication.enabled) { %>,
+      "expo-secure-store"<% } %><% if (features.authentication.providers.google) { %>,
+      [
+        "@react-native-google-signin/google-signin",
+        {
+          "iosUrlScheme": "com.googleusercontent.apps.YOUR_IOS_CLIENT_ID"
+        }
+      ]<% } %><% if (features.authentication.providers.apple) { %>,
+      "expo-apple-authentication"<% } %>
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "your-eas-project-id-here"
+      },
+      "apiUrl": "http://localhost:8080",
+      "features": {
+        "onboarding": {
+          "enabled": <%= features.onboarding.enabled %>
+        }
+      }<% if (features.authentication.providers.google) { %>,
+      "googleOAuth": {
+        "webClientId": "YOUR_GOOGLE_WEB_CLIENT_ID",
+        "iosClientId": "YOUR_GOOGLE_IOS_CLIENT_ID",
+        "androidClientId": "YOUR_GOOGLE_ANDROID_CLIENT_ID"
+      }<% } %><% if (integrations.revenueCat.enabled) { %>,
+      "revenueCat": {
+        "iosKey": "<%= integrations.revenueCat.iosKey || 'YOUR_IOS_API_KEY_HERE' %>",
+        "androidKey": "<%= integrations.revenueCat.androidKey || 'YOUR_ANDROID_API_KEY_HERE' %>"
+      }<% } %><% if (integrations.adjust.enabled) { %>,
+      "adjust": {
+        "appToken": "<%= integrations.adjust.appToken || 'YOUR_ADJUST_APP_TOKEN_HERE' %>",
+        "environment": "<%= integrations.adjust.environment || 'sandbox' %>"
+      }<% } %><% if (integrations.scate.enabled) { %>,
+      "scate": {
+        "apiKey": "<%= integrations.scate.apiKey || 'YOUR_SCATE_API_KEY_HERE' %>"
+      }<% } %>
+    }
+  }
+}

package/templates/base/mobile/eas.json.ejs

@@ -0,0 +1,49 @@
+{
+  "cli": {
+    "version": ">= 13.2.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "simulator": false,
+        "buildConfiguration": "Release"
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "ios": {
+        "buildConfiguration": "Release"
+      },
+      "android": {
+        "buildType": "app-bundle"
+      }
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "appleId": "your.apple.id@example.com",
+        "ascAppId": "your-app-store-connect-app-id",
+        "appleTeamId": "YOUR_TEAM_ID"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./service-account-key.json",
+        "track": "production"
+      }
+    }
+  }
+}

package/templates/base/mobile/metro.config.js

@@ -0,0 +1,9 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// Required for BetterAuth package resolution
+// Enables package exports which BetterAuth uses for module resolution
+config.resolver.unstable_enablePackageExports = true;
+
+module.exports = config;

package/templates/base/mobile/package.json.ejs

@@ -0,0 +1,53 @@
+{
+  "name": "<%= projectName %>-mobile",
+  "version": "1.0.0",
+  "description": "React Native mobile app for <%= projectName %>",
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "expo": "~54.0.0",
+    "expo-application": "~7.0.7",
+    "expo-constants": "~18.0.10",
+    "expo-font": "~14.0.9",
+    "expo-linear-gradient": "~15.0.7",
+    "expo-linking": "~8.0.9",
+    "expo-router": "~6.0.15",
+    "expo-splash-screen": "~31.0.11",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "zustand": "^5.0.5"<% if (features.authentication.enabled) { %>,
+    "axios": "^1.9.0",
+    "expo-secure-store": "~15.0.7",
+    "expo-network": "~8.0.7",
+    "better-auth": "^1.4.5",
+    "@better-auth/expo": "^1.4.5"<% } %><% if (features.authentication.providers.google || features.authentication.providers.apple || features.authentication.providers.github) { %>,
+    "expo-web-browser": "~15.0.7"<% } %><% if (features.authentication.providers.google) { %>,
+    "@react-native-google-signin/google-signin": "^13.1.0"<% } %><% if (features.authentication.providers.apple) { %>,
+    "expo-apple-authentication": "~7.1.3"<% } %><% if (integrations.revenueCat.enabled) { %>,
+    "react-native-purchases": "^9.1.0"<% } %><% if (integrations.adjust.enabled) { %>,
+    "react-native-adjust": "^5.4.1"<% } %><% if (integrations.scate.enabled) { %>,
+    "scatesdk-react": "^0.4.12"<% } %><% if (integrations.att.enabled) { %>,
+    "expo-tracking-transparency": "~5.2.4"<% } %>
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~19.1.10",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

package/templates/base/mobile/src/components/ui/Button.tsx

@@ -0,0 +1,131 @@
+import React, { useRef, useMemo } from 'react';
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+  PressableProps,
+  Animated,
+} from 'react-native';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface ButtonProps extends Omit<PressableProps, 'style'> {
+  title: string;
+  loading?: boolean;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'small' | 'medium' | 'large';
+  fullWidth?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  loading = false,
+  variant = 'primary',
+  size = 'medium',
+  fullWidth = false,
+  disabled,
+  style,
+  textStyle,
+  ...props
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const isDisabled = disabled || loading;
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 0.97,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  };
+
+  return (
+    <Animated.View style={[
+      fullWidth && styles.fullWidth,
+      { transform: [{ scale: scaleAnim }] },
+    ]}>
+      <Pressable
+        style={[
+          styles.base,
+          styles[variant],
+          styles[size],
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          variant === 'primary' && !isDisabled && theme.shadows.button,
+          style,
+        ]}
+        disabled={isDisabled}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...props}
+      >
+        {loading ? (
+          <ActivityIndicator
+            size="small"
+            color={variant === 'primary' ? theme.colors.textInverse : theme.colors.primary}
+          />
+        ) : (
+          <Text style={[
+            styles.text,
+            styles[`${variant}Text` as keyof typeof styles],
+            styles[`${size}Text` as keyof typeof styles],
+            isDisabled && styles.disabledText,
+            textStyle,
+          ]}>
+            {title}
+          </Text>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  base: {
+    borderRadius: theme.borderRadius.lg,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderColor: 'transparent',
+  },
+  primary: { backgroundColor: theme.colors.primary },
+  secondary: { backgroundColor: theme.colors.backgroundSecondary },
+  outline: { backgroundColor: 'transparent', borderColor: theme.colors.borderStrong },
+  ghost: { backgroundColor: 'transparent' },
+
+  small: { paddingHorizontal: theme.spacing[3], paddingVertical: theme.spacing[2], minHeight: 36 },
+  medium: { paddingHorizontal: theme.spacing[4], paddingVertical: theme.spacing[3], minHeight: 48 },
+  large: { paddingHorizontal: theme.spacing[6], paddingVertical: theme.spacing[4], minHeight: 56 },
+
+  fullWidth: { width: '100%' },
+  disabled: { opacity: 0.5 },
+
+  text: { fontWeight: '600', textAlign: 'center' },
+  primaryText: { color: theme.colors.textInverse },
+  secondaryText: { color: theme.colors.text },
+  outlineText: { color: theme.colors.text },
+  ghostText: { color: theme.colors.primary },
+
+  smallText: { fontSize: theme.typography.fontSize.sm },
+  mediumText: { fontSize: theme.typography.fontSize.base },
+  largeText: { fontSize: theme.typography.fontSize.lg },
+
+  disabledText: {},
+});

package/templates/base/mobile/src/components/ui/Card.tsx

@@ -0,0 +1,68 @@
+import React, { useRef, useMemo } from 'react';
+import { View, Text, StyleSheet, ViewStyle, Pressable, Animated } from 'react-native';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface CardProps {
+  children: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  onPress?: () => void;
+  style?: ViewStyle;
+  variant?: 'default' | 'outlined';
+}
+
+export const Card: React.FC<CardProps> = ({
+  children, title, subtitle, onPress, style, variant = 'default',
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    if (onPress) {
+      Animated.spring(scaleAnim, { toValue: 0.98, useNativeDriver: true, speed: 50, bounciness: 4 }).start();
+    }
+  };
+
+  const handlePressOut = () => {
+    if (onPress) {
+      Animated.spring(scaleAnim, { toValue: 1, useNativeDriver: true, speed: 50, bounciness: 4 }).start();
+    }
+  };
+
+  const Content = (
+    <>
+      {(title || subtitle) && (
+        <View style={styles.header}>
+          {title && <Text style={styles.title}>{title}</Text>}
+          {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+        </View>
+      )}
+      <View style={styles.content}>{children}</View>
+    </>
+  );
+
+  const cardStyle = [styles.card, styles[variant], style];
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <Pressable style={cardStyle} onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut}>
+          {Content}
+        </Pressable>
+      </Animated.View>
+    );
+  }
+
+  return <View style={cardStyle}>{Content}</View>;
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  card: { backgroundColor: theme.colors.card, borderRadius: theme.borderRadius.xl, overflow: 'hidden' },
+  default: { borderWidth: 1, borderColor: theme.colors.borderLight, ...theme.shadows.small },
+  outlined: { borderWidth: 1, borderColor: theme.colors.border, backgroundColor: 'transparent' },
+  header: { padding: theme.spacing[4], paddingBottom: 0 },
+  title: { fontSize: theme.typography.fontSize.lg, fontWeight: '600', color: theme.colors.text, marginBottom: theme.spacing[1] },
+  subtitle: { fontSize: theme.typography.fontSize.sm, color: theme.colors.textSecondary },
+  content: { padding: theme.spacing[4] },
+});

package/templates/base/mobile/src/components/ui/IconSymbol.tsx

@@ -0,0 +1,90 @@
+// Cross-platform icon component using MaterialIcons as fallback
+// Supports SF Symbols naming for consistency
+
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { SymbolViewProps, SymbolWeight } from "expo-symbols";
+import { ComponentProps } from "react";
+import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native";
+
+/**
+ * SF Symbols to Material Icons mappings
+ * - see Material Icons: https://icons.expo.fyi
+ * - see SF Symbols: https://developer.apple.com/sf-symbols/
+ */
+const MAPPING = {
+  "house.fill": "home",
+  "paperplane.fill": "send",
+  "chevron.right": "chevron-right",
+  "chevron.left": "chevron-left",
+  "chevron.up": "keyboard-arrow-up",
+  "chevron.down": "keyboard-arrow-down",
+  "arrow.right": "arrow-forward",
+  "arrow.left": "arrow-back",
+  magnifyingglass: "search",
+  "person.fill": "person",
+  "doc.text": "description",
+  calendar: "event",
+  checkmark: "check",
+  "checkmark.circle.fill": "check-circle",
+  "xmark": "close",
+  "xmark.circle.fill": "cancel",
+  gear: "settings",
+  "gear.circle": "settings",
+  "bell.fill": "notifications",
+  "heart.fill": "favorite",
+  "star.fill": "star",
+  "lock.shield.fill": "security",
+  "lock.fill": "lock",
+  "eye.fill": "visibility",
+  "eye.slash.fill": "visibility-off",
+  "envelope.fill": "email",
+  "phone.fill": "phone",
+  trash: "delete",
+  plus: "add",
+  "plus.circle.fill": "add-circle",
+  "minus.circle.fill": "remove-circle",
+  globe: "language",
+  "square.and.arrow.up": "share",
+  "doc.on.doc": "content-copy",
+  "list.bullet": "list",
+  "arrow.clockwise": "refresh",
+  "arrow.clockwise.circle.fill": "refresh",
+  "exclamationmark.triangle.fill": "warning",
+  "exclamationmark.circle.fill": "error",
+  "info.circle.fill": "info",
+  "camera.fill": "camera",
+  "photo.fill": "photo",
+  "mic.fill": "mic",
+  "videocam.fill": "videocam",
+  sparkles: "auto-awesome",
+  infinity: "all-inclusive",
+} as const;
+
+export type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <MaterialIcons
+      color={color}
+      size={size}
+      name={MAPPING[name]}
+      style={style}
+    />
+  );
+}

package/templates/base/mobile/src/components/ui/Input.tsx

@@ -0,0 +1,142 @@
+import React, { useState, useRef, useMemo } from 'react';
+import {
+  View,
+  TextInput,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  TextInputProps,
+  Pressable,
+  Animated,
+} from 'react-native';
+import { useAppTheme, AppTheme } from '@/context/ThemeContext';
+
+interface InputProps extends Omit<TextInputProps, 'style'> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  showPasswordToggle?: boolean;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  hint,
+  containerStyle,
+  inputStyle,
+  leftIcon,
+  rightIcon,
+  secureTextEntry,
+  showPasswordToggle = false,
+  ...props
+}) => {
+  const theme = useAppTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const [isSecure, setIsSecure] = useState(secureTextEntry);
+  const [isFocused, setIsFocused] = useState(false);
+  const borderAnim = useRef(new Animated.Value(0)).current;
+
+  const hasError = !!error;
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    Animated.timing(borderAnim, {
+      toValue: 1,
+      duration: theme.timing.fast,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    Animated.timing(borderAnim, {
+      toValue: 0,
+      duration: theme.timing.fast,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const borderColor = borderAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      hasError ? theme.colors.error : theme.colors.border,
+      hasError ? theme.colors.error : theme.colors.primary,
+    ],
+  });
+
+  const actualRightIcon = showPasswordToggle && secureTextEntry ? (
+    <Pressable onPress={() => setIsSecure(!isSecure)} style={styles.iconContainer} hitSlop={8}>
+      <Text style={styles.toggleText}>{isSecure ? 'Show' : 'Hide'}</Text>
+    </Pressable>
+  ) : rightIcon ? (
+    <View style={styles.iconContainer}>{rightIcon}</View>
+  ) : null;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && (
+        <Text style={[styles.label, hasError && styles.errorLabel]}>{label}</Text>
+      )}
+
+      <Animated.View style={[styles.inputContainer, { borderColor }]}>
+        {leftIcon && <View style={styles.iconContainer}>{leftIcon}</View>}
+        <TextInput
+          style={[
+            styles.input,
+            leftIcon && styles.inputWithLeftIcon,
+            actualRightIcon && styles.inputWithRightIcon,
+            inputStyle,
+          ]}
+          secureTextEntry={isSecure}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={theme.colors.textMuted}
+          selectionColor={theme.colors.primary}
+          {...props}
+        />
+        {actualRightIcon}
+      </Animated.View>
+
+      {error && <Text style={styles.errorText}>{error}</Text>}
+      {hint && !error && <Text style={styles.hintText}>{hint}</Text>}
+    </View>
+  );
+};
+
+const createStyles = (theme: AppTheme) => StyleSheet.create({
+  container: { marginBottom: theme.spacing[4] },
+  label: {
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: '500',
+    color: theme.colors.text,
+    marginBottom: theme.spacing[2],
+  },
+  errorLabel: { color: theme.colors.error },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.background,
+    minHeight: 48,
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[3],
+    fontSize: theme.typography.fontSize.base,
+    color: theme.colors.text,
+  },
+  inputWithLeftIcon: { paddingLeft: theme.spacing[2] },
+  inputWithRightIcon: { paddingRight: theme.spacing[2] },
+  iconContainer: { paddingHorizontal: theme.spacing[3], justifyContent: 'center', alignItems: 'center' },
+  toggleText: { fontSize: theme.typography.fontSize.sm, color: theme.colors.primary, fontWeight: '600' },
+  errorText: { fontSize: theme.typography.fontSize.sm, color: theme.colors.error, marginTop: theme.spacing[1] },
+  hintText: { fontSize: theme.typography.fontSize.sm, color: theme.colors.textMuted, marginTop: theme.spacing[1] },
+});