How to change header height in react-navigation v6

Question

Tried different things none of them working, documentation also doesn't help

<MainFlowStack.Navigator
      screenOptions={{headerTitleAlign: 'left', shadowColor: 'transparent', headerStyle: {height: 200}}}
    >
      <MainFlowStack.Screen name="RoutinesList" component={RoutinesListScreen} option={{headerStyle: {height: 600}}} options={{
        headerTitle: (props) =>
          (<View style={{width: '100%'}}>
            <Text style={styles.header1}>
              Your Workouts
            </Text>
          </View>),
        headerShadowVisible: false,
        headerStyle: {height: 100}
      }} />
      <MainFlowStack.Screen name="RoutineScreen" component={RoutineScreen} options={({ route }) => ({ title: route.params.name })} />
    </MainFlowStack.Navigator>

Answer 1

The headerStyle prop for the Stack.Navigator does not support setting a custom height. From the official documentation:

headerStyle​

Style object for header. Supported properties:

• backgroundColor

As far as I am concerned, this has changed compared to react-navigation v5.

However, we could provide a custom header component and set a specific height this way.

<Stack.Screen
  options={
    header: (props) =>
        (
          <View style={{ height: 100 }}>
            ... 
          </View>
        ),
  }
/>