popover stuff

App.tsx

@@ -12,6 +12,7 @@ import { clientPersister } from './constants/storage';
 import { queryClient } from './constants/query-client';
 import { CacheManager } from '@georstat/react-native-image-cache';
 import { Dirs } from "react-native-file-access";
+import { EventProvider } from "react-native-outside-press";
 
 CacheManager.config = {
   baseDir: `${Dirs.CacheDir}/images_cache/`,
@@ -39,7 +40,9 @@ export default function App(): React.JSX.Element {
             swipeDirection='down'
             native={false}
             >
-            <Jellify />
+              <EventProvider>
+                <Jellify />
+              </EventProvider>
           </ToastProvider>
         </Theme>
       </TamaguiProvider>

components/Global/components/track.tsx

@@ -12,6 +12,7 @@ import { queryConfig } from "@/api/queries/query.config";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import Icon from "../helpers/icon";
 import Popover from "../helpers/popover";
+import OutsidePressHandler from "react-native-outside-press";
 
 interface TrackProps {
     track: BaseItemDto;
@@ -48,7 +49,7 @@ export default function Track({
     const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
     return (
-        <View>
+        <OutsidePressHandler onOutsidePress={() => setPopoverOpen(false)}>
             <Separator />
 
             <Popover 
@@ -57,6 +58,7 @@ export default function Track({
                     <XStack 
                         alignContent="center"
                         flex={1}
+                        
                         onLongPress={() => {
 
                             setPopoverOpen(true)
@@ -157,6 +159,6 @@ export default function Track({
                     <H5>{ track.Name ?? "Untitled Track" }</H5>
                 </XStack>
             </Popover>
-        </View>
+        </OutsidePressHandler>
     )
 }

components/Global/helpers/popover.tsx

@@ -1,3 +1,4 @@
+import { Colors } from "@/enums/colors";
 import React from "react"
 import { trigger } from "react-native-haptic-feedback";
 import { Popover as TamaguiPopover, View } from "tamagui"
@@ -23,7 +24,12 @@ export default function Popover(props: PopoverProps) : React.JSX.Element {
             <TamaguiPopover.Content>
             <TamaguiPopover.Arrow />
             <TamaguiPopover.Close />
-            { props.children }
+            <View 
+                backgroundColor={Colors.Background}
+                borderColor={Colors.Secondary}
+            >
+                { props.children }
+            </View>
           </TamaguiPopover.Content>
       </TamaguiPopover>
     )

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "jellify",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "jellify",
-      "version": "0.0.1",
+      "version": "0.1.0",
       "dependencies": {
         "@animatereactnative/marquee": "^0.2.0",
         "@gcores/react-native-carplay": "^1.1.12",
@@ -39,6 +39,7 @@
         "react-native-gesture-handler": "^2.20.0",
         "react-native-haptic-feedback": "^2.3.3",
         "react-native-mmkv": "2.12.2",
+        "react-native-outside-press": "^1.2.2",
         "react-native-reanimated": "^3.16.3",
         "react-native-safe-area-context": "^4.11.1",
         "react-native-screens": "^3.34.0",
@@ -20470,6 +20471,16 @@
         "react-native": ">=0.71.0"
       }
     },
+    "node_modules/react-native-outside-press": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-native-outside-press/-/react-native-outside-press-1.2.2.tgz",
+      "integrity": "sha512-TkLB6KefjSXAPMHl2CQBpGnLQHT1wJp455k3vdhTRiT72llIyXrDDLp/gDhgQNNJAd3+XUEO5F+TZr882t8sYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.16.3",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.3.tgz",

package.json

@@ -41,6 +41,7 @@
     "react-native-gesture-handler": "^2.20.0",
     "react-native-haptic-feedback": "^2.3.3",
     "react-native-mmkv": "2.12.2",
+    "react-native-outside-press": "^1.2.2",
     "react-native-reanimated": "^3.16.3",
     "react-native-safe-area-context": "^4.11.1",
     "react-native-screens": "^3.34.0",