react-nativeexporeact-navigation

How can I add height to the native navigation header

I just want to give more padding/margin from the top or add some height. I tried headerStyle: height but it didn't work. also margin padding doesn't work. I'm also using v6

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",

<Stack.Navigator
        screenOptions={({ navigation }) => ({
          headerShadowVisible: false,
          headerShown: true,
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.goBack()}>
              <Image source={require(arrow)} style={{ height: 10, width: 6 }} />
            </TouchableOpacity>
          ),
        })}
      >

enter image description here

Solution

  • When your header begins to get more complex, it can be advantageous to use a custom component in place of the generic header:

    <Stack.Screen
  ...
  options={{ headerTitle: (props) => /* Your Custom Component */ }}
/>

    See reference docs, here