Ref: https://stackoverflow.com/questions/55732876/react-navigation-header-in-functional-components-with-hooks
StoryHome.navigationOptions = ({ navigation }) => ({
title: "Stories",
headerTitleStyle: {
textAlign: "left",
fontFamily: "OpenSans-Regular",
fontSize: 24
},
headerTintColor: "rgba(255,255,255,0.8)",
headerBackground: (
<LinearGradient
colors={["#4cbdd7", "#3378C3"]}
start={{ x: 0, y: 1 }}
end={{ x: 1, y: 1 }}
style={{ flex: 1 }}
/>
),
headerRightContainerStyle: {
paddingRight: 10
},
headerRight: (
<TouchableOpacity onPress={() => navigation.navigate("storiesList")}>
<Ionicons name="ios-search" size={25} color="white" left={20} />
</TouchableOpacity>
)
});