Menu fails to appear and Modal renders abnormally in Expo Go and devlopment build under GlueStack UI v3 + Expo SDK 54 (works after removing Modal animation) #3251
Description
header.tsx
import AuthModal from "@/components/auth-modal";
import {
Avatar,
AvatarBadge,
AvatarFallbackText,
AvatarImage,
} from "@/components/ui/avatar";
import { Box } from "@/components/ui/box";
import { Button, ButtonText } from "@/components/ui/button";
import { Center } from "@/components/ui/center";
import { Menu, MenuItem, MenuItemLabel } from "@/components/ui/menu";
import { useUserStore } from "@/store";
import Entypo from "@expo/vector-icons/Entypo";
import { useState } from "react";
import { Image } from "react-native";
type LangType = {
name: string;
value: string;
};
const LANG: LangType[] = [
{
name: "English",
value: "en",
},
{
name: "Español",
value: "es",
},
{
name: "Português",
value: "pt",
},
{
name: "Русский",
value: "ru",
},
{
name: "Français",
value: "fr",
},
];
const Header = () => {
const avatar = useUserStore((state) => state.avatar);
const userName = useUserStore((state) => state.userName);
const [currentLng, setCurrentLng] = useState(LANG[0]);
return (
<Box className="w-screen flex-row items-center justify-between bg-white p-4">
{/* <Text className="text-4xl">SourcingX</Text> */}
{/* Lang & Avatar */}
<Center className="flex-row gap-3">
<Menu
className="rounded-lg bg-red-200"
placement="bottom right"
trigger={({ ...triggerProps }) => {
return (
<Button {...triggerProps} className="bg-transparent px-1">
{/* data-[focus=true]:bg-transparent data-[hover=true]:bg-transparent */}
<ButtonText className="text-black">English</ButtonText>
<Entypo name="chevron-thin-down" size={16} color="black" />
</Button>
);
}}
>
{LANG.map((lng) => (
<MenuItem
key={lng.value}
textValue={lng.name}
className="min-w-[150px]"
>
<MenuItemLabel>{lng.name}</MenuItemLabel>
</MenuItem>
))}
</Menu>
<AuthModal />
{/* {avatar ? (
<Avatar className="h-9 w-9 rounded-full">
<AvatarFallbackText>{userName}</AvatarFallbackText>
<AvatarImage
source={{
uri: avatar,
}}
/>
<AvatarBadge />
</Avatar>
) : (
// md: w-3 h-3
<Center className="h-10 w-10 rounded-full border border-gray-200">
{userName[0].toUpperCase() || "K"}
</Center>
)} */}
</Center>
</Box>
);
};
export default Header;auth-modal.tsx
return (
<>
<Button
onPress={() => setShowModal(true)}
className="rounded-2xl bg-gray-100 px-4 py-1 font-bold text-sm data-[hover=true]:bg-gray-200"
>
<ButtonText className="text-black">Log in</ButtonText>
{/* <ButtonText className="text-black">Log in</ButtonText> */}
</Button>
<Modal
isOpen={showModal}
onClose={() => {
setShowModal(false);
}}
size="md"
>
<ModalBackdrop />
<ModalContent className="rounded-2xl">
{/* 顶部标题 */}
<ModalHeader>
<Text className="font-bold text-2xl">Log in</Text>
<ModalCloseButton>
<AntDesign name="close" size={20} color="black" />
</ModalCloseButton>
</ModalHeader>
<ModalBody>
<FormControl
size="md"
isDisabled={false}
isReadOnly={false}
isRequired={false}
>
<FormControlLabel>
<FormControlLabelText>Email</FormControlLabelText>
</FormControlLabel>
<Input className="my-1 rounded-xl" size="md">
<InputField
type="text"
placeholder="email"
value={email}
onChangeText={(value) => setEmail(value)}
keyboardType="email-address" // 优化用户输入体验
autoComplete="email" // 优化输入体验
/>
</Input>
<FormControlLabel>
<FormControlLabelText>Password</FormControlLabelText>
</FormControlLabel>
<Input className="my-1 rounded-xl" size="md">
<InputField
type="password"
placeholder="password"
value={password}
onChangeText={(value) => setPassword(value)}
/>
</Input>
<FormControlHelper>
<FormControlHelperText>
Must be at least 6 characters.
</FormControlHelperText>
</FormControlHelper>
<FormControlError>
<FormControlErrorText className="text-red-500">
At least 6 characters are required.
</FormControlErrorText>
</FormControlError>
<Button
className="mt-4 w-full rounded-xl"
size="sm"
variant="solid"
onPress={handleLogin}
>
<ButtonText>Log in</ButtonText>
</Button>
</FormControl>
{/* 分割线 */}
<Box className="my-4 flex-row items-center">
<Box className="h-px flex-1 bg-gray-300" />
<Text className="mx-3 text-gray-500 text-sm">or</Text>
<Box className="h-px flex-1 bg-gray-300" />
</Box>
{/* Google 登录按钮 */}
<Button
className="w-full flex-row items-center justify-center space-x-2 rounded-xl border border-gray-300 bg-white"
size="sm"
variant="outline"
action="default"
onPress={() => console.log("Sign in with google")}
>
<GoogleIcon width={18} height={18} />
<ButtonText className="text-gray-700">
Sign in with Google
</ButtonText>
</Button>
</ModalBody>
</ModalContent>
</Modal>
</>
);
```tsx