a global place to set header height of stack navigator

Question

I have created a Stack navigator:

const MyScreen = ({navigation}) => {
  const MyStack = createStackNavigator();
  return (
    <MyStack.Navigator
      initialRouteName=...
      screenOptions={{headerShown: true}}>
      <MyStack.Screen
        name=“MyScreen”
        component={MyScreen}
        options={{
          title: ‘Hello’,
          headerLeft: () => <Image...>,
        }}
      />
    </MyStack.Navigator>
  );
};

As you can see above, I have specified to show header & show headerLeft image. But how can I set the header height for all screens hosted by this stack navigator? Is there a global place to do that?

Answer 1

You can set the height using the header styles in screenOptions like below

<MyStack.Navigator
  screenOptions={{
    headerShown: true,
    headerStyle: { backgroundColor: 'tomato', height: 20 },
  }}>