Reputation: 31
Please help me with that:
So I have MessageView which is chat/sending message page. And I need textField on the bottom that pins to keyboard when appears. Exactly like in iMessage app. Also see that in iMessage when user scrolls down and reaches Keyboard, keyboard scrolls together. For that I have .scrollDismissesKeyboard(.interactively). That's why I want that textField pinned to Keyboard. Messengers like Telegram, WhatsApp, iMessage has same that I wish.
MessageView:
import SwiftUI
struct MessageView: View {
@State private var messageText: String = ""
@State private var isMicButton: Bool = true
@Binding var isDarkMode: Bool
var contact: Contact
var body: some View {
VStack {
ScrollView {
// List of messages
}
.scrollDismissesKeyboard(.interactively)
}
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(Color(hex: "#141524").opacity(0.8), for: .tabBar, .navigationBar)
.background(isDarkMode ? AnyView(DarkMode()) : AnyView(LightMode()))
.toolbar {
ToolbarItem(placement: .principal) {
VStack(alignment: .center) {
Text(contact.name)
.font(.headline)
Text("Last Active: Today")
.font(.subheadline)
.foregroundColor(.gray)
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Text(contact.avatar)
.font(.largeTitle)
}
ToolbarItemGroup(placement: .bottomBar) {
HStack {
Button(action: {
// Add Media Action
}) {
Image(systemName: "photo")
}
TextField("Type a message", text: $messageText, axis: .vertical)
.textFieldStyle(RoundedBorderTextFieldStyle())
if messageText.isEmpty {
Button(action: {
if isMicButton {
// Send Audio Message
} else {
// Send Video Message
}
isMicButton.toggle()
}) {
Image(systemName: isMicButton ? "mic.fill" : "video.fill")
}
} else {
Button(action: {
// Send Text Message
messageText = ""
}) {
Image(systemName: "paperplane.fill")
}
}
}
.padding(.horizontal)
}
}
}
}
struct MessageView_Previews: PreviewProvider {
@State static var isDarkMode = false
static var previews: some View {
MessageView(isDarkMode: $isDarkMode, contact: Contact(name: "Alice", avatar: "👩", messages: [Message(text: "Hi", timestamp: Date())]))
}
}
I tried to put textfield in .bottomBar but textfield sticked to the bottom and Keyboard on top so textField not visible. I tried put to .keyboard but then textField is not visible on MessageView. I tried put separate textField it works but I don't need like that. I need exactly pinned textField to Keyboard. So is there any new simple solution for that? I will use iOS 16+. Thanks in advance
Upvotes: 2
Views: 367