getting the following error when using firestore Error: FIRESTORE (8.1.2) INTERNAL ASSERTION FAILED: Unexpected state

Question

I'm currently working on an app and it was working fine for awhile...when I was signing up I add the users to firestore and it still worked but now whenever I use firestore in some other screen it keeps throwing the following error:

 @firebase/firestore:, Firestore (8.1.2): FIRESTORE (8.1.2) INTERNAL ASSERTION FAILED: Unexpected state

Stack trace:
  node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
  node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
  node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
  node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
  http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:171277:27 

and this is the code of the screen in which I'm getting errors

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  ScrollView,
  TouchableOpacity,
  Modal,
  Platform,
  ToastAndroid,
  Alert,
} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { FontAwesome5, FontAwesome, Entypo } from '@expo/vector-icons';
import firebase from 'firebase';
import db from '../Config/Firebase';
import { CheckBox } from 'react-native-elements';
import Constants from 'expo-constants'

export default class Add extends React.Component{
    state = {
        allVisitsCompleted: false,
        patientId: Math.floor(Math.random() * 1000000000) + 1,
        patientName: '',
        age: '',
        address: '',
        phoneNumber: '',
        mobileNumber: '',
        gender: '',
        visitDate: '',
        date: null,
        modalVisible: false,
        teethNumberModalVisible: false,
        patient: [],
        addPressed: false,
        patientAdded: false,
      };

      onAddPatient = async () => {
    firebase.firestore().collection("Patients").add({
        patientName:this.state.patientName
    })
}

    render(){
        var patientName = this.state.patientName
        var patientId = this.state.patientId

        return(
            <ScrollView style={{ backgroundColor: '#F5FFFA' }}>
                <View style={{ marginHorizontal: 19, marginTop: Constants.statusBarHeight}}>
          <Text style={styles.header}>Patient name</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.patientName}
            onChangeText={(patientName) =>
              this.setState({ patientName: patientName })
            }
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Patient ID</Text>
          <Text style={{ fontSize: 20 }}>{patientId}</Text>
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Age</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.age}
            onChangeText={(age) => this.setState({ age: age })}
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Address</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.address}
            onChangeText={(address) => this.setState({ address: address })}
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Mobile number</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.mobileNumber}
            onChangeText={(mobileNumber) =>
              this.setState({ mobileNumber: mobileNumber })
            }
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Phone number</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.phoneNumber}
            onChangeText={(phoneNumber) =>
              this.setState({ phoneNumber: phoneNumber })
            }
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>Gender</Text>
          <TextInput
            placeholder=""
            style={{
              fontSize: 20,
              fontWeight: '400',
              height: 25,
              borderBottomWidth: StyleSheet.hairlineWidth,
              marginTop: 5,
            }}
            value={this.state.gender}
            onChangeText={(gender) => this.setState({ gender: gender })}
          />
        </View>

        <View style={{ marginHorizontal: 19, marginTop: 20 }}>
          <Text style={styles.header}>All visits completed</Text>
          <CheckBox
            checkedColor="#0F0"
            checkedTitle="Yes"
            onPress={() =>
              this.setState({
                allVisitsCompleted: !this.state.allVisitsCompleted,
              })
            }
            size={30}
            title="No"
            uncheckedColor="#F00"
            checked={this.state.allVisitsCompleted}
            checkedIcon="check"
            uncheckedIcon="close"
          />
        </View>

        <View style={{ marginHorizontal: 25, marginVertical: 20 }}>
          <TouchableOpacity
            style={{
              alignItems: 'center',
              backgroundColor: '#62C7A1',
              padding: 10,
              borderRadius: 20,
            }}
            onPress={() => {
              this.onAddPatient();
              this.setState({ addPressed: true });
            }}>
            {this.state.patientAdded === true ? (
              <PacmanIndicator color="#FFF" size={30} />
            ) : (
              <Text
                style={{
                  fontSize: 20,
                  color: 'white',
                  fontWeight: 'bold',
                  textTransform: 'uppercase',
                }}>
                Add
              </Text>
            )}
          </TouchableOpacity>
        </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    header: {
      fontSize: 13,
      fontWeight: '200',
      color: '#8e93a1',
      textTransform: 'uppercase',
    },
    chooseDate: {
      fontSize: 13, 
      fontWeight: '600',
      color: '#696969',
      textTransform: 'uppercase',
    },
  });

If you have any Idea how to fix this please let me know...Thanks in advance!

Answer 1

I believe this might be a synchronicity issue, as your onAddPatient function is an async function but you are not awaiting firestore to add the documents, which generates an unexpected state. To fix it you just need to await for it, so:

onAddPatient = async () => {
    await firebase.firestore().collection("Patients").add({
        patientName:this.state.patientName
    })
}