React native Question posted in
The official React Native documentation can be found here.

Header height – react native / Expo router

I am working on a react native project, using Expo router, to work on the header/ or topNavBar.

in the
<Stack.Screen name="usage" options={usageHeader}

there are differnt way to set the header, either a custom component for the whole header, by using header , or using the navigation feature and then using of headerTitle and headerLeft and headerRight. I am using the second approch because I don’t have to worry about safe area an so on. But the issue is that I couldn’t find a way to increase the height of the header.

headerStyle only accepts backgroundColor.

Is there a olution for this, or am I missing something?
I found an issue about this on gitHub, but i didn’t see any solution apart from using header and defining a whole custom component.

https://github.com/react-navigation/react-navigation/issues/10097

headerStyle: { backgroundColor: '#E9FDFF', height: 100, // not doing anything marginTop: 100, // not doing anything paddingTop: 100, // not doing anything },

Tags:

2

Answers


  1. 0

    You can change backgroud and height props with headerStyle. But for headerStyle you cannot change margin or padding props, you can edit title instead.

    Example:

    <Stack.Screen
  options={{
    headerStyle: {
      height: 300,
      backgroundColor: '#E9FDFF',
    },
    headerTitleStyle: {
      marginTop: 100,
      padding: 100,
    },
  }}
  name="AboutProduct"
  component={AboutProduct}
/>

    output

    Login or Signup to reply.
  2. 0

    With Expo Router, you can use header option with the <Header /> component and add the props headerStyle

    import { Header } from "@react-navigation/elements";
import { Stack } from "expo-router";

    <Stack
      screenOptions={{
          header: ({ options }) => (
            <Header
              {...options}

              headerStyle={{
                height: 100,
                backgroundColor: "red",
              }}
            />
          ),
        }),
      }}
    >
    enter code here
    </Stack>

    Source: https://reactnavigation.org/docs/elements/#header

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search