Scroll Down The Chats Screen When User Starts Writing a Message or Se…

…nds a Message(No Scroll Down While Writing a Message)
sanghee-dev · Aug 6, 2021 · 9acbc0f · 9acbc0f
1 parent 68c54e0
commit 9acbc0f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/Hello Chat/Utilities/Extensions.swift b/Hello Chat/Utilities/Extensions.swift
@@ -35,3 +35,4 @@ extension String {
         return false
     }
 }
+
diff --git a/Hello Chat/View/Messages/ChatsView.swift b/Hello Chat/View/Messages/ChatsView.swift
@@ -12,18 +12,33 @@ struct ChatsView: View {
     @ObservedObject var viewModel: ChatsViewModel
     private let chatPartner: User
 
+    @Namespace var topID
+    @Namespace var bottomID
+
     init(chatPartner: User) {
         self.chatPartner = chatPartner
         self.viewModel = ChatsViewModel(chatPartner: chatPartner)
     }
 
     var body: some View {
         VStack {
-            ScrollView {
-                VStack(spacing: 16) {
-                    ForEach(viewModel.messages) { message in
-                        MessageView(viewModel: MessageViewModel(message))
+            ScrollViewReader { proxy in
+                ScrollView {
+                    Button(
+                        action: { withAnimation { proxy.scrollTo(bottomID) } },
+                        label: { Image(systemName: "chevron.down").foregroundColor(Color(.systemGray2)) })
+                        .id(topID)
+
+                    VStack(spacing: 16) {
+                        ForEach(viewModel.messages) { message in
+                            MessageView(viewModel: MessageViewModel(message))
+                        }
+                    }
+                    .onChange(of: messageText == "") { _ in
+                        withAnimation { proxy.scrollTo(bottomID) }
                     }
+
+                    Text("").id(bottomID)
                 }
             }