(iPhone Duo) Toolbar Items are misplaced for RTL layout-direction

On iPhone Duo, when I use .environment(\.layoutDirection, .rightToLeft) for a navigation view, the toolbar items sometimes appear on the left side instead of the right side, below the camera. This results in a view with two sides, and in some cases, it displays in an unexpected place. For example, in the code below, the button is placed behind the camera, as shown in the attachment.

NavigationSplitView {
    Text("Sidebar")
      .toolbar {
        ToolbarItem(placement: .cancellationAction) {
          Button("X", systemImage: "xmark", action: {})
        }
      }
  } detail: {
    Text("Detail")
  }
  .environment(\.layoutDirection, .rightToLeft)

Is this intended behavior for RTL layout direction, a known issue, or a simulator issue?

Thanks for the post, very interesting. You should test with devices set up this way instead of using it in code.

When you remove .environment(\.layoutDirection, .rightToLeft) then the toolbar is not on top of the camera. I would suggest using right to left on the content not in toolbars.

When you use .environment(\.layoutDirection, .rightToLeft), SwiftUI flips the layout. If it's rendering behind the camera, the underlying navigation bar likely isn't updating its safe area insets to match the forced view-level RTL environment.

So I think you need to apply RTL to the content only. If you are testing RTL layouts, forcing it via the SwiftUI environment on a specific view can sometimes cause issue with the host UINavigationController.

It is generally more reliable to run the app in an RTL language via your Xcode Scheme settings instead of just setting in code.

If you must force it in code, applying it at the Window/Scene level or setting UIView.appearance().semanticContentAttribute = .forceRightToLeft often yields better results for navigation bars?

Albert  WWDR

(iPhone Duo) Toolbar Items are misplaced for RTL layout-direction
 
 
Q