From b588195456dc431775ba9b449d5ef7a6d21e0157 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sat, 30 May 2026 11:56:49 +0200
Subject: [PATCH] fix(search): correct Library/Discover tab layout for @expo/ui
 SDK 55

Native Button no longer renders RN <Text> children in SDK 55; use the
label prop. Wrap both buttons in a single Host + HStack with a trailing
Spacer so they sit flush-left with no centering inset.
---
 components/search/SearchTabButtons.tsx | 40 +++++++-------------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/components/search/SearchTabButtons.tsx b/components/search/SearchTabButtons.tsx
index 55510e52e..600de2ac8 100644
--- a/components/search/SearchTabButtons.tsx
+++ b/components/search/SearchTabButtons.tsx
@@ -1,7 +1,6 @@
-import { Button, Host } from "@expo/ui/swift-ui";
+import { Button, Host, HStack, Spacer } from "@expo/ui/swift-ui";
 import { buttonStyle } from "@expo/ui/swift-ui/modifiers";
 import { Platform, TouchableOpacity, View } from "react-native";
-import { Text } from "@/components/common/Text";
 import { Tag } from "@/components/GenreTags";
 
 type SearchType = "Library" | "Discover";
@@ -19,16 +18,8 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
 }) => {
   if (Platform.OS === "ios") {
     return (
-      <>
-        <Host
-          style={{
-            height: 40,
-            width: 80,
-            flexDirection: "row",
-            gap: 10,
-            justifyContent: "space-between",
-          }}
-        >
+      <Host style={{ height: 40, flex: 1 }}>
+        <HStack spacing={8}>
           <Button
             modifiers={[
               buttonStyle(
@@ -36,19 +27,8 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
               ),
             ]}
             onPress={() => setSearchType("Library")}
-          >
-            <Text>{t("search.library")}</Text>
-          </Button>
-        </Host>
-        <Host
-          style={{
-            height: 40,
-            width: 100,
-            flexDirection: "row",
-            gap: 10,
-            justifyContent: "space-between",
-          }}
-        >
+            label={t("search.library")}
+          />
           <Button
             modifiers={[
               buttonStyle(
@@ -56,11 +36,11 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
               ),
             ]}
             onPress={() => setSearchType("Discover")}
-          >
-            <Text>{t("search.discover")}</Text>
-          </Button>
-        </Host>
-      </>
+            label={t("search.discover")}
+          />
+          <Spacer />
+        </HStack>
+      </Host>
     );
   }