feat: add license and telemetry settings

app/app/main/_layout.tsx

@@ -61,7 +61,7 @@ export default wrapSentry(function TabLayout() {
             options={{
               title: "Settings",
               tabBarIcon: getTabBarIcon("Settings", "cog"),
-              headerShown: true,
+              headerShown: false,
             }}
           />
         </Tabs>

app/app/main/settings/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function SettingsLayout() {
+  return <Stack />;
+}

app/app/main/settings/index.tsx

@@ -0,0 +1,57 @@
+import { useRouter } from "expo-router";
+import { useEffect, useState } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { DevSettings } from "react-native";
+import { Box } from "@/components/ui/box";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { HStack } from "@/components/ui/hstack";
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const [sentryEnabled, setSentryEnabled] = useState(false);
+
+  useEffect(() => {
+    AsyncStorage.getItem("sentryConsent").then((v) =>
+      setSentryEnabled(!!parseInt(v ?? "0")),
+    );
+  }, []);
+
+  const toggleSentry = async () => {
+    const next = !sentryEnabled;
+    setSentryEnabled(next);
+    await AsyncStorage.setItem("sentryConsent", next ? "1" : "0");
+    DevSettings.reload();
+  };
+
+  return (
+    <Box className="flex-1 p-4">
+      <Pressable
+        className="py-4 border-b border-gray-200"
+        onPress={() => router.push("/main/settings/licenses")}
+      >
+        <Text>Licenses</Text>
+      </Pressable>
+      <HStack className="justify-between items-center py-4">
+        <Text>Sentry telemetry</Text>
+        <Pressable onPress={toggleSentry}>
+          <Box
+            className={`w-10 h-6 rounded-full px-1 flex-row items-center ${
+              sentryEnabled ? "bg-primary-500" : "bg-gray-300"
+            }`}
+          >
+            <Box
+              className={`h-4 w-4 rounded-full bg-white transition-all ${
+                sentryEnabled ? "ml-4" : "ml-0"
+              }`}
+            />
+          </Box>
+        </Pressable>
+      </HStack>
+    </Box>
+  );
+}
+
+export const options = {
+  title: "Settings",
+};

app/app/main/settings/licenses/[pkg].tsx

@@ -0,0 +1,23 @@
+import { useLocalSearchParams } from "expo-router";
+import { ScrollView } from "@/components/ui/scroll-view";
+import { Text } from "@/components/ui/text";
+import licenses from "@/licenses.json";
+
+export default function LicenseDetailScreen() {
+  const { pkg } = useLocalSearchParams<{ pkg: string }>();
+  const info = licenses.find((p) => p.name === pkg);
+  return (
+    <ScrollView className="flex-1 p-4">
+      <Text bold className="mb-4">
+        {info?.name}
+      </Text>
+      <Text className="whitespace-pre-wrap">
+        {info?.text || "License not found"}
+      </Text>
+    </ScrollView>
+  );
+}
+
+export const options = ({ params }: { params: { pkg: string } }) => ({
+  title: params.pkg,
+});

app/app/main/settings/licenses/index.tsx

@@ -0,0 +1,32 @@
+import { useRouter } from "expo-router";
+import { Pressable } from "@/components/ui/pressable";
+import { Text } from "@/components/ui/text";
+import { ScrollView } from "@/components/ui/scroll-view";
+import licenses from "@/licenses.json";
+
+export default function LicenseListScreen() {
+  const router = useRouter();
+  return (
+    <ScrollView className="flex-1 p-4">
+      {licenses.map((pkg) => (
+        <Pressable
+          key={pkg.name}
+          className="py-2 border-b border-gray-200"
+          onPress={() =>
+            router.push({
+              pathname: "/main/settings/licenses/[pkg]",
+              params: { pkg: pkg.name },
+            })
+          }
+        >
+          <Text bold>{pkg.name}</Text>
+          <Text className="text-sm text-gray-500">{pkg.license}</Text>
+        </Pressable>
+      ))}
+    </ScrollView>
+  );
+}
+
+export const options = {
+  title: "Licenses",
+};

app/components/ui/scroll-view/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ScrollView as RNScrollView, ScrollViewProps } from "react-native";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
+import { scrollViewStyle } from "./styles";
+
+type IScrollViewProps = ScrollViewProps &
+  VariantProps<typeof scrollViewStyle> & { className?: string };
+
+const ScrollView = React.forwardRef<
+  React.ComponentRef<typeof RNScrollView>,
+  IScrollViewProps
+>(function ScrollView({ className, ...props }, ref) {
+  return (
+    <RNScrollView
+      ref={ref}
+      {...props}
+      className={scrollViewStyle({ class: className })}
+    />
+  );
+});
+
+ScrollView.displayName = "ScrollView";
+export { ScrollView };

app/components/ui/scroll-view/index.web.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { VariantProps } from "@gluestack-ui/nativewind-utils";
+import { scrollViewStyle } from "./styles";
+
+type IScrollViewProps = React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof scrollViewStyle>;
+
+const ScrollView = React.forwardRef<React.ComponentRef<"div">, IScrollViewProps>(
+  function ScrollView({ className, ...props }, ref) {
+    return <div ref={ref} {...props} className={scrollViewStyle({ class: className })} />;
+  },
+);
+
+ScrollView.displayName = "ScrollView";
+export { ScrollView };

app/components/ui/scroll-view/styles.tsx

@@ -0,0 +1,10 @@
+import { tva } from "@gluestack-ui/nativewind-utils/tva";
+import { isWeb } from "@gluestack-ui/nativewind-utils/IsWeb";
+
+const baseStyle = isWeb
+  ? "flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none"
+  : "";
+
+export const scrollViewStyle = tva({
+  base: baseStyle,
+});