I'm working with Firebase v9. The authentication works fine, but the Firestore does not work me for some reason. I don't even get an error--it just doesn't do anything.

I tried addDocs() but still nothing works.

EDIT: actually , i was using the firebase @9.1.0 i upgraded it to @9.6.7 and it worked perfectly fine ! i had to downgrade from @9.6.8 ( the latest ) to @9.1.0 because of the error ( Can't find variable: IDBIndex ) !

import React, { useLayoutEffect, useState } from "react";
import {
 Text,
 View,
 StyleSheet,
 TextInput,
 TouchableOpacity,
 KeyboardAvoidingView,
 Platform,
 ScrollView,
 Alert,
} from "react-native";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { doc, setDoc } from "firebase/firestore";
import { db } from "../../firebase/firebaseConfig";

const NewChat = ({ navigation }) => {
 const [input, setInput] = useState("");

 useLayoutEffect(() => {
   navigation.setOptions({
     title: "Add a new Chat",
     headerBackTitle: "Chats",
   });
 }, [navigation]);

 const AddChat = async () => {
   const myDoc = doc(db, "Chats", input);
   const docData = {
     chatName: input,
   };

   setDoc(myDoc, docData).then(() => {
     navigation.goBack();
   });
 };

 return (
   <ScrollView>
     <View
       style={{
         marginTop: 20,
         marginHorizontal: 20,
         borderColor: "black",
         borderWidth: 1,
       }}
     >
       <View style={styles.container}>
         <AntDesign
           name="wechat"
           size={40}
           color="black"
           style={{ alignSelf: "center" }}
         />
         <TextInput
           placeholder="Enter a chat name"
           value={input}
           onChangeText={(text) => {
             setInput(text);
           }}
           style={{ flexGrow: 1, marginLeft: 20 }}
         />
         <TouchableOpacity style={{ alignSelf: "center" }} onPress={AddChat}>
           <Ionicons name="checkmark-done-circle" size={40} color="black" />
         </TouchableOpacity>
       </View>
     </View>
   </ScrollView>
 );
};

const styles = StyleSheet.create({
 container: {
   flexDirection: "row",
   backgroundColor: "white",
   justifyContent: "center",
   height: 60,
 },
});

export default NewChat;