Buscar imágenes de galería con React Native

Hoy os voy a enseñar cómo podemos obtener imágenes de la galería del dispositivo utilizando React Native.

Primero tenemos que instalar la siguiente librería:

npm install react-native-image-picker --save

Lo primero que haremos es añadir los permisos, para ello vamos a la carpeta nativa Android y buscamos nuestro AndroidManifest.xml

  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

En el caso de iOS vamos a info.plist y añadimos:

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

Y ejecutamos este comando:

 RCT_NEW_ARCH_ENABLED=1 npx pod-install ios

Ahora creamos un componente nuevo, lo llamaremos ImagePicker.js y añadimos lo siguiente:

• Importamos la librería que vamos a utilizar:

import * as ImagePicker from "react-native-image-picker"

Y creamos las siguientes funciones:

• Obtener imagen de Gelería:

export function getImageLibrary(returnFunction) {
    var objetoImagenRetornar = {};
    let options = {
        storageOptions: {
            skipBackup: true,
            path: 'images',
        },
       includeBase64: true
    };
    ImagePicker.launchImageLibrary(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
            console.log('User cancelled image picker');
            returnFunction(-2);
        } else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
            returnFunction(-1);
        } else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
            alert(response.customButton);
        } else {
            const source = { uri: response.uri };
            console.log('response', JSON.stringify(response));
            objetoImagenRetornar = {
                data: response,
                fileData: response.assets[0].base64,
                base64Data: 'data:image/jpeg;base64,' + response.assets[0].base64,
                fileUri: response.assets[0].uri
            };
             returnFunction(objetoImagenRetornar );
        }
    });
}

• Obtener imagen de cámara:

export function getLaunchCamera() {
    var objetoImagenRetornar = {};
  
        let options = {
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        includeBase64: true
        };
        ImagePicker.launchCamera(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
                returnFunction(-2);
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            returnFunction(-1);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
                alert(response.customButton);
            } else {
                const source = { uri: response.uri };
                console.log('response', JSON.stringify(response));
                objetoImagenRetornar = {
                  data: response,
                  fileData: response.assets[0].base64,
                  base64Data: 'data:image/jpeg;base64,' + response.assets[0].base64,
                  fileUri: response.assets[0].uri
               };
                returnFunction(objetoImagenRetornar);
            }
        });
}

Y para invocar a las funciones solo tendremos que importar nuestro archivo ImagePicker.js dónde querramos utilizarlo:

import {  getLaunchCamera, getImageLibrary } from "../../ImagenesGaleria/ImagesPicker";

Y llamar a la función con un onPress:

onPress={() => { 

getImageManage();

 }}



...

function getImageManage(){
getImageLibrary(returnFunction)

function returnFunction(objReturn){
console.log(JSON.stringify(objReturn));
}
}

Recuerda qué para utilizar esta librería nativa, tendrás que generar un build nativo: https://devcodelight.com/como-crear-un-build-development-usando-expo-eas-con-react-native/

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.