Subiendo imágenes en React Native y Firebase con React

Pedro Lara

En esta ocasión me propongo compartir estos pasos para subir  una una imagen en una aplicación creada con React Native y Expo. 

 

Para este ejemplo asumimos que ya disponemos de un proyecto creado en firebase con una ruta llamada “/imagenes” en la que vamos a guardar nuestras imágenes.

Lo primero que vamos a hacer es instalar las dependencias necesarias para poder hacer uso de la Gallery de nuestro teléfono:

expo install expo-permissions

También debemos instalar image Picker:

expo install expo-image-picker

 

Vamos a crear un componente llamado perfil_component y tres métodos que se encargarán de realizar todo el proceso dese validar los permisos de acceder a la galería de imágenes hasta enviar las imágenes a Firebase:

 

changePhoto()                    “Se ejecutará al presionar un icono para subir una imagen

loadImageFromGallery()   “ Se encargará validar los permisos de acceder a la        galería de imágenes de acceder a ella

uploadImage()                     Se encargará de subir la imagen a Firebase

fileToBlob()                          Se encargará de convertir la imagen a blob

updateProfile()                    Se encargará de actualizar la imagen en el perfil del usuario

 

1.    Creando el componenente perfil_component

 

Creamos un componente al que llamaremos perfil_component. En este nuevo componente vamos a hacer uso de un avatar que nos ofrece react. Hacemos el import desde react-native-elements:

perfil_component.js

import { Avatar } from 'react-native-elements';

import React from 'react';

import { Text, View, Image } from 'react-native';

import { Avatar } from 'react-native-elements';

 

 

export default function App() {

  return (

    <View>

      <Avatar

       rounded

       size= "large"

       source={{

       uri:

       'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',

      }}

    />

    </View>

  );

}

El componente avatar recibe varios parámetros los cuales podemos ver en la documentación oficial, pero para nuestro caso, solo usaremos tres: rounded,  source y size.

Creamos un evento onPress en nuestro avatar para poder capturar cuando el usuario toque la imagen. Este evento onPress llamará una función que llamaremos onChangePhoto. Este método llamará a otro método llamado loadImageFromGallery el cual crearemos en nuestro Helpers:

 

import { Avatar } from 'react-native-elements';

import React from 'react';

import { Text, View, Image } from 'react-native';

import { Avatar } from 'react-native-elements';

 

 

export default function App() {

  return (

    <View>

      <Avatar

       rounded

       size= "large"

       source={{

       uri:

       'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',

      }}

     onPress={()=>{

           changePhoto()}

       }

    />

    </View>

  );

}

2.    Creando el método changePhoto()

const changePhoto = async ()=>{

        const result = await loadImageFromGAllery([1,1])

        if(!result.status){

            return

        }

 

        const resultUploadImage = await uploadImage(result.image, "imagenes", user.uid)

        if(!resultUploadImage.statusResponse){

            setLoading(false)

            Alert.alert("Ha ocurrido un error al almacenar la imagen")

            return

 

        }

        const resultUpdateProfile = await updateProfile({protoURL: resultUploadImage.url})

        if(resultUpdateProfile.statusResponse){

           

            setPhotoURL(resultUploadImage.url)

           

        }else{

            Alert.alert("Ha ocurrido un error al actualizar la imagen de perfil")

        }

    }

 

3.    Creando el método loadImageFromGallery

El método loadImageFromGallery  se encargará de validar los permisos de acceder a la galería de imágenes así como cargar la imagen. En nuestro fichero helpers.js importamos la validación de permisos que nos ofrece expo, así como la función ImagePicker que nos permite acceder a las imágenes. Luego implementamos la subida de imágenes:

 

helpers.js

import * as Permissions from 'expo-permissions'

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

 

Dentro de nuestro método loadImageFromGAllery creamos la implementación para acceder a la galería de imágenes de nuestro teléfono:

 

export const loadImageFromGAllery = async(array)  =>{

    const response = { status: false, images: null }

    const resultPermisions = await Permissions.askAsync(Permissions.CAMERA)

    if(resultPermisions.status == 'denied'){

        Alert('Debes de darle permisos para accedera la imagenes del telfono')

        return response

    }

    const result = await ImagePicker.launchImageLibraryAsync({

        allowsEditing: true,

        aspect: array

    })

    if(result.cancelled){

        return response

    }

    response.status = true

    response.iamge = result.uri

    return response;

}

La función Permissions.askAsync le pregunta al usuario si desea otorgar permisos de la Gallería de imagines a la aplicación.  Con el parámetro allowsEditing: true habitamos que el usuario pueda editar la imagen seleccionada. Con aspect: array le pasamos las dimensiones de la imagen. Con result.cancelled validamos si el usuario cancela la acción antes de guardar la imagen. Mientras que con result.uri obtenemos la ruta de la imagen seleccionada.

4.    Creando el método uploadImage()

export const uploadImage = async(image, path, name)=>{

     const result = {statusResponse: false, error: null, url:null}

     const ref = firebase.storage().ref(path).child(name)

     const blob = await fileToBlob(image)

    try{

        await ref.put(blob)

        const url = await firebase.storage().ref(`${path}/${name}`).getDownloadURL()

        result.statusResponse =true

        result.url = url

    }catch(error){

        result.error = error

        console.log(error)

    }

   

    return result

 

}

 

5.    Crenado e método fileToBlob()   

Aprovechamos y creamos otro método en nuestro fichero helper.js para convertir la imagen en blob.

export const fileToBlob = async(path)=>{

    const file = await fetch(path)

    const blob = await file.blob()

    return blob

}

 

 

6.    Creando el método updateProfile()

 

export const updateProfile = async(data)=>{

    const result = {statusResponse:true, error:null}

    try{

        await firebase.auth().currentUser.updateProfile(data)

    }catch(error){

        result.statusResponse = false

        result.error = error

    }

    console.log(result)

    return result

}

 

VIDEOS QUE TE PUEDEN INTERESAR: