SwiftUI TabView PageTabViewStyle crashes without showing any error

Question

I am trying to create an Image carousel using tabview and loading pictures from firebase. Without showing any error message or code tabview crashing. Please shed some light on what's going wrong here.

struct HomeView : View{
var body : View{
    NavigationView{
        VStack{
            ScrollView{
                CategoryView(homeViewModel: homeViewModel)
                PosterView(homeViewModel: homeViewModel)
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarTitle("")
    }
}

}



struct PosterView : View {
@StateObject var homeViewModel : HomeViewModel = HomeViewModel()
@State var currentIndex: Int = 0
var timer = Timer.publish(every: 3, on: .main, in: .common)

func next(){
    withAnimation{
        currentIndex = currentIndex < homeViewModel.posterList.count ? currentIndex + 
        1 : 0
    }
}


var body: some View{
    Divider()
    GeometryReader{ proxy in
    VStack{
        TabView(selection: $currentIndex){
            ForEach(homeViewModel.posterList){ item in
                let imgURL = homeViewModel.trendingImgDictionary[item.id ?? ""]
                AnimatedImage(url: URL(string: imgURL ?? ""))
            }
        }.tabViewStyle(PageTabViewStyle())
        .padding()
        .frame(width: proxy.size.width, height: proxy.size.height)
        .onReceive(timer) { _ in
            next()
        }
        .onTapGesture {
            print("Tapped")
        }
        
    }
    }
}
}

ViewModel: It contains two methods to fetch data and pictures from Firebase. That's working fine and am getting proper data. The only issue is while displaying it tabview crashes without showing any error messages.

class HomeViewModel : ObservableObject {

  @Published var posterList : [TrendingBanner] = []
  @Published var trendingImgDictionary : [String : String] = [:]

  init() {
    self.fetchTrendingList()
  }
   func fetchTrendingList()  {
    self.posterList.removeAll()
    firestore.collection(Constants.COL_TRENDING).addSnapshotListener { snapshot, error in
        guard let documents = snapshot?.documents else{
            print("No Documents found")
            return
        }
        self.posterList = documents.compactMap({ (queryDocumentSnapshot) -> TrendingBanner? in
            return try? queryDocumentSnapshot.data(as:TrendingBanner.self )
        })
        print("Trending list \(self.posterList.count)")
        print(self.posterList.first?.id)
        let _ = self.posterList.map{ item in
            self.LoadTrendingImageFromFirebase(id: item.id ?? "")
        }
    }
}


 func LoadTrendingImageFromFirebase(id : String) {

    let storageRef = storageRef.reference().child("trending/\(id)/\(id).png")
    storageRef.downloadURL { (url, error) in
        if error != nil {
            print((error?.localizedDescription)!)
            return
        }
        self.trendingImgDictionary[id] = url!.absoluteString
        print("Trending img \(self.trendingImgDictionary)")
    }
}

Eugene Dudnyk · Answer 1 · 2021-10-20T21:29:04.457

1

If you open SwiftUI module sources, you'll see the comment on top of TabView:

Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

You're using AnimatedImage which is probably not intended to be supported by TabView.

Update I made a library that liberates the SwiftUI _PageView which can be used to build a nice tab bar. Check my story on that.

edited Oct 20 '21 at 21:29

answered Aug 11 '21 at 19:44

Eugene Dudnyk

5,553
1
23
48

Thanks for the information. Any idea how we can display the image from the link using a carousel? Like it should be auto scrollable and each image should be clickable. Really appreciate your help. – Mac_Play Aug 12 '21 at 06:39
I have working solution, but it’s worth of making it a library on GitHub. – Eugene Dudnyk Aug 12 '21 at 08:38
That's great. Could you please guide me on achieving this? – Mac_Play Aug 12 '21 at 11:32
This open-source library support any type of view as a tab item. https://github.com/xmartlabs/PagerTabStripView – Cecilia Pirotto Oct 17 '21 at 20:41
Hey @Mac_Play please check the update on my answer - there is a really nice native way of building tabs now. – Eugene Dudnyk Oct 20 '21 at 21:30

score 0 · Answer 2 · answered Feb 19 '22 at 09:56

Had the same issue recently on devices running iOS 14.5..<15. Adding .id() modifier to the TabView solved it. Example:

TabView(selection: $currentIndex) {
    ForEach(homeViewModel.posterList) { item in
        content(for: item)
    }
}
.tabViewStyle(PageTabViewStyle())
.id(homeViewModel.posterList.count)

SwiftUI TabView PageTabViewStyle crashes without showing any error

2 Answers2