Background color wrong when collapsed, changes tab bar color when opened and closed...

[LilMoke]

I am using the below code for the bottom sheet. With the bottom sheet, when the sheet is collapsed the background color is not set correctly. I have attached screenshots so you can see the issue.

When the bottom sheet is enlarged the background color is correct, but when it is collapsed it shows a white color. In addition, when th review is first shown it has a white background under the header.

When the bottom sheet is expanded and then collapsed it turns the tab bar white also.

1. What am I doing wrong?
   **** I believe it has something to do with the offset.
   **** And the scroll view. If I remove the scroll view the tab bar color is correct
2. or is there an issue with the package?

Bottom sheet when expanded:

Bottom Sheet after expanded then collapsed, changes tab bar:

Bottom sheet on first load of view:

Tab Bar when bottom sheet expanded:

` @EnvironmentObject var clipOfTheDayViewModel: ClipOfTheDayViewModel

@State private var opacity = 1.0
@State private var mirrored = 1.0
@State var bottomSheetPosition: BottomSheetPosition = .relativeBottom(0.175)

var body: some View {
	ZStack {
		GeometryReader { proxy in
			let size = proxy.size
			let screenWidth: CGFloat = size.width
			let imageWidth = (screenWidth)
			let imageHeight = (screenWidth * 16) / 9
			
			VideoPlayer(player: clipOfTheDayViewModel.cotdPlayer?.player)
				.tag(clipOfTheDayViewModel.cotdPlayer?.id)
				.frame(width: imageWidth, height: imageHeight, alignment: .top)
			
			Image("cotd")
				.resizable()
				.scaledToFit()
				.frame(width: imageWidth, height: 66, alignment: .center)
				.padding(.top, 56)
				.opacity(opacity)
				.onAppear {
					Timer.scheduledTimer(withTimeInterval: 3.0, repeats: false) { _ in
						withAnimation(.easeOut(duration: 0.5)) {
							opacity = 0.0
						}
					}
				}
		}
	}
	.background(Color(UIColor(named: "MidnightDark")!))
	.edgesIgnoringSafeArea([.leading, .trailing, .bottom])
	.onAppear {
		if (clipOfTheDayViewModel.clipOfTheDay == nil) {
			clipOfTheDayViewModel.getClipOfTheDay()
		}
		if let player = clipOfTheDayViewModel.cotdPlayer {
			player.player?.play()
		}
	}
	.onChange(of: clipOfTheDayViewModel.cotdPlayer) { player in
		if let player = player {
			player.player?.play()
		}
	}
	.onDisappear {
		clipOfTheDayViewModel.cotdPlayer?.player?.pause()
	}
	.bottomSheet(
		bottomSheetPosition: $bottomSheetPosition,
		switchablePositions: [
			.relativeBottom(0.175),

// .relative(0.5),
.relativeTop(1.0)
],
headerContent: {
VStack {
Image("ic_up_chevron")
.resizable()
.scaledToFit()
.frame(width: 46, height: 10)
.scaleEffect(x: 1, y: mirrored)
}
.frame(maxWidth: .infinity, maxHeight: 40)
.background(Color("Midnight"))
},
mainContent: {
VStack {
ScrollView {
// RisingStarList view
Text("view 1").foregroundColor(Color.red)
Spacer()

					// MobileClips view for clipsPopular
					Text("view 2").foregroundColor(Color.red)
					Spacer()
					
					// MobileClips view for clipsCreatedDate
					Text("view3 ").foregroundColor(Color.green)
					Spacer()
					
					// MobileClips view for clipsFollowing
					Text("view 4").foregroundColor(Color.blue)
					Spacer()
					
					Spacer(minLength: 80)
				}
				.padding(.top, 36)
			}
			.frame(maxWidth: .infinity, maxHeight: .infinity)
			.background(Color("Midnight"))
		}
	)
	.customAnimation(.easeIn)	//.speed(1.0))
	.showDragIndicator(false)
	.onDragEnded { x in
		print("onDragEnded: \(x.location.y) \(x.translation) \(x.startLocation)")
		if (x.location.y > 0) {
			//play
			clipOfTheDayViewModel.cotdPlayer?.player?.play()
		} else {
			//pause
			clipOfTheDayViewModel.cotdPlayer?.player?.pause()
		}
	}
	.background(Color("Midnight"))
}

}
`

[LilMoke]

I have closed this issue as it is an issue with SwiftUI and the TabBar. The workaround was to make the tabbar not translucent and set its background color. It is not an issue with this package in case anyone else has a similar problem using it with a tabview.