Para criar esse campo vamos começar criando dentro de components uma pasta chamada “AddProduct” e dentro dela vamos criar uma pasta chamada “UploadImages” com os arquivos.

Vamos começar criando o container do “input” que iremos ter de upload de imagem

import styled from "styled-components/native";

export const Container = styled.TouchableOpacity`
  width: 90%;
  height: 50px;
  margin: 10px auto;
  border: 1px dashed ${({ theme }) => theme.colors.borderColor};
  border-radius: 5px;
  padding: 0 15px;
  background-color: ${({ theme }) => theme.colors.background};
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

Agora nós iremos criar a imagem e também o texto que ficará dentro do container que criamos

export const Icon = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 30px;
`;

export const Title = styled.Text`
  font-size: 18px;
  color: white;
  font-weight: bold;
`;

Podemos criar agora esse input, e já vamos poder usar ele lá no nosso form. Iremos criar com um fragmento envolta, para que a gente possa depois colocar as imagens upadas abaixo do input.

import React from "react";
import { UploadContainer, UploadIcon, UploadText } from "./styled";

const uploadImage = require("../../../../assets/icons/arrow-right.png");

const UploadInput = () => {
  return (
    <>
      <Container>
        <Title>Adicione até 6 fotos</Title>
        <Icon source={uploadImage} />
      </Container>
    </>
  );
};

export default UploadInput;

Agora a gente pode colocar lá no form

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>

    <UploadInput />

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

Podemos ver que estamos com o input do jeito que queremos. Podemos agora configurar o seu funcionamento com uma função que iremos pegar as imagens.

const handlePickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsMultipleSelection: true,
    selectionLimit: 6,
    aspect: [4, 3],
    quality: 1,
  });
};

Agora, iremos criar um state para salvar essas imagens e vamos em seguida exibir para o usuário, só que iremos criar esse state lá dentro da screen (AddProduct)

import { ImagePickerAsset } from "expo-image-picker";

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

  return (

E iremos passar para o nosso componente como props.

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

Agora basta receber esses parâmetros lá no componente.

interface ImagesParams {
  images: ImagePicker.ImagePickerAsset[];
  setImages: React.Dispatch<SetStateAction<ImagePicker.ImagePickerAsset[]>>;
}

const UploadImage = ({ images, setImages }: ImagesParams) => {

Agora a gente pode complementar o código setando as imagens no array, e depois exibiremos as imagens, porém não agora.

const UploadImage = ({ images, setImages }: ImagesParams) => {
  const handlePickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsMultipleSelection: true,
      selectionLimit: 6,
      aspect: [4, 3],
      quality: 1,
    });

    if (result.assets) {
      setImages(result.assets);
    } else {
      Alert.alert("Você não selecionou nenhuma imagem");
    }
  };

Então, se o resultado existir, a gente vai setar as imagens, e se não existir significa que o usuário saiu da área de seleção, então iremos dar um alert.

E agora a gente só precisa colocar um onPress no “input”.

return (
  <>
    <UploadContainer onPress={handlePickImage}>
      <UploadText>Adicione até 6 fotos</UploadText>
      <UploadIcon source={uploadImage} />
    </UploadContainer>
  </>
);

E agora está funcionando 100% o nosso input, junto com o set e também o alert, caso a gente saia sem selecionar nada.