1

I have a TabView at the top of navigation and a tab which contains the user profile.

I want to present an action sheet with custom style when users touch cover/profile picture.

The custom style looks like this:

custom action sheet

I already try to attach a second view at the bottom of the ZStack but the TabView always looks in front.

How can I custom the action sheet or how can I hide TabView?

Thanks

Elvin
  • 141
  • 1
  • 9

1 Answers1

0

ZStack approach will work in this scenario.

I have tried with a small example, you can tweak and try to fit in your project and see if it works.

enter image description here

Implementation :

struct ContentView: View {
    @State var showingCustomSheet = false
    var body: some View {
        ZStack {
            VStack {
                Button(action: {
                     withAnimation {
                        self.showingCustomSheet.toggle()
                    }
                }) {
                    Text("Show Custom sheet")
                }
            }

            ZStack {
                HStack(alignment: .bottom) {
                    Spacer()
                    VStack (alignment: .leading, spacing: 10) {
                        Spacer()
                        Button(action: {}) { Text("Delete photo") }
                        Button(action: {}) { Text("Take photo") }
                        Button(action: {}) { Text("Choose photo") }
                        Button(action: {
                            withAnimation {
                                self.showingCustomSheet.toggle()
                            }
                        }) { Text("Cancel") }
                    }
                    Spacer()
                }
            }.background(Color.black.opacity(0.1))
               .edgesIgnoringSafeArea(.all)
               .offset(x:0, y: self.showingCustomSheet ? 0 : UIApplication.shared.keyWindow?.frame.height ?? 0)
        }
    }
}
Amit
  • 4,837
  • 5
  • 31
  • 46
  • The problem with this is the ZStack element it is appearing behind the TabView. Do you know if is possible to force it to be above the TabView? – Elvin Jun 20 '20 at 14:51
  • It will be easy to help If you will share what you have tried. Please update your question with your implementation. – Amit Jun 21 '20 at 04:46