Agora, para finalizar a tela de registro nós vamos utilizar os botões e criar o texto de termos de privacidade.

Vamos então no index.tsx de Register para utilizar esses botões.

const Register = () => {
  return (
    <Container>
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
      <Form />
      <DefaultButton
        buttonText="FAZER REGISTRO"
        buttonHandle={() => {}}
        buttonType="primary"
        marginVertical={30}
      />
    </Container>
  );
};

Agora, nós criar o texto de políticas de privacidade, por ser um app de estudo, não vamos criar uma página dessas, porém você pode criar se quiser com um lorem dentro, apenas para treinar a navegação e estilização.

Vamos então em styled para poder criar esse texto

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 + 10}px;
`;

export const Title = styled.Text`
  font-size: 20px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.primaryText};
  margin: 15px 0;
  text-align: center;
`;

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

Agora nós vamos utilizar esse texto e criar o segundo botão, que será o botão de navegação para o login

const Register = () => {
  return (
    <Container>
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
      <Form />
      <DefaultButton
        buttonText="FAZER REGISTRO"
        buttonHandle={() => {}}
        buttonType="primary"
        marginVertical={30}
      />
      <AcceptTerms>Ao fazer o registro aceito{'\\n'}os termos de privacidade</AcceptTerms>
      <DefaultButton
        buttonText="FAZER LOGIN"
        buttonHandle={() => {}}
        buttonType="secondary"
        marginVertical={30}
      />
    </Container>
  );
};

Agora para o handle do registro, podemos deixar sem, pois isso será algo mais para frente, na hora de enviarmos para o backend. O handle de login vamos fazer para navegar para lá.

import React from "react";
import { AcceptTerms, Container, Title } from "./styled";
import BackArrow from "../../components/common/BackArrow";
import Form from "../../components/Register/Form";
import DefaultButton from "../../components/common/DefaultButton";
import { useNavigation } from "@react-navigation/native";
import { PropsStack } from "../../routes";

const Register = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container>
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
      <Form />
      <DefaultButton
        buttonText="FAZER REGISTRO"
        buttonHandle={() => {}}
        buttonType="primary"
        marginVertical={30}
      />
      <AcceptTerms>
        Ao fazer o registro aceito{"\\n"}os termos de política de privacidade
      </AcceptTerms>
      <DefaultButton
        buttonText="FAZER LOGIN"
        buttonHandle={() => {
          navigation.navigate("Login");
        }}
        buttonType="secondary"
        marginVertical={30}
      />
    </Container>
  );
};

export default Register;

Vamos colocar o padding do scroll, para que a gente tenha uma visualização total da parte de baixo da tela quando ele for ativado.

import React from "react";
import { AcceptTerms, Container, Title } from "./styled";
import BackArrow from "../../components/common/BackArrow";
import Form from "../../components/Register/Form";
import DefaultButton from "../../components/common/DefaultButton";
import { useNavigation } from "@react-navigation/native";
import { PropsStack } from "../../routes";

const Register = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container
      contentContainerStyle={{
        paddingBottom: 60,
      }}
    >
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
      <Form />
      <DefaultButton
        buttonText="FAZER REGISTRO"
        buttonHandle={() => {}}
        buttonType="primary"
        marginVertical={30}
      />
      <AcceptTerms>
        Ao fazer o registro aceito{"\\n"}os termos de política de privacidade
      </AcceptTerms>
      <DefaultButton
        buttonText="FAZER LOGIN"
        buttonHandle={() => {
          navigation.navigate("Login");
        }}
        buttonType="secondary"
        marginVertical={30}
      />
    </Container>
  );
};

export default Register;

Falta apenas a nossa logo no final da tela para finalizarmos. Podemos copiar o estilo da “companyLogo” da tela de login, pois será a mesma logo.

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

E agora vamos utilizar

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

const Register = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container
      contentContainerStyle={{
        paddingBottom: 60,
      }}
    >
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
      <Form />
      <DefaultButton
        buttonText="FAZER REGISTRO"
        buttonHandle={() => {}}
        buttonType="primary"
        marginVertical={30}
      />
      <AcceptTerms>
        Ao fazer o registro aceito{"\\n"}os termos de política de privacidade
      </AcceptTerms>
      <DefaultButton
        buttonText="FAZER LOGIN"
        buttonHandle={() => {
          navigation.navigate("Login");
        }}
        buttonType="secondary"
        marginVertical={30}
      />
      <CompanyLogo source={companyLogo} />
    </Container>
  );
};

Agora nós temos a nossa página finalizada com sucesso