Creating & Updating Firestore Documents

Creating or updating documents in your Firestore collection requires that you have two types of components on your screen:

  • A Button or Touchable component to submit the data the user inputs.
  • A component with a Field Name prop to log user input. The list of these components can be found here.

On the Button/Touchable you want to use to submit the user inputs, navigate to the "Interactions" tab in the right-hand panel and click the "+" to add an Action. In the drop-down, select "Firebase Request."

Creating Documents

Inside the Firebase Request Setup config:

  • add a Name of the Firebase Request. For example, "Create a new book"
  • add the type of the Firebase Request from the dropdown, and select Create Document

In the Configurations section:

  • select the Firestore collection name using the dropdown menu for Collection
  • provide an ID of the Document you want to create. If you leave the value of this field empty, an ID will be autogenerated by the Firestore

In the Fields To Update section of your Firebase Request, you'll see the fields from your input components will display. You then need to map those input fields to the desired fields in your selected Firestore document, either by typing them in or selecting them in the dropdown.

Here's an example of how to map fields using Text Input components (using their corresponding Field Name prop).

Updating Documents

Inside the Firebase Request Setup config:

  • add a Name of the Firebase Request. For example, "Update book"
  • add the type of the Firebase Request from the dropdown, and select Update Document

In the Configurations section:

  • select the Firestore collection name using the dropdown menu for Collection
  • provide an ID of the Document you want to create, typically, from a Navigation param

In the Fields To Update section of your Firebase Request, you'll see the fields from your input components will display. You then need to map those input fields to the desired fields in your selected Firestore document, either by typing them in or selecting them in the dropdown.

Here's an example of how to map fields using Text Input components (using their corresponding Field Name prop).


Did this page help you?