Copy and paste react hook examples of how to use firebase auth, firestore and firebase storage. Also works in React Native!

useFirebase.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const firebaseConfig = {
    apiKey: "YOUR_APP_KEY",
    authDomain: "YOUR_AUTH_DOMAIN.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET.appspot.com",
    messagingSenderId: "YOUR_MESSAGE_SENDER_ID",
    appId: "YOUR_APP_ID"
};

export default function useFirebase() {
    if ( ! firebase.apps.length ) {
        firebase.initializeApp( firebaseConfig );
    }

    return firebase;
}

useFirestore.js

import React from 'react';
import useFirebase from './useFirebase';

export default function useFirestore() {
    let firebase = useFirebase();
    return firebase.firestore();
}

useImageUpload.js

import React, { useState } from 'react';
import useFirebase from './useFirebase';

export default function useImageUpload( imgPath = 'profile' ) {
    let [ image, setImage ] = useState( image );
    let [ uploading, setUploading ] = useState( false );
    let firebase = useFirebase();

    async function uploadImageAsync( uri ) {
        // Why are we using XMLHttpRequest? See:
        // https://github.com/expo/expo/issues/2402#issuecomment-443726662
        const blob = await new Promise( (resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = function () {
            resolve(xhr.response);
            };
            xhr.onerror = function (e) {
            console.log(e);
            reject(new TypeError("Network request failed"));
            };
            xhr.responseType = "blob";
            xhr.open("GET", uri, true);
            xhr.send(null);
        } );

        let fileEnding = uri.split( '/' );
        fileEnding = fileEnding[ fileEnding.length - 1 ];
        let currentUser = firebase.auth().currentUser;
        const ref = firebase.storage().ref().child( imgPath + '/' + currentUser.uid + '/' + fileEnding );
        const snapshot = await ref.put(blob);

        // We're done with the blob, close and release it
        blob.close();

        return await snapshot.ref.getDownloadURL();
    }

    async function _handleImagePicked( pickerResult ) {
        try {
            setUploading( true );
      
            if ( ! pickerResult.cancelled ) {
              const uploadUrl = await uploadImageAsync( pickerResult.uri );
              setImage( uploadUrl );

              return uploadUrl
            }
          } catch (e) {
            console.log(e);
            alert( 'Upload failed.' );
          } finally {
            setUploading( false );
          }
    }

    return [ _handleImagePicked, uploading ]
}