SwiftUI - ScrollView and TextEditor Height Not Working - ios

Question

I'm posting this question again, with a simplified view of my code and views. I'll delete the old one since I think I didn't explain my issue properly there (and it has no answers yet).
I'm trying to position a HStack with an initial height at the bottom of the screen. With the top portion being a scroll view. The HStack might expand to a certain extent as more text is typed into the Text Editor.
I am able to achieve this, as long as there is no Text Editor.
I need help with figuring out how to do this with Text Editor.
Please see below -
With just a text view
With a text editor instead of text view
Here's the code for it -
struct ContentView: View {
#State var myText: String = "This Text Editor is screaming \n\n THIS IS SPARTA!!! \n\n at me and kicking me into the abyss of similarly worded Stackoverflow questions."
var body: some View{
VStack(spacing:0){
GeometryReader {geo in
ScrollView(.vertical, showsIndicators: false){
ForEach(1 ..< 200, id: \.self){ num in
Text("\(num)")
.frame(width: geo.size.width)
.padding(5)
.background(.yellow)
}
}
.background(.orange)
.frame(minWidth: geo.size.width, maxHeight: geo.size.height * 0.96 , alignment: .top)
}
HStack(spacing: 0){
Text("This HStack is supposed to contain a text editor that expands as needed to a max height but starts off at this height.")
.padding()
.background(.teal)
/*TextEditor(text: $myText)
.multilineTextAlignment(.center)
.font(.title3)
.padding()*/
}
.frame(minHeight:50)
.background(.teal)
}
}}
Any help in the right direction is greatly appreciated!

Answer 1

See the following with comments:
struct ContentView: View {
#State var myText: String = "This Text Editor is screaming \n\n THIS IS SPARTA!!! \n\n at me and kicking me into the abyss of similarly worded Stackoverflow questions."
var body: some View{
VStack(spacing: 0) {
ScrollView(.vertical, showsIndicators: false) {
ForEach(1 ..< 200, id: \.self) { num in
Text("\(num)")
// The GeometryReader is unnecessary. Use a frame with .infinity to expand your row.
.frame(maxWidth: .infinity)
.background(.yellow)
.padding(5)
}
}
.background(.orange)
HStack(spacing: 0) {
TextEditor(text: $myText)
.multilineTextAlignment(.center)
.font(.title3)
// Use .fixedSize to reduce the height of the TextEditor to its minimal height.
.fixedSize(horizontal: false, vertical: true)
// this .padding() gives you space around your TextEditor for margins
.padding()
// this background gives you white margins
.background(Color.white)
// this .padding() keeps the background above from resizing to the size of the teal background.
.padding()
}
.frame(minHeight: 50)
.background(.teal)
}
}
}