justifyContent | React Native: Construindo um App com Native-base

<Image source={Logo} alt='Logo Imagem'/> <Text fontSize='2xl' fontWeight='bold' color='gray.500' textAlign='center' mt={5} > Faça o login em sua conta </Text> <Box> <FormControl mt={3}> <FormControl.Label>Email</FormControl.Label> <Input placeholder='Insira seu endereço de e-mail' size='lg' w='100%' borderRadius='lg' bgColor='gray.100' shadow={3} /> </FormControl> <FormControl mt={3}> <FormControl.Label>Senha</FormControl.Label> <Input placeholder='Insira sua senha' size='lg' w='100%' borderRadius='lg' bgColor='gray.100' shadow={3} /> </FormControl> </Box> <Button w="100%" bg="blue.800" mt={10} borderRadius="lg"> Entrar </Button> <Link href='www.google.com' mt={5}> Esuqeceu a senha? </Link> <Box w='100%' flexDirection="row" justifyContent="center"> <Text> Ainda não tem cadastro? </Text> <TouchableOpacity> <Text color='blue.500'> Faça o seu cadastro </Text> </TouchableOpacity> </Box> </VStack>

Oii Raiane, tudo bem?

Uma coisa que você pode tentar é garantir que o VStack esteja ocupando toda a altura disponível na tela, para que o justifyContent="center" possa realmente centralizar tudo verticalmente. Você pode fazer isso adicionando a propriedade flex={1} ao VStack, como no exemplo abaixo:

<VStack flex={1} alignItems="center" justifyContent="center" p={5}>
  {/* Seus componentes aqui */}
</VStack>

Isso fará com que o VStack expanda para ocupar toda a altura disponível, o que pode ajudar no alinhamento dos elementos internos.

Abaixo deixo o código completo da aula:

import { VStack, Image, Text, Box, Link } from 'native-base'
import { TouchableOpacity } from 'react-native';
import Logo from './assets/Logo.png'
import { Botao } from './componentes/Botao';
import { EntradaTexto } from './componentes/EntradaTexto';
import { Titulo } from './componentes/Titulo';

export default function Login() {
  return (
    <VStack flex={1} alignItems="center" justifyContent="center" p={5}>
      <Image source={Logo} alt="Logo Voll" />

      <Titulo>
        Faça login em sua conta
      </Titulo>
      <Box>
        <EntradaTexto
          label="Email"
          placeholder="Insira seu endereço de e-mail"
        />
        <EntradaTexto
          label="Senha"
          placeholder="Insira sua senha"
        />
      </Box>
      <Botao>Entrar</Botao>

      <Link href='https://www.alura.com.br' mt={2}>
        Esqueceu sua senha?
      </Link>

      <Box w="100%" flexDirection="row" justifyContent="center" mt={8}>
        <Text>Ainda não tem cadastro? </Text>
        <TouchableOpacity>
          <Text color="blue.500">
            Faça seu cadastro!
          </Text>
        </TouchableOpacity>
      </Box>
    </VStack>
  );
}

Um abraço e bons estudos.