title: react navigation navigationoptions functional component hook
body: <p>Sorry for the bad wording for the title, I have an issue with navigationOptions with react-navigation in functional component, I'm using a custom hook for my theming.
  I'm wrapping the component to then use the withTheme hook.</p>
  
  <p>The issue itself is that no matter what I do with navigationOptions, it doesn't change the header at all</p>
  
  <p>This is my component that is having tough time: </p>
  
  <pre><code>HomeScreen = ({ theme }) =&gt; {
    return (
     ...
    );
  };
  
  HomeScreen.navigationOptions = {
    title: 'Dashboard',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: 'red',
    },
    headerLeft: (
      &lt;TouchableOpacity
        style={{ paddingLeft: 15 }}
        onPress={() =&gt; navigation.dispatch(DrawerActions.toggleDrawer())}
      &gt;
        &lt;Feather name="arrow-left" size={24} color="#ffffff" /&gt;
      &lt;/TouchableOpacity&gt;
    ),
    headerRight: (
      &lt;View style={{ flexDirection: 'row' }}&gt;
  
      &lt;/View&gt;
    ),
  }
  
  const style = StyleSheet.create({
    ...
  }
  });
  
  export default withTheme(HomeScreen);
  </code></pre>
  
  <p>And the themeProvider component</p>
  
  <pre><code>const STORAGE_KEY = 'THEME_ID';
  const ThemeContext = React.createContext();
  
  export const ThemeContextProvider = ({ children }) =&gt; {
    const [themeID, setThemeID] = useState();
  
    useEffect(() =&gt; {
      (async () =&gt; {
        const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);
        if (storedThemeID) setThemeID(storedThemeID);
        else setThemeID(THEMES[1].key);
      })();
    }, []);
  
    return (
      &lt;ThemeContext.Provider value={{ themeID, setThemeID }}&gt;
        {!!themeID ? children : null}
      &lt;/ThemeContext.Provider&gt;
    );
  };
  
  export function withTheme(Component) {
    return props =&gt; {
      const { themeID, setThemeID } = useContext(ThemeContext);
  
      const getTheme = themeID =&gt; THEMES.find(theme =&gt; theme.key === themeID);
      const setTheme = themeID =&gt; {
        AsyncStorage.setItem(STORAGE_KEY, themeID);
        setThemeID(themeID);
      };
  
      return (
        &lt;Component
          {...props}
          themes={THEMES}
          theme={getTheme(themeID)}
          setTheme={setTheme}
        /&gt;
      );
    };
  }
  </code></pre>
  
  <p>Picture of header: <a href="https://i.stack.imgur.com/szKTk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/szKTk.png" alt=""></a></p>
  
  <p>Can anybody tell me what I'm missing?</p>