react-nativereact-navigation

How to change header height in react-navigation v6


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>

Solution

  • 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>
            ),
      }
    />