I am trying to build a chat app with react-native expo and I get this error in Inbox page I also put my chat page(it is what i am trying to navigate) Please help me! I put my dashboard screen also I dont have route.js file.
"TypeError: undefined is not an object (evaluating '_this3props.navigation.state.params')"
export default class GelenKutusu extends React.Component {
state={
userList:[]
}
componentWillMount(){
firebase.database().ref().child('users').once('value',(snap)=>{
let userList=[]
snap.forEach((user)=>{
const {first_name,profile_picture,uid}=user.val()
userList.push({first_name,profile_picture,uid})
})
this.setState({userList})
})
}
render() {
return (
<View style={styles.container}>
<View style={{alignItems:'center',justifyContent:'center',width:width-40,paddingBottom:10}}>
<Text style={{color:'grey',fontWeight:'bold',fontSize:18}}>Inbox</Text>
</View>
<FlatList
data={this.state.userList}
keyExtractor={(item,index)=>item.first_name}
renderItem={({item})=>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('Chat',{user:this.props.navigation.state.params.user, profile:item})} >
<View style={{flex:1,backgroundColor:'transparent', flexDirection: 'row', padding:5, width:width}}>
<Image style={{height:40, width:40,borderRadius:20}}
source={{ uri: item.profile_picture }} />
<View style={{alignItems:'center',justifyContent:'center'}}>
<Text style={{color:'grey', fontWeight:'bold'}}>{item.first_name}</Text>
</View>
</View>
<View style={{width:width, height:1,backgroundColor:'darkgrey'}} />
</TouchableOpacity>
} />
</View>
);
}
}
Here is chat.js
export default class chat extends Component{
state={
messages:[],
user:this.props.navigation.state.params.user,
profile:this.props.navigation.state.params.profile
}
componentWillMount(){
const {user,profile}=this.state
this.chatID= user.uid > profile.uid? user.uid+'-'+profile.uid:profile.uid+'-'+user.uid
this.watchChat()
}
watchChat=()=>{ firebase.database().ref('messages').child(this.chatID).on('value',snap=>{
let messages=[]
snap.forEach(messages=>{
messages.push(messages.val())
})
messages.reverse()
this.setState({messages})
})
}
onSend=(messages)=>{
const {user,profile}=this.state
relationMessage={} firebase.database().ref('messages').child(this.chatID).push({...message[0],createdAt:new Date().getTime(),
})
}
render(){
const {user,profile}=this.state
const avatar = user.profile_picture
return(
<View style={{flex:1}}>
<GiftedChat
messages={this.state.messages}
user={{_id:user.uid,avatar}}
onSend={this.onSend()}
/>
</View>
)
}
}
Here is my Dashboard.js screen
class DashboardScreen extends Component {
render(){
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
gestureEnabled: true,
gestureDirection: "horizontal",
// transitionSpec: {
// open: config,
// close: closeConfig
// }
}}
headerMode="float"
animmation="fade" >
<Stack.Screen options={{
headerRight: () => (
<Ionicons name="ios-search" size={38}
style={{ margin: 5, padding: 5}}
onPress={() => alert('This is a button!')}
/>
),
headerLeft: () => (
<Ionicons name="ios-add" size={48}
style={{ margin: 5, padding: 5}}
onPress={() => alert('This is a button!')}
/>
),
}} name = " "
component={MyTabs} />
<Stack.Screen name="Header" component={MyTabsTop} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
export default DashboardScreen;
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName ='ios-home'
}
else if (route.name === 'Bildirimler') {
iconName ='ios-notifications'
}
else if (route.name === 'GelenKutusu') {
iconName ='ios-chatboxes'
}
else if (route.name === 'Profil') {
iconName ='ios-contact'
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />
}
})} >
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Bildirimler" component={Bildirimler} />
<Tab.Screen name="GelenKutusu" component={GelenKutusu} />
<Tab.Screen name="Profil" component={Profil} />
</Tab.Navigator>
);
}
const Stack = createStackNavigator();
function MyTabsTop() {
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Profil}
options={{ title: 'My home' }}
/>
</Tab.Navigator>
);
}
This is context.
