Find out how to Add Pictures to Firebase from a React Native App

That’s all for Firebase. Let’s now create the UI for importing the picture from our React Native app.

Creating the React Native App

Conditions

To observe this tutorial, you’ll want:

• At the least a fundamental understanding of React Native
• Arrange Expo or React Native CLI in your native dev machine
• Should you’re utilizing the React Native CLI, you want to have XCode or Android studio put in to run the emulator.
• Set up firebase with npm set up firebase.

Open your React Native mission with Visible Studio Code (or one other IDE). Go contained in the /parts folder and create a brand new file known as UploadScreen.js.

Open the file and importing the next:

1

  import React, {useState} from 'react'

2

    import {View, StyleSheet, Picture, Textual content, TouchableOpacity, SafeAreaView, Alert} from 'react-native'

3

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

4

    import {firebase} from '../config' 

Subsequent, create an UploadScreen element perform and return an empty <SafeAreaView> for now. Additionally export the perform on the file backside:

1

const UploadScreen = () => {

2

    return(

3

        <SafeAreaView>

4

          // view will go right here

5

        </SafeAreaView>

6

    )

7

}

8

export default UploadScreen;

Simply above the return assertion, create the picture and loading state and set them to null to false initially:

1

   const [image, setImage] = useState(null)

2

   const [uploading, setUploading] = useState(false) 

Create the perform pickImage. When invoked, this perform launches your system’s picture library so you’ll be able to choose your picture. After the picture is retrieved, we retailer it within the state by calling setImage:

1

    const pickImage = async () => {

2

        let outcome = await ImagePicker.launchImageLibraryAsync({

3

            mediaTypes: ImagePicker.MediaTypeOptions.All,

4

            allowsEditing: true,

5

            side: [4,3],

6

            high quality: 1

7

        });

8

        const supply = {uri: outcome.property[0].uri}

9

        console.log(supply)

10

        setImage(supply)

11

    }; 

After choosing a picture, we then should add it to Firebase. The next perform takes care of that when invoked:

1

    const uploadImage = async () => {

2

        setUploading(true)

3

        const response = await fetch(picture.uri)

4

        const blob = response.blob()

5

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

6

        var ref = firebase.storage().ref().little one(filename).put(blob)

7

        attempt {

8

            await ref;

9

        } catch (e){

10

            console.log(e)

11

        }

12

        setUploading(false)

13

        Alert.alert(

14

            'Photograph uploaded!'

15

        );

16

        setImage(null);

17

    } 

With this code, we fetch the picture tackle and retrieve the filename, which we then add to Firebase. If profitable, we activate an alert that claims “Photograph Uploaded” and reset the picture state. Nevertheless, if an error is encountered, we log it on the console.

Subsequent, we show the view of our UploadScreen element. Copy and paste the next code contained in the return() assertion of the UploadScreen perform:

1

<SafeAreaView fashion={types.container}>

2

  <TouchableOpacity fashion={types.selectButton} onPress={pickImage}>

3

    <Textual content fashion={types.btnText}>Choose an Picture</Textual content>

4

  </TouchableOpacity>   

5

  <View fashion={types.imageContainer}>

6

   {picture && <Picture supply={{uri: picture.uri}} fashion={{width: 300, top: 300}}/>}            

7

  <TouchableOpacity fashion={types.uploadButton} onPress={uploadImage}>

8

      <Textual content fashion={types.btnText}>Add Picture</Textual content>

9

  </TouchableOpacity>

10

  </View>            

11

</SafeAreaView>

Within the code above we outline two buttons:

• One for selecting a picture (clicking this button invokes pickImage)
• The opposite for importing the picture to Firebase (urgent this invokes uploadImage)

Save the file adjustments.

Lastly, go inside App.js and use the next code:

1

import * as React from 'react';

2

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

3

import UploadScreen from './parts/UploadScreen';

4

5

export default perform App() {

6

  return (

7

    <View fashion={types.container}>

8

      <UploadScreen />

9

    </View>

10

  );

11

}

12

13

const types = StyleSheet.create({

14

  container: {

15

    flex: 1

16

  }

Save the file and verify your system/emulator. You need to discover the next UI rendered in your system.

Click on the Choose an Picture button, choose a picture out of your system and click on Add Picture to add it to Firebase.

Go to your Firebase storage and ensure that the picture has been uploaded.

As you’ll be able to see above, mine was uploaded efficiently.

Now that you understand how to add a picture, you should utilize that information to construct much more thrilling initiatives with React Native. For example, you’ll be able to record your digital merchandise or a number of premium entry choices (eg. quantity of additional cash for a recreation) that may be unlocked through in-app purchases.  

Conclusion

As a developer, Firebase presents you a number of options, together with file uploads with storage. Importing information to Firebase requires you to arrange an online utility in Firebase. By the top of this course of, you get the configurations for connecting your React Native app to Firebase.

I hope you discovered this text useful. You may study additionally tips on how to add photographs to Firebase from an Android app.