title: react-navigation tabBarComponent cannot read property "key" of undefined
body: <p>The documentation for react-navigation is pretty unclear to me about how to customise the <code>tabBarComponent</code> beyond simply changing colours. I am able to create my custom component for tabs and point to it like so;</p>
  
  <pre><code>import { TabNavigator } from 'myComponentsSomewhere'
  
  ...
  
  const Navigator = createBottomTabNavigator(
    {
      Route1: Route1Component,
      Route2: Route2Component,
      ...
    },
    {
      tabBarComponent: props =&gt; &lt;TabNavigator {...props} /&gt;,
      tabBarOptions: {
        activeTintColor: colors.first,
        showLabel: false,
      },
    },
  )
  </code></pre>
  
  <p>On the <code>TabNavigator</code> side, i get a load of props as i would expect;</p>
  
  <pre><code>activeTintColor: "#d85089",
  getAccessibilityLabel,
  getButtonComponent,
  ...
  navigation,
  ...
  </code></pre>
  
  <p>Within the <code>navigation</code> prop, i can get to the <code>state</code> and then the routes etc... but i am unable to fire off any of the functions for getting buttons or rendering icons. (<code>renderIcon</code>, <code>getButtonComponent</code>)</p>
  
  <p>The docs on these functions are weak, but looking at the code, it seems they both require a "route" object that contains a <code>key</code>, <code>routeName</code> etc. </p>
  
  <p>That shape can be found in the <code>navigation.state.routes</code> array - but passing one of those objects simply throws the error;</p>
  
  <pre><code>Cannot read property 'key' of undefined
  </code></pre>
  
  <p>Here is an example of that code that errors;</p>
  
  <pre><code>import React from 'react'
  import { View, Text } from 'react-native'
  
  const TabNavigator = props =&gt; {
    return props.navigation.state.routes.map(route =&gt;
      props.getButtonComponent(route),
    )
  }
  
  export default TabNavigator
  
  </code></pre>
  
  <p>Ultimately, i want to be able to write my own code to contain the tabs, rather than be restricted to passing code to the react-navigation markup. I don't understand why none of the render functions received in the props will work when passed a complete route object, straight out of the navigation prop</p>