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.
This commit is contained in:
Fredrik Burmester
2026-05-30 11:56:49 +02:00
parent fe4d90df26
commit b588195456

View File

@@ -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>
);
}