Agora, nós iremos fazer a estrutura do form, que nesse caso, por nós termos uma imagem que é selecionada de uma forma diferente e também os nossos dropdowns, vamos estar criando de forma diferente os fields

Agora nós iremos criar os fields, incluindo também de imagens, categoria e endereço, pois nós iremos setar também para o nosso form

const [fields, setFields] = useState({
  title: "",
  price: "",
  description: "",
  images: [{}],
  categorie: "",
  addressId: "",
});

E agora iremos criar um useEffect para setar o field quando algum dos nossos 3 que não estão dentro do field mudar.

const AddProduct = () => {
  const [fields, setFields] = useState({
    title: "",
    price: "",
    description: "",
    images: [{}],
    categorie: "",
    addressId: "",
  });

  const [categorie, setCategorie] = useState("");
  const [address, setAddress] = useState("");
	const [addressId, setAddress] = useState("");
  const [images, setImages] = useState<ImagePickerAsset[]>([]);

  const handleSubmitProduct = () => {
    console.log(fields);
  };

  useEffect(() => {
    setFields({
      ...fields,
      images: images,
      categorie: categorie,
      addressId: addressId,
    });
  }, [images, categorie, addressId]);

  return (

Agora a gente pode fazer o onChangeText dos inputs e também colocar o handle no nosso botão

return (
  <Container contentContainerStyle={{ paddingBottom: 120 }}>
    <DefaultTitle title="CADASTRO DO ANÚNCIO" fontSize={18} />

    <InputContainer>
      <Input
        placeholder="Título"
        onChangeText={(val) => {
          setFields({
            ...fields,
            title: val,
          });
        }}
      />
    </InputContainer>

    <InputContainer>
      <Input
        placeholder="Preço"
        onChangeText={(val) => {
          setFields({
            ...fields,
            price: val,
          });
        }}
        keyboardType="numeric"
      />
    </InputContainer>

    <DescriptionContainer>
      <Input
        placeholder="Descrição"
        onChangeText={(val) => {
          setFields({
            ...fields,
            description: val,
          });
        }}
      />
    </DescriptionContainer>

    <UploadImage images={images} setImages={setImages} />

    <DropDownComponent
      data={Categorie}
      placeholder="Selecione a categoria"
      setSelected={setCategorie}
    />

    <DropDownComponent
      data={Address}
      placeholder="Selecione o endereço"
      setSelected={setAddress}
    />

    <DefaultButton
      buttonText="CADASTRAR E PUBLICAR"
      buttonHandle={handleSubmitProduct}
      buttonType="primary"
      marginVertical={20}
    />

    <Division>ou</Division>

    <DefaultButton
      buttonText="SALVAR COMO RASCUNHO"
      buttonHandle={handleSubmitProduct}
      buttonType="secondary"
      marginVertical={20}
    />
  </Container>
);

Ao selecionar as informações, a gente vai ter o resultado quando clicarmos no botão dentro do console com elas preenchidas. E dessa forma ficará mais fácil de enviar para o backend.

Nós iremos antes trocar o categoryData que temos aqui por outro, que terá as categorias fixas do nosso app, pois o backend peça que a gente envie uma válida para já deixar salvo corretamente. Iremos aproveitar para consertar, chamando de “category”, com “y”

const Category = [
  { value: "Eletrônicos" },
  { value: "Eletrodomésticos" },
  { value: "Moda e Acessórios" },
  { value: "Pets" },
  { value: "Brinquedos e Jogos" },
  { value: "Casa e Jardim" },
  { value: "Esporte e Lazer" },
  { value: "Automóveis e Veículos" },
];