Change header title
Closed this issue · 4 comments
Hi.
Is there anyway to change custom header title?
I have a state in my screen and I want to change header title based on my state
hi @aminsaedi It doesn't change according to the change from your state?
No its remain the initial value of the state after changing that.
I put there lines of code in my screen
` const options = {
navigationOptions: {
/* Add a custom header to 'useCollapsibleHeader' options the same way you would add it to the Stack.Screen options */
header: ({ scene, previous, navigation }) => {
const { options } = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
<View
style={{
width: "100%",
height: 200,
backgroundColor: "blue",
padding: 20,
}}
>
<View
style={{
flex: 1,
backgroundColor: "gray",
alignItems: "center",
justifyContent: "center",
}}
>
<Text
style={{
fontSize: 32,
color: "white",
marginBottom: 10,
}}
>
{activeSortMethod.name}
</Text>
{previous && (
<TouchableOpacity onPress={() => setShowSortByModal(true)}>
<View>
<Text
style={{
fontSize: 16,
fontWeight: "bold",
color: "white",
}}
>{"<< GO BACK"}</Text>
</View>
</TouchableOpacity>
)}
</View>
</View>
);
},
},
};
const {
onScroll /* Event handler /,
containerPaddingTop / number /,
scrollIndicatorInsetTop / number */,
} = useCollapsibleHeader(options);
`
I'm sure that i chage state correctly.but it's not seems to work
You can use navigation.setParams({ myTitle: 'aaaaa' });
and render scene.route.params.myTitle
.
This will re-render your new param.
Thanks :))
helped me a lot