title: React Navigation Header in Functional Components with Hooks
body: <p>I am trying to inject custom headers to React functional components that are using Hooks.</p>
  
  <p>So for example I have the following React functional component with some hooks:</p>
  
  <pre><code>function StoryHome(props) {
    const [communityObj, setCommunityObj] = useState({
      uid: null,
      name: null,
    });
  ...
  }
  
  StoryHome.navigationOptions = {
    title: 'Stories',
    headerTitleStyle: {
      textAlign: 'left',
      fontFamily: 'OpenSans-Regular',
      fontSize: 24,
    },
    headerTintColor: 'rgba(255,255,255,0.8)',
    headerBackground: (
      &lt;LinearGradient
        colors={['#4cbdd7', '#3378C3']}
        start={{ x: 0, y: 1 }}
        end={{ x: 1, y: 1 }}
        style={{ flex: 1 }}
      /&gt;
    ),
    headerRightContainerStyle: {  
      paddingRight: 10,   
    },    
    headerRight: (    
      &lt;TouchableOpacity onPress={navigation.navigate('storiesList')}&gt; 
        &lt;Ionicons 
           name="ios-search-outline"  
           size={25}  
           color="white"  
           left={20}  
         /&gt;   
      &lt;/TouchableOpacity&gt;
    )
  };
  
  export default StoryHome;
  </code></pre>
  
  <p>So this sort of works, except with the <code>TouchableOpacity</code> part. </p>
  
  <p>First, I don't get the <code>Ionicon</code> to render correctly and second, I don't have access to the <code>navigation</code> object outside of the functional component.</p>
  
  <p>I would love to continue using Hooks but can't seem to figure this one out.</p>