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

UI Frameworks SwiftUI
alsarraf OP
Created
Replies 5
Boosts 1
Views 368
Participants 3

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?

Replies  5
Boosts 1
Views  368
Participants  3
DTS Engineer OP
Apple

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

DTS Engineer OP
Apple

To add onto @DTS Engineer response, the ToolbarItem button appearing under the camera like that appears to be a bug.

Is this a screenshot of the canvas in Xcode? Do you see the same behavior in a simulator?

I'd like to share a sample project that reproduces this issue with the relevant engineering team, please file an Feedback Assistant, attach your sample project and steps to reproduce the issue.

Reply with the FB number when complete.

 Travis
alsarraf OP

I have a live application in the App Store that mainly targets Arab users and heavily depends on forcing RTL layout direction, and it's working perfectly on both iPhone and iPad without any issues.

I apply environment(\.layoutDirection, .rightToLeft) to navigation containers so that navigation behaviors (such as swiping right-to-left to go back) and toolbar items placement align with Arab users’ expectations. This applies even when English is set as the primary language on the device, a choice many users make, including me. When I tested the app on iPhone Duo simulator, I noticed several issues caused by applying the RTL environment.

You can find in the video below some of those issues, like not aligning toolbar items correctly, and swiping left-to-right instead of right-to-left to go back.

https://streamable.com/0kq8c9

I already submitted issues in Feedback Assistant several days ago but nobody responded.

FB25090932

FB25119804

DTS Engineer OP
Apple

You have provided 2 numbers one from Oct 6 and the new one from October 8th and both have the layoutDirection from right to left. Are they duplicates and should be merge or you want to tackle different teams?

Albert  WWDR
alsarraf OP

They are two different issues, one about misplacement of the presented sheet while using presentationPlacement() for RTL layout (leading sheets presented on left instead of right for Arabic), and another about misplacement of toolbar items (items placed on top-bar instead of the sidebar in inner-display, and in left side instead of the camera side in outer-display).