title: React Native functional component navigationOptions headerRight not being set
body: <p>Previously I have set the headerRight option in the root component that renders child component with Screen options like this</p>
  
  <pre><code>export default function App() {
    return (
      &lt;RecipeProvider&gt;
        &lt;NavigationContainer&gt;
          &lt;Stack.Navigator initialRouteName="Recipes"&gt;
            &lt;Stack.Screen
              name="Recipes"
              component={RecipeList}
              options={({ navigation }) =&gt; ({
                headerRight: () =&gt; (
                  &lt;TouchableOpacity
                    style={styles.button}
                    onPress={() =&gt; navigation.navigate("New Recipe")}
                  &gt;
                    &lt;FontAwesomeIcon icon={faPlus} size={20} /&gt;
                  &lt;/TouchableOpacity&gt;
                ),
              })}
            /&gt;
  </code></pre>
  
  <p>and now I would like to move the headerRight inside the component definition (so I don't end up with a huge App file with details that are only relevant to the screen component themselves)</p>
  
  <p>I have read other solutions and tried the following</p>
  
  <pre><code>export default function RecipeList({ navigation }) {
    const { recipes } = useContext(RecipeContext);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;FlatList
          numColumns={2}
          data={recipes}
          keyExtractor={(recipe: Recipe) =&gt; recipe.id}
          renderItem={({ item }) =&gt; {
            return (
              &lt;RecipeItem
                name={item.name}
                minutes={item.minutes}
                image={item.image}
                title="Go to Detail Screen"
                onPress={() =&gt; {
                  navigation.navigate("Recipe Details", { item });
                }}
              /&gt;
            );
          }}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  RecipeList.navigationOptions = ({ navigation }) =&gt; ({
    headerRight: () =&gt; (
      &lt;TouchableOpacity
        style={styles.button}
        onPress={() =&gt; navigation.navigate("New Recipe")}
      &gt;
        &lt;FontAwesomeIcon icon={faPlus} size={20} /&gt;
      &lt;/TouchableOpacity&gt;
    ),
  });
  </code></pre>
  
  <p>But the headerRight button doesn't show no more ... any ideas ?</p>
  
  <p>Thank you all &lt;3</p>