Agora nós iremos criar os campos comuns, nós temos um campo especial, que é o de enviar imagens, esse ficará para outra aula por demorar mais

Vamos então começar o estilo dos campos, vamos criar o padrão e também iremos criar o de descrição, que terá um tamanho padrão maior para o usuário ter facilidade de ver o que ele escreve

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

export const DescriptionContainer = styled(InputContainer)`
  min-height: 130px;
`;

export const Input = styled.TextInput.attrs({
  placeholderTextColor: "white",
})`
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: ${({ theme }) => theme.colors.primaryText};
`;

Vamos então criar os campos que precisamos, e depois iremos usar dois dropdown

<Container>
  <DefaultTitle title="CADASTRO DO ANÚNCIO" fontSize={18} />

  <InputContainer>
    <Input placeholder="Título" />
  </InputContainer>

  <InputContainer>
    <Input placeholder="Preço" keyboardType="numeric" />
  </InputContainer>

  <DescriptionContainer>
    <Input placeholder="Descrição" />
  </DescriptionContainer>

  <InputContainer>
    <Input placeholder="IMAGEM (SIMBÓLICO)" />
  </InputContainer>
</Container>

Agora iremos criar os dropdown, precisamos apenas criar os states e também os arrays com dados.

const Address = [
  { value: "Endereço 1" },
  { value: "Endereço 2" },
  { value: "Endereço 3" },
  { value: "Endereço 4" },
];

const Categorie = [
  { value: "Categoria 1" },
  { value: "Categoria 2" },
  { value: "Categoria 3" },
  { value: "Categoria 4" },
];

const AddProduct = () => {
  const [categorie, setCategorie] = useState("");
  const [address, setAddress] = useState("");

  return (

Agora sim podemos ir para os dropdown.

<Container style={{ marginLeft: 20 }}>
  <DefaultTitle title="CADASTRO DO ANÚNCIO" fontSize={18} />

  <InputContainer>
    <Input placeholder="Título" />
  </InputContainer>

  <InputContainer>
    <Input placeholder="Preço" keyboardType="numeric" />
  </InputContainer>

  <DescriptionContainer>
    <Input placeholder="Descrição" />
  </DescriptionContainer>

  <InputContainer>
    <Input placeholder="IMAGEM (SIMBÓLICO)" />
  </InputContainer>

  <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={() => {}}
    buttonType="primary"
    marginVertical={20}
  />
</Container>

Vamos agora apenas criar o texto de divisão, pois o usuário vai poder ter acesso a outro botão também, que será o botão para salvar como rascunho

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

Podemos então usar e colocar o botão também

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

    <InputContainer>
      <Input placeholder="Título" />
    </InputContainer>

    <InputContainer>
      <Input placeholder="Preço" keyboardType="numeric" />
    </InputContainer>

    <DescriptionContainer>
      <Input placeholder="Descrição" />
    </DescriptionContainer>

    <InputContainer>
      <Input placeholder="IMAGEM (SIMBÓLICO)" />
    </InputContainer>

    <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={() => {}}
      buttonType="primary"
      marginVertical={20}
    />

    <Division>ou</Division>

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