Para finalização da página de login nós precisamos apenas criar o texto de navegação para registro e a logo de final de página.

Vamos então criar em “styled.ts” o texto que iremos ter para o registro.

export const RegisterText = styled.Text`
  font-size: 14px;
  text-align: center;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

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

Agora, no “index.tsx” nós vamos usar esse texto

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

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

  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>
      <DefaultButton
        buttonText="Fazer Login"
        buttonHandle={() => {
          handleLogin();
        }}
        buttonType="primary"
        marginVertical={40}
      />
      <RegisterText
        onPress={() => {
          handleNavRegister();
        }}
      >
        Não tem uma conta ainda? <Bold>Crie agora!</Bold>
      </RegisterText>
    </Container>
  );
};

Com esse texto criado, nós vamos apenas colocar a logo no final da página. Vamos criar ela em “styled.ts”

export const CompanyLogo = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 100px;
  margin: 0 auto;
  margin-top: 50px;
`;

E agora vamos usar ela no index.tsx

import React from "react";
import { Alert } from "react-native";
import BackArrow from "../../components/common/BackArrow";
import DefaultButton from "../../components/common/DefaultButton";
import {
  Bold,
  CompanyLogo,
  Container,
  FogetPassword,
  Input,
  InputContainer,
  Logo,
  RegisterText,
} from "./styled";

const logo = require("../../../assets/images/logo.png");
const companyLogo = require("../../../assets/images/logo-obc.png");

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

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

  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>
      <DefaultButton
        buttonText="Fazer Login"
        buttonHandle={() => {
          handleLogin();
        }}
        buttonType="primary"
        marginVertical={40}
      />
      <RegisterText
        onPress={() => {
          handleNavRegister();
        }}
      >
        Não tem uma conta ainda? <Bold>Crie agora!</Bold>
      </RegisterText>
      <CompanyLogo source={companyLogo} />
    </Container>
  );
};

export default Login;