Nós vamos criar dentro de styled o “inputContainer”, que será o mesmo para username e password.

export const InputContainer = styled.View`
  width: 85%;
  height: 50px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  background-color: ${({ theme }) => theme.colors.background};
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 20px;
`;

Em seguida, podemos criar o input em si, junto com o texto que ficará abaixo do input para o “esqueci senha”

export const Input = styled.TextInput`
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: white;
  padding-left: 10px;
`;

export const FogetPassword = styled.Text`
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  margin-right: 10%;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

Vamos agora usar esses componentes, criando o formulário. Para a senha, nós usaremos

return (
  <Container>
    <BackArrow marginLeft={30} />
    <Logo source={logo} />
    <InputContainer>
      <Input placeholder="Email" placeholderTextColor="white" />
    </InputContainer>
    <InputContainer>
      <Input
        placeholder="Senha"
        placeholderTextColor="white"
        secureTextEntry={true}
      />
    </InputContainer>
    <FogetPassword>Esqueceu sua senha?</FogetPassword>
  </Container>
);

Agora que a gente tem os inputs, precisamos do botão. Nós iremos usar esse botão como o default na aplicação, então iremos criar ele dentro de “components > common”

Iremos na pasta “common” criar uma pasta chamada “DefaultButton” com “index.tsx” e “styled.ts” nela. Nós iremos começar criando em “styled.ts” o buttonContainer, que terá algumas props para poder deixar o botão mais customizável de acordo com a página.

import styled from "styled-components/native";

type propsButton = {
  type: string;
  marginVertical: number;
};

export const ButtonContainer = styled.TouchableOpacity<propsButton>`
  width: 85%;
  min-height: 40px;
  background-color: ${(props) =>
    props.type === "primary"
      ? ({ theme }) => theme.colors.primaryButton
      : ({ theme }) => theme.colors.secondaryButton};
  justify-content: center;
  align-items: center;
  margin: ${(props) => props.marginVertical}px auto;
  border-radius: 5px;
`;

Agora criamos o texto do botão.

export const ButtonText = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
`;

Podemos então ir usar esse botão, começar recebendo tudo de props que vamos utilizar.

import React from "react";
import { ButtonContainer } from "./styled";

type props = {
  buttonText: string;
  buttonHandle: Function;
  buttonType: string;
  marginVertical: number;
};

const DefaultButton = ({
  buttonText,
  buttonHandle,
  buttonType,
  marginVertical,
}: props) => {
  return (
    <ButtonContainer>
    </ButtonContainer>
  );
};

export default DefaultButton;

Recebendo essas informações, nós podemos continuar a criação do botão.

import React from "react";
import { ButtonContainer, ButtonText } from "./styled";

type props = {
  buttonText: string;
  buttonHandle: Function;
  buttonType: string;
  marginVertical: number;
};

const DefaultButton = ({
  buttonText,
  buttonHandle,
  buttonType,
  marginVertical,
}: props) => {
  return (
    <ButtonContainer
      onPress={() => {
        buttonHandle();
      }}
      type={buttonType}
      marginVertical={marginVertical}
    >
      <ButtonText>{buttonText}</ButtonText>
    </ButtonContainer>
  );
};

export default DefaultButton;

Com o botão criado, nós podemos agora utilizar ele na página de login.

const handleLogin = () => {
	Alert.alert("Botão de login clicado")
}

return (
  <Container>
    <BackImage marginLeft={30} />
    <Logo source={require("../../../assets/defaultLogo.png")} />
    <InputContainer>
      <Input
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        placeholderTextColor="white"
      />
    </InputContainer>
    <InputContainer>
      <Input
        value={password}
        onChangeText={setPassword}
        placeholder="Senha"
        placeholderTextColor="white"
        secureTextEntry={true}
      />
    </InputContainer>
    <FogetPassword>Esqueceu sua senha?</FogetPassword>
    <DefaultButton
      buttonText="Fazer Login"
      buttonHandle={() => {
        handleLogin();
      }}
      buttonType="primary"
      marginVertical={40}
    />
  </Container>
);

Finalizamos então a área de formulário, podemos prosseguir para finalizar a página.