Fix navbar on android

front/bun.lock

@@ -5,6 +5,7 @@
       "name": "kyoo",
       "dependencies": {
         "@expo/html-elements": "^0.12.5",
+        "@gorhom/portal": "^1.0.14",
         "@material-symbols/svg-400": "^0.31.6",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@react-navigation/bottom-tabs": "^7.3.10",
@@ -309,6 +310,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@gorhom/portal": ["@gorhom/portal@1.0.14", "", { "dependencies": { "nanoid": "^3.3.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A=="],
+
     "@hapi/hoek": ["@hapi/hoek@9.3.0", "", {}, "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="],
 
     "@hapi/topo": ["@hapi/topo@5.1.0", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg=="],

front/package.json

@@ -14,6 +14,7 @@
 	},
 	"dependencies": {
 		"@expo/html-elements": "^0.12.5",
+		"@gorhom/portal": "^1.0.14",
 		"@material-symbols/svg-400": "^0.31.6",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@react-navigation/bottom-tabs": "^7.3.10",

front/src/primitives/menu.tsx

@@ -1,6 +1,7 @@
 import { Portal } from "@gorhom/portal";
 import Check from "@material-symbols/svg-400/rounded/check-fill.svg";
 import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
+import { useRouter } from "expo-router";
 import {
 	type ComponentType,
 	type ReactElement,
@@ -18,8 +19,8 @@ import { percent, px, sm, useYoshiki, vh, xl } from "yoshiki/native";
 import { Icon, IconButton } from "./icons";
 import { PressableFeedback } from "./links";
 import { P } from "./text";
-import { ts } from "./utils";
 import { ContrastArea, SwitchVariant } from "./theme";
+import { ts } from "./utils";
 
 const MenuContext = createContext<((open: boolean) => void) | undefined>(undefined);
 

front/src/providers/index.tsx

@@ -6,10 +6,10 @@ import { createQueryClient } from "~/query";
 import { AccountProvider } from "./account-provider";
 import { ErrorConsumer } from "./error-consumer";
 import { ErrorProvider } from "./error-provider";
+import { NativeProviders } from "./native-providers";
 import { TranslationsProvider } from "./translations.native";
 
-function getServerData(key: string) {
+function getServerData(key: string) {}
-}
 
 const QueryProvider = ({ children }: { children: ReactNode }) => {
 	const [queryClient] = useState(() => createQueryClient());
@@ -38,7 +38,9 @@ export const Providers = ({ children }: { children: ReactNode }) => {
 				<ErrorProvider>
 					<AccountProvider>
 						<TranslationsProvider>
-							<ErrorConsumer scope="root">{children}</ErrorConsumer>
+							<NativeProviders>
+								<ErrorConsumer scope="root">{children}</ErrorConsumer>
+							</NativeProviders>
 						</TranslationsProvider>
 					</AccountProvider>
 				</ErrorProvider>

front/src/providers/native-providers.tsx

@@ -0,0 +1,6 @@
+import { PortalProvider } from "@gorhom/portal";
+import type { ReactNode } from "react";
+
+export const NativeProviders = ({ children }: { children: ReactNode }) => {
+	return <PortalProvider>{children}</PortalProvider>;
+};

front/src/providers/native-providers.web.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export const NativeProviders = ({ children }: { children: ReactNode }) => {
+	return children;
+};