How to Use Firebase Storage in React Native

Prerequisites

Before you can start using Firebase Storage in your React Native project, you must first have the following prerequisites in place:

• A React Native project set up and running on your machine.
• A Firebase account and project.
• The Firebase SDK installed in your React Native project.

Installing Firebase Storage into Your Project

To install Firebase Storage in your React Native project, make sure you have Node.js installed on your machine. Then, open up a terminal window and run the following command:

npm install --save @react-native-firebase/storage

Once the Firebase Storage SDK has been installed in your project, you can import it into your React Native code like so:

import storage from '@react-native-firebase/storage';

Accessing the Device's Camera in React Native

In order to upload images to Firebase Storage, you first need to be able to access the device's camera and capture images. To do this, you can use the react-native-camera library.

First, install the library in your project by running the following command in your terminal window:

npm install --save react-native-camera

Then, you can use the camera in your React Native code like so:

import Camera from 'react-native-camera';

const App = () => {
  const [imageData, setImageData] = useState(null);

  const takePicture = async () => {
    const options = {};
    const data = await camera.takePictureAsync(options);
    setImageData(data);
  };

  return (
    <View>
      <Camera
        style={{ flex: 1 }}
        type={Camera.Constants.Type.back}
        ref={ref => {
          camera = ref;
        }}
      >
        <TouchableOpacity onPress={takePicture} style={styles.capture}>
          <Text style={{ fontSize: 14 }}> SNAP </Text>
        </TouchableOpacity>
      </Camera>
    </View>
  );
};

Uploading Images to Firebase Storage in React Native

Once you have successfully captured an image, you can then upload it to Firebase Storage. To do this, you can use the putFile() method provided by the Firebase Storage SDK.

import storage from '@react-native-firebase/storage';

const uploadImage = async (uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();

  const ref = storage().ref('images').child('imageName.jpg');
  const snapshot = await ref.put(blob);

  return snapshot.downloadURL();
};

In the above example, we are fetching the image data from the device's camera, converting it into a blob object, and then uploading it to Firebase Storage. Once the image has been uploaded, we are returning the download URL of the image, which can then be used to display the image in our React Native app.

Displaying Images from Firebase Storage in React Native

Once you have successfully uploaded an image to Firebase Storage, you can then display it in your React Native app. To do this, you can use the Image component provided by React Native.

import { Image } from 'react-native';

const App = () => {
  const [imageUrl, setImageUrl] = useState(null);

  return (
    <View>
      {imageUrl && <Image source={{ uri: imageUrl }} style={styles.image} />}
    </View>
  );
};

In the above example, we are using the Image component to display the image from Firebase Storage. The uri prop of the Image component is used to set the image's source, and the style prop is used to define the size and styling of the image.

Conclusion

In this article, we have learned how to use Firebase Storage in a React Native project. We have seen how to install the Firebase Storage SDK, how to access the device's camera, how to upload images to Firebase Storage, and how to display images from Firebase Storage.