Faremos a base aqui da nossa tela, configurando o arquivo e tendo os primeiros retornos visuais.

Vamos começar criando dentro de “screens” a pasta “Login” e dentro dela vamos criar um arquivo chamado “index.tsx” e outro “styled.ts”

Vamos criar o nosso container, que terá o padding-top para termos espaço com os elementos que vão vir abaixo.

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.ScrollView`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.backgroundLight};
  padding-top: ${statusBarHeight + 20}px;
`;

Agora, nós podemos criar a seta que teremos para voltar. Essa seta ficará presente em várias telas, por isso teremos ela como common.

Vamos dentro de “common” colocar uma pasta chamada “BackArrow”, e dentro dela colocaremos um “index.tsx” e “styled.ts”

Vamos criar a estrutura dela, colocando um marginLeft como variável, para que em cada página a gente consiga mudar caso a gente queira ou precise.

import styled from "styled-components/native";

type backProps = {
  marginLeft: number;
};

export const BackContainer = styled.TouchableOpacity``;

export const Back = styled.Image.attrs({
  resizeMode: "contain",
})<backProps>`
  width: 40px;
  margin-left: ${(props) => props.marginLeft}px;
`;

Agora, nós podemos colocar no index.tsx a estrutura que vamos usar.

import React from "react";
import { useNavigation } from "@react-navigation/native";
import { PropsStack } from "../../../routes";
import { Back, BackContainer } from "./styled";

type props = {
  marginLeft: number;
};

const back = require("../../../../assets/icons/arrow-left.png");

const BackArrow = ({ marginLeft }: props) => {
  const navigation = useNavigation<PropsStack>();

  const handleBack = () => {
    navigation.goBack();
  };

  return (
    <BackContainer
      onPress={() => {
        handleBack();
      }}
    >
      <Back
        marginLeft={marginLeft}
        source={back}
      />
    </BackContainer>
  );
};

export default BackArrow;

Com ela criada, podemos usar ela no login, e será a primeira coisa a usarmos lá.

import React from "react";
import BackArrow from "../../components/common/BackArrow";
import { Container } from "./styled";

const Login = () => {
  return (
    <Container>
      <BackArrow marginLeft={30} />
    </Container>
  );
};

export default Login;

Agora que podemos criar a logo da página dentro de “styled.ts” do arquivo de Login

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.ScrollView`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.backgroundLight};
  padding-top: ${statusBarHeight + 20}px;
`;

export const Logo = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 230px;
  height: 230px;
  margin: 0 auto;
`;

Podemos usar agora a logo abaixo da seta de volta

import React from "react";
import BackArrow from "../../components/common/BackArrow";
import { Container, Logo } from "./styled";

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

const Login = () => {
  return (
    <Container>
      <BackArrow marginLeft={30} />
      <Logo source={logo} />
    </Container>
  );
};

export default Login;