title: ReferenceError:Can't find variable:navigation
body: <p>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??!!
  <a href="https://i.stack.imgur.com/pgt87.jpg" rel="nofollow noreferrer">enter image description here</a>    </p>
  
  <pre><code> 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 &lt;RootStack /&gt;;
             }
  } 
  
  class main extends React.Component {
  
  render() {
   return (
    &lt;ImageBackground source={require('./assets/img/main.jpg')} style={{width:'100%',height:'100%',flex:1}} &gt;
    &lt;View style={{width:'100%',height:'15%'}}&gt;&lt;/View&gt;
    &lt;View style={{flex:1,flexDirection:'row',justifyContent:'space-around'}}&gt;
  
  &lt;TouchableHighlight onPress={() =&gt; navigation.navigate('Patients')}&gt;
    &lt;View style={styles.container}&gt;  
        &lt;Text style={{padding:5,alignItems: 'center'}}&gt;sss&lt;/Text&gt;  
    &lt;/View&gt;
  &lt;/TouchableHighlight&gt; 
  
  &lt;TouchableHighlight onPress={navigation.navigate('Appointment')}&gt;
    &lt;View style={styles.container}&gt;
        &lt;Ionicons name="md-checkmark-circle" size={64} color="black" /&gt;
        &lt;Text style={{padding:5,alignItems: 'center'}}&gt;fuck &lt;/Text&gt;  
    &lt;/View&gt;
  &lt;/TouchableHighlight&gt;
  
    &lt;/View&gt;
  
    &lt;/ImageBackground&gt;
  
    );
  }
   }
     class patinets extends React.Component{
     render(){
        return(
            &lt;View&gt;
               &lt;Text&gt;patient&lt;/Text&gt;
            &lt;/View&gt;
         );
       }
       }
      class appointment extends React.Component{
       render(){
         return(
             &lt;View&gt;
               &lt;Text&gt;appointment&lt;/Text&gt;
             &lt;/View&gt;
         );
       }
     }
     class setting extends React.Component{
       render(){
         return(
              &lt;View&gt;
               &lt;Text&gt;setting&lt;/Text&gt;
             &lt;/View&gt;
         );
       }
     }
     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',
        },
      },
    }
  );
  </code></pre>