feat: intro screen

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

@@ -30,9 +30,8 @@ export default function page() {
       <View>
         <Text className="text-lg font-bold">Features</Text>
         <Text className="text-xs">
-          Streamyfin has a bunch of features and integrates with a
+          Streamyfin has a bunch of features and integrates with a wide array of
-          wide array of software which you can find in the settings menu, these
+          software which you can find in the settings menu, these include:
-          include:
         </Text>
         <View className="flex flex-row items-center mt-4">
           <Image

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

@@ -75,6 +75,13 @@ export default function settings() {
             }}
             title={"Show intro"}
           />
+          <ListItem
+            textColor="red"
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={"Reset intro"}
+          />
         </ListGroup>
 
         <View className="mb-4">

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

@@ -13,14 +13,13 @@ const { Navigator } = createNativeBottomTabNavigator();
 import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
 
 import { Colors } from "@/constants/Colors";
+import { useSettings } from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { useSettings } from "@/utils/atoms/settings";
-import { useAtom, useAtomValue } from "jotai";
-import { storage } from "@/utils/mmkv";
 
 export const NativeTabs = withLayoutContext<
   BottomTabNavigationOptions,
@@ -32,16 +31,13 @@ export const NativeTabs = withLayoutContext<
 export default function TabLayout() {
   const [settings] = useSettings();
   const router = useRouter();
-  const hasNavigated = useRef(false);
 
   useFocusEffect(
     useCallback(() => {
       const hasShownIntro = storage.getBoolean("hasShownIntro");
-      if (hasShownIntro === false && !hasNavigated.current) {
+      if (!hasShownIntro) {
         const timer = setTimeout(() => {
-          hasNavigated.current = true;
           router.push("/intro/page");
-          storage.set("hasShownIntro", true);
         }, 1000);
 
         return () => {