Driving a parent view from child features

[gohanlon]

Hello everyone!

I’m working on a custom view navigation case where child features determine a parent view’s content. I propose a solution using view preferences and a custom view to mimic the behavior of a native sheet/popover. My solution appears to function, but it’s deceptive: Its use of AnyView leads to a nonsensical Equatable conformance that may be okay in specific cases but not generally.

Notes:

• KeyboardAccessoryView’s presentation and dismissal slide transition need to be maintained across arbitrary changes to the navigation state (e.g., deep linking).
• My PreferenceKey.Value (KeyboardAccessoryContent) is problematic because it has an AnyView property, which precludes a reasonable Equatable conformance (as noted in the code).
• My app "docks” the KeyboardAccessoryView to the system keyboard (hence the name). I omitted the docking behavior here because it’s complex and not directly relevant; however, I’d be happy to share the completed implementation.
• I fashioned my solution as a swiftui-navigation case study. I’ve included an Xcode Preview, but the animations aren’t behaving well in the Preview. I recommend running my solution in the Simulator.

Am I missing a way to implement Equatable for KeyboardAccessoryContent? Are there completely different approaches to consider?

Thank you in advance for your feedback and suggestions. They are greatly appreciated!

Here’s a video of my solution in action:

solution-wip.mp4

Here’s my work-in-progress solution:

import SwiftUI
import SwiftUINavigation

private let readMe = """
  This (WIP) case study demonstrates how to drive a parent SwiftUI component off of optional or \
  enum child state using view preferences.

  Sometimes it is necessary to decouple the SwiftUI view hierarchy from the feature hierarchy. \
  The KeyboardAccessoryView in this file demonstrates a case where the intended visual transition \
  requires that the KeyboardAccessoryView be placed at a higher level in the view hierarchy than \
  the rest of the feature's views.
  """

struct CustomPreferencesParentView: View {
  @ObservedObject private var model = FeatureModel()

  var readMeText: some View {
    Text(readMe)
      .fixedSize(horizontal: false, vertical: true)
      .padding()
  }

  var featureNavButtons: some View {
    HStack {
      Button("Random") {
        withAnimation { self.model.randomButtonTapped() }
//        withAnimation { self.model.stepButtonTapped() } // scripted "randomness" for video
      }

      Button("Root") {
        withAnimation { self.model.rootButtonTapped() }
      }

      Button("Complex") {
        withAnimation { self.model.complexChildButtonTapped() }
      }

      Button("Simple") {
        withAnimation { self.model.simpleChildButtonTapped() }
      }
    }
    .buttonStyle(.bordered)
  }

  var body: some View {
    VStack {
//      self.readMeText
      self.featureNavButtons
        .padding()

      VStack {
        Text("Root")

        switch self.model.destination {
        case let .complexChild(destination):
          ComplexChildView(model: ComplexChildModel(destination: destination))
            .padding()
            .border(.black)
        case let .simpleChild(destination):
          SimpleChildView(model: SimpleChildModel(destination: destination))
            .padding()
            .border(.black)
        case .none:
          Text("(no child)")
        }
      }
      .padding()
      .border(.black)

      Spacer()
    }
    .frame(maxWidth: .infinity)
    .keyboardAccessory() // 👈 custom modifier attaches KeyboardAccessoryView
  }
}

private final class FeatureModel: ObservableObject {
  enum Destination: Equatable {
    case complexChild(ComplexChildModel.Destination?)
    case simpleChild(SimpleChildModel.Destination?)

    static var random: Self? {
      [
        nil,
        Self.complexChild(nil),
        .complexChild(.step1),
        .complexChild(.step2),
        .complexChild(.step3),
        .complexChild(.end),
        .simpleChild(nil),
        .simpleChild(.accessory),
      ].randomElement()!
    }

    static func demoDestination(offset: Int) -> Self? {
      let destinations: [Self?] = [
        Self.complexChild(.step2),
        .simpleChild(.accessory),
        nil,
      ]
      return destinations[offset % destinations.count]
    }
  }

  @Published var destination: Destination? = nil

  init(destination: Destination? = nil) {
    self.destination = destination
  }

  private var offset = 0
  func stepButtonTapped() {
    self.destination = Destination.demoDestination(offset: self.offset)
    self.offset += 1
  }

  func randomButtonTapped() {
    var newDestination: Destination?
    repeat {
        newDestination = Destination.random
    } while newDestination == self.destination

    self.destination = newDestination
  }

  func rootButtonTapped() {
    self.destination = nil
  }

  func complexChildButtonTapped() {
    self.destination = .complexChild(nil)
  }

  func simpleChildButtonTapped() {
    self.destination = .simpleChild(nil)
  }
}

private final class ComplexChildModel: ObservableObject {
  enum Destination: String {
    case step1 = "Step 1"
    case step2 = "Step 2"
    case step3 = "Step 3"
    case end = "End"

    var next: Destination? {
      switch self {
      case .step1: return .step2
      case .step2: return .step3
      case .step3: return .end
      case .end: return nil
      }
    }

    var previous: Destination? {
      switch self {
      case .step1: return nil
      case .step2: return .step1
      case .step3: return .step2
      case .end: return .step3
      }
    }
  }

  @Published var destination: Destination?

  init(destination: Destination? = nil) {
    self.destination = destination
  }

  func toggleAccessoryButtonTapped() {
    self.destination = self.destination == nil ? .step1 : nil
  }

  func nextButtonTapped() {
    self.destination = self.destination?.next
  }

  func previousButtonTapped() {
    self.destination = self.destination?.previous
  }
}

private final class SimpleChildModel: ObservableObject {
  enum Destination: String {
    case accessory = "Accessory"
  }

  @Published var destination: Destination?

  init(destination: Destination? = nil) {
    self.destination = destination
  }

  func toggleAccessoryButtonTapped() {
    self.destination = self.destination == nil ? .accessory : nil
  }
}

private struct SimpleChildView: View {
  @ObservedObject fileprivate var model: SimpleChildModel

  private enum SimpleAccessoryID {}

  var body: some View {
    VStack {
      Text("**`SimpleChildView`**")
      Text("\(self.model.destination?.rawValue ?? "nil")")

      Button("Toggle accessory") {
        withAnimation {
          self.model.toggleAccessoryButtonTapped()
        }
      }
    }
    // 👇 specify the content for the parent view
    .keyboardAccessoryContent(
      id: SimpleAccessoryID.self,
      unwrapping: self.$model.destination
    ) { _ in
      Text("**`SimpleChildView`** accessory content")
    }
  }
}

private struct ComplexChildView: View {
  @ObservedObject fileprivate var model: ComplexChildModel

  private enum ComplexChildAccessoryID {}

  var body: some View {
    VStack {
      Text("**`ComplexChildView`**")
      Text("\(self.model.destination?.rawValue ?? "nil")")

      Button("Toggle accessory") {
        withAnimation {
          self.model.toggleAccessoryButtonTapped()
        }
      }
    }
    // 👇 specify the content for the parent view
    .keyboardAccessoryContent(
      id: ComplexChildAccessoryID.self,
      unwrapping: self.$model.destination
    ) { $destination in
      VStack {
        Text("**`ComplexChildView`** accessory content")
          .padding(.bottom)

        Text("*\(destination.rawValue)*")
        HStack {
          Button("Next") {
            self.model.nextButtonTapped()
          }
          .disabled(destination.next == nil)

          Button("Previous") {
            self.model.previousButtonTapped()
          }
          .disabled(destination.previous == nil)
        }
        .buttonStyle(.borderedProminent)
      }
    }
  }
}

extension View {
  fileprivate func keyboardAccessory() -> some View {
    self.modifier(KeyboardAccessoryModifier())
  }
}

private struct KeyboardAccessoryModifier: ViewModifier {
  @State var keyboardAccessoryContents: [KeyboardAccessoryContent] = []

  func body(content: Content) -> some View {
    content.overlay(
      ZStack(alignment: .bottom) {
        KeyboardAccessoryView(contents: self.keyboardAccessoryContents)
      }
      .ignoresSafeArea()
    )
    .onPreferenceChange(KeyboardAccessoryContentKey.self) { values in
      withAnimation {
        self.keyboardAccessoryContents = values
      }
    }
  }
}

private struct KeyboardAccessoryContentKey: PreferenceKey {
  static var defaultValue: [KeyboardAccessoryContent] = []

  static func reduce(
    value: inout [KeyboardAccessoryContent],
    nextValue: () -> [KeyboardAccessoryContent]
  ) {
    value.append(contentsOf: nextValue())
  }
}

private struct KeyboardAccessoryContent: Identifiable, Equatable {
  var id: AnyHashable
  let content: AnyView

  // NB: I don't know of any reasonable way to implement equality of two AnyView's.
  static func == (lhs: Self, rhs: Self) -> Bool {
    return false // 🛑 don't do this
  }
}

private struct KeyboardAccessoryView: View {
  var contents: [KeyboardAccessoryContent]

  var body: some View {
    VStack(spacing: 0) {
      Spacer()

      // todo: replace ForEach with IfLet and a purple warning if `contents` has more than one item
      ForEach(self.contents) { wrapper in
        wrapper.content
          .padding()
          .padding(.bottom, 30)
          .frame(maxWidth: .infinity)
          .background(Color.gray)
          .clipShape(RoundedRectangle(cornerRadius: 15, style: .continuous))
          .transition(.move(edge: .bottom))
      }
    }
    .ignoresSafeArea()
  }
}

private struct KeyboardAccessoryContentModifier<AccessoryContent>: ViewModifier
where AccessoryContent: View {
  let id: Any.Type
  @Binding var isActive: Bool
  let content: () -> AccessoryContent

  func body(content: Content) -> some View {
    if self.isActive {
      content.preference(
        key: KeyboardAccessoryContentKey.self,
        value: [KeyboardAccessoryContent(
          id: ObjectIdentifier(self.id),
          content: AnyView(self.content())
        )]
      )
    } else {
      content
    }
  }
}

extension View {
  @ViewBuilder fileprivate func keyboardAccessoryContent<Content>(
    id: Any.Type,
    isActive: Binding<Bool>,
    @ViewBuilder content: @escaping () -> Content
  ) -> some View
  where Content: View {
    self.modifier(
      KeyboardAccessoryContentModifier(
        id: id,
        isActive: isActive,
        content: content
      )
    )
  }

  fileprivate func keyboardAccessoryContent<Value, Content>(
    id: Any.Type,
    unwrapping value: Binding<Value?>,
    @ViewBuilder content: @escaping (Binding<Value>) -> Content
  ) -> some View
  where Content: View {
    self.modifier(
      KeyboardAccessoryContentModifier(
        id: id,
        isActive: value.isPresent(),
        content: { Binding(unwrapping: value).map(content) }
      )
    )
  }

  fileprivate func keyboardAccessoryContent<Enum, Case, Content>(
    id: Any.Type,
    unwrapping value: Binding<Enum?>,
    case casePath: CasePath<Enum, Case>,
    @ViewBuilder content: @escaping (Binding<Case>) -> Content
  ) -> some View
  where Content: View {
    self.keyboardAccessoryContent(
      id: id,
      unwrapping: value.case(casePath),
      content: content
    )
  }
}

struct CustomViewPreferences_Previews: PreviewProvider {
  static var previews: some View {
    CustomPreferencesParentView()
  }
}

Addendum: My app’s simplified use case

My app’s simplified use case

Here’s the design I’m implementing:

design.mov

My app starts in the UnnamedUser case and transitions to the NamedUser case when the user submits their name.

The design requires an instant transition from UnnamedUserView to NamedUserView, while the KeyboardAccessoryView, which contains the TextField, slides down in sync with the keyboard. UnnamedUserView and NamedUserView reside in separate modules and have significant structural differences, such as the NamedUserView's content being within a scroll view.

The presentation and content of the KeyboardAccessoryView are controlled by the UnnamedUser feature. However, if I attach the KeyboardAccessoryView as a child of UnnamedUserView, I cannot control the KeyboardAccessoryView's transition because UnnamedUserView’s parent is the subject of the transition.

This design video shows a simplified example of the UI pattern that my app uses. The KeyboardAccessoryView needs to be able to handle arbitrary view content – typical uses are more complex.