title: onpress event for icon in TabNavigator (react native with react-navigation)
body: <p>I have an icon that i include in a tab navigator as per below:    </p>
  
  <pre><code>const SearchTabBarIcon = ({ tintColor }) =&gt; (
        &lt;IconMCI
          name="account-search"
          size={45}
          color={tintColor}
          onPress={() =&gt; console.log('HELP!!')}
        /&gt;
      );
  </code></pre>
  
  <p>....then my tabNavigator looks like this:</p>
  
  <pre><code>const SignedInTabNav = TabNavigator(
    {
      Profile: {
        screen: Profile,
        navigationOptions: {
          tabBarLabel: 'Me',
          tabBarIcon: ProfileTabBarIcon,
        },
      },
      Search: {
        screen: Search,
        navigationOptions: {
          tabBarLabel: 'Search',
          tabBarIcon: SearchTabBarIcon,
        },
      },
  
      tabBarComponent: TabBarBottom,
      animationEnabled: false,
    }, 
  );
  </code></pre>
  
  <p>The console.log is fired when I click the icon, however the native functionality of the tabNavigator is lost.
  How can I fire the onPress event but also maintain the navigation functionality?</p>
  
  <p>Ive heard I should perhaps "<strong><em>add the props of navigation to my component in the render</em></strong>".
  The render function of App.js looks like this:</p>
  
  <pre><code> render() {
      const Layout = createRootNavigator(this.props.isAuthenticated);
  
      return (
        &lt;View style={{ flex: 1, backgroundColor: '#F8F8FF' }}&gt;
          &lt;Layout /&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>
  
  <p>....and the function createRootNavigator looks like this</p>
  
  <pre><code>  const createRootNavigator = (authenticated = false) =&gt;
        createSwitchNavigator(
          {
            SignedInTabNav: {
              screen: SignedInTabNav,
            },
            SignedOutStackNav: {
              screen: SignedOutStackNav,
            },
          },
          {
  
            initialRouteName: authenticated ? 'SignedInTabNav' : 'SignedOutStackNav',
          },
        );
  </code></pre>
  
  <p>....so where/how do I add the navigation prop in the render for App.js?...and will it be passed down through createRootNavigator.....and further through createSwitchNavigator....and finally passed into SignedInTabNav (TabNavigator) where the Search icon is referenced?  </p>