I'm trying to use Firestore within my React Native app. So far, I couldnt reach a write/add document operation. I don't know where is the mistake? I don't recieve any error message and when I check y Firestore Database nothing is there.

This is my code:

api/index.js

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, setDoc, addDoc,doc } from 'firebase/firestore';

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const addUser =  () => { setDoc(doc(db, "users", "mario"), {
  employment: "plumber",
  outfitColor: "red",
  specialAttack: "fireball"
});}


export { db,addUser };

screens/auth/sign.up

import React from "react";
import { ... } from "react-native";
import { sendEmailVerification,getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { addUser } from "../../api/index";

export class SignUpScreen extends React.Component {

    _handleCreateUser = async () => {
    
    const auth = getAuth();

    await createUserWithEmailAndPassword(auth,this.state.email, this.state.password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        sendEmailVerification(user)
        addUser()
        auth.signOut()
      })
      .catch((error) => {
        this._handleNotification(error.message,'error')
      });
  };

  render() {
    return (
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            onPress={this._handleCreateUser}
          >
            <Text style={styles.buttonText}>
              {global.loc.getTranslation("CreateNewUserButton")}
            </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

CodePudding user response：

Write to Firestore collection is asynchronous operation,let refactor addUser function

const addUser = async () => {
  try {
    await setDoc(doc(db, "users", "mario"), {
      employment: "plumber",
      outfitColor: "red",
      specialAttack: "fireball",
    });
  } catch (error) {
    console.log(error);
  }
};

and also _handleCreateUser

export class SignUpScreen extends React.Component {
  _handleCreateUser = async () => {
    try {
      const auth = getAuth();
      const userCredentials = await createUserWithEmailAndPassword(
        auth,
        this.state.email,
        this.state.password
      );
      const user = userCredentials.user;
      await sendEmailVerification(user);
      await addUser();
      await auth.signOut();
    } catch (error) {
      this._handleNotification(error.message, "error");
    }
  };

  render() {
    return (
      <KeyboardAvoidingView>
        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={this._handleCreateUser}>
            <Text style={styles.buttonText}>
              {global.loc.getTranslation("CreateNewUserButton")}
            </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}