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