I'm trying to simply load documents from a Firestore db into a Flatlist in react-native. I'm using expo to monitor changes to my application. I've been running into a few errors that I can't seem to get around,any help would be appreciated! I'm new to using react-native & Firebase.
import {
StyleSheet,
Alert,
SectionList,
SafeAreaView,
Image,
FlatList,
TextInput,
ActivityIndicator,
} from "react-native";
import React, {
useState,
useEffect
} from "react";
import EditScreenInfo from "../components/EditScreenInfo";
import {
Text,
View
} from "../components/Themed";
import {
StatusBar
} from "expo-status-bar";
import {
List
} from "react-native-paper";
import {
initializeApp
} from "firebase/app";
import {
getFirestore,
collection,
getDoc,
addDoc,
doc,
setDoc,
} from "firebase/firestore";
const firebaseConfig = {
...
};
export default function TabTwoScreen() {
const [loading, setLoading] = useState(true); //Set loading to true on component mount
const [users, setUsers] = useState([]); //initial empty array of users
// Initialize Firebase
const db = getFirestore(app);
const firestore = getFirestore();
const app = initializeApp(firebaseConfig);
//this hook triggers when components mount, then subscribe to collection
useEffect(() => {
const subscriber = firestore()
.collection(db, "Users")
.onSnapshot((querySnapshot) => {
const users = [];
querySnapshot.forEach((documentSnapshot) => {
users.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setUsers(users);
setLoading(false);
});
// Unsubscribe from events when no longer in use
return () => subscriber();
}, []);
if (loading) {
return <ActivityIndicator / > ;
}
return (
<FlatList
data={users}
renderItem={({ item }) => (
<View>
<Text>User ID: {item.id}</Text>
<Text>User Name: {item.name}</Text>
</View>
)}
/>
);
}the errors I keep receiving are
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). This error is located at: in TabTwoScreen (created by SceneView)
Invariant Violation: "main" has not been registered. This can happen if: Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
AppRegistry.registerComponent wasn't called.**