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>
      );
    };

CodePudding user response：

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'
    }
}}

CodePudding user response：

Check for the official documentation please

Official Docs

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