ReferenceError:Can't find variable:navigation - react-native

Question

I just starting using react-navigation. I also using expo. when i install react-navigation with npm it processed with no error but when i run my project by expo it will cause error with this message : ReferenceError: Can't find variable:navigation. i tried remove node_modules, clear the cache, install it with yarn, using other version but non of them solve the problem. is there any body that can help me??!!
enter image description here
import React from 'react';
import { StyleSheet, Text, Image,View,ImageBackground,TouchableHighlight }
from 'react-native';
import { Ionicons } from '#expo/vector-icons'; // 6.2.2
import { StackNavigator } from 'react-navigation';
export default class app extends React.Component
{
render() {
return <RootStack />;
}
}
class main extends React.Component {
render() {
return (
<ImageBackground source={require('./assets/img/main.jpg')} style={{width:'100%',height:'100%',flex:1}} >
<View style={{width:'100%',height:'15%'}}></View>
<View style={{flex:1,flexDirection:'row',justifyContent:'space-around'}}>
<TouchableHighlight onPress={() => navigation.navigate('Patients')}>
<View style={styles.container}>
<Text style={{padding:5,alignItems: 'center'}}>sss</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={navigation.navigate('Appointment')}>
<View style={styles.container}>
<Ionicons name="md-checkmark-circle" size={64} color="black" />
<Text style={{padding:5,alignItems: 'center'}}>fuck </Text>
</View>
</TouchableHighlight>
</View>
</ImageBackground>
);
}
}
class patinets extends React.Component{
render(){
return(
<View>
<Text>patient</Text>
</View>
);
}
}
class appointment extends React.Component{
render(){
return(
<View>
<Text>appointment</Text>
</View>
);
}
}
class setting extends React.Component{
render(){
return(
<View>
<Text>setting</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
borderWidth: 0,
borderRadius: 15,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#353535',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.1,
shadowRadius: 5,
elevation: 0.5,
marginLeft: 5,
marginRight: 5,
marginTop: 80,
padding:5,
width:'38%',
height:'20%',
justifyContent:'center',
alignItems:'center'
},
});
const RootStack = StackNavigator(
{
Main: {
screen: main,
},
Patients: {
screen: patinets,
},
Appointment: {
screen: appointment,
},
Setting: {
screen: setting,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
const MainStack = StackNavigator(
{
Home: {
screen: main,
},
Details: {
screen: main,
},
},
{
initialRouteName: 'Home',
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);

Answer 1

render() {
const { navigation } = this.props.navigation;
return (
<ImageBackground source={require('./assets/img/main.jpg')} style={{width:'100%',height:'100%',flex:1}} >
<View style={{width:'100%',height:'15%'}}></View>
<View style={{flex:1,flexDirection:'row',justifyContent:'space-around'}}>
<TouchableHighlight onPress={() => navigation.navigate('Patients')}>
<View style={styles.container}>
<Text style={{padding:5,alignItems: 'center'}}>sss</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={navigation.navigate('Appointment')}>
<View style={styles.container}>
<Ionicons name="md-checkmark-circle" size={64} color="black" />
<Text style={{padding:5,alignItems: 'center'}}>fuck </Text>
</View>
</TouchableHighlight>
</View>
</ImageBackground>
);
}
i hope it solve