Custom view doesn't load properly when presented as a modal sheet

Hello!

I am making my first SwiftUI application, and I encountered an annoying problem, to which I can't find a solution.

So, I have a made a custom class, which is basically listing out items in a List view, but these items are made up of other custom views as well. Users can tap on these items, to add them or remove them from an array, which is present as an environment object.

Now, when I add this custom view as a tab view to my application, it appears as it should, no problem whatsoever.
I can tap on one of the items, a chechmark gets added next to it, and when I look at my other view, which lists out the items I have selected, it works great, the selected items are shown.

But if I add this view to a sheet, which shows on a button press, some of the view elements don't show up. I can still select them, and the other view will display the selected items, but it's like half of the custom item views are left off the screen.

Interestingly enough, if I try to dismiss the modal sheet by dragging it down, the rest of the custom item views show up, and it works again.

Unfortunately I can't provide images but imagine this:
the custom view contains a list view, which lists out customItemView items. These customItemView items contain an image and some text. When I try to load the sheet, the images are shown, but not the text.

The classes in question:

This contains the calling of the modal sheet on button press:
Code Block
struct CurrenciesTabView: View {
  @EnvironmentObject var watchedCurrencies: CurrencyContainer
  @State var isSelectorOpen = false
   
  var body: some View {
    VStack() {
      CurrencyList(selectedCurrencies: watchedCurrencies)
      Button("Szerkesztés"){
        isSelectorOpen = true
      }
      .sheet(isPresented: $isSelectorOpen){
        CurrencySelectorView().environmentObject(watchedCurrencies)
      }
      .foregroundColor(.white).background(RoundedRectangle(cornerRadius: 50.0).frame(width: 120, height: 40).foregroundColor(.blue)).padding()
    }
  }
}


This is the custom view, that's put on the sheet (which works on a tab view, but not on the sheet):
Code Block
struct CurrencySelectorView: View {
  @EnvironmentObject var selectedCurrencies: CurrencyContainer
   
  var body: some View {
    List(Currency.Symbol.allCases, id:\.self) { symbol in
      ItemView(symbol: symbol.rawValue)
    }
  }
   
  func appendToList(currency: Currency) -> Void {
    selectedCurrencies.appendCurrency(currency: currency)
  }
   
  func removeFromList(currency: Currency) -> Void {
    selectedCurrencies.removeCurrency(at: selectedCurrencies.getCurrencies().firstIndex(of: currency)!)
  }
}
extension CurrencySelectorView {
  struct ItemView: View {
    let symbol: String
    @EnvironmentObject var selectedCurrencies: CurrencyContainer
     
    var body: some View {
      HStack {
        CurrencyItemView(symbol: symbol)
        if selectedCurrencies.contains(symbol: symbol) {
          Image(systemName: "checkmark")
        }
      }.onTapGesture {
        if selectedCurrencies.contains(symbol: symbol) {
          selectedCurrencies.removeCurrency(symbol: symbol)
        } else {
          selectedCurrencies.appendCurrency(currency: Currency(symbol: Currency.Symbol.init(rawValue: symbol)!))
        }
      }
    }
     
    init(symbol: String) {
      self.symbol = symbol
    }
  }
}


These are the items, that are listed out on the custom view
(the Image views are shown, but not the Text views on the openin of the sheet):
Code Block
struct CurrencyItemView: View {
  let imageName: String
  let symbol: String
  let value: Double
  let base: String
   
  var body: some View {
    HStack() {
      Image(imageName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(height: 50)
      HStack() {
        Text(symbol)
      }
      Spacer()
    }.contentShape(Rectangle())
  }
   
  init(imageName: String, symbol: String, value: Double, base: String) {
    self.imageName = imageName
    self.symbol = symbol
    self.value = value
    self.base = base
  }
   
  init(symbol: String) {
    self.imageName = symbol
    self.symbol = symbol
    self.value = 0.0
    self.base = ""
  }
}

The environmentObject is in the enviroment, and as I said, it works as it should, the very same array is correctly shared between the views (the CurrencyContainer object is basically holding an array, with a couple of added methods).

Can you help me out in resolving this issue? It's been driving me mad for days now, and I think the app would look cleaner, if this view was presented on a modal sheet instead of a tab view.

Thanks in advance!



Answered by horikecske in 673162022
Hey @OOPer!

Thanks for your reply, it was helpful. When you said the problem should be easily reproducable I started to add every element of the code to a blank view one by one.
Code Block
var body: some View {
    VStack() {
      CurrencyList(selectedCurrencies: watchedCurrencies)
      Button("Szerkesztés"){
        isSelectorOpen = true
      }
      .sheet(isPresented: $isSelectorOpen){
        CurrencySelectorView().environmentObject(watchedCurrencies)
      }.foregroundColor(.white).background(RoundedRectangle(cornerRadius: 50.0).frame(width: 120, height: 40).foregroundColor(.blue)).padding()
       
    }
  }

Turns out, the problem was this piece of code. I meant to apply these color and frame modifiers to the edit button, but because of its placement, it was applied to the content of the sheet too, so it painted the text white, thats why it disappeared.

Can you help me out in resolving this issue?

You should better show all the relevant code if you really think you want to be helped.
When the issue is easily reproducible, readers would try to solve the issue.
Accepted Answer
Hey @OOPer!

Thanks for your reply, it was helpful. When you said the problem should be easily reproducable I started to add every element of the code to a blank view one by one.
Code Block
var body: some View {
    VStack() {
      CurrencyList(selectedCurrencies: watchedCurrencies)
      Button("Szerkesztés"){
        isSelectorOpen = true
      }
      .sheet(isPresented: $isSelectorOpen){
        CurrencySelectorView().environmentObject(watchedCurrencies)
      }.foregroundColor(.white).background(RoundedRectangle(cornerRadius: 50.0).frame(width: 120, height: 40).foregroundColor(.blue)).padding()
       
    }
  }

Turns out, the problem was this piece of code. I meant to apply these color and frame modifiers to the edit button, but because of its placement, it was applied to the content of the sheet too, so it painted the text white, thats why it disappeared.

Custom view doesn't load properly when presented as a modal sheet
 
 
Q