How to create a emoji keyboard with swiftui?

Question

I can't seem to find out how to create a emoji keyboard in swiftui. Is there someway to build a textfield that is attached to a keyboard with just emojis?

I'm getting 4 errors and this is the link to the photo

Answer 1

Please try this. Hope it helps.

import SwiftUI

struct EmojiTF: View {

    @State var emojiText = ""


    var body: some View {
        VStack(spacing: 10) {
            Text("Emoji Pad:")
                .font(.body)
                .foregroundColor(.gray)

            TextFieldWrapperView(text: self.$emojiText)
                .background(Color.gray)
                .frame(width: 200, height: 50)
        }
        .frame(height: 40)
    }
}


struct TextFieldWrapperView: UIViewRepresentable {

    @Binding var text: String

    func makeCoordinator() -> TFCoordinator {
        TFCoordinator(self)
    }
}

extension TextFieldWrapperView {


    func makeUIView(context: UIViewRepresentableContext<TextFieldWrapperView>) -> UITextField {
        let textField = EmojiTextField()
        textField.delegate = context.coordinator
        return textField
    }


    func updateUIView(_ uiView: UITextField, context: Context) {

    }
}

class TFCoordinator: NSObject, UITextFieldDelegate {
    var parent: TextFieldWrapperView

    init(_ textField: TextFieldWrapperView) {
        self.parent = textField
    }

    //        func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    //            if let value = textField.text {
    //                parent.text = value
    //                parent.onChange?(value)
    //            }
    //
    //            return true
    //        }
}


class EmojiTextField: UITextField {

    // required for iOS 13
    override var textInputContextIdentifier: String? { "" } // return non-nil to show the Emoji keyboard ¯\_(ツ)_/¯

    override var textInputMode: UITextInputMode? {
        for mode in UITextInputMode.activeInputModes {
            if mode.primaryLanguage == "emoji" {
                return mode
            }
        }
        return nil
    }
}

struct EmojiTF_Previews: PreviewProvider {
    static var previews: some View {
        EmojiTF()
    }
}