From e92d4e3f03ee8f5db9ae94d237dea15f8b63f112 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 18 Apr 2026 16:36:54 +0200
Subject: [PATCH] Use native tabs on android

---
 front/src/app/(app)/(tabs)/_layout.tsx | 80 ++++++++++----------------
 front/src/ui/login/oidc.tsx            |  2 +-
 2 files changed, 30 insertions(+), 52 deletions(-)

diff --git a/front/src/app/(app)/(tabs)/_layout.tsx b/front/src/app/(app)/(tabs)/_layout.tsx
index eca02da5..e8d5db36 100644
--- a/front/src/app/(app)/(tabs)/_layout.tsx
+++ b/front/src/app/(app)/(tabs)/_layout.tsx
@@ -1,12 +1,7 @@
-import Browse from "@material-symbols/svg-400/rounded/browse-fill.svg";
-// import Downloading from "@material-symbols/svg-400/rounded/downloading-fill.svg";
-import Home from "@material-symbols/svg-400/rounded/home-fill.svg";
-import Person from "@material-symbols/svg-400/rounded/person-fill.svg";
-import { Slot, Tabs } from "expo-router";
+import { Slot } from "expo-router";
+import { NativeTabs } from "expo-router/unstable-native-tabs";
 import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
-import { Icon } from "~/primitives";
-import { cn } from "~/utils";
 
 export const unstable_settings = {
 	initialRouteName: "index",
@@ -18,49 +13,32 @@ export default function TabsLayout() {
 	if (Platform.OS === "web") return <Slot />;
 
 	return (
-		<Tabs
-			screenOptions={{
-				headerShown: false,
-			}}
-		>
-			<Tabs.Screen
-				name="index"
-				options={{
-					tabBarLabel: t("navbar.home"),
-					tabBarIcon: ({ focused }) => {
-						return (
-							<Icon
-								icon={Home}
-								className={cn(focused && "fill-accent dark:fill-accent")}
-							/>
-						);
-					},
-				}}
-			/>
-			<Tabs.Screen
-				name="browse"
-				options={{
-					tabBarLabel: t("navbar.browse"),
-					tabBarIcon: ({ focused }) => (
-						<Icon
-							icon={Browse}
-							className={cn(focused && "fill-accent dark:fill-accent")}
-						/>
-					),
-				}}
-			/>
-			<Tabs.Screen
-				name="profile"
-				options={{
-					tabBarLabel: t("navbar.profile"),
-					tabBarIcon: ({ focused }) => (
-						<Icon
-							icon={Person}
-							className={cn(focused && "fill-accent dark:fill-accent")}
-						/>
-					),
-				}}
-			/>
-		</Tabs>
+		<NativeTabs>
+			<NativeTabs.Trigger name="index">
+				<NativeTabs.Trigger.Icon
+					sf={{ default: "house", selected: "house.fill" }}
+					md="home"
+				/>
+				<NativeTabs.Trigger.Label>{t("navbar.home")}</NativeTabs.Trigger.Label>
+			</NativeTabs.Trigger>
+			<NativeTabs.Trigger name="browse">
+				<NativeTabs.Trigger.Icon
+					sf={{ default: "square.grid.2x2", selected: "square.grid.2x2.fill" }}
+					md="browse"
+				/>
+				<NativeTabs.Trigger.Label>
+					{t("navbar.browse")}
+				</NativeTabs.Trigger.Label>
+			</NativeTabs.Trigger>
+			<NativeTabs.Trigger name="profile">
+				<NativeTabs.Trigger.Icon
+					sf={{ default: "person", selected: "person.fill" }}
+					md="person"
+				/>
+				<NativeTabs.Trigger.Label>
+					{t("navbar.profile")}
+				</NativeTabs.Trigger.Label>
+			</NativeTabs.Trigger>
+		</NativeTabs>
 	);
 }
diff --git a/front/src/ui/login/oidc.tsx b/front/src/ui/login/oidc.tsx
index be720bbf..f274b959 100644
--- a/front/src/ui/login/oidc.tsx
+++ b/front/src/ui/login/oidc.tsx
@@ -55,5 +55,5 @@ export const OidcLogin = ({ apiUrl }: { apiUrl: string }) => {
 OidcLogin.query = (apiUrl?: string): QueryIdentifier<AuthInfo> => ({
 	path: ["auth", "info"],
 	parser: AuthInfo,
-	options: { apiUrl },
+	options: { apiUrl, returnError: true },
 });