React Navigation Header in Functional Components with Hooks : <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>
