How to modify the IOS keyboard on React Native

While working on a recent project we got to work with React Native. It’s a very popular platform nowadays as it allows building mobile apps for both IOS and Android using the same code base just by knowing JavaScript. Sounds cool, yeah?

One of the challenges we faced was to modify the IOS keyboard a little bit to make the user experience easier for the customers. React Native supports several types of keyboards right out of the box, e.g. numeric, email address and phone. It’s also possible to control how the return key works. But it was still not quite enough for us.

By default, keyboards with digits have this useful “Done” button, which simplifies text editing flow for inexperienced users; a numeric keyboard with a Done button

On the other hand, if you edit text in a multiline input field, there is no such button. But it would be so useful to have it here too, right?

So, we did some research first. There is , a project on github which does almost exactly what we need. It’s implemented in JavaScript and kinda works, but it just didn’t feel natural and worked a bit unusually. After more research it became clear that we needed to dive deep into React Native’s sources. The magic is about to begin.

First, let’s define some property called showDoneButtonIOS in RCTBackedTextInputViewProtocol.h and then let’s do the same in two other files which implement this protocol.

Second, we need to export and parse this property. This is going to be a boolean property, so the code is pretty straightforward.

Finally, let’s extend the functionality of our numeric keyboards with our new property.

That’s it! Now whenever the showDoneButton={true} option is passed to the TextView component, the “Done” button shows up and makes our customers happy!

Feel free to text us in case you need any help.