title: Passing props to components from MaterialBottomTabNavigator
body: <p>I am new to react native. I have used <code>MaterialBottomTabNavigator</code> for navigation. It is working fine when tabs are click strong texted on, but I have a button ( link ) in the home component screen. When that button is clicked it should go to the projects component.The button is in Home component (Touchable opacity) named See All.</p>
  
  <p>This is my navigator (App.js)</p>
  
  <pre><code>import React from 'react';  
  import { View } from 'react-native';  
  import { createAppContainer , createStackNavigator } from 'react-navigation';
  import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';  
  import Icon from 'react-native-vector-icons/Ionicons';  
  import { Home , Projects , Gallery , Contact , Reviews , About }  from  './pages'; 
  
  
      const TabNavigator = createMaterialBottomTabNavigator(  
          {  
              Home: {
                   screen: Home,  
                   navigationOptions:{  
                      tabBarLabel:'Home',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/&gt;  
                          &lt;/View&gt;),  
                  } 
              },  
              Projects: { screen: Projects,      
                  navigationOptions:{  
                      tabBarLabel:'Projects',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-business'}/&gt;  
                          &lt;/View&gt;),  
                      activeColor: '#c42e00',  
                      inactiveColor: '#000',  
                      barStyle: { backgroundColor: '#fff' },  
                  }  
              },  
              Gallery: { screen: Gallery,  
                  navigationOptions:{  
                      tabBarLabel:'Gallery',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-image'}/&gt;  
                          &lt;/View&gt;),  
                      activeColor: '#c42e00',  
                      inactiveColor: '#000',  
                      barStyle: { backgroundColor: '#fff' },  
                  }  
              },  
              Contact: {  
                  screen: Contact,  
                  navigationOptions:{  
                      tabBarLabel:'Contact',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-phone-portrait'}/&gt;   
                          &lt;/View&gt;),  
                           activeColor: '#c42e00',  
                           inactiveColor: '#000',  
                           barStyle: { backgroundColor: '#fff' },
                  }  
              }, 
              Reviews: {  
                  screen: Reviews,  
                  navigationOptions:{  
                      tabBarLabel:'Reviews',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-chatboxes'}/&gt;  
                          &lt;/View&gt;),  
                           activeColor: '#c42e00',  
                           inactiveColor: '#000',  
                           barStyle: { backgroundColor: '#fff' },
                  }  
              }, 
  
              About: {  
                  screen: About,   
                  navigationOptions:{  
                      tabBarLabel:'About',  
                      tabBarIcon: ({ tintColor }) =&gt; (  
                          &lt;View&gt;  
                              &lt;Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/&gt;    
                          &lt;/View&gt;),  
                           activeColor: '#c42e00',  
                           inactiveColor: '#000',  
                           barStyle: { backgroundColor: '#fff' },
                  }  
              },  
          },  
          {  
            initialRouteName: "Home",       
            activeColor: '#c42e00',    
            inactiveColor: '#000',  
            barStyle: { backgroundColor: '#fff' },   
          },  
      );  
  
      const Nav =  createAppContainer(TabNavigator);       
  
      export default Nav
  </code></pre>
  
  <p>this is my Home component (Home.js)</p>
  
  <pre><code> import React, { Component } from 'react';
      import { View, Dimensions , ScrollView ,ActivityIndicator ,Image ,Text , TouchableOpacity}  from 'react-native'; 
      import axios  from 'axios';
      import { Header , Statusbar , Carousel }  from '../common'; 
  
      import {Nav , Projects }  from '../pages';  
      var { height, width } = Dimensions.get("window"); 
  
  
      class Home extends Component { 
  
         constructor(props) {
  
            super(props);
            this.state = {
             layout: {
                 height: height,
                 width: width
             },
             sliders : [],
             projects : [],
             loader : false
          }
      }
  
  
   _onPressButton(){
  
         this.props.navigation.navigate('Projects');     
  
      }
  
      render(){
  
       return(
  
            &lt;View   
               style={styles.main_container}
               onLayout={this._onLayout}     &gt;
  
  
  
  
                   &lt;View style={styles.project_text_container}&gt;
  
                      &lt;View&gt;
  
                         &lt;Text style={styles.text1}&gt;Our Projects&lt;/Text&gt;
  
  
                      &lt;/View&gt;
  
  
                      &lt;View&gt;
  
                      &lt;TouchableOpacity onPress={this._onPressButton}&gt;
  
                           &lt;Text style={styles.text2}&gt;See All&lt;/Text&gt;
  
                      &lt;/TouchableOpacity&gt;
  
                       &lt;/View&gt;
  
                  &lt;/View&gt;   
  
  
               &lt;/View&gt; 
  
              )
  
         }
  
      }
  
      const styles =   {
  
         main_container:{
             flex : 1,
         },
  
         project_text_container:{
  
            flexDirection : "row",
            marginLeft : 28    
  
         },
  
         text1:{
  
            fontSize : 20, 
            fontWeight : "bold",
         },
  
         text2:{
  
            marginLeft : 150,
            color : "#c42e00", 
            fontWeight : "bold",
            marginTop:5
  
         },
  
         image_style:{
  
            height : 180,  
            width : 150,
  
         }
      }  
      export { Home }
  </code></pre>