Configure preview for ObservedObject and State object - swift

Question

So I am still learning Swift and for some reason, I am having the hardest trouble with the previews and how to configure them.
So I have the following code:
struct MainView: View {
// The app's model that the containing scene passes in
#ObservedObject var model: MainViewModel
#State var activeTab = 0
var body: some View {
VStack {
TabView(selection: $activeTab) {
Group {
WorldView(model: model, activeTab: $activeTab)
.tabItem {
Label(Tabs.explore.rawValue, systemImage: Tabs.explore.icon)
.environment(\.symbolVariants, .none)
}
.tag(0)
ListView(model: model, activeTab: $activeTab)
.tabItem {
Label(Tabs.list.rawValue, systemImage: Tabs.list.icon)
.environment(\.symbolVariants, .none)
}
.tag(1)
FavoritesView(activeTab: $activeTab)
.tabItem {
Label(Tabs.favorite.rawValue, systemImage: Tabs.favorite.icon)
.environment(\.symbolVariants, .none)
}
.tag(2)
ProfileView(model: model, activeTab: $activeTab)
.tabItem {
Label(Tabs.profile.rawValue, systemImage: Tabs.profile.icon)
.environment(\.symbolVariants, .none)
}
.tag(3)
}
.environmentObject(model)
}
.tint(.accentColor)
.onChange(of: activeTab, perform: { value in
log.info("\n 🟢: (MainView: 46) - User has selected tab: \(value).")
print("")
})
}
.onAppear() {
model.fetchPlaces()
}
}
}
Then I have the preview, as such:
struct MainView_Previews: PreviewProvider {
static var previews: some View {
MainView(model: model, activeTab: activeTab)
}
}
I am getting the two errors on the previews:
Cannot find 'activeTab' in scope
Cannot find 'model' in scope
If I define it as such:
struct MainView_Previews: PreviewProvider {
#ObservedObject var model: MainViewModel
#State var activeTab = 0
static var previews: some View {
MainView(model: model, activeTab: activeTab)
}
}
I get the following errors:
Instance member 'activeTab' cannot be used on type 'MainView_Previews'
Instance member 'model' cannot be used on type 'MainView_Previews'
Does anyone know how I can configure the preview so that it works properly and doesn't crash?

Answer 1

This happens because you are either passing in non existing paremeters in Previews, or because you cannot initialize objects in previews. Instead, do this:
struct MyExamplePreviews: PreviewProvider{
static var previews: some View {
MainView(model: MainViewModel(), activeTab: 0)
}
}
This will allow you to preview the UI. What this does:
Creates a new model that is passed in at the top level - again, you cannot create this anywhere but right here in the previews
Makes it so that activeTab will be set to 0 - you can have multiple preview devices with different tabs if needed. See the docs for Previews to learn more.

Answer 2

I recommend the below approach, then you can use #EnvironmentObject var model: Model in any View that needs it and don't have to pass it into every View.
class Model: ObservableObject {
#Published var items: [Item] = []
static var shared = Model()
static var preview = Model(preview: true)
init(preview: Bool) {
if preview {
items = // set some test items
return
}
load()
}
fun load(){
// load items from disk
}
}
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(Model.shared)
}
}
}
struct ContentView: View {
#EnvironmentObject var: model: Model
var body: some View {
NavigationStack {
List {
ForEach($model.items) $item in {
TextField("Title" text: $item.title)
}
.navigationTitle("Items")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.environmentObject(Model.preview)
}
}