@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/app/(app)/debug.tsx

@@ -0,0 +1,389 @@
+import { useEffect, useState } from "react";
+import * as Sharing from "expo-sharing";
+import { Stack } from "expo-router";
+import Constants from "expo-constants";
+import * as Application from "expo-application";
+import { ApplicationReleaseType } from "expo-application";
+import * as Device from "expo-device";
+import {
+  Host,
+  ScrollView,
+  Button,
+  Text,
+  VStack,
+  HStack,
+  Spacer,
+  ProgressView,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  cornerRadius,
+  foregroundStyle,
+  frame,
+  padding,
+  progressViewStyle,
+  scrollDismissesKeyboard,
+  textSelection,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { executionEnvironment, expoRuntimeVersion, sessionId, debugMode } from "@/lib/device";
+import { isEnabled as updatesEnabled, readLogEntries, type UpdatesLogEntry } from "@/lib/updates";
+import { useAppUpdates } from "@/hooks/use-updates";
+import { haptics } from "@/lib/haptics";
+import { useColors } from "@/hooks/use-theme";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+
+const RELEASE_TYPE_LABELS: Record<number, string> = {
+  [ApplicationReleaseType.UNKNOWN]: "Unknown",
+  [ApplicationReleaseType.SIMULATOR]: "Simulator",
+  [ApplicationReleaseType.ENTERPRISE]: "Enterprise",
+  [ApplicationReleaseType.DEVELOPMENT]: "Development",
+  [ApplicationReleaseType.AD_HOC]: "Ad Hoc",
+  [ApplicationReleaseType.APP_STORE]: "App Store",
+};
+
+// Surface the last 5 expo-updates log entries so bsdiff patch success,
+// signature failures, and runtime-version mismatches are visible at
+// runtime. Refetches on every update lifecycle transition.
+function useUpdateLogEntries(isUpdatePending: boolean, restartCount: number) {
+  const [entries, setEntries] = useState<UpdatesLogEntry[]>([]);
+  useEffect(() => {
+    if (!updatesEnabled) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const all = await readLogEntries();
+        if (!cancelled) setEntries(all.slice(-5).toReversed());
+      } catch {
+        // expo-updates internal log is best-effort; quietly skip failures.
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [isUpdatePending, restartCount]);
+  return entries;
+}
+
+function useApplicationInfo() {
+  const [installTime, setInstallTime] = useState<string | null>(null);
+  const [iosVendorId, setIosVendorId] = useState<string | null>(null);
+  const [iosReleaseType, setIosReleaseType] = useState<string | null>(null);
+  const [iosPushEnv, setIosPushEnv] = useState<string | null>(null);
+  useEffect(() => {
+    Application.getInstallationTimeAsync()
+      .then((date) => {
+        if (date) setInstallTime(date.toLocaleDateString());
+      })
+      .catch(() => {});
+
+    Application.getIosIdForVendorAsync()
+      .then(setIosVendorId)
+      .catch(() => {});
+    Application.getIosApplicationReleaseTypeAsync()
+      .then((type) => setIosReleaseType(RELEASE_TYPE_LABELS[type] ?? "Unknown"))
+      .catch(() => {});
+    Application.getIosPushNotificationServiceEnvironmentAsync()
+      .then((env) => setIosPushEnv(env ?? "N/A"))
+      .catch(() => {});
+  }, []);
+
+  return { installTime, iosVendorId, iosReleaseType, iosPushEnv };
+}
+
+export default function DebugScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const appInfo = useApplicationInfo();
+  const updates = useAppUpdates();
+  const updateLog = useUpdateLogEntries(updates.isUpdatePending, updates.restartCount);
+
+  const appVersion =
+    Application.nativeApplicationVersion ?? Constants.expoConfig?.version ?? "1.0.0";
+  const buildNumber = Application.nativeBuildVersion ?? "1";
+  const deviceInfo = Device.modelName
+    ? `${Device.manufacturer ?? ""} ${Device.modelName}`.trim()
+    : "iOS";
+  const osVersion = Device.osVersion ? `iOS ${Device.osVersion}` : "iOS";
+
+  const handleShare = async () => {
+    haptics.light();
+    try {
+      const available = await Sharing.isAvailableAsync();
+      if (!available) return;
+      await Sharing.shareAsync(`App v${appVersion} (${buildNumber})`, {
+        dialogTitle: "Share build info",
+      });
+    } catch {
+      // share canceled
+    }
+  };
+
+  const sectionLabelModifiers = [
+    dfont({ size: 13, weight: "semibold" }),
+    foregroundStyle(colors.mutedForeground as string),
+    padding({ horizontal: 8, top: 4 }),
+  ];
+
+  const InfoRow = ({
+    label,
+    value,
+    valueModifiers,
+    valueColor,
+  }: {
+    label: string;
+    value: string;
+    valueModifiers?: Parameters<typeof Text>[0]["modifiers"];
+    valueColor?: string;
+  }) => (
+    <HStack
+      spacing={12}
+      alignment="center"
+      modifiers={[frame({ maxWidth: 10000 }), padding({ horizontal: 16, vertical: 12 })]}
+    >
+      <Text modifiers={[dfont({ size: 15 }), foregroundStyle(colors.mutedForeground as string)]}>
+        {label}
+      </Text>
+      <Spacer />
+      <Text
+        modifiers={[
+          dfont({ size: 15, weight: "medium" }),
+          foregroundStyle((valueColor ?? colors.foreground) as string),
+          textSelection(true),
+          ...(valueModifiers ?? []),
+        ]}
+      >
+        {value}
+      </Text>
+    </HStack>
+  );
+
+  const InfoCard = ({ children }: { children: React.ReactNode }) => (
+    <VStack
+      spacing={0}
+      alignment="leading"
+      modifiers={[frame({ maxWidth: 10000 }), background(colors.muted as string), cornerRadius(20)]}
+    >
+      {children}
+    </VStack>
+  );
+
+  return (
+    <>
+      <Stack.Toolbar placement="right">
+        <Stack.Toolbar.Button
+          icon="square.and.arrow.up"
+          onPress={handleShare}
+          tintColor={colors.primary}
+          accessibilityLabel="Share build info"
+        />
+      </Stack.Toolbar>
+      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+        <ScrollView
+          modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+        >
+          <VStack
+            spacing={20}
+            alignment="leading"
+            modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+          >
+            <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+              <Text modifiers={sectionLabelModifiers}>BUILD</Text>
+              <InfoCard>
+                <InfoRow label="Version" value={`${appVersion} (${buildNumber})`} />
+                <InfoRow label="Expo SDK" value={Constants.expoConfig?.sdkVersion ?? "Unknown"} />
+                <InfoRow label="App name" value={Application.applicationName ?? "N/A"} />
+                <InfoRow label="Bundle id" value={Application.applicationId ?? "N/A"} />
+                <InfoRow label="Environment" value={executionEnvironment} />
+                {appInfo.installTime ? (
+                  <InfoRow label="Installed" value={appInfo.installTime} />
+                ) : null}
+              </InfoCard>
+            </VStack>
+
+            {updatesEnabled && !__DEV__ ? (
+              <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+                <Text modifiers={sectionLabelModifiers}>OTA UPDATES</Text>
+                <InfoCard>
+                  <InfoRow label="Status" value={updates.statusText} />
+                  <InfoRow label="Channel" value={updates.currentlyRunning.channel ?? "N/A"} />
+                  <InfoRow
+                    label="Runtime"
+                    value={updates.currentlyRunning.runtimeVersion ?? expoRuntimeVersion ?? "N/A"}
+                  />
+                  <InfoRow
+                    label="Update id"
+                    value={updates.currentlyRunning.updateId?.slice(0, 8) ?? "Embedded"}
+                    valueModifiers={[dfont({ size: 13, design: "monospaced" })]}
+                  />
+                  <InfoRow
+                    label="Created"
+                    value={updates.currentlyRunning.createdAt?.toLocaleDateString() ?? "N/A"}
+                  />
+                  <InfoRow
+                    label="Source"
+                    value={updates.currentlyRunning.isEmbeddedLaunch ? "Embedded" : "OTA Update"}
+                  />
+                  {updates.currentlyRunning.launchDuration != null ? (
+                    <InfoRow
+                      label="Launch time"
+                      value={`${updates.currentlyRunning.launchDuration}ms`}
+                    />
+                  ) : null}
+                  {updates.currentlyRunning.isEmergencyLaunch ? (
+                    <InfoRow
+                      label="Emergency launch"
+                      value={updates.currentlyRunning.emergencyLaunchReason ?? "Unknown error"}
+                      valueColor="orange"
+                    />
+                  ) : null}
+                  {updates.isDownloading ? (
+                    <HStack
+                      modifiers={[
+                        frame({ maxWidth: 10000 }),
+                        padding({ horizontal: 16, vertical: 12 }),
+                      ]}
+                    >
+                      <ProgressView
+                        value={updates.downloadProgress ?? undefined}
+                        modifiers={[progressViewStyle("linear"), frame({ maxWidth: 10000 })]}
+                      />
+                    </HStack>
+                  ) : null}
+                  {(updates.checkError ?? updates.downloadError) ? (
+                    <InfoRow
+                      label="Error"
+                      value={(updates.checkError ?? updates.downloadError)?.message ?? "Unknown"}
+                      valueColor={colors.destructive as string}
+                    />
+                  ) : null}
+                  {updates.lastCheckForUpdateTimeSinceRestart ? (
+                    <InfoRow
+                      label="Last checked"
+                      value={updates.lastCheckForUpdateTimeSinceRestart.toLocaleTimeString()}
+                    />
+                  ) : null}
+                </InfoCard>
+                {updates.isUpdateAvailable && !updates.isDownloading ? (
+                  <UpdateActionButton
+                    label="Download & install"
+                    onPress={updates.downloadAndApply}
+                    colors={colors}
+                    dfont={dfont}
+                  />
+                ) : !updates.isChecking && !updates.isDownloading ? (
+                  <UpdateActionButton
+                    label="Check for updates"
+                    onPress={updates.checkForUpdate}
+                    colors={colors}
+                    dfont={dfont}
+                  />
+                ) : null}
+                {updateLog.length > 0 ? (
+                  <InfoCard>
+                    {updateLog.map((entry) => (
+                      <InfoRow
+                        key={`${entry.timestamp}-${entry.code}`}
+                        label={entry.level.toUpperCase()}
+                        value={`${entry.code}: ${entry.message}`}
+                      />
+                    ))}
+                  </InfoCard>
+                ) : null}
+              </VStack>
+            ) : null}
+
+            {appInfo.iosReleaseType || appInfo.iosPushEnv || appInfo.iosVendorId ? (
+              <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+                <Text modifiers={sectionLabelModifiers}>iOS</Text>
+                <InfoCard>
+                  {appInfo.iosReleaseType ? (
+                    <InfoRow label="Release type" value={appInfo.iosReleaseType} />
+                  ) : null}
+                  {appInfo.iosPushEnv ? (
+                    <InfoRow label="Push env" value={appInfo.iosPushEnv} />
+                  ) : null}
+                  {appInfo.iosVendorId ? (
+                    <InfoRow
+                      label="Vendor id"
+                      value={appInfo.iosVendorId}
+                      valueModifiers={[dfont({ size: 13, design: "monospaced" })]}
+                    />
+                  ) : null}
+                </InfoCard>
+              </VStack>
+            ) : null}
+
+            <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+              <Text modifiers={sectionLabelModifiers}>RUNTIME</Text>
+              <InfoCard>
+                <InfoRow
+                  label="Session id"
+                  value={sessionId.slice(0, 8)}
+                  valueModifiers={[dfont({ size: 13, design: "monospaced" })]}
+                />
+                <InfoRow label="Build mode" value={debugMode ? "Debug" : "Release"} />
+              </InfoCard>
+            </VStack>
+
+            <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+              <Text modifiers={sectionLabelModifiers}>DEVICE</Text>
+              <InfoCard>
+                <InfoRow label="Model" value={deviceInfo} />
+                <InfoRow label="OS" value={osVersion} />
+              </InfoCard>
+            </VStack>
+
+            <HStack modifiers={[frame({ maxWidth: 10000 }), padding({ top: 8 })]}>
+              <Spacer />
+              <Text
+                modifiers={[dfont({ size: 12 }), foregroundStyle(colors.tertiaryLabel as string)]}
+              >
+                v{appVersion} ({buildNumber})
+              </Text>
+              <Spacer />
+            </HStack>
+          </VStack>
+        </ScrollView>
+      </Host>
+    </>
+  );
+}
+
+function UpdateActionButton({
+  label,
+  onPress,
+  colors,
+  dfont,
+}: {
+  label: string;
+  onPress: () => void;
+  colors: ReturnType<typeof useColors>;
+  dfont: ReturnType<typeof useDynamicFont>;
+}) {
+  return (
+    <Button
+      modifiers={[
+        buttonStyle("plain"),
+        frame({ maxWidth: 10000 }),
+        background(colors.muted as string),
+        clipShape("capsule"),
+      ]}
+      onPress={onPress}
+    >
+      <Text
+        modifiers={[
+          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          dfont({ size: 16, weight: "medium" }),
+          foregroundStyle(colors.foreground as string),
+        ]}
+      >
+        {label}
+      </Text>
+    </Button>
+  );
+}

package/dist/templates/default/app/(app)/help.tsx

@@ -0,0 +1,254 @@
+import { useState, type ComponentProps } from "react";
+import Constants from "expo-constants";
+import { Stack } from "expo-router";
+import { openURL, canOpenURL } from "expo-linking";
+import {
+  Host,
+  ScrollView,
+  Button,
+  HStack,
+  VStack,
+  Spacer,
+  Image,
+  Text,
+  ContentUnavailableView,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  cornerRadius,
+  foregroundStyle,
+  frame,
+  onTapGesture,
+  padding,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { Button as ButtonTokens } from "@/constants/layout";
+
+import { ErrorText } from "@/components/ui/status-text";
+import { haptics } from "@/lib/haptics";
+import { useColors } from "@/hooks/use-theme";
+
+type SupportConfig = {
+  githubUrl?: string;
+  issuesUrl?: string;
+  email?: string;
+};
+
+const support = (Constants.expoConfig?.extra?.support ?? {}) as SupportConfig;
+
+const FAQ_ITEMS = [
+  {
+    question: "How do I delete my account?",
+    answer: "Go to Settings, then Delete Account. This will permanently remove all your data.",
+  },
+  {
+    question: "Why aren't notifications working?",
+    answer:
+      "Make sure notifications are enabled in Settings, then Notifications. You must use a physical device.",
+  },
+];
+
+export default function HelpScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const [searchText, setSearchText] = useState("");
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const [emailError, setEmailError] = useState<string | null>(null);
+
+  const filteredFaq = searchText
+    ? FAQ_ITEMS.filter(
+        (item) =>
+          item.question.toLowerCase().includes(searchText.toLowerCase()) ||
+          item.answer.toLowerCase().includes(searchText.toLowerCase()),
+      )
+    : FAQ_ITEMS;
+
+  const issuesUrl = support.issuesUrl || support.githubUrl;
+
+  const handleOpenIssues = () => {
+    if (!issuesUrl) return;
+    haptics.light();
+    openURL(issuesUrl);
+  };
+
+  const handleOpenEmail = async () => {
+    if (!support.email) return;
+    haptics.light();
+    setEmailError(null);
+    const url = `mailto:${support.email}?subject=App Support`;
+    const canOpen = await canOpenURL(url);
+    if (canOpen) {
+      openURL(url);
+    } else {
+      haptics.error();
+      setEmailError(`No email app configured. Contact ${support.email} directly.`);
+    }
+  };
+
+  type SFSymbol = NonNullable<ComponentProps<typeof Image>["systemName"]>;
+
+  const rowButton = ({
+    label,
+    systemImage,
+    onPress,
+  }: {
+    label: string;
+    systemImage: SFSymbol;
+    onPress: () => void;
+  }) => (
+    <Button
+      modifiers={[
+        buttonStyle("plain"),
+        frame({ maxWidth: 10000 }),
+        background(colors.muted as string),
+        clipShape("capsule"),
+      ]}
+      onPress={onPress}
+    >
+      <HStack
+        spacing={12}
+        alignment="center"
+        modifiers={[
+          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          padding({ horizontal: 16 }),
+        ]}
+      >
+        <Image systemName={systemImage} size={18} color={colors.foreground as string} />
+        <Text
+          modifiers={[
+            dfont({ size: 16, weight: "medium" }),
+            foregroundStyle(colors.foreground as string),
+          ]}
+        >
+          {label}
+        </Text>
+        <Spacer />
+        <Image systemName="chevron.right" size={13} color={colors.mutedForeground as string} />
+      </HStack>
+    </Button>
+  );
+
+  return (
+    <>
+      <Stack.SearchBar
+        placeholder="Search help..."
+        onChangeText={(e) => setSearchText(e.nativeEvent.text)}
+        hideWhenScrolling
+      />
+      {support.email ? (
+        <Stack.Toolbar placement="right">
+          <Stack.Toolbar.Button
+            icon="envelope.fill"
+            onPress={handleOpenEmail}
+            tintColor={colors.primary}
+            accessibilityLabel="Email support"
+          />
+        </Stack.Toolbar>
+      ) : null}
+      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+        <ScrollView modifiers={[tint(colors.primary as string)]}>
+          <VStack
+            spacing={12}
+            alignment="leading"
+            modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+          >
+            {emailError ? <ErrorText>{emailError}</ErrorText> : null}
+
+            {(support.email || issuesUrl) && (
+              <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
+                {support.email
+                  ? rowButton({
+                      label: "Email Support",
+                      systemImage: "envelope.fill",
+                      onPress: handleOpenEmail,
+                    })
+                  : null}
+                {issuesUrl
+                  ? rowButton({
+                      label: "Report an Issue",
+                      systemImage: "exclamationmark.bubble.fill",
+                      onPress: handleOpenIssues,
+                    })
+                  : null}
+              </VStack>
+            )}
+
+            {filteredFaq.length === 0 ? (
+              <ContentUnavailableView
+                title="No results"
+                systemImage="magnifyingglass"
+                description="Try a different search term"
+              />
+            ) : (
+              <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
+                <Text
+                  modifiers={[
+                    dfont({ size: 13, weight: "semibold" }),
+                    foregroundStyle(colors.mutedForeground as string),
+                    padding({ horizontal: 8, top: 4 }),
+                  ]}
+                >
+                  FREQUENTLY ASKED
+                </Text>
+                {filteredFaq.map((item) => {
+                  const isOpen = !!expanded[item.question];
+                  return (
+                    <VStack
+                      key={item.question}
+                      alignment="leading"
+                      spacing={isOpen ? 8 : 0}
+                      modifiers={[
+                        frame({ maxWidth: 10000 }),
+                        background(colors.muted as string),
+                        cornerRadius(20),
+                        padding({ horizontal: 20, vertical: 12 }),
+                        onTapGesture(() => {
+                          haptics.selection();
+                          setExpanded((m) => ({ ...m, [item.question]: !m[item.question] }));
+                        }),
+                      ]}
+                    >
+                      <HStack
+                        spacing={12}
+                        alignment="center"
+                        modifiers={[frame({ maxWidth: 10000 })]}
+                      >
+                        <Text
+                          modifiers={[
+                            dfont({ size: 15, weight: "medium" }),
+                            foregroundStyle(colors.foreground as string),
+                          ]}
+                        >
+                          {item.question}
+                        </Text>
+                        <Spacer />
+                        <Image
+                          systemName={isOpen ? "chevron.up" : "chevron.down"}
+                          size={13}
+                          color={colors.mutedForeground as string}
+                        />
+                      </HStack>
+                      {isOpen ? (
+                        <Text
+                          modifiers={[
+                            dfont({ size: 14 }),
+                            foregroundStyle(colors.mutedForeground as string),
+                          ]}
+                        >
+                          {item.answer}
+                        </Text>
+                      ) : null}
+                    </VStack>
+                  );
+                })}
+              </VStack>
+            )}
+          </VStack>
+        </ScrollView>
+      </Host>
+    </>
+  );
+}