ios – SwiftUI – Remark sheet like TikTok

I need to create a TikTok feedback clone, which means:

• background content material ought to keep in place
• sheet ought to slide from the underside
• there needs to be remark field on the backside
• tapping on remark field ought to open a keyboard and the remark field ought to slide up

Run under code and faucet on blue sq. to energetic feedback. You will notice how purple background slides to the highest

import SwiftUI

struct TikTokView: View {
  
  @State var isPresented: Bool = false
  
  var physique: some View {
    ZStack {
      Coloration.purple
      
      VStack {
        RoundedRectangle(cornerRadius: 15)
          .fill(Coloration.blue)
          .body(width: 50, top: 50)
          .onTapGesture {
            isPresented.toggle()
          }
      }
      .ignoresSafeArea(.keyboard)
      CommentsSheetView(isPresented: $isPresented)
    }
  }
}

struct CommentsSheetView: View {
  
  @Binding var isPresented: Bool
  @State non-public var textual content: String = ""
  
  var transition: AnyTransition = .transfer(edge: .backside)
  
  var physique: some View {
    ZStack {
      if isPresented {
        Coloration.black.opacity(0.5).ignoresSafeArea()
        
        VStack {
          Spacer()
          ScrollView(.vertical, content material: {
            VStack {
              
              ForEach(0...50, id: .self) { i in
                Textual content("Remark").foregroundStyle(.pink)
                Spacer()
              }
            }
            .body(maxWidth: .infinity)
          })
          .body(top: (550 - 80))
          .body(maxWidth: .infinity)
          .padding(.backside, 80)
          .background(.white.opacity(0.1))
        }
        .ignoresSafeArea(.keyboard)
        .fixedSize()
        .transition(transition)
        
        VStack {
          Spacer()
          HStack {
            Textual content("LOREM")
            
            TextField("TESTING", textual content: $textual content, axis: .vertical)
              .keyboardType(.asciiCapable)
              .autocorrectionDisabled(true)
              .foregroundStyle(.pink)
          }
          .body(minHeight: 50, maxHeight: 100)
          .background(.inexperienced.opacity(0.1 ))
        }
        .body(maxWidth: .infinity)
        .transition(transition)
      }
    }
  }
}

#Preview {
  TikTokView()
}