Como fazer upload de imagens para o Firebase a partir de um aplicativo React Native

Desenvolvendo o aplicativo React Native

Pré-requisitos

Para seguir este tutorial, você precisará de:

• Pelo menos um entendimento básico de React Native
• Configure Expo ou React Native CLI em sua máquina de desenvolvimento local
• Se você estiver usando o React Native CLI, precisará ter o XCode ou o Android Studio instalado para executar o emulador.
• Instale o firebase com npm install firebase.

Abra o arquivo e importe o seguinte:

1

  import React, {useState} from 'react'

2

    import {View, StyleSheet, Image, Text, TouchableOpacity, SafeAreaView, Alert} from 'react-native'

3

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

4

    import {firebase} from '../config' 

A seguir, crie um UploadScreen função de componente e retornar um vazio por agora. Exporte também a função na parte inferior do arquivo:

1

const UploadScreen = () => {

2

    return(

3

        <SafeAreaView>

4

          // view will go here

5

        </SafeAreaView>

6

    )

7

}

8

export default UploadScreen;

Logo acima do return declaração, crie o image e loading estado e configurá-los para null para false inicialmente:

1

   const [image, setImage] = useState(null)

2

   const [uploading, setUploading] = useState(false) 

Crie a função pickImage. Quando invocada, esta função inicia a biblioteca de imagens do seu dispositivo para que você possa escolher sua imagem. Depois que a imagem é recuperada, nós a armazenamos no estado chamando setImage:

1

    const pickImage = async () => {

2

        let result = await ImagePicker.launchImageLibraryAsync({

3

            mediaTypes: ImagePicker.MediaTypeOptions.All,

4

            allowsEditing: true,

5

            aspect: [4,3],

6

            quality: 1

7

        });

8

        const source = {uri: result.assets[0].uri}

9

        console.log(source)

10

        setImage(source)

11

    }; 

Depois de escolher uma imagem, temos que enviá-la para o Firebase. A função a seguir cuida disso quando invocada:

1

    const uploadImage = async () => {

2

        setUploading(true)

3

        const response = await fetch(image.uri)

4

        const blob = response.blob()

5

        const filename = image.uri.substring(image.uri.lastIndexOf('/')+1)

6

        var ref = firebase.storage().ref().child(filename).put(blob)

7

        try {

8

            await ref;

9

        } catch (e){

10

            console.log(e)

11

        }

12

        setUploading(false)

13

        Alert.alert(

14

            'Photo uploaded!'

15

        );

16

        setImage(null);

17

    } 

Com esse código, buscamos o endereço da imagem e recuperamos o nome do arquivo, que então carregamos no Firebase. Se for bem-sucedido, ativamos um alerta que diz “Foto carregada” e redefinimos o estado da imagem. No entanto, se um erro for encontrado, nós o registramos no console.

Em seguida, exibimos a exibição de nosso UploadScreen componente. Copie e cole o seguinte código dentro do return() declaração do UploadScreen função:

1

<SafeAreaView style={styles.container}>

2

  <TouchableOpacity style={styles.selectButton} onPress={pickImage}>

3

    <Text style={styles.btnText}>Pick an Image</Text>

4

  </TouchableOpacity>   

5

  <View style={styles.imageContainer}>

6

   {image && <Image source={{uri: image.uri}} style={{width: 300, height: 300}}/>}            

7

  <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>

8

      <Text style={styles.btnText}>Upload Image</Text>

9

  </TouchableOpacity>

10

  </View>            

11

</SafeAreaView>

No código acima definimos dois botões:

• Um para escolher uma imagem (clicar neste botão invoca pickImage)
• O outro para fazer upload da imagem para o Firebase (pressionar isso invoca uploadImage)

Salve as alterações do arquivo.

Finalmente, entre App.js e use o seguinte código:

1

import * as React from 'react';

2

import { View, StyleSheet } from 'react-native';

3

import UploadScreen from './components/UploadScreen';

4

5

export default function App() {

6

  return (

7

    <View style={styles.container}>

8

      <UploadScreen />

9

    </View>

10

  );

11

}

12

13

const styles = StyleSheet.create({

14

  container: {

15

    flex: 1

16

  }

Salve o arquivo e verifique seu dispositivo/emulador. Você deve encontrar a seguinte IU renderizada em seu dispositivo.

Clique no Escolha uma imagem botão, selecione uma imagem do seu dispositivo e clique Enviar Imagem para carregá-lo no Firebase.

Vá para o armazenamento do Firebase e confirme se a imagem foi carregada.

Como você pode ver acima, o meu foi carregado com sucesso.

Agora que você sabe como fazer upload de uma imagem, pode usar esse conhecimento para criar projetos ainda mais empolgantes com o React Native. Por exemplo, você pode listar seus produtos digitais ou várias opções de acesso premium (por exemplo, quantidade de moedas extras para um jogo) que pode ser desbloqueado por meio de compras no aplicativo.

Conclusão

Como desenvolvedor, o Firebase oferece muitos recursos, incluindo upload de arquivos com armazenamento. O upload de arquivos para o Firebase exige que você configure um aplicativo da Web no Firebase. Ao final desse processo, você obtém as configurações para conectar seu aplicativo React Native ao Firebase.

Espero que você tenha achado este artigo útil. Você também pode aprender como fazer upload de imagens para o Firebase a partir de um aplicativo Android.