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()
        }
    }
}

Very different than what? What's the goal for what you're trying to achieve? — Mikaela Caron
– Mikaela Caron, Commented Nov 7, 2023 at 19:51
@MikaelaCaron if you try this code, you can understand. A delayed animation plays — Metin Atalay
– Metin Atalay, Commented Nov 8, 2023 at 6:03

Mojtaba Hosseini · Accepted Answer · 2023-11-07 20:53:23Z

5

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.

answered Nov 7, 2023 at 20:53

Mojtaba Hosseini

124k45 gold badges343 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Metin Atalay Over a year ago

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

Basel Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related