Header padding in @react-navigation/native-stack

5
closed
b-steel
b-steel
Posted 1 month ago

Header padding in @react-navigation/native-stack #10058

Current behavior

If the default back button is hidden by passing {headerBackVisible: false, headerLeft: () => <HeaderBackButton/>} where the HeaderBackButton component is imported from @react-navigation/elements there is some padding to the left of the back button that is not there when using the default back button.

This issue is not the case when using the stack navigator from @react-navigatin/stack Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 33 Simulator Screen Shot - iPhone SE (1st generation) - 2021-10-15 at 15 59 36

Expected behavior

Inserting HeaderBackButton for headerLeft should be identical to the default back button (visually)

Reproduction

https://github.com/b-steel/react-navigation-header-demo

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.0.6
@react-navigation/stack 6.0.11
@react-navigation/native-stack 6.2.4
react-native-screens 3.4.0
react-native-gesture-handler 1.10.2
react-native https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz
expo 42.0.1
node 14.17.1
npm or yarn 1.22.15
github-actions[bot]
github-actions[bot]
Created 1 month ago

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/native
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

github-actions[bot]
github-actions[bot]
Created 1 month ago

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

christophemenager
christophemenager
Created 4 weeks ago

I have the sale issue

BologaMarius
BologaMarius
Created 2 days ago

This issue should be opened for the react-native-screens project.

This padding issue is due to the autolayout, used for navigation bar starting with iOS 11, where the UIBarButtonItems with custom views have 16 pts leading constraint. More details about the native issues here. Since the bar has already 16 points leading constraint and the HeaderBackButton icon has already marginLeft: 8 in styles, the back button will look like having 24 pts leading margin. The headerRight component has the same issue. There might be a few workarounds for this:

  1. Wrap your headerLeft/headerRight component in a View and add a negative margin. Example bellow:

<View style={{marginLeft: -16}}> <HeaderBackButton onPress={() => navigation.goBack()} /> </View>

  1. Write a custom header and use that instead of the default header, seems like the issue is resolved when the custom header is used. Make sure you pass the new component for the headerLeft prop.

  2. Changes on the native side(a patch) to make sure the leftBarButtonItem/rightBarButtonItem has the proper leading margin/trailing margin, some solutions provided here

b-steel
b-steel
Created 1 day ago

@BologaMarius Thanks for all the info, much appreciated. I should have thought of passing a custom header everywhere to solve the issue.