Styles are not loading after upgrading from v2 to v3 #3239
Description
I just upgraded a react native project from expo sdk 53 to sdk 54 and then from gluestack v2 to v3 as followed in the official steps:
https://gluestack.io/ui/docs/home/getting-started/installation
https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
Problem is that all gluestack elements are not styling as expected.
A single element is not rendering as it should be.]
With expo 53 and gluestack v2 worked smoothly, but I had to upgrade in order to render the project in physical mobile devides through expo go.
Login.js:
return (
{/* <Animated.View style={{
flex: 1,
transform: [{ translateY: slideAnim }],
opacity: fadeAnim,
}}> */}
{/* <Box alignItems="center" justifyContent="center" paddingTop={80} >
<Image
source={require("./../../assets/images/logo-oro-miel.png")}
alt="OroyMiel Logo"
size="xl"
borderRadius={17}
/>
</Box> */}
<Heading size="lg" style={styles.titleHeader}>
Accede a tu cuenta
</Heading>
<Box style={styles.textInput}>
<Text bold className="text-primary-0">
Email
</Text>
<Input className="text-center border border-primary-0" variant="rounded" backgroundColor="white">
<InputField
className="text-primary-0"
type="text"
placeholder="abc@gmail.com"
value={username}
onChangeText={(text) => setUsername(text)}
/>
</Input>
</Box>
<Box style={styles.textInput}>
<Text bold className="text-primary-0">
Contraseña
</Text>
<Input className="text-center border border-primary-0" variant="rounded" backgroundColor="white">
<InputField
className="text-primary-0"
type={viewPassword ? "text" : "password"}
placeholder="*****"
value={password}
onChangeText={(text) => setPassword(text)}
/>
<InputSlot
className="pr-3"
onPress={() => setViewPassword(!viewPassword)}
>
<InputIcon
className="text-primary-0 absolute right-4"
as={!viewPassword ? EyeOff : Eye}
/>
</InputSlot>
</Input>
</Box>
<Box style={styles.textInput}>
<Link
variant="solid"
action="primary"
onPress={() => navigation.navigate("ResetPassword")}
>
<LinkText className="text-primary-0">¿Olvidaste tu contraseña?</LinkText>
</Link>
</Box>
<Box style={styles.buttonContainer}>
<Box style={styles.button}>
<Button variant="solid" size="md" action="primary">
<ButtonText>Click me</ButtonText>
</Button>
<Button
variant="solid"
style={{borderRadius: 20}}
action="primary"
// className="bg-primary-0"
onPress={login}
disabled={isLoading}
>
{isLoading ? (
<Spinner color="white" />
) : (
<ButtonText className="text-white">Acceder</ButtonText>
)}
</Button>
</Box>
<Box style={styles.button}>
<Button
variant="solid"
style={{borderRadius: 20}}
action="secondary"
className="bg-secondary-0"
onPress={() =>
navigation.navigate("RegisterUser", { screen: "UserData" })
}
disabled={isLoading}
>
<ButtonText className="text-white">
¿No tienes una cuenta? Registrate
</ButtonText>
</Button>
</Box>
</Box>
<GenericModal
isVisible={showOTPModal}
onClose={() => {
setShowOTPModal(false);
setOtp("");
}}
title="Verificación en dos pasos"
primaryButtonText="Verificar"
secondaryButtonText="Cancelar"
onPrimaryAction={handleOTPVerification}
onSecondaryAction={() => {
setShowOTPModal(false);
setOtp("");
}}
isPrimaryDisabled={otp.length < 6}
>
<Text>Ingresa el código de 6 dígitos enviado a tu correo</Text>
<Input mt="$4">
<InputField
keyboardType="number-pad"
maxLength={6}
placeholder="123456"
value={otp}
onChangeText={setOtp}
textAlign="center"
fontSize="$xl"
autoFocus
/>
</Input>
</GenericModal>
{/* </Animated.View> */}
</Box>
);
}
I attach my package.json
COuld you help me please? Thanks