Añadir imágenes desde galería usando expo-image-picker en Expo

Tiempo de lectura: 2 minutos

Si queremos añadir el módulo nativo para obtener imágenes desde la galería, lo mejor que podemos hacer es utilizar expo-image-picker

Lo primero que vamos a hacer es instalar la librería:

expo install expo-image-picker

Una vez instalada, tenemos que ir a app.json y añadir:

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ]
    ]
  }
}

Para configurar el plugin.

Si tenemos parte nativa en iOS, tenemos que ir a Info.plist y añadir el permiso:

<key>NSPhotoLibraryUsageDescription</key>
    <string>Allow $(PRODUCT_NAME) to access your photo library.</string>

Ahora ya tenemos todo preparado para implementar la librería.

Creamos un componente nuevo llamado ImagesPicker.

Importamos la librería.

import * as ImagePicker from 'expo-image-picker';

Podemos crear una función para obtener las imágenes de la librería.

export async function getImageLibrary(funcionRetorno) {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        base64: true,
        aspect: [9, 16],
        quality: 0.8,
    });

    if (!result.cancelled) {
        objetoImagenRetornar = {
            data: result,
            fileData: result.base64,
            base64Data: 'data:image/jpeg;base64,' + result.base64,
            fileUri: result.uri
        };

        funcionRetorno(objetoImagenRetornar);
    } else {
        funcionRetorno(-2);
    }

}

En este caso, creo una función que usaré para retornar la imagen en base64 que he obtenido de la galería.

Con las opciones mediaTypes: ImagePicker.MediaTypeOptions.Images, indico que solo me deje seleccionar Imágenes, con allowsEditing, me deja editar tamaño en la galería del movil, base64 a true para activar que devuelva base64. Establezco la relación aspecto a 9:16 o el que necesitemos, y la calidad de 1-0.

Finalmente, obtengo el objeto devuelto con este aspecto:

    {
      "assetId": "C166F9F5-B5FE-4501-9531",
      "base64": null,
      "duration": null,
      "exif": null,
      "fileName": "IMG.HEIC",
      "fileSize": 6018901,
      "height": 3025,
      "type": "image",
      "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
      "width": 3024
    }

Este sería el código completo:

import * as ImagePicker from 'expo-image-picker';


export async function getImageLibrary(funcionRetorno) {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        base64: true,
        aspect: [9, 16],
        quality: 0.8,
    });

    if (!result.cancelled) {
        objetoImagenRetornar = {
            data: result,
            fileData: result.base64,
            base64Data: 'data:image/jpeg;base64,' + result.base64,
            fileUri: result.uri
        };

        funcionRetorno(objetoImagenRetornar);
    } else {
        funcionRetorno(-2);
    }

}