This project was bootstrapped with Create React App.

Sample app integrating firebase with a react application using react hooks api and React Firebase Hooks - A set of reusable react hooks for Firebase.

We also have built our own custom firebase storage file upload hook, jump directly to source code

This is from firebase-hooks, it allows us to query all of the item from the things collection in the database in descending order based on the creation data. the value will containg the results of the query that we will loop through to render the list items

const [value, loading, error] = useCollection(
  firebase
    .firestore()
    .collection("image-file")
    .orderBy("createdOn", "desc"),
  {
    snapshotListenOptions: { includeMetadataChanges: true }
  }
);

When saving the thing, determine if it is a new object or an existing object by checking to see if there was an initialValue provided as a property. If there was, then we have an object id so we need to update the object and not create a new object

/**
 * on save determine if it is a new object or an existing object
 * by check to see if there was an initial value provided
 */
const onSave = async () => {
  let collectionRef = firebase.firestore().collection("image-file");

    await collectionRef.add({ name: thing, createdOn: new Date().getTime() });
    setThing("");
    clear();
};

• See Code
• working on more detailed blog post

There is no firebase-hook to delete an object, we just used the firebase javascript api to remove the object

you need to remove the object from firebase storage first...

// reference is stored of document that will be deleted next
  const storageRef = firebase.storage().ref().child(ref);
  await storageRef.delete();

/**
 * deletes item from firebase database using the id
 * of the object
 */
  let result = await firebase.firestore()
    .collection("image-file")
    .doc(id)
    .delete();
};

I used the Camera Plugin to address issues I was running into related to orientation when running the application on my iOS device.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

Then later in the startup process you will need to call

defineCustomElements(window);

See App.js for additional details.

Known issue with file input - ionic-team/capacitor#1856

npm install --save @capacitor/core @capacitor/cli

OR

yarn add  @capacitor/core @capacitor/cli

npm run build

OR

yarn run build

npx cap init --web-dir=build

you will be asked the following questions:

Create app name
Create app Package ID (com.example.app)

In some instances of iOS you will be required to do an additional install

OPTIONAL: install CocoaPods if not already installed (CocoaPods manages library dependencies for your Xcode projects):

sudo gem install cocoapods

npx cap add android
npx cap add ios
npx cap add electron

npx cap sync iOS
npx cap open iOS (or Android) -> this should open up Xcode or Android Studio

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>

And set the css for the body

body  {
    padding: env(safe-area-inset-top,  20px)  env(safe-area-inset-right,  20px)
        env(safe-area-inset-bottom,  20px)  env(safe-area-inset-left,  20px);
}