Nós vamos começar criando a nossa pasta “Register” dentro de “screens”, e dentro dela criaremos o padrão de “index.tsx” e “styled.ts”

Agora nós iremos criar o container que vai envolver a página dentro de styled.ts.

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;
`;

Agora, nós temos a base que vamos usar. Podemos ir no “index” para poder usar

import { View, Text } from "react-native";
import React from "react";
import { Container } from "./styled";

const Register = () => {
  return (
    <Container>
      <Text>Register</Text>
    </Container>
  );
};

export default Register;

Vamos agora importar a nossa seta de voltar, que é padrão nas páginas.

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

const Register = () => {
  return (
    <Container>
      <BackArrow marginLeft={20} />
    </Container>
  );
};

export default Register;

Vamos criar o texto para a página, colocando abaixo da seta

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: 25px 0;
  text-align: center;
`;

Agora vamos usar esse título

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

const Register = () => {
  return (
    <Container>
      <BackArrow marginLeft={20} />
      <Title>CRIAR UMA CONTA</Title>
    </Container>
  );
};

export default Register;

Nós podemos agora fazer a navegação das páginas. Vamos colocar no texto de registro a navegação para o usuário vir para o registro (Vamos para o login).

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

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

  const handleNavRegister = () => {
    navigation.navigate("Register");
  };

  return (

Agora nós precisamos criar ela lá no routes.

import Home from "../screens/Home";
import Login from "../screens/Login";
import Register from "../screens/Register";

const Stack = createNativeStackNavigator();

type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
};

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Register" component={Register} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Routes;

Agora a gente já pode fazer a navegação e também fazer o uso do botão para voltar de página.

Agora a gente pode seguir para fazer o form