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

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.