Search code examples
javascriptreactjsreact-nativereact-navigation

How can i change Header Bar height in react native?


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

Solution

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