CODEWITHSUNDEEP
react-nativenpmreact-navigationexpo
Mohsen Soleimani
Mohsen Soleimani

Reputation: 35

ReferenceError:Can't find variable:navigation

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',
      },
    },
  }
);

Upvotes: 1

Views: 1595

Answers (1)

Man
Man

Reputation: 772

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

Upvotes: 1

Related Questions