i'm trying to change Header Bar height in React-Native Stack Navigator
this is my code
I tried to put headerStyle: height:'100', but it doen't work
what should i do?
const LoginNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{
title: 'MOVIEAPP',
headerTransparent: true,
headerTintColor: '#E70915',
headerTitleStyle: {
fontWeight: 'bold',
},
headerStyle:{
height:100, // i tried to put height
}
}}
/>
</Stack.Navigator>
);
};
can you update the options prop to the following and let me know if it works?
options={{
title: 'MOVIEAPP',
headerTitleStyle: {
fontWeight: 'bold',
},
headerStyle:{
height:200, // i tried to put height
backgroundColor: 'red'
}
}}
Check for the official documentation please
We see only backgroundColor here.
Set a custom header instead
<Stack.Screen
options={
header: (props) =>
(
<View style={{ height: 100 }}>
...
</View>
),
}
/>
But you have to find a way to integrate the arrow functionality