Make header left/right insets configurable

[martinandert]

Currently, the insets (paddings from the edge of the window) for custom headerLeft and headerRight views can not be adjusted. It always uses the default insets on iOS and Android (probably these values are provided by the system).

Pull request #350 proposed making the insets customizable, but it was dismissed, I suppose because of this comment:

[...] I'd like to avoid adding too many settings to header [...]

We have a use case where it would be nice if we were able to control the inset sizes:

We have a screen that renders a web view, so we added "go back" and "go forward" buttons to the header to control the navigation inside the web view. It looks like this:

As you can see, this doesn't look good, as the buttons -- due to the fixed insets -- appear too far away from the left and right window edges (reducing also the space available for the title). This is because we added padding around the small-ish chevron icons in order to increase the hit area of these buttons. Here's the same screenshot, but this time with outlines around the hit areas:

If there was a way to customize the insets, we could make it look like this instead:

This is much better, isn't it?

Here's the same screenshot again, showing the hit areas:

So this is exactly what we need.

As a workaround, we could style the buttons with negative margins in order to move them to the desired positions, but this affects the hit areas negatively:

It's effectively reducing the chance the user is actually able to hit the button with their thumb / finger by half.

This isn't iOS specific. It also applies to Android.

To further prove my point, here are screenshots of the stock iOS and Android back buttons, with outlines added around their hit areas:

As you can see, although the content of the back buttons appears inset from the left edge of the header / toolbar, their hit areas actually extend to the very edge.

Given all that, please consider adding headerLeftInset and headerRightInset options. In order to not break existing apps, these could be undefined by default, rendering the inset sizes as they currently are.

[freysie]

This is something we need as well. The hit areas are just too small. I‘ve tried all combinations of margins, paddings, hit slops, but to no avail.

Does anyone know how to do this with UIKit so we can PR or patch-package it?

@martinandert Did you find a suitable workaround for this?

[martinandert]

Did you find a suitable workaround for this?

Unfortunately not. We're using managed expo, so our ability to patch native code is very limited.

[Jobeso]

The only way I found till now is using negative margin, e.g. marginLeft: -8 for headerLeft.

[dancixx]

Is there any update on this topic?

[chinieer]

any ideas?

[iBhavesh]

I am facing the same issue. I am using react-navigation-header-buttons I reduced the margin by using negative MarginRight on the item

useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={FavouriteHeaderButton}>
        <Item
          title="Fav"
          iconName={iconName}
          onPress={toggleFavourite}
          style={{ marginRight: -15 }}
        />
      </HeaderButtons>
    ),
  });
}, [navigation, iconName]);

[chinieer]

I am facing the same issue. I am using react-navigation-header-buttons I reduced the margin by using negative MarginRight on the item

useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={FavouriteHeaderButton}>
        <Item
          title="Fav"
          iconName={iconName}
          onPress={toggleFavourite}
          style={{ marginRight: -15 }}
        />
      </HeaderButtons>
    ),
  });
}, [navigation, iconName]);

I had think about this solution,but the extra 15 space will not animate when u go back by gesture right,it looks so strangely

[WoLewicki]

I made a PR that hopefully fixes the issue on iOS: #1157. Can you check if it works and does not introduce any new problems?

[SimpleCreations]

@WoLewicki I've tried the PR and it doesn't seem to work. I have a TouchableOpacity button in headerRight that is shifted closer to the right edge with negative margin. Pressing the right edge of the button still has no effect. hitSlop doesn't help either.
iOS 14.5, iOS 12.5.

[WoLewicki]

@SimpleCreations I changed the implementation a bit, can you check again? And if it still does not work correctly, can you provide a reproduction of the issue?

[SimpleCreations]

@WoLewicki seems to be working now, thank you!

[rumax]

Issue is closed but problem still exists in

"react-native-screens": "^3.18.2"

What is the solution to render left and right buttons without extra spaces on left and right?

[WoLewicki]

Doesn't applying margin like in this comment: #692 (comment) work?

[dFelinger]

Negative margin doesn't help. It still not pressable in that space.

Doesn't applying margin like in this comment: #692 (comment) work?

[khunghang16]

+1

[DongGukMon]

I found something strange in the solution that gives negative margin. When I used the version @react-navigation/native-stack 6.9.10, I didn't have a problem with the hit area even if I gave a negative margin, but when I upgraded it to 6.9.17, the same problem occurred. In my experience, 6.9.10 only had a problem with narrowing the hit area when I gave the renderBackground option. Why did the problem get fixed and then relapsed?

[jetaggart]

Is there any progress on this? This bug has been around for a while and the negative margin workaround really affects hit areas.

[jetaggart]

For reference, this is a marginLeft of -16 which aligns it with the default back button if it's not configured. It's strange that it is so mis-aligned if we provide our own button but the default button is exactly where it should be. Notice the hitbox vs where the icon is rendered. I can't see any way of fixing this.