diff --git a/App.tsx b/App.tsx
index 700966f1..99efc135 100644
--- a/App.tsx
+++ b/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}
>
-
+
+
+
diff --git a/components/Global/components/track.tsx b/components/Global/components/track.tsx
index 8a3ad271..eeb1b5fd 100644
--- a/components/Global/components/track.tsx
+++ b/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(false);
return (
-
+ setPopoverOpen(false)}>
{
setPopoverOpen(true)
@@ -157,6 +159,6 @@ export default function Track({
{ track.Name ?? "Untitled Track" }
-
+
)
}
\ No newline at end of file
diff --git a/components/Global/helpers/popover.tsx b/components/Global/helpers/popover.tsx
index 35dff9cb..39e04a08 100644
--- a/components/Global/helpers/popover.tsx
+++ b/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 {
- { props.children }
+
+ { props.children }
+
)
diff --git a/package-lock.json b/package-lock.json
index b459d30f..1b6b028d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9157df9c..c4a13210 100644
--- a/package.json
+++ b/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",