title: Mimic the iOS Photos APP browsing behavior with SwiftUI
body: <p>I am new to SwiftUI (iOS development). I would like to mimic the <a href="https://www.apple.com/ios/photos/" rel="nofollow noreferrer">iOS Photos APP</a> browsing behavior with SwiftUI. More specifically,</p>
  <ol>
  <li>I want to display a photo in a <a href="https://i.stack.imgur.com/mSU7X.jpg" rel="nofollow noreferrer">full-screen view</a> by tapping a photo thumb <a href="https://i.stack.imgur.com/iexKa.jpg" rel="nofollow noreferrer">in the thumb grid view</a></li>
  <li>And then by tapping the photo, we can hide all UI including navigationbar, statusbar, and bottom tab bar like this screenshot <a href="https://i.stack.imgur.com/90UVH.jpg" rel="nofollow noreferrer">full-screen view without UI</a></li>
  <li>In this full-screen view, I would like to swipe left/right to browse the next/previous photo.</li>
  <li>At last, I would like to drag down the photo to return from full-screen view to thumb grid view as <a href="https://i.stack.imgur.com/bgWA1.jpg" rel="nofollow noreferrer">this</a></li>
  </ol>
  <p>What I have tried:</p>
  <ol>
  <li>Assume I have two lists of URLs <code>photoThumbList</code> and <code>photoOriginalList</code>,
  I have established the thumb grid view by <code>LazyVGrid</code> and every thumb is linked to a tabview of original images by <code>NavigationLink</code>.</li>
  <li>I can browse the original images in the tabview</li>
  <li>I successfully hide the statusbar and navigationbar by the tapping gesture</li>
  </ol>
  <pre><code>import SwiftUI
  import Kingfisher
      
  struct MetView: View {
      @State var hideBar = false
      
      let photoThumbList = [
             &quot;https://picsum.photos/id/237/200/300&quot;, &quot;https://picsum.photos/seed/picsum/200/300&quot; ]
      
      let photoOriginalList = [
             &quot;https://picsum.photos/id/237/400/600&quot;, &quot;https://picsum.photos/seed/picsum/400/600&quot; ]
      
      @State private var currentIndex = 1
      @State private var indexArray: [Int] = Array(0...100)
  
  
      var body: some View {
          ScrollView {
              LazyVGrid (columns: [GridItem(.adaptive(minimum: 500))]) {
                  
                  ForEach (Array(photoThumbList.enumerated()), id: \.offset) { index, url in
                      NavigationLink(destination: {
                          TabView (selection:  $indexArray[index]) {
                              ForEach (Array(photoOriginalList.enumerated()), id: \.offset) { index2, url2 in
                                  
                                  ZStack {
                                      KFImage(URL(string: photoOriginalList[index2]))
                                          .resizable()
                                          .scaledToFit()
                                          
                                      Button(action: {}, label: {Text(&quot;info&quot;)})
                                  }.tag(index2)                                .ignoresSafeArea()
                              }
                          }
                          .onTapGesture {
                              withAnimation{
                                  hideBar.toggle()
                              }
                          }
                          .navigationBarHidden(hideBar)
                          .statusBar(hidden: hideBar)
                          .tabViewStyle(PageTabViewStyle())
                          .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
                      }, label: {
                          KFImage(URL(string: url)!)
                              .resizable()
                              .scaledToFit()
                              .ignoresSafeArea()
                      })
                  }
                  
              }
          }
      }
  }
  </code></pre>
  <p>what I want to achieve but not succeed:</p>
  <ol>
  <li>hide the bottom tab bar in the full-screen view</li>
  <li>drag down the image to return to the thumb grid view. I guess there is some native SwiftUI method to achieve it, just like dismissing a popover sheet by dragging (swiping) down the sheet in iOS.</li>
  <li>If possible, I want a mini HStack of thumbs at the bottom like in <a href="https://i.stack.imgur.com/mSU7X.jpg" rel="nofollow noreferrer">this</a></li>
  </ol>