Agora iremos fazer a conexão e o registro de fato

Primeiro vamos criar os fields, que serão os campos que usaremos para manipular e conseguir enviar para o registro, e aí vamos mandar tanto os fields quando os setsFields para o form que temos

const [fields, setFields] = useState({
  name: "",
  email: "",
  password: "",
  phone: "",
  confirmPassword: "",
});

<Form fields={fields} setFields={setFields} />

Iremos então receber o fields e o setFields dentro de Form (dentro de register que está em components)

interface Fields {
  name: string;
  email: string;
  password: string;
  phone: string;
  confirmPassword: string;
}

interface Props {
  fields: Fields;
  setFields: React.Dispatch<SetStateAction<Fields>>;
}

const Form = ({ fields, setFields }: Props) => {

Podemos agora colocar em todos os placeholder o value e o onChangeText, que será dessa forma que iremos pegar as informações dos inputs

<>
  <InputContainer>
    <Input
      placeholder="Nome e sobrenome"
      value={fields.name}
      onChangeText={(val) => {
        setFields({
          ...fields,
          name: val,
        });
      }}
      placeholderTextColor="#C0C0C1"
    />
  </InputContainer>
  <InputContainer>
    <Input
      placeholder="Email"
      value={fields.email}
      onChangeText={(val) => {
        setFields({
          ...fields,
          email: val,
        });
      }}
      placeholderTextColor="#C0C0C1"
    />
  </InputContainer>
  <InputContainer>
    <InputMask
      type="cel-phone"
      options={{
        maskType: "BRL",
        withDDD: true,
        dddMask: "(99) ",
      }}
      value={fields.phone}
      onChangeText={(val) => {
        setFields({
          ...fields,
          phone: val,
        });
      }}
      placeholder="(XX) XXXXX-XXXX"
      placeholderTextColor="#C0C0C1"
    />
  </InputContainer>
  <InputContainer>
    <Input
      placeholder="Senha"
      value={fields.password}
      onChangeText={(val) => {
        setFields({
          ...fields,
          password: val,
        });
      }}
      placeholderTextColor="#C0C0C1"
      secureTextEntry
    />
  </InputContainer>
  <InputContainer>
    <Input
      placeholder="Confirmação de senha"
      value={fields.confirmPassword}
      onChangeText={(val) => {
        setFields({
          ...fields,
          confirmPassword: val,
        });
      }}
      placeholderTextColor="#C0C0C1"
      secureTextEntry
    />
  </InputContainer>
</>

E se dermos um console.log nos fields e formos digitar, vamos ver que estamos com os campos sendo atualizados de acordo com o que a gente precisa.

Agora iresmo criar o handle para registrarmos o usuário.

const { register } = useAuth();

const handleRegister = async () => {
  if (fields.password.length < 4) {
    Alert.alert("Sua senha precisa ter mais de 4 caracteres");

    return;
  } else if (fields.password !== fields.confirmPassword) {
    Alert.alert(
      "Sua senha e a confirmação estão diferentes, por favor, coloque igual."
    );

    return;
  }

  register(fields.name, fields.email, fields.password, fields.phone);

  Alert.alert("Registro feito com sucesso!");
};

Nesse nosso caso ainda não teremos navegação, pois será feita no nosso contexto junto com o login, então iremos ter apenas o alert por enquanto.

Iremos com esse handle pronto colocar no botão

<DefaultButton
  buttonText="FAZER REGISTRO"
  buttonHandle={handleRegister}
  buttonType="primary"
  marginVertical={30}
/>

Agora a gente pode fazer o registro em si, podemos colocar as informações completas aqui que quisermos.

E também podemos testar os erros que temos organizados aqui, de senha, confirmação, email, etc… E aí no fim a gente qnd receber o alert de bem sucedido, poderemos ver dentro do mongo que a gente agora tem um usuário criado aqui na coleção