Is there a way to use scrollview RTL (arabic) with LTR animation?

Question

When you turn the ScrollView left to right, and try to scroll, content jumps to the other side. Is there any way to prevent this?

Main:

var body: some Scene {
    WindowGroup {
        ContentView()
            .environment(\.layoutDirection,  .rightToLeft)
    }
}

ContentView:

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                Image(systemName: "circle.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("مَملَكة")
                
                Image(systemName: "square.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("اخبرك")
                
                Image(systemName: "heart.fill")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("عِلاجيّ")
            }
            .padding()
        }
    }
}

Castano

Very different than what? What's the goal for what you're trying to achieve? – Narrative

@MikaelaCaron if you try this code, you can understand. A delayed animation plays – Castano

Answer 1

Unfortunately, Apple does not support the RTL direction very well.

This issue happens only when the element inside the scroll view are not enough to fill the width.

To work around it:

struct ContentView: View {
    @Environment(\.layoutDirection) var direction // 👈 1. Get the direction from the environment

    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                Group { // 👈 2. Put everything in a group (Not the HStack itself)
                    Image(systemName: "circle.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("مَملَكة")

                    Image(systemName: "square.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("اخبرك")

                    Image(systemName: "heart.fill")
                        .imageScale(.large)
                        .foregroundStyle(.tint)
                    Text("عِلاجيّ")
                }
                .scaleEffect(x: direction == .rightToLeft ? -1 : 1) // 👈 3. Flip items if they are in the RTL direction environment
            }
            .padding()
        }
        .flipsForRightToLeftLayoutDirection(true) // 👈 4. Make the scrollView flips on RTL directions
    }
}

⚠️ Note the order and where to apply what.

If you know the items will fill the width, there is no need to apply any of these.

Spirited

I tried this code, ios15-16 it is working well but get the error ios17. Your solution fixed my issue thanks. gist.github.com/metin-atalay/bdf28a604fe9678403730d14f02946ca – Castano

I test you code in iOS 17, it's working fine with me – Efren