0

I have a custom modal view (using a ZStack) That has a ScrollView. This Modal view is spring animated open to full screen ignoring all safe areas.

However, while animating as the top of my modal view reaches the top safe area (y:40)ish. The scroll view inside jumps from being at the top of its parent view as desired to the top of the device which makes the animation look bad.

Any ideas on how to get around this?

This demonstrates what I'm working with in it's simplest form...

import SwiftUI

struct ModalView: View {
    @Binding var padding: CGFloat
    @Binding var cornerRadius: CGFloat
    @Binding var imageHeightMultiple: CGFloat

var body: some View {
    ZStack {
        ScrollView(.vertical, showsIndicators: false) {

            GeometryReader { geo in
                Image("image_1")
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geo.size.width, height: geo.size.height)
                .background(Color.gray)
                .clipped(antialiased: true)
            }
            .frame(height: UIScreen.main.bounds.width * imageHeightMultiple)
        }
    }
    .background(Color.white)
    .cornerRadius(cornerRadius)
    .padding(.horizontal, padding)
}
}


#if DEBUG
struct ModalView_Previews: PreviewProvider {

@State static var padding: CGFloat = 16
@State static var cornerRadius: CGFloat = 20
@State static var imageHeightMultiple: CGFloat = 0.7

static var previews: some View {
    return ZStack {
        Color(.gray)
        .edgesIgnoringSafeArea(.all)

        ModalView(padding: $padding, cornerRadius: $cornerRadius, imageHeightMultiple: $imageHeightMultiple)
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height - 80)
        .position(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height/2)
        .edgesIgnoringSafeArea(.all)
    }
    .previewDevice(PreviewDevice(rawValue: "iPhone 11 Pro"))
}
}
#endif
Dan
  • 543
  • 2
  • 13
  • Would you provide demo code? – Asperi May 12 '20 at 10:48
  • @Asperi Code added. My issue can be demonstrated by changing - 80 to - 180 for example in the ModalView's frame modifier found in the preview block. Thanks for your help – Dan May 12 '20 at 11:54
  • @Asperi Any luck? – Dan May 13 '20 at 14:48
  • Well, I tried the code... actually when I removed hardcoded .frame & .position, all looked fine for me. So, what's the goal? Btw, any hardcoding *always* breaks layout, sooner or later. Just in case. – Asperi May 13 '20 at 14:54
  • I'm trying to create the App stores card opening transition basically. I'm adding an identical looking view on top of the selected item then animating it open so I need to specify it's frame and position. It's all good until it reaches the safe area zone – Dan May 13 '20 at 15:06
  • Basically changing the opening animation to easeInOut from a Spring has fixed my overall issue. Just not as cool looking – Dan May 13 '20 at 15:49

0 Answers0