Agora iremos exibir as imagens abaixo do input, para o usuário ver quais foram as imagens que ele selecionou do produto, e vamos também avisar sobre o limite de imagens que devemos colocar.

Vamos criar o container das imagens, para que elas fique alinhadas e também iremos criar o estilo das imagens, que ficarão dentro do nosso container

export const ImageContainer = styled.View`
  width: 88%;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
`;

export const Image = styled.Image`
  width: 60px;
  height: 50px;
  margin: 10px 0;
  margin-right: 10px;
  border-radius: 5px;
`;

Agora a gente pode utilizar essas imagens lá no nosso componente

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

    <ImageContainer>
      {images &&
        images.map((image) => {
          console.log(image);
          return <Image key={image.assetId} source={{ uri: image.uri }} />;
        })}
    </ImageContainer>
  </>
);

Agora podemos testar, se a gente selecionar alguma imagem do celular veremos elas sendo exibidas aqui abaixo com o estilo que colocamos.

Nós agora iremos colocar a verificação para se tivermos mais que 6, selecionarmos apenas 6 imagens, que é o nosso limite. O “selectionLimit” funciona apenas para IOS, então para android faremos manualmente o limite.

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

  if (result.assets) {
    const images = result.assets.slice(0, 6);

    if (result.assets.length > 6) {
      Alert.alert(
        "Você excedeu o limite máximo de imagens permitido (6). Por isso, removemos as imagens adicionais que você enviou."
      );
    }

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

Dessa forma acima, a gente verifica se o usuário passou das 6 imagens, se sim, a gente vai setar apenas as 6 primeiras imagens e avisar a ele sobre isso, e caso não tenha passado, vamos setar do mesmo jeito.

Como a gente já tem esse aviso de limite no input “Adicione até 6 imagens” já estamos com tudo certo sobre esse nosso input