Touchable area moves when view presents sheet on appear

[artemkrachulov]

The strange bug I caught where the tappable area moves, after presenting the sheet right after the view appears. Here is the code which I use for testing:

struct MainView: View {
  let store: Store<MainState, MainAction>
  @State private var isPresented = true /// True should be on default 
  var body: some View {
    MainEntryView(
      store: self.store.scope(
        state: \.entry,
        action: MainAction.entry)
    )
    .sheet(isPresented: $isPresented) {
      SheetView()
    }
  }
}

struct MainEntryView: View {
  let store: Store<MainEntryState, MainEntryAction>
  var body: some View {
    SwitchStore(self.store) {
      
      // MARK: Profile
      CaseLet(state: /MainEntryState.profile, action: MainEntryAction.profile, then: ProfileView.init)
      
      // MARK: Home
      CaseLet(state: /MainEntryState.homeWrapper, action: MainEntryAction.home, then: HomeView.init)
    }
  }
}

struct HomeView: View {
  let store: Store<HomeState, HomeAction>
  var body: some View {
    SwitchStore(self.store) {
      
      // MARK: Loading
      CaseLet(state: /HomeState.loading, action: HomeAction.loading, then: LoadingView.init)
      
      // MARK: Content
      CaseLet(state: /HomeState.content, action: HomeAction.content, then: HomeContentView.init)
    }
  }
}

struct HomeContentView: View {
  let store: Store<HomeState, HomeAction>
  @State private var field: String = ""
  public var body: some View {
    NavigationView {
      VStack(spacing: .zero) {
       Spacer()

       /// Activating text field and showing / hiding keyboard corrects tap for the top button
       TextField("", text: $field)

        Spacer()

        /// Tap the area for this button moved down approx 30-40px
        Button {
          let _ = print("TAPPED TOP")
        } label: {
          Text("Top Button")
        }
        
        Spacer()

        /// Tap the area works correctly
        Button {
          let _ = print("TAPPED BOTTOM")
        } label: {
          Text("Bottom Button")
        }

        Spacer()
      }
    }
  }
}

I found 2 solutions, how to fix this:

1. Add .presentationDetents([.fraction(0.999)]) to the SheetView(). Available ios 16, but we need io14+.
2. Move view from HomeContentView body direct to CaseLet then closure (sake of testing):

struct HomeView: View {
  
  let store: Store<HomeState, HomeAction>

  var body: some View {
    SwitchStore(self.store) {
      
      // MARK: Loading
      CaseLet(state: /HomeState.loading, action: HomeAction.loading, then: LoadingView.init)
      
      // MARK: Content
      CaseLet(state: /HomeState.content, action: HomeAction.content) { store in
          NavigationView {
              ....
          }
      }
    }
  }
}

Only both are unacceptable.

[artemkrachulov]

UPD: Solution 3
Comment / Remove NavigationView

[lukeredpath]

This is a long standing SwiftUI bug. https://developer.apple.com/forums/thread/718495

I do have a workaround for this bug, but it isn’t pretty. I use a custom UIHostingController subclass that uses swizzling to override the dismiss behaviour and post an NSNotification. I can then observe that so that 200ms after dismiss is called (or the keyboard dismisses as this can also trigger the bug), I invalidate the view frame for the presented and hosting controller by setting it back to its current value.

The whole thing is wrapped up behind a custom generic SwiftUI view controller representable view that embeds its content (from a view builder closure) in the custom hosting controller and presents it that way. I can then use this to wrap any sheet exhibiting this bug.

I told you it isn’t nice!