Custom Navigation Item

If we have create a custom Navigation back item, while running on iPhone Duo simulator, we see it at normal position i.e. on screen's top left side. How can we move it to the safe area like when we use default back button?

If you are only replacing the icon on the back button, you could use set the backIndicatorImage and maintain default system behavior. This would be the recommended approach.

Otherwise, you could request the system to place your custom back button on the vertical axis by setting the toolbar item's axisBehavior to .verticalPreferred.

For more information, watch the Raise the bar with iPhone Duo video.

Thanks for the suggestion. We tried setBackIndicatorImage on every route that should cover it, and the iPhone Duo vertical bar behaves differently from the top navigation bar:

  • UINavigationBarAppearance.setBackIndicatorImage(_:transitionMaskImage:) on UINavigationBar.standardAppearance (and compactAppearance, scrollEdgeAppearance, compactScrollEdgeAppearance), on the page's UINavigationItem, via UINavigationBar.appearance(), and via the legacy backIndicatorImage / backIndicatorTransitionMaskImage.
  • In the top navigation bar the marker image appears in every case.
  • In the Duo vertical bar, the system back button always shows the system chevron (‹). The marker is ignored.
  • Control: a leftBarButtonItem set to UIBarButtonItem(image:style:target:action:) does show the marker in the vertical bar, with the default axisBehavior.

Questions:

  1. Is it expected that the system back button in the vertical bar ignores backIndicatorImage? If so, is there a documented way to change its icon there?
  2. For a custom back control we use a leading image item, which does move into the vertical bar. In our tests a leading item disables the interactive pop gesture. Is there a supported way to keep swipe-back with a leading item on the vertical bar?