How to force soft scrollEdgeEffectStyle in iOS 26?

Question

bealex OP

Created 1w

Replies 2

Boosts 1

Participants 3

Hi,

I'm trying to create a custom bottom toolbar for my app and want to use same fade-blur effect as iOS uses under navigation and tab bars. Having trouble doing that.

Here is what I tried:

Screenshot 1: putting my custom view in a toolbar/ToolBarItem(placement: .bottomBar). This works only in NavigationStack, and it adds a glass pane that I do not want (I want to put a custom component there that already has correct glass pane)
Screenshot 2: using safeAreaBar or safeAreaInset in any combination with NavigationStack and/or .scrollEdgeEffectStyle(.soft, for: .bottom). Shows my component correctly, but does not use fade-blur.

Can you please help me to find out the correct way of doing that? Thanks!

Screenshot 1.png

^ Screenshot 1

Screenshot 2.png

^ Screenshot 2

Test code:

struct ContentView2: View {
  var body: some View {
    NavigationStack {
      ScrollView(.vertical) {
        VStack {
          Color.red.frame(height: 500)
          Color.green.frame(height: 500)
        }
      }
      .ignoresSafeArea()
      .toolbar() {
        ToolbarItem(placement: .bottomBar) {
          HStack {
            Text("bottom")
            Spacer()
            Text("text content")
          }
          .bold().padding()
          .glassEffect().padding(.horizontal)
        }
      }
    }
  }
}

Answered by BabyJ in 845632022

I believe the solution to this problem is to use the new safeAreaBar(edge:alignment:spacing:content:) view modifier, as suggested by its documentation and a comment made during the SwiftUI group lab.

However, I also believe that this modifier is currently broken (as of beta 2), because its behaviour seems to be no different to using safeAreaInset. I have filed feedback for this: FB18350439.

Boost

Answer 1

BabyJ OP

1w

Accepted Answer

I believe the solution to this problem is to use the new safeAreaBar(edge:alignment:spacing:content:) view modifier, as suggested by its documentation and a comment made during the SwiftUI group lab.

However, I also believe that this modifier is currently broken (as of beta 2), because its behaviour seems to be no different to using safeAreaInset. I have filed feedback for this: FB18350439.

2

Answer 2

DTS Engineer OP

Apple

1w

Could you try adding a Material to the background. That might get you close to what you need. for example:

NavigationStack {
    ItemsListView()
        .safeAreaBar(edge: .bottom) {
            BottomBarView()
                .background(.regularMaterial)
        }
}

0