Handling the Virtual Keyboard in React Native

In this blog post, we are going to discuss how to handle the virtual keyboard while developing React Native apps. The virtual keyboard displays, when the user has to type something. In React Native you will see the keyboard pop up while entering input to the TextInput component.

Note: While developing mobile apps, we tend to test our code on emulators. On emulators, while entering user input, we tend to use our physical keyboard instead of the virtual keyboard on the emulator. Hence, we may overlook some issues related to the virtual keyboard on the mobile device. To explicitly make sure that you see the virtual keyboard while entering input, press cmd+shft+k.

Handling the virtual keyboard efficiently is crucial in mobile apps due to the limited real-estate that we have on mobile devices. This is not a topic of discussion while developing web applications.

In some use-cases you may want to readjust the UI based on whether the keyboard is displayed or not. You may even want to measure the coordinates of the keyboard and make some adjustments to the UI. To do all of this you can leverage the keyboard API.

Keyboard API

React Native provides the keyboard API that allows us to listen for native keyboard events and react to them. I use the keyboard API several times in my projects to make changes to the UI based on the keyboard events. Let’s dive into how we use this API in our app.

addListener

The addListener method connects a JavaScript function with a native keyboard notification event. We pass the keyboard nativeEvent that we are interested in as a string parameter to the addListener method. The addListener also takes in a callback function as its second parameter. The callback function is triggered when the nativeEvent we are listening to occurs.

static addListener(eventName, callback)

The nativeEvents that are available are:

• keyboardWillShow
• keyboardDidShow
• keyboardWillHide
• keyboardDidHide
• keyboardDidChangeFrame
• keyboardWillChangeFrame

An example usage of the addListener is shown below:

Keyboard.addListener("keyboardDidShow", _keyboardDidShowCallback);

removeListener

As the name suggests, we use this method to remove listening to a specific native event. The syntax for the removeListener is the same as the addListener.

static removeListener(eventName, callback)

dismiss

This method is used to dismiss/close the keyboard from the view and remove focus. This method is a straightforward one, that does not take any parameters.

static dismiss()

Working Example

Let’s put all this together and work with an example:

You can see how the code looks on a mobile device below. Anytime there is a change in the keyboard native event, we listen for the event change in the useEffect. We then trigger a render in the callback function. The callback method displays to the user whether the keyboard is shown or hidden.

 

Simplified with useKeyboard Hook

A nice trick for you to skip all of the logic to manually listen to events and add callback methods is to use the useKeyboard hook from the react-native-community. All of the code that we saw above is simplified greatly when you use this hook.

This is a very useful hook if your application contains TextInput components and forms, with the keyboard popping up often.

Import the hook from the react-native-community package

import { useKeyboard } from '@react-native-community/hooks'

Define the hook as a constant

const keyboard = useKeyboard()

Use the hook within your component

console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)
console.log('keyboard coordinates: ', keyboard.coordinates)

With this hook, you can now get the boolean value of whether the keyboard is shown, height of they keyboard and its coordinates as well. You don’t have to do any manual calculations or event listeners to handle keyboard being displayed and hidden. Neat! I find this hook to be of the most use to me in React Native.

Let’s refactor our previous example and plug in the useKeyboard hook:

Yay! Isn’t that greatly simplified? With this, you don’t need to worry about the listeners and managing them. It is all done under the hood for you.

Conclusion

You can view the examples on expo snack and see the output on both iOS and Android emulators. The examples from this blog post are linked below:

Keyboard API example

useKeyboard Hook example

https://reactnative.dev/docs/keyboard

If you are looking for a course that gets you started with React Native and teaches the fundamentals, checkout Mosh’s course linked below.

Ultimate React Native Course – Code With Mosh

I hope you enjoyed this article. See you again with more articles. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.

Tags: Keyboard, Mobile, React Native, virtual keyboard