Im having a rather strange issue, in my main View of the app I have TabViews styled as PageTabViews within which tab items are other 3 Sub Views. Second page has a Navigation View, and while at the main scrolling from first page to second it shows an empty page. I know this sounds confusing, please find the below screen capture explaining the behaviour so that its easier to understand what I am talking about:
The code to main view:
import SwiftUI
struct AdhaanTimingsMainView: View {
@EnvironmentObject var DuaModel:DuasViewModel
@EnvironmentObject var IslandModel:IslandsViewMode
@EnvironmentObject var AtollModel:AtollsViewModel
var body: some View {
TabView {
PrayerTimingsView()
.tabItem {
VStack{
Image(systemName: "alarm")
Text("Prayer Timings")
.foregroundColor(Color.primary)
}
}
DhuasListView()
.tabItem {
VStack{
Image(systemName: "list.bullet.rectangle.fill")
Text("Duas")
.foregroundColor(Color.primary)
}
}
SettingsView()
.tabItem {
VStack{
Image(systemName: "gear.circle")
Text("Settings")
.foregroundColor(Color.primary)
}
}
}
.tabViewStyle(PageTabViewStyle())
.ignoresSafeArea()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
AdhaanTimingsMainView()
.environmentObject(DuasViewModel())
.environmentObject(IslandsViewMode())
.environmentObject(AtollsViewModel())
.environmentObject(PrayerTimesViewModel())
}
}
The code to first page
import SwiftUI
struct PrayerTimingsView: View {
@EnvironmentObject var DuaModel:DuasViewModel
@EnvironmentObject var IslandModel:IslandsViewMode
@EnvironmentObject var PrayerTimesModel:PrayerTimesViewModel
@State var todaysDate = ""
var body: some View {
ZStack {
Image("bg2")
.resizable()
.ignoresSafeArea()
VStack{
ScrollView{
// MARK: HEADER - Home Screen
HStack{
VStack(alignment: .leading){
Text("Adhan Timings")
.font(Font.custom("Optima Bold", size: 20))
Text(PrayerTimesModel.selectedIslandName)
.font(Font.custom("Optima Bold", size: 30))
Text(todaysDate)
.font(Font.custom("Optima Regular", size: 20))
}
.padding()
Spacer()
Image("mosque")
.resizable()
.scaledToFit()
.frame(width:128)
.padding(.trailing)
}
Divider()
// MARK: Body - Home Screen
VStack(spacing: 50){
HStack{
Image(systemName: "sun.and.horizon.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Fajr")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.fajr)
.font(Font.custom("Optima Bold", size: 30))
}
HStack{
Image(systemName: "sunrise.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Sunrise")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.sunrise)
.font(Font.custom("Optima Bold", size: 30))
}
HStack{
Image(systemName: "sun.max.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Dhuhr")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.duhr)
.font(Font.custom("Optima Bold", size: 30))
}
HStack{
Image(systemName: "cloud.sun.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Ashar")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.asr)
.font(Font.custom("Optima Bold", size: 30))
}
HStack{
Image(systemName: "sun.haze.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Maghrib")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.maghrib)
.font(Font.custom("Optima Bold", size: 30))
}
HStack{
Image(systemName: "moon.stars.fill")
.resizable()
.scaledToFit()
.frame(width: max(24, 48))
Text("Isha")
.font(Font.custom("Optima Bold", size: 30))
Spacer()
Text(PrayerTimesModel.TodaysPrayerTimes.isha)
.font(Font.custom("Optima Bold", size: 30))
}
}
.padding()
.foregroundColor(Color.gray)
if DuaModel.showDhuainHome {
Divider()
DuaoftheDayView()
}
}
}
.onAppear{
todaysDate = String(DateFormatter.localizedString(from: Date(), dateStyle: .long, timeStyle: .none))
// MARK: TODO
// PrayerTimesModel.updateTodaysPrayerTimes()
}
}
}
}
struct PrayerTimingsView_Previews: PreviewProvider {
static var previews: some View {
PrayerTimingsView()
.environmentObject(DuasViewModel())
.environmentObject(IslandsViewMode())
.environmentObject(PrayerTimesViewModel())
}
}
code to the second page:
import SwiftUI
struct DhuasListView: View {
@EnvironmentObject var DuaModel:DuasViewModel
var body: some View {
NavigationView{
ZStack {
Image("bg2")
.resizable()
.ignoresSafeArea()
ScrollView{
VStack(alignment: .leading, spacing: 10) {
Text("Duas")
.font(Font.custom("Optima Bold", size: 30))
Divider()
ForEach(DuaModel.Thasbees){ thasbeeh in
NavigationLink {
DuasSublistView(duaList: thasbeeh.duas, duaHeading: thasbeeh.name)
} label: {
Text("• \(thasbeeh.name) - \(thasbeeh.duas.count)")
.font(Font.custom("Optima Regular", size: 20))
.foregroundColor(Color.primary)
.multilineTextAlignment(.leading)
}
}
}
.padding([.leading, .bottom, .trailing])
}
}
.navigationBarHidden(true)
}
}
}
struct DhuasListView_Previews: PreviewProvider {
static var previews: some View {
DhuasListView()
.environmentObject(DuasViewModel())
}
}
Code to the third page:
import SwiftUI
struct SettingsView: View {
@EnvironmentObject var DuaModel:DuasViewModel
@EnvironmentObject var IslandModel:IslandsViewMode
@EnvironmentObject var AtollModel:AtollsViewModel
@EnvironmentObject var PrayerTimesModel:PrayerTimesViewModel
var body: some View {
ZStack {
Image("bg2")
.resizable()
.ignoresSafeArea()
VStack(alignment: .leading){
// MARK: Show Dua of the Day Home Screen
Text("Settings")
.font(Font.custom("Optima Bold", size: 30))
Toggle("Show Dua Card in Home Screen", isOn: $DuaModel.showDhuainHome)
.font(Font.custom("Optima Regular", size: 20))
Divider()
// MARK: Location Settings
HStack{
Text("Location: ")
.font(Font.custom("Optima Regular", size: 20))
Picker("Location", selection: $IslandModel.locationIndex) {
ForEach(0..<IslandModel.Islands.count) { islandIndex in
var atollObj = AtollsViewModel.getAtoll(atollCode: IslandModel.Islands[islandIndex].atoll_code)
Text("\(atollObj.name_abbr_en). \(IslandModel.Islands[islandIndex].name_en)")
.tag(islandIndex)
.font(Font.custom("Optima Regular", size: 20))
}
}.pickerStyle(MenuPickerStyle())
.onChange(of: IslandModel.locationIndex) { newLocation in
PrayerTimesModel.updateTodaysPrayerTimes(locationIndex: newLocation)
}
}
Spacer()
}.padding()
}
}
}
struct SettingsView_Previews: PreviewProvider {
static var previews: some View {
SettingsView()
.environmentObject(DuasViewModel())
.environmentObject(IslandsViewMode())
.environmentObject(AtollsViewModel())
.environmentObject(PrayerTimesViewModel())
}
}
The source to whole project is here in case you would want to skim through it:
I would really appreciate if you could assist me figure out where exactly its causing this empty page that we are seeing and how it could be removed.