Add playlist?

components/Home/helpers/add-playlist-popover.tsx

@@ -1,68 +0,0 @@
-import Icon from "../../../components/Global/helpers/icon";
-import { Label } from "../../../components/Global/helpers/text";
-import { Popover, Adapt, YStack, XStack, Input, getToken, Button } from "tamagui";
-
-export default function AddPlaylistPopover({
-    open
-}: {
-    open: boolean
-}) : React.JSX.Element {
-    return (
-        <Popover open={open} size="$5">
-  
-        {/* {shouldAdapt && (
-          <Adapt when="sm" platform="touch">
-            <Popover.Sheet animation="medium" modal dismissOnSnapToBottom>
-              <Popover.Sheet.Frame padding="$4">
-                <Adapt.Contents />
-              </Popover.Sheet.Frame>
-              <Popover.Sheet.Overlay
-                backgroundColor="$shadowColor"
-                animation="lazy"
-                enterStyle={{ opacity: 0 }}
-                exitStyle={{ opacity: 0 }}
-              />
-            </Popover.Sheet>
-          </Adapt>
-        )} */}
-  
-        <Popover.Content
-          borderWidth={1}
-          borderColor="$borderColor"
-          enterStyle={{ y: -10, opacity: 0 }}
-          exitStyle={{ y: -10, opacity: 0 }}
-          elevate
-          animation={[
-            'quick',
-            {
-              opacity: {
-                overshootClamping: true,
-              },
-            },
-          ]}
-        >
-          <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
-  
-          <YStack gap="$3">
-            <XStack gap="$3">
-              <Label size="$3" htmlFor="Name">
-                Name
-              </Label>
-              <Input flex={1} size="$3" id="Name" />
-            </XStack>
-  
-            <Popover.Close asChild>
-              <Button
-                onPress={() => {
-                  /* Custom code goes here, does not interfere with popover closure */
-                }}
-              >
-                Create
-              </Button>
-            </Popover.Close>
-          </YStack>
-        </Popover.Content>
-      </Popover>
-  
-    )
-}

components/Home/helpers/playlists.tsx

@@ -3,15 +3,13 @@ import { useUserPlaylists } from "../../../api/queries/playlist";
 import { ItemCard } from "../../Global/components/item-card";
 import { H2 } from "../../../components/Global/helpers/text";
 import { StackParamList } from "../../../components/types";
-import React, { useState } from "react";
+import React from "react";
 import { FlatList } from "react-native";
 import { getToken, View, XStack, YStack } from "tamagui";
-import AddPlaylistPopover from "./add-playlist-popover";
 import Icon from "../../../components/Global/helpers/icon";
 
 export default function Playlists({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}) : React.JSX.Element {
 
-    const [createPlaylist, setCreatePlaylist] = useState<boolean>(false);
     const { data: playlists } = useUserPlaylists();
 
     return (
@@ -20,8 +18,7 @@ export default function Playlists({ navigation }: { navigation: NativeStackNavig
                 <H2>Your Playlists</H2>
 
                 <YStack justifyContent="center" alignContent="flex-end" marginTop={7}>
-                    <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} onPress={() => setCreatePlaylist(true)}/>
-                    <AddPlaylistPopover open={createPlaylist}/>
+                    <Icon name="plus-circle-outline" color={getToken("$color.telemagenta")} onPress={() => navigation.navigate('AddPlaylist')}/>
                 </YStack>
             </XStack>
             <FlatList horizontal

components/Home/screens/add-playlist.tsx

@@ -0,0 +1,14 @@
+import { Label } from "@/components/Global/helpers/text";
+import Input from "../../../components/Global/helpers/input";
+import React from "react";
+import { View } from "tamagui";
+
+
+export default function AddPlaylist() : React.JSX.Element {
+    return (
+        <View>
+            <Label size="$2" htmlFor="name">Name</Label>
+            <Input id="name" />
+        </View>
+    )
+}

components/Home/stack.tsx

@@ -8,6 +8,7 @@ import { PlaylistScreen } from "../Playlist/screens";
 import { ProvidedHome } from "./component";
 import DetailsScreen from "../ItemDetail/screen";
 import Player from "../Player/stack";
+import AddPlaylist from "./screens/add-playlist";
 
 const HomeStack = createNativeStackNavigator<StackParamList>();
 
@@ -63,6 +64,18 @@ export default function Home(): React.JSX.Element {
                     />
 
                 </HomeStack.Group>
+
+                {/* https://www.reddit.com/r/reactnative/comments/1dgktbn/comment/lxd23sj/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button */}
+                <HomeStack.Group screenOptions={{ presentation: 'formSheet', sheetAllowedDetents: [-1] }}>
+                    <HomeStack.Screen
+                        name="AddPlaylist"
+                        component={AddPlaylist}
+                        options={{
+
+                        }}
+                    />
+                </HomeStack.Group>
+
                 <HomeStack.Group screenOptions={{ presentation: 'modal' }}>
                     <HomeStack.Screen
                         name="Details"