'Mimic the iOS Photos APP browsing behavior with SwiftUI

I am new to SwiftUI (iOS development). I would like to mimic the iOS Photos APP browsing behavior with SwiftUI. More specifically,

  1. I want to display a photo in a full-screen view by tapping a photo thumb in the thumb grid view
  2. And then by tapping the photo, we can hide all UI including navigationbar, statusbar, and bottom tab bar like this screenshot full-screen view without UI
  3. In this full-screen view, I would like to swipe left/right to browse the next/previous photo.
  4. At last, I would like to drag down the photo to return from full-screen view to thumb grid view as this

What I have tried:

  1. Assume I have two lists of URLs photoThumbList and photoOriginalList, I have established the thumb grid view by LazyVGrid and every thumb is linked to a tabview of original images by NavigationLink.
  2. I can browse the original images in the tabview
  3. I successfully hide the statusbar and navigationbar by the tapping gesture
import SwiftUI
import Kingfisher
    
struct MetView: View {
    @State var hideBar = false
    
    let photoThumbList = [
           "https://picsum.photos/id/237/200/300", "https://picsum.photos/seed/picsum/200/300" ]
    
    let photoOriginalList = [
           "https://picsum.photos/id/237/400/600", "https://picsum.photos/seed/picsum/400/600" ]
    
    @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("info")})
                                }.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()
                    })
                }
                
            }
        }
    }
}

what I want to achieve but not succeed:

  1. hide the bottom tab bar in the full-screen view
  2. 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.
  3. If possible, I want a mini HStack of thumbs at the bottom like in this


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source