Building a Tinder-like swipe feature on SwiftUI

Question

I am trying to build a tinder-like swipe feature but I have an issue. All the cards get stacked together on the first screen like in the screenshot below:

It is supposed to look like below

Here is my code:

  MainView

  NavigationView  {
                VStack () {
       
                        ZStack {
                            ForEach(outingsVM.outings, id: \.dateId) { outing in
                                 CardView(outing: outing)
                             }
                         }
                    
                }
               
            }

CardView

 ZStack {
            VStack {
     
     
                HStack {
                        Text("\(outing.name), \(outing.age)")
                }
                .frame(width: 320, alignment: .leading)
                   
                HStack (alignment: .center) {
                    Image(systemName: "figure.walk.circle")
                    Text("\(outing.place)")
                }
                .frame(width: 320, alignment: .leading)
                
                HStack {
                    Image(systemName: "calendar.circle")
                    Text("\(outing.date)  \(outing.time)")
                }
                .frame(width: 320, alignment: .leading)
                
                HStack {
                    Image(systemName: "creditcard.circle")
                    Text("\(outing.payment)")
                }
                .frame(width: 320, alignment: .leading)
          
               // }
                HStack (){
                    Spacer()
                    //accept date
                    Button {
                        showingModal = true
                    } label: {
                        Image(systemName: "checkmark.circle.fill")
                            .font(.system(size: 50))
                            .foregroundColor(.green)
                    }
                    
                    Spacer()
                    
                    //reject date
                    Button {
                        swipeCard(width: -200)
                    } label: {
                        Image(systemName: "xmark.circle.fill")
                            .font(.system(size: 50))
                            .foregroundColor(.red)
                    }
                    
                    Spacer()
                }
                .frame(width: 320)
                .padding()
           }
        }

 

How can I fix this?

Answer 1

I created this component to achieve a Tinder-like swipe feature on SwiftUI, an iOS library designed to create a card swiping interface similar to the one used in the popular dating app, Tinder. I hope it proves helpful for others facing the same challenge.

FIND THE COMPLETE SOURCE CODE HERE: https://github.com/JayantBadlani/TinderCardSwiperSwiftUI

EXAMPLE HOW TO USE:

@State var cards: [ExampleCardView] // Assuming ExampleCardView is your custom card view
    
    var body: some View {
        VStack {
            // Your other UI components
            
            // Card Swiper View
            CardSwiperView(cards: self.$cards, onCardSwiped: { swipeDirection, index in
                switch swipeDirection {
                    case .left:
                        print("Card swiped Left direction at index \(index)")
                    case .right:
                        print("Card swiped Right direction at index \(index)")
                    case .top:
                        print("Card swiped Top direction at index \(index)")
                    case .bottom:
                        print("Card swiped Bottom direction at index \(index)")
                }
            }, onCardDragged: { swipeDirection, index, offset in
                print("Card dragged \(swipeDirection) direction at index \(index) with offset \(offset)")
            })
            .padding(.vertical, 20)
            
            // Your other UI components
        }
        .onAppear {
            loadCards()
        }
    }

Answer 2

You need to add a background to your CardView, e.g.

struct CardView: View {

    var body: some View {
        VStack {
            

        }
        .padding()
        .background(RoundedRectangle(cornerRadius: 8).fill(.white))        
    }
}