How do I add a custom button to the SystemKeyboard provided in the KeyboardKit library?

Question

What I want to do is to replace the AutocompleteToolbar area of the keyboard with a custom button of my choice. The KeyboardKit library provides a SystemKeyboard that mimics the default iOS keyboard. I've tried reading the documentation provided here where the following code will use the SystemKeyboard the library provides and hide the AutocompleteToolbar:

class KeyboardViewController: KeyboardInputViewController {

    func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            SystemKeyboard(
                controller: controller,
                autocompleteToolbar: .none
            )
        }
    }
}

But I don't understand how to replace that toolbar with my own custom button that does something I want. I only understand fragments of creating a button, but not how to insert it in the right place, nor do I understand how the views work. After Googling I only know that views are like the UI, but not how things are "injected" into a keyboard. It's so overwhelming that I do not know what smaller pieces to Google to find the answer.

I tried putting the documentation into GPT4 and have it give me some ideas. It started spitting out some obj-c code and some View classes. Obviously none worked. I understand I have to call viewWillSetupKeyboard to update the keyboard but that is about it. I tried Googling how to make an iOS keyboard and that didn't work because I would have to come up with the entire default system keyboard look myself. I tried reading the documentation but I am too newbie to understand it fully.

score 0 · Answer 1 · answered Jun 22 '23 at 09:09

You can do the following and where I've commented your buttons here create the buttons there.

class KeyboardViewController: KeyboardInputViewController {

    func viewWillSetupKeyboard() {
        super.viewWillSetupKeyboard()
        setup { controller in
            VStack(spacing: 0) {
                HStack(spacing: 0) {
                    AutocompleteToolbar(
                        ...
                    ).frame(maxWidth: .infinity)
                    // Your buttons here
                }
                SystemKeyboard(
                    controller: controller,
                    autocompleteToolbar: .none
                )
            }
        }
    }
}

score -1 · Answer 2 · answered Mar 19 '23 at 13:01

-1

class KeyboardViewController: KeyboardInputViewController {

func viewWillSetupKeyboard() {
    super.viewWillSetupKeyboard()
    setup { controller in
        SystemKeyboard(
            controller: controller,
            autocompleteToolbar: .none
        )
    }
}

}

Can you check some options in auto complete field

answered Mar 19 '23 at 13:01

Arpit B Parekh

1,932
5
36
57

The documentation of SystemKeyboard which is where autocompletetoolbar is, is [here](https://keyboardkit.github.io/KeyboardKit/documentation/keyboardkit/systemkeyboard/) and the actual code on github is [here](https://github.com/KeyboardKit/KeyboardKit/blob/master/Sources/KeyboardKit/System/SystemKeyboard.swift) – user21430614 Mar 19 '23 at 17:27

How do I add a custom button to the SystemKeyboard provided in the KeyboardKit library?

2 Answers2