Have been trying to make two different users on my react app, but I am having problems using props to connect the screens. when I press 'don't have an account' I face thiss error. is there maybe any other way of doing this without props, or is there any solution to this code? would appreciate any suggestions. thanks
SignUpScreen
import React,{useState, useEffect} from 'react'
import { View, Text ,Image,StyleSheet,KeyboardAvoidingView,TouchableOpacity,ActivityIndicator,ScrollView} from 'react-native'
import { TextInput,Button } from 'react-native-paper';
import {launchImageLibrary} from 'react-native-image-picker';
import storage from '@react-native-firebase/storage'
import auth from '@react-native-firebase/auth'
import firestore from '@react-native-firebase/firestore'
const SignupScreen =({navigation,route,props}) =>{
const [email,setEmail] = useState('')
const [name,setName] = useState('')
const [password,setPassword] = useState('')
const [image,setImage] = useState(null)
const [showNext,setShowNext] = useState(false)
const [loading,setLoading] = useState(false)
if(loading){
return <ActivityIndicator size="large" color="#00ff00" />
}
const userSignup = async ()=>{
setLoading(true)
if(!email || !password || !name){
alert("please add all the field")
return
}
try{
const result = await auth().createUserWithEmailAndPassword(email,password)
firestore().collection('users').doc(result.user.uid).set({
name:name,
email:result.user.email,
uid:result.user.uid,
pic:image,
status:"online"
})
setLoading(false)
}catch(err){
alert("something went wrong")
}
}
const type=props.route.params.type
// console.log(type,"type");
useEffect(()=>{
allUsers()
},[])
if(type=='Doctor'){
return (
<ScrollView>
<KeyboardAvoidingView behavior="position">
<View style={styles.box1}>
<Image style={styles.img} source={require('../assets/hee.png')} />
</View>
<View style={styles.box2}>
{!showNext &&
<>
<TextInput
label="Email"
value={email}
onChangeText={(text)=>setEmail(text)}
mode="outlined"
/>
<TextInput
label="password"
mode="outlined"
value={password}
onChangeText={(text)=>setPassword(text)}
secureTextEntry
/>
<TextInput
label="Full Name"
mode="outlined"
/>
<TextInput
label="Address"
mode="outlined"
/>
<TextInput
label="Contact Number"
mode="outlined"
keyboardType='numeric'
/>
</>
}
{showNext ?
<>
<TextInput
label="Name"
value={name}
onChangeText={(text)=>setName(text)}
mode="outlined"
/>
<Button
mode="contained"
style={{marginTop:20}}
onPress={()=>userSignup()}
>Signup</Button>
<TouchableOpacity style={{textAlign:"center", marginTop:25,marginLeft:115}} onPress={()=>navigation.goBack()}>
<Text>
Go Back
</Text>
</TouchableOpacity>
</>
:
<Button
style={{marginTop:20}}
mode="contained"
onPress={()=>setShowNext(true)}
>Next</Button>
}
<TouchableOpacity onPress={()=>props.navigation.goBack()}><Text style={{textAlign:"center", marginTop:25}}>Already have an account ?</Text></TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
)
}
}
export default SignupScreen
const styles = StyleSheet.create({
text:{
fontSize:22,
color:"green",
margin:15
},
img:{
width:250,
height:250
},
box1:{
alignItems:"center"
},
box2:{
width:"70%",
justifyContent:"center",
height:"50%",
margin:20,
marginLeft:55
}
});
Main
import React,{useState} from 'react'
import { View, Text ,Image,StyleSheet,KeyboardAvoidingView,TouchableOpacity,ActivityIndicator} from 'react-native'
import { TextInput,Button } from 'react-native-paper';
import auth from '@react-native-firebase/auth'
const Main =props=> {
const [email,setEmail] = useState('')
const [password,setPassword] = useState('')
const [loading,setLoading] = useState(false)
if(loading){
return <ActivityIndicator size="large" color="red" />
}
const userLogin = async ()=>{
setLoading(true)
if(!email || !password){
alert("please add all the field")
return
}
try{
const result = await auth().signInWithEmailAndPassword(email,password)
setLoading(false)
}catch(err){
alert("something went wrong")
}
}
return (
<KeyboardAvoidingView behavior="position">
<View style={styles.box1}>
<Image style={styles.img} source={require('../assets/hee.png')} />
</View>
<View style={styles.box2}>
<Button
mode="contained"
onPress={()=>{userLogin(),{type:"Doctor"}}}
>Doctor</Button>
<Button
mode="contained"
onPress={()=>{userLogin(),{type:"User"}}}
>User</Button>
<TouchableOpacity
onPress={()=>props.navigation.navigate('signup')}>
<Text style={{textAlign:"center"}}>
Dont have an account ?
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
)
}
export default Main
const styles = StyleSheet.create({
text:{
fontSize:22,
color:"red",
margin:10
},
img:{
width:250,
height:250
},
box1:{
alignItems:"center"
},
box2:{
paddingHorizontal:40,
justifyContent:"space-evenly",
height:"50%"
}
});
CodePudding user response：
props is not defined because you already destructed it. So, you can set the type variable simply like this:
const type = route.params.type
CodePudding user response：
As @User456 suggested, you don't need to use props.route as you are already destructuring the props.
In your SignupScreen
const SignupScreen =({navigation,route}) =>{
const { type } = route.params;
...
if(type === "Doctor")
// keep your current code
else
// handle if any other type is expected
}
Also change the
<TouchableOpacity onPress={()=>navigation.goBack()}> //removed props
<Text style={{textAlign:"center", marginTop:25}}>
Already have an account ?
</Text>
</TouchableOpacity>
Then in your Main file, you will have to pass the type param when you navigate to the SignupScreen.
Change the Don't have an account button onPress to
<TouchableOpacity
onPress={()=> props.navigation.navigate('signup', {type: "Doctor"})} // passing Doctor type as route param
>
<Text style={{textAlign:"center"}}>
Dont have an account ?
</Text>
</TouchableOpacity>
You can read more about passing route params in react-navigation at https://reactnavigation.org/docs/params