Vamos em components criar uma pasta chamada “Register” e dentro dela vamos criar uma pasta chamada “Form”, com o index.tsx e styled.

Nós vamos começar criando o InputContainer e o Input.

import styled from "styled-components/native";

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

export const Input = styled.TextInput`
  flex: 1;
  font-size: 20px;
  color: white;
  padding-left: 10px;
`;

Vamos também instalar uma dependência que não havíamos instalado antes, que será de máscaras, onde a gente vai colocar na hora do telefone.

npm install [email protected]

Além desses padrão, nós vamos criar o inputMask, para o telefone.

import styled from "styled-components/native";
import { TextInputMask } from "react-native-masked-text";

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

export const Input = styled.TextInput`
  flex: 1;
  font-size: 20px;
  color: white;
  padding-left: 10px;
`;

export const InputMask = styled(TextInputMask)`
  flex: 1;
  font-size: 20px;
  padding-left: 10px;
  color: ${({ theme }) => theme.colors.primaryText};
`;

Agora a gente pode ir no index para poder usar e criar os container

import React from "react";
import { Input, InputContainer } from "./styled";

const Form = () => {
  return (
    <>
      <InputContainer>
        <Input placeholder="Nome e sobrenome" placeholderTextColor="white" />
      </InputContainer>
    </>
  );
};

export default Form;

Agora podemos criar os demais para preencher todo o form.

import React from "react";
import { Input, InputContainer, InputMask } from "./styled";

const Form = () => {
  return (
    <>
      <InputContainer>
        <Input placeholder="Nome e sobrenome" placeholderTextColor="white" />
      </InputContainer>
      <InputContainer>
        <Input placeholder="Email" placeholderTextColor="white" />
      </InputContainer>
      <InputContainer>
        <InputMask
          type="cel-phone"
          options={{
            maskType: "BRL",
            withDDD: true,
            dddMask: "(99)",
          }}
          placeholder="(XX) XXXXX-XXXX"
          placeholderTextColor="white"
        />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Senha"
          placeholderTextColor="white"
          secureTextEntry={true}
        />
      </InputContainer>
      <InputContainer>
        <Input
          placeholder="Confirmar Senha"
          placeholderTextColor="white"
          secureTextEntry={true}
        />
      </InputContainer>
    </>
  );
};

export default Form;

Agora vamos usar eles lá na tela para poder visualizar o que criamos.

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

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

export default Register;

Podemos ver então os inputs já definidos. Nós vamos criar um useState para o telefone, de forma temporária apenas para vermos a máscara sendo usada.

const Form = () => {	
	const [phone, setPhone] = useState("");

  return (
    <>
      <InputContainer>
        <Input placeholder="Nome e sobrenome" placeholderTextColor="white" />
      </InputContainer>
      <InputContainer>
        <Input placeholder="Email" placeholderTextColor="white" />
      </InputContainer>
      <InputContainer>
        <InputMask
          type="cel-phone"
          options={{
            maskType: "BRL",
            withDDD: true,
            dddMask: "(99) ",
          }}
          placeholder="(XX) XXXXX-XXXX"
          placeholderTextColor="white"
          value={phone}
          onChangeText={(value) => {
            setPhone(value);
          }}
        />
      </InputContainer>

Agora a gente consegue usar o input e verificar que a máscara está sendo ativa, o que vai facilitar para nós exibir esse valor depois.