iosswiftswiftuilocalizationright-to-left

Views not mirrored for RTL languages


I’m trying to localize my SwiftUI app for RTL languages but having trouble getting the views to be mirrored (navigation presentation direction, link chevron direction, toolbar items location etc.) I created a really simple project with the code below and when I edit the scheme to use “Right-to-Left Pseudolanguage” for “App Language” the views do get mirrored. However, when I choose Hebrew or Arabic or even set the simulator or device's system language to an RTL language, it doesn’t mirror and shows the same way it does for LTR languages.

struct ContentView: View {
  var body: some View {
    NavigationStack {
      List {
        ForEach(1..<10) { i in
          NavigationLink {
            Text("Hello world")
          } label: {
            Text("\(i)")
          }
        }
      }
    }
  }
}

The first image is what I expect (when using “Right-to-Left Pseudolanguage”) and second image is how it's shown for Hebrew/Arabic which isn't mirrored

enter image description here enter image description here


Solution

  • Try this approach using a variable to modify the layoutDirection

    Example code:

    struct ContentView: View {
        @State private var isRTL = false  // <-- here
        
        var body: some View {
            NavigationStack {
                List {
                    ForEach(1..<10) { i in
                        NavigationLink {
                            Text("Hello world")
                        } label: {
                            Text("\(i)")
                        }
                    }
                }
            }
            .onAppear {
                isRTL = Locale.current.language.languageCode?.identifier == "he"  // <-- here
            }
            .environment(\.layoutDirection, isRTL ? .rightToLeft : .leftToRight)  // <-- here
        }
        
    }