Image Upload in React Native

Joey Clapton — Wed, 22 Nov 2023 20:55:59 +0000

The ImagePicker is an Expo plugin designed to simplify the process of uploading images or capturing photos using the camera without the need to directly handle complex camera or gallery APIs.

Compatibility

The ImagePicker is compatible with the following platforms:

Android Device
Android Emulator
iOS Device
iOS Simulator
Web Platform

Installation

npx expo install expo-image-picker

Configuring the plugin

To configure the plugin, we will go to the app.json file and add the following configuration:

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app need accesses your photos."
        }
      ]
    ]
  }
}

In the photosPermission property, we will set the message displayed to the user, requesting approval to access the camera feature.

Implementing Image Upload Using the Mobile Gallery

import react, { useState } from "react";
import { Button, Image, View } from "react-native";
// Let's import the library.
import * as ImagePicker from "expo-image-picker";

export default function App() {
  const [image, setImage] = useState<string>();

  const pickImage = async () => {
    // No permission is required to open the gallery.
    const result = await ImagePicker.launchImageLibraryAsync({
      // The mediaTypes property defines which type of file is allowed.
      mediaTypes: ImagePicker.MediaTypeOptions.All,

      // Quality sets the image quality and accepts values from 0 to 1.      
     // 0 represents lower quality/smaller size, and 1 represents higher quality/larger size.
      quality: 1,
    });

    console.log(result);

    // Let's receive the image if the user doesn't close the photo gallery.
    if (!result.canceled) {
      const { uri } = result.assets[0];
      setImage(uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image ? (
        <Image
          source={{ uri: image as string }}
          style={{ width: 200, height: 200 }}
        />
      ) : null}
    </View>
  );
}

GitHub with the complete project code: https://github.com/joeyclapton/image-picker-example

References

Upload de Imagens no React Native

Joey Clapton — Wed, 22 Nov 2023 14:10:30 +0000

O ImagePicker é um plugin do Expo projetado para simplificar o processo de upload de imagens ou captura de fotos usando a câmera sem a necessidade de lidar diretamente com APIs complexas de câmera ou galeria.

Compatibilidade

O ImagePicker é compatível com todas as seguintes plataformas:

Dispositivo Android
Emulador Android
Dispositivo IOS
Simulador IOS
Plataforma WEB

Instalação

npx expo install expo-image-picker

Configurando o plugin

Para configurar o plugin, iremos no arquivo app.json e colocaremos a seguinte configuração:

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app need accesses your photos."
        }
      ]
    ]
  }
}

Na propriedade photosPermission, definiremos a mensagem exibida ao usuário, solicitando a aprovação para acessar o recurso da câmera.

Implementação do upload de imagens

import react, { useState } from "react";
import { Button, Image, View } from "react-native";
// Vamos importar a biblioteca
import * as ImagePicker from "expo-image-picker";

export default function App() {
  const [image, setImage] = useState<string>();

  const pickImage = async () => {
    // Nenhuma permissão é necessária para abrir a galeria
    const result = await ImagePicker.launchImageLibraryAsync({
      // A propriedade mediaTypes define qual tipo de arquivo é permitido
      mediaTypes: ImagePicker.MediaTypeOptions.All,

      // Quality define a qualidade da imagem, aceita valores de 0-1,
      // 0 menor qualidade/tamanho e 1 é uma imagem de maior qualidade/tamanho
      quality: 1,
    });

    console.log(result);

    // Vamos receber a imagem caso o usuário não feche a galeria de fotos.
    if (!result.canceled) {
      const { uri } = result.assets[0];
      setImage(uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image ? (
        <Image
          source={{ uri: image as string }}
          style={{ width: 200, height: 200 }}
        />
      ) : null}
    </View>
  );
}

Github com o código completo do projeto:
https://github.com/joeyclapton/image-picker-example

Forem: Joey Clapton