Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make header left/right insets configurable

See original GitHub issue

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.