Hoisting react-navigation static navigationOptions - react-native

Question

I have few class components, that uses react-navigation, when I'm wrapping class component to use HOC, the header dissappears, after doing some research, it seems I need to hoist the static navigationOptions = {}
My themeProvider
export const ThemeContextProvider = ({ children }) => {
const [themeID, setThemeID] = useState();
useEffect(() => {
(async () => {
const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);
if (storedThemeID) setThemeID(storedThemeID);
else setThemeID(THEMES[1].key);
})();
}, []);
return (
<ThemeContext.Provider value={{ themeID, setThemeID }}>
{!!themeID ? children : null}
</ThemeContext.Provider>
);
};
export function withTheme(Component) {
return props => {
const { themeID, setThemeID } = useContext(ThemeContext);
const getTheme = themeID => THEMES.find(theme => theme.key === themeID);
const setTheme = themeID => {
AsyncStorage.setItem(STORAGE_KEY, themeID);
setThemeID(themeID);
};
return (
<Component
{...props}
themes={THEMES}
theme={getTheme(themeID)}
setTheme={setTheme}
/>
);
};
hoistNonReactStatics(withTheme, HomeScreen); //I've tried this, but header still does not show up.
}
The component in question
export class HomeScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Dashboard',
headerTintColor: 'white',
headerStyle: {
backgroundColor: 'red',
borderBottomWidth: 0,
},
headerLeft: (
<TouchableOpacity
style={{ paddingLeft: 15 }}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
>
<Feather name="arrow-left" size={24} color="#ffffff" />
</TouchableOpacity>
),
headerRight: (
<View style={{ flexDirection: 'row' }}>
</View>
),
});
componentDidMount() {
...
}
render() {
const { theme } = this.props;
console.log(theme);
return this.state.loading ? (
<ActivityIndicator
color="red"
size="large"
style={{ alignSelf: 'center', flex: 1 }}
/>
) : (
<View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
<View style={styles.container2}>
<TouchableOpacity>
<Feather
style={{ top: '60%', left: '28%' }}
name="plus"
size={32}
color="#ffffff"
onPress={this._openNewTaskModal}
/>
</TouchableOpacity>
<TouchableOpacity>
</TouchableOpacity>
</View>
<Feather
style={{ bottom: '5%', left: '85%' }}
name="calendar"
size={22}
color="#ffffff"
/>
<Feather
style={{ bottom: '9%', left: '8%' }}
name="home"
size={22}
color="#ffffff"
/>
</View>
);
}
}
export default withTheme(HomeScreen);
});
I also tried to export it as hoistNonReactStatics in the HomeScreen but no luck, what am I missing?

Answer 1

The solution was to use
export default hoistNonReactStatics(withTheme(HomeScreen), HomeScreen);