I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9.

My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is not being added to the database, and there are no errors being thrown.

Below is my firebase.js setup:

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

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
};

let app;

if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig);
} else {
  app = firebase.app();
}

const db = app.firestore();
const auth = firebase.auth();

export {db, auth};

I can confirm that the connection details are accurate as my firebase authentication is functioning correctly.

Next, here is a snippet of my sign-in screen where I attempt to insert data into the database:

const SignUp = ({navigation}) => {
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const createUser = async (email, password) => {
    try {
      auth
        .createUserWithEmailAndPassword(email, password)
        .then(function (user) {
          var user = auth.currentUser;
          logUser(user);
          navigation.navigate('Login');
        });
    } catch (error) {
      alert(error);
    }
  };

  async function logUser(user) {
    await addDoc(collection(db, 'users'), JSON.parse(JSON.stringify(user)));
  }

When attempting to use the addDoc method without JSON parsing, it results in an error stating that Firebase was called with invalid data. This confirms that this portion of the codebase is being executed.

Additionally, I have adjusted the firestore rules section on the Firebase console to allow all requests to pass through:

allow read, write: if true;

Thank you for your assistance.

Answer №1

You have adopted the compat version of Firebase SDK while also incorporating the new Modular SDK syntax. It is advisable to stick with just one version of the SDK, as illustrated below:

import { db } from "..path/to/firebase/firebase.js"

async function logUser(user) {
  await db.collection("users").add(user)
}

I suggest considering transitioning to the Modular SDK since the compat version could be phased out in future releases.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using React with Firebase, remember to specify the "to" property when using setState to avoid errors

Struggling to figure out what's going wrong after hours of trying. I'm new to React and would really appreciate your help. Initially, my state was an array of accommodations which I mapped over successfully. However, once I connected Firebase wit ...

Ant Design radio group buttons are currently dysfunctional

I'm having some trouble with radio group buttons. Can anyone assist me with this issue? (your help is greatly appreciated) Current Problem: Radio Group buttons are unclickable. Not sure where the issue lies! Technologies Used: React hooks, styled-co ...

When attempting to add a variable using the next() function, I encountered an error with the BehaviorSubject. The error message displayed was "this.count.next is not a function"

In my Angular service, there is a variable called count that I need to monitor for updates. Whenever this count variable is updated, I want to assign its new value to another variable in a separate component. import {BehaviorSubject} from "rxjs/BehaviorSu ...

Error handling proves futile as Ajax upload continues to fail

Utilizing a frontend jQuery AJAX script, I am able to successfully transfer images onto a PHP backend script hosted by a Slim framework app. However, there is one specific image (attached) that is causing an issue. When the backend attempts to send back a ...

MulterError: Files must be uploaded to designated folders, found at wrappedFileFilter. Detected issue with 2 files

Initially, I want to express my apologies for any language mistakes in this message. I am currently facing difficulties with file uploads using Multer and Express. The issue arises when attempting to upload two files to separate directories; consistently ...

AngularJS array not refreshing following an AJAX request

Currently, I am still in the process of familiarizing myself with Angularjs and actively learning about its functionalities. One issue I have encountered is that when I define an array and loop through it using "ng-repeat," the items within ng-repeat fail ...

Setting the state based on Promise values within a loop

I am currently facing a challenge in my React project where I am using axios to interact with an external API. The goal is to loop through the array of objects retrieved from the API call and utilize the values returned by a separate function within the ...

Encountered an error in production mode with Angular 7: Uncaught ReferenceError - "environment" variable

During development, my application runs smoothly, and ng build --prod --source-map successfully compiles the application. However, when attempting to access it through the browser, an error occurs: app.module.ts:47 Uncaught ReferenceError: env is not defi ...

Is there a way to easily open the RSS link XML Element in a separate browser tab or window?

I have been exploring RSS and creating titles with links. However, when clicking on the link it opens in the same window. I would like it to open in a new window instead. Can someone please advise me on how to achieve this? <a href="http://www.google ...

Tips for correctly mapping a shuffled array in React/Next without triggering a hydration mismatch error

I've been working on a Next.js website and I'm trying to display a randomized list of famous quotes. To achieve this, I'm using lodash to shuffle the array of quotes and then mapping them onto the page. import { useMemo } from 'react&ap ...

Tips and tricks for selecting a specific element on a webpage using jQuery

How can I modify my AJAX form submission so that only the content within a span tag with the id "message" is alerted, instead of the entire response page? $.ajax({ url: '/accounts/login/', data: $(this).serialize(), success: function(ou ...

Assign a specific index value from a PHP array to a JavaScript variable

Having a large PHP array with 649 indexes, I am looking to assign a specific index value to a JavaScript variable based on another variable. Is there a way to achieve this without loading the entire PHP array onto the client side for speed and security rea ...

How can I automatically scroll to an anchor element once CSS animation has finished

I am currently working on a CSS animation that looks like this: @-webkit-keyframes flip { 0% {opacity:1;} 100% {opacity: 0;} //This could be 90% //And here could be frame for 100% which would scroll it down. } #headercover { -webkit-animation-name ...

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

Utilizing JavaScript to pass parameters to an IFRAME within Dynamics CRM

While trying to access http://localhost:80/testsite in an IFRAME, everything seems to work perfectly. However, once I attempt to pass field values as parameters, nothing happens. Oddly enough, accessing the page directly from a browser with parameters work ...

Directing a webpage to a particular moment within that page

Is it possible to automatically redirect users to a new page at a specific time? I would like visitors to be redirected to a new site starting from 12:00AM on December 31st, without allowing them to access the current site after that time. Is there a way ...

What is the best approach to slowly transition a value to a different one over a set period of time?

if(!isWalking) { isWalking = true; var animation = setInterval(function () {$player.css({'left': "+="+boxSize/25})}, 10); setTimeout(function(){clearInterval(animation)},250); setTimeout(function(){isWalking = false},250); ...

Dynamic menu item created using Material UI state management

I am facing a challenge in displaying different menu items based on the gender state. Below are the constant values I am working with. const maleArray = ["A", "B", "C", "D"] const femaleArray = ["E", " ...

What steps can be taken to fix a syntax error in a NodeJS express server code?

I am currently facing a syntax error in the code below, and I'm struggling to fix it. The specific error message is as follows: node staticapi.js /Users/v/Desktop/CS-Extra/EIP/A5/staticapi.js:123 res.status(200).send("Api is running") ...

Adjust the child element's value by referencing the parent class name

I need to update the content of child elements within an HTML file based on the class name of their parent element, using JavaScript. While I have successfully achieved this for static values by creating a TreeWalker for text nodes, doing the same for dyn ...