safeAreaBar and the Fold

Hello, could you please share more about the specific behavior you are trying to implement? That may influence our recommendations. Thank you!

For example:

I did try this:

ArrangementView {
// View 1
     .safeAreaBar(edge: .bottom) {
          Button("Continue") { // }
     }
} secondary: {
// View 2
}

Or this(which somewhat works)

ArrangementView {
// View 1
} secondary: {
// View 2
     .safeAreaBar(edge: .bottom) {
          Button("Continue") { // }
     }
}

But ideally there is a way to set something like .followPrimaryVIew() or whatever, just wondering how you would do it 😊

Or even better: .safeAreaBottom would simply put in the safeArea of the primary view by default when partly folded

Hello @hiddevdploeg ,


The code snippet you shared seems correct, however the screenshot does not demonstrate two views currently in an ArrangementView – it only shows one view spanning both folds.

I was able to achieve the expected result using the same skeleton you shared:

ArrangementView {
    someView
        .safeAreaBar(edge: .bottom) {
            someContent
        }
} secondary: {
    someView
        .safeAreaBar(edge: .bottom) {
            someContent
        }
}

Take a look at the full code below.

I have a feeling there is code you didn’t share that is conflicting with the display of the ArrangementView.


In that code you will see I used an ArrangementViewStyle, where you can customize what axis two views are arranged by: .horizontal for side-by-side views, .vertical for views stacked ontop of one another, or use the default style to opt in to both vertical and horizontal arrangements. In your screenshot, I don’t see any arrangements, so try the full code. 
For this example the ArrangementView is using a split axis of horizontal to make sure the views are only displayed side by side. 
For a full list of arrangement styles see ArrangmentViewStyles


  Travis

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ArrangementView {
                someView
                    .safeAreaBar(edge: .bottom) {
                        someContent
                    }
            } secondary: {
                someView
                    .safeAreaBar(edge: .bottom) {
                        someContent
                    }
            }
            .arrangementViewStyle(
                .split.axes(.horizontal))
        }
    }

    private var someView: some View {
        Color.red
            .ignoresSafeArea()
    }

    private var someContent: some View {
        Text("Continue")
            .padding(.vertical, 5)
        .frame(maxWidth: .infinity)
        .padding(.horizontal)
        .glassEffect()
        .padding()
    }
}