title: Navigation bar only have background when scroll
body: <p>I am trying to implement a detail view which is linked from a navigation view.
  In this detail view, there is a default nav bar on top with a back button.
  <strong>But the bar only show some color when I scroll up.</strong> I have no idea why.</p>
  <p>No Scroll: <a href="https://i.stack.imgur.com/xgO1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xgO1D.png" alt="Transparent Nav Bar" /></a></p>
  <p>Scroll: <a href="https://i.stack.imgur.com/EU0y2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EU0y2.png" alt="Have Background Color" /></a></p>
  <p>Initially, the nav bar doesn't have background either when it's scrolling or not.
  So I created an init() method for setting up the style.</p>
  <pre><code> init(fruit: Fruit) {
      self.fruit = fruit
      if #available(iOS 15.0, *) {
          let navigationBarAppearance = UINavigationBarAppearance()
          navigationBarAppearance.configureWithDefaultBackground()
          
          UINavigationBar.appearance().standardAppearance = navigationBarAppearance
          UINavigationBar.appearance().compactAppearance = navigationBarAppearance
          UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
      }
    }
  </code></pre>
  <p>The Body View is a Navigation View on the outside and scroll view inside.
  ** For anyone wonder why I set the navbar to hidden in the VStack, is because if I don't hide it, there would be some huge space above the image. (I have no idea why)
  <a href="https://i.stack.imgur.com/dpGJp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpGJp.png" alt="Huge Space, no idea what caused it" /></a></p>
  <p>** Updated Code **
  I updated my code which use the Opaque background.
  But it seems like none of those config are visible.</p>
  <pre><code>init(fruit: Fruit) {
      self.fruit = fruit
      let navBarAppearance = UINavigationBarAppearance()
      navBarAppearance.configureWithOpaqueBackground()
      UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
      UINavigationBar.appearance().standardAppearance = navBarAppearance
  }
  
  var body: some View {
      NavigationView {
          ScrollView(.vertical, showsIndicators: false) {
              VStack(alignment: .center, spacing: 20) {
                  // HEADER
                  FruitHeaderView(fruit: fruit)
                  
                  VStack(alignment: .leading, spacing: 20) {
                      // TITLE
                      Text(fruit.title)
                          .font(.largeTitle)
                          .fontWeight(.heavy)
                          .foregroundColor(fruit.gradientColors[1])
                      
                      
                  } //: VSTACK
                  .padding(.horizontal, 20)
                  .frame(maxWidth: 640, alignment: .center)
              } //: VSTACK
              .navigationBarHidden(true)
          } //: SCROLL
          .edgesIgnoringSafeArea(.top)
      } //: NAVIGATION
      .navigationBarTitle(fruit.title, displayMode: .inline)
      .navigationViewStyle(StackNavigationViewStyle())
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/quekx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/quekx.jpg" alt="Config the nav bar during init, but still don't see the background until I scroll" /></a></p>
  <p>*** Solution ***
  It turns out I have to put the configurations code of the nav bar in the parent view. During init().
  <strong>Can anyone explain why this on the parent view? Or if I want different style in parent and child what should I do?</strong></p>
  <pre><code>    init() {
          let navBarAppearance = UINavigationBarAppearance()
          navBarAppearance.configureWithOpaqueBackground()
          UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
           UINavigationBar.appearance().standardAppearance = navBarAppearance
      }
  
  var body: some View {
      NavigationView {
          List {
              ForEach(fruits.shuffled()) { item in
                  NavigationLink {
                      FruitDetailView(fruit: item)
                  } label: {
                      FruitRowView(fruit: item)
                          .padding(.vertical, 4)
                  }
              }
          }
          .listStyle(.plain)
          .navigationTitle(&quot;Fruits&quot;)
      } //: NAVIGATION
  
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UfDpq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UfDpq.jpg" alt="Parent View" /></a></p>