SwiftUI ScrollView is not flipped in RTL

Question

Yammine-Yammine OP

Created Apr ’22

Replies 2

Boosts 0

Views 1.7k

Participants 3

Screen Shot 2022-04-12 at 4.06.17 PM.png

as you can see from the scroll indicator its starting from the end

import SwiftUI

struct ContentView: View {
  var body: some View {
    ScrollView(.horizontal) {
      HStack {
        ForEach(0..<20) { i in
          Text("\(i)")
            .padding()
        }
      }
    }
    .environment(\.layoutDirection, .rightToLeft)
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Boost

Answer 1

3adel_bassiony OP

Jul ’22

You can try those workarounds, but there is no official fix for this

https://gist.github.com/X901/8af229589bb970b9e2c7be38876464fb

https://stackoverflow.com/questions/61166423/swiftui-scrollview-horizontal-rtl-not-working-correctly/73170784#73170784

0

Answer 2

matalay OP

Aug ’22

Thanks for update Adel,

I change your code below,


import SwiftUI

struct ScrollViewRTL<Content: View>: View {
  @ViewBuilder var content: Content
  @Environment(\.layoutDirection) private var layoutDirection
  var type: RowType
   
  init(type: RowType, @ViewBuilder content: () -> Content) {
    self.type = type
    self.content = content()
  }
   
  @ViewBuilder var body: some View {
    ScrollView(type.scrollAxis, showsIndicators: false) {
      content
        .rotation3DEffect(Angle(degrees: layoutDirection == .rightToLeft ? -180 : 0), axis: (
          x: CGFloat(0),
          y: CGFloat(layoutDirection == .rightToLeft ? -10 : 0),
          z: CGFloat(0)))
       
    }
    .rotation3DEffect(Angle(degrees: layoutDirection == .rightToLeft ? 180 : 0), axis: (
      x: CGFloat(0),
      y: CGFloat(layoutDirection == .rightToLeft ? 10 : 0),
      z: CGFloat(0)))
  }
}

public enum RowType {
  case hList
  case vList
   
  var scrollAxis: Axis.Set {
    switch self {
    case .hList:
      return .horizontal
       
    case .vList:
      return .vertical
    }
  }
}

0