fix(android): convert intro modal to bottom sheet bc broken on smaller screens

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Platform, Text, TouchableOpacity, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 
 const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
@@ -328,33 +328,6 @@ export default function IndexLayout() {
           ),
         }}
       />
-      <Stack.Screen
-        name='intro/page'
-        options={{
-          headerShown: true,
-          title: "",
-          headerBlurEffect: "none",
-          headerTransparent: Platform.OS === "ios",
-          headerShadowVisible: false,
-          headerLeft: () => null,
-          headerRight: () => (
-            <TouchableOpacity
-              onPress={() => _router.back()}
-              style={{
-                marginRight: Platform.OS === "android" ? 16 : 0,
-                paddingHorizontal: 6,
-              }}
-            >
-              <Text
-                style={{ color: "#9333ea", fontSize: 17, fontWeight: "600" }}
-              >
-                {t("home.intro.done_button")}
-              </Text>
-            </TouchableOpacity>
-          ),
-          presentation: "modal",
-        }}
-      />
       {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
         <Stack.Screen key={name} name={name} options={options} />
       ))}

app/(auth)/(tabs)/(home)/intro/page.tsx

@@ -1,154 +0,0 @@
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { Image } from "expo-image";
-import { useFocusEffect, useRouter } from "expo-router";
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Linking, Platform, TouchableOpacity, View } from "react-native";
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { storage } from "@/utils/mmkv";
-
-export default function page() {
-  const router = useRouter();
-  const { t } = useTranslation();
-
-  useFocusEffect(
-    useCallback(() => {
-      storage.set("hasShownIntro", true);
-    }, []),
-  );
-
-  return (
-    <View
-      className={`bg-neutral-900 h-full ${Platform.isTV ? "py-5 space-y-4" : "py-16 space-y-8"} px-4`}
-    >
-      <View>
-        <Text className='text-3xl font-bold text-center mb-2'>
-          {t("home.intro.welcome_to_streamyfin")}
-        </Text>
-        <Text className='text-center'>
-          {t("home.intro.a_free_and_open_source_client_for_jellyfin")}
-        </Text>
-      </View>
-
-      <View>
-        <Text className='text-lg font-bold'>
-          {t("home.intro.features_title")}
-        </Text>
-        <Text className='text-xs'>{t("home.intro.features_description")}</Text>
-        <View className='flex flex-row items-center mt-4'>
-          <Image
-            source={require("@/assets/icons/jellyseerr-logo.svg")}
-            style={{
-              width: 50,
-              height: 50,
-            }}
-          />
-          <View className='shrink ml-2'>
-            <Text className='font-bold mb-1'>Jellyseerr</Text>
-            <Text className='shrink text-xs'>
-              {t("home.intro.jellyseerr_feature_description")}
-            </Text>
-          </View>
-        </View>
-        {!Platform.isTV && (
-          <>
-            <View className='flex flex-row items-center mt-4'>
-              <View
-                style={{
-                  width: 50,
-                  height: 50,
-                }}
-                className='flex items-center justify-center'
-              >
-                <Ionicons
-                  name='cloud-download-outline'
-                  size={32}
-                  color='white'
-                />
-              </View>
-              <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>
-                  {t("home.intro.downloads_feature_title")}
-                </Text>
-                <Text className='shrink text-xs'>
-                  {t("home.intro.downloads_feature_description")}
-                </Text>
-              </View>
-            </View>
-            <View className='flex flex-row items-center mt-4'>
-              <View
-                style={{
-                  width: 50,
-                  height: 50,
-                }}
-                className='flex items-center justify-center'
-              >
-                <Feather name='cast' size={28} color={"white"} />
-              </View>
-              <View className='shrink ml-2'>
-                <Text className='font-bold mb-1'>Chromecast</Text>
-                <Text className='shrink text-xs'>
-                  {t("home.intro.chromecast_feature_description")}
-                </Text>
-              </View>
-            </View>
-          </>
-        )}
-        <View className='flex flex-row items-center mt-4'>
-          <View
-            style={{
-              width: 50,
-              height: 50,
-            }}
-            className='flex items-center justify-center'
-          >
-            <Feather name='settings' size={28} color={"white"} />
-          </View>
-          <View className='shrink ml-2'>
-            <Text className='font-bold mb-1'>
-              {t("home.intro.centralised_settings_plugin_title")}
-            </Text>
-            <View className='flex-row flex-wrap items-baseline'>
-              <Text className='shrink text-xs'>
-                {t("home.intro.centralised_settings_plugin_description")}{" "}
-              </Text>
-              <TouchableOpacity
-                onPress={() => {
-                  Linking.openURL(
-                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin",
-                  );
-                }}
-              >
-                <Text className='text-xs text-purple-600 underline'>
-                  {t("home.intro.read_more")}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </View>
-      </View>
-      <View>
-        <Button
-          onPress={() => {
-            router.back();
-          }}
-          className='mt-4'
-        >
-          {t("home.intro.done_button")}
-        </Button>
-        <TouchableOpacity
-          onPress={() => {
-            router.back();
-            router.push("/settings");
-          }}
-          className='mt-4'
-        >
-          <Text className='text-purple-600 text-center'>
-            {t("home.intro.go_to_settings_button")}
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}

app/(auth)/(tabs)/(home)/settings/intro/page.tsx

@@ -1,13 +1,13 @@
-import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { storage } from "@/utils/mmkv";
 
 export default function IntroPage() {
-  const router = useRouter();
+  const { showIntro } = useIntroSheet();
   const insets = useSafeAreaInsets();
   const { t } = useTranslation();
 
@@ -26,7 +26,7 @@ export default function IntroPage() {
         <ListGroup title={t("home.settings.intro.title")}>
           <ListItem
             onPress={() => {
-              router.push("/intro/page");
+              showIntro();
             }}
             title={t("home.settings.intro.show_intro")}
           />

app/(auth)/(tabs)/_layout.tsx

@@ -7,7 +7,7 @@ import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
-import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
+import { useFocusEffect, withLayoutContext } from "expo-router";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
@@ -15,6 +15,7 @@ import { SystemBars } from "react-native-edge-to-edge";
 import { MiniPlayerBar } from "@/components/music/MiniPlayerBar";
 import { MusicPlaybackEngine } from "@/components/music/MusicPlaybackEngine";
 import { Colors } from "@/constants/Colors";
+import { useIntroSheet } from "@/providers/IntroSheetProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { eventBus } from "@/utils/eventBus";
 import { storage } from "@/utils/mmkv";
@@ -31,21 +32,21 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const router = useRouter();
+  const { showIntro } = useIntroSheet();
 
   useFocusEffect(
     useCallback(() => {
       const hasShownIntro = storage.getBoolean("hasShownIntro");
       if (!hasShownIntro) {
         const timer = setTimeout(() => {
-          router.push("/intro/page");
+          showIntro();
         }, 1000);
 
         return () => {
           clearTimeout(timer);
         };
       }
-    }, []),
+    }, [showIntro]),
   );
 
   return (