This is the error I get:
[Unhandled promise rejection: FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore]
at http://192.168.0.25:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:204784:321 in _createSuperInternal
at node_modules/@firebase/firestore/node_modules/@firebase/util/dist/index.esm2017.js:791:8 in FirebaseError#constructor
at http://192.168.0.25:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:181904:321 in _createSuperInternal
at node_modules/@firebase/firestore/dist/index.rn.js:370:8 in j#constructor
at node_modules/@firebase/firestore/dist/index.rn.js:16757:57 in <global>
at screens/SetupScreen.js:20:23 in handleSetUp
at screens/SetupScreen.js:19:24 in handleSetUp
at node_modules/react-native/Libraries/Pressability/Pressability.js:702:17 in _performTransitionSideEffects
at node_modules/react-native/Libraries/Pressability/Pressability.js:639:6 in _receiveSignal
at node_modules/react-native/Libraries/Pressability/Pressability.js:520:8 in responderEventHandlers.onResponderRelease
This is my firebase.js file:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
...
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 };
This is my StackNavigator.js file:
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './screens/WelcomeScreen';
import SignupScreen from './screens/SignupScreen'
import LoginScreen from './screens/LoginScreen';
import NavigationScreen from './screens/NavigationScreen';
import SetupScreen from './screens/SetupScreen';
const Stack = createNativeStackNavigator();
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Signup" component={SignupScreen} />
<Stack.Screen name="Setup" component={SetupScreen} />
<Stack.Screen name="Navigation" component {NavigationScreen}/>
</Stack.Navigator> )
}
export default StackNavigator
This is my SignUpScreen.js file:
import { View, Text, Image, StyleSheet, KeyboardAvoidingView, TextInput, TouchableOpacity, StatusBar} from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
import { auth } from '../firebase'
const LoginScreen = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const incompleteForm = !email || !password
const navigation = useNavigation();
const handleSignUp = async() => {
auth
.createUserWithEmailAndPassword(email, password)
.then(userCredentials => {
const user = userCredentials.user
navigation.navigate('Setup');
})
.catch((error) => {
if (error.code == "auth/email-already-in-use") {
alert("The email address is already in use");
}
else if (error.code == "auth/invalid-email") {
alert("The email address is not valid");
} else if (error.code == "auth/weak-password") {
alert("The password must be 6 characters long or more");
}
})
}
return (
<KeyboardAvoidingView style = {styles.container} behavior = 'padding'>
<StatusBar barStyle="light-content" translucent={true} />
<View style={styles.imageContainer}>
<Image source={require('../assets/pop.png')} style={styles.image}/>
</View>
<View style = {styles.inputContainer}>
<TextInput
placeholder = 'Email'
value = {email}
onChangeText = {text => setEmail(text)}
style = {styles.input}
autoCapitalize = 'none'
autoCorrect = {false}
/>
<TextInput
placeholder = 'Password'
value = {password}
onChangeText = {text => setPassword(text)}
style = {styles.input}
secureTextEntry
/>
</View>
<View>
<TouchableOpacity onPress = {handleSignUp}>
<Text>Sign Up</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}
export default LoginScreen
)
And this is my SetUpScreen.js file:
import { View, Text, StyleSheet, TextInput, TouchableOpacity, StatusBar} from 'react-native'
import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'
import { auth, db } from '../firebase'
import { doc, setDoc} from '@firebase/firestore'
const SetupScreen = () => {
const [username, setUsername] = useState('')
const [name, setName] = useState('')
const [age, setAge] = useState('')
const [city, setCity] = useState('')
const [country, setCountry] = useState('')
const [movie, setMovie] = useState('')
const navigation = useNavigation();
const handleSetUp = async() => {
await setDoc(doc(db, 'users', 'sometext'), {
username: username,
name: name,
age: age,
city: city,
country: country,
movie: movie
});
}
return (
<View>
<View>
<TextInput
placeholder = 'Username'
value = {username}
onChangeText = {text => setUsername(text)}
style = {styles.input}
autoCorrect = {false}
maxLength={10}
/>
<View>
<View>
<TextInput
placeholder = 'Name'
value = {name}
onChangeText = {text => setName(text)}
style = {styles.name}
autoCorrect = {false}
maxLength={10}
/>
</View>
<View>
<TextInput
placeholder = 'Age'
value = {age}
onChangeText = {text => setAge(text)}
style = {styles.age}
autoCorrect = {false}
keyboardType = 'numeric'
maxLength={2}
/>
</View>
</View>
<View>
<View>
<TextInput
placeholder = 'City'
value = {city}
onChangeText = {text => setCity(text)}
style = {styles.city}
autoCorrect = {false}
autoCapitalize = 'words'
/>
</View>
<View>
<TextInput
placeholder = 'Country'
value = {country}
onChangeText = {text => setCountry(text)}
style = {styles.country}
autoCorrect = {false}
autoCapitalize = 'words'
/>
</View>
</View>
<TextInput
placeholder = 'Favorite movie'
value = {movie}
onChangeText = {text => setMovie(text)}
style = {styles.input}
autoCapitalize = 'words'
autoCorrect = {false}
/>
<View>
<TouchableOpacity onPress = {handleSetUp}>
<Text>Create profile</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
export default SetupScreen
If I comment out the WelcomeScreen and SignUpScreen and start the app on the SetUpScreen the user shows up in the collection the code creates, but when I navigate to it from the SignUpScreen, that's when I get the mistake. Can someone please help me figure it out?
make a file named metro.config.js in the root directory and paste the following code in that file reload the whole app,. maybe it will help
const { getDefaultConfig } = require("@expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.