React Navigation Header in Functional Components with Hooks. navigationOptions can be a function that gets an object as argument with navigation as a property.
You also need to make sure you give a function to onPress, and that you don’t invoke navigation.navigate directly.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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> ) }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
