From 0291f3a28df3cdb8f35c2c391ba158cfec7bcbe8 Mon Sep 17 00:00:00 2001
From: ppc <albie@ppc.moe>
Date: Fri, 16 Aug 2024 12:34:56 +0100
Subject: [PATCH] improve navigation tab hitboxes

---
 amnet-native/components/AMUITabBar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/amnet-native/components/AMUITabBar.tsx b/amnet-native/components/AMUITabBar.tsx
index f935d85..db922b5 100644
--- a/amnet-native/components/AMUITabBar.tsx
+++ b/amnet-native/components/AMUITabBar.tsx
@@ -18,10 +18,10 @@ export function AMUITabBar({state, descriptors, navigation}) {
         }}>
         <View
             style={{
+                gap: 15,
                 height: 60,
                 flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-around",
+                alignItems: "stretch",
             }}>
             {state.routes.map((route, index) => {
                 const {options} = descriptors[route.key];
@@ -40,11 +40,11 @@ export function AMUITabBar({state, descriptors, navigation}) {
                 return (
                     <TouchableOpacity
                         key={route.key}
+                        onPress={onPress}
                         accessibilityRole="button"
-                        accessibilityLabel={options.tabBarAccessibilityLabel}
-                        style={{paddingVertical: 15, paddingHorizontal: 35}}
                         testID={options.tabBarTestID}
-                        onPress={onPress}>
+                        accessibilityLabel={options.tabBarAccessibilityLabel}
+                        style={{flexGrow: 1, alignItems: "center", justifyContent: "center"}}>
                         {options.tabBarIcon({color: isFocused ? theme.colors.primary : theme.colors.outline, size: 24})}
                     </TouchableOpacity>
                 );