How to move up SwiftUI `ScrollView` content when keyboard is appeared? - swiftui

Question

I'm having a chat view with messages. When message composer gets a focus and keyboard is appeared the height of ScrollView decreases. Now I want all messages to move up a little so users can see the same bottom message she saw before. Is there anyway to achieve this with a pure SwiftUI?
ScrollViewReader { scrollReader in
ScrollView {
LazyVStack(spacing: 24) {
ForEach(messages, id: \.id) {
MessageContainer(message: $0)
.id($0.id)
}
}
.padding(.horizontal, 16)
}
}

Answer 1

Here is an example that uses ScrollViewReader to scroll to the tapped message for answering it:
struct ContentView: View {
let messages = Message.dummyData
#State private var tappedMessage: Message?
#State private var newMessage = ""
#FocusState private var focus: Bool
var body: some View {
ScrollViewReader { scrollReader in
ScrollView {
LazyVStack(alignment: .leading, spacing: 24) {
ForEach(messages, id: \.id) { message in
MessageContainer(message: message)
.id(message.id)
.onTapGesture {
tappedMessage = message
focus = true
}
}
}
.padding(.horizontal, 16)
}
if let tappedMessage {
VStack {
TextEditor(text: $newMessage)
.frame(height: 80)
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.stroke(Color.gray, lineWidth: 1)
)
.padding(.horizontal, 16)
.focused($focus)
Button("Send") { self.tappedMessage = nil }
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now()+0.5) {
withAnimation {
scrollReader.scrollTo(tappedMessage.id)
}
}
}
}
}
}
}

Answer 2

Then just try it with .offset:
struct ContentView: View {
let messages = Message.dummyData
#State private var showNewMessage = false
#State private var newMessage = ""
#FocusState private var focus: Bool
var body: some View {
VStack {
ScrollView {
LazyVStack(alignment: .leading, spacing: 24) {
ForEach(messages, id: \.id) { message in
MessageContainer(message: message)
.offset(y: showNewMessage ? -300 : 0)
}
}
.padding(.horizontal, 16)
}
if showNewMessage == false {
Button("New Message") {
withAnimation {
showNewMessage = true
focus = true
}
}
} else {
Button("Send") {
showNewMessage = false
}
TextEditor(text: $newMessage)
.frame(height: 80)
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.stroke(Color.gray, lineWidth: 1)
)
.padding(.horizontal, 16)
.focused($focus)
}
}
}
}