You don’t have to do any manual calculations or event listeners to handle keyboard being displayed and hidden. 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. Use the hook within your component console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)Ĭonsole.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)Ĭonsole.log('keyboard coordinates: ', ordinates) Import the hook from the react-native-community package import from the hook as a constant const keyboard = useKeyboard() This is a very useful hook if your application contains TextInput components and forms, with the keyboard popping up often.
All of the code that we saw above is simplified greatly when you use this hook. Simplified with useKeyboard HookĪ 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. The callback method displays to the user whether the keyboard is shown or hidden. We then trigger a render in the callback function. Anytime there is a change in the keyboard native event, we listen for the event change in the useEffect. You can see how the code looks on a mobile device below. Let’s put all this together and work with an example:
This method is a straightforward one, that does not take any parameters. This method is used to dismiss/close the keyboard from the view and remove focus. static removeListener(eventName, callback) dismiss The syntax for the removeListener is the same as the addListener. static addListener(eventName, callback)Īn example usage of the addListener is shown below: Keyboard.addListener("keyboardDidShow", _keyboardDidShowCallback) removeListenerĪs the name suggests, we use this method to remove listening to a specific native event. The callback function is triggered when the nativeEvent we are listening to occurs. The addListener also takes in a callback function as its second parameter. We pass the keyboard nativeEvent that we are interested in as a string parameter to the addListener method. The addListener method connects a JavaScript function with a native keyboard notification event. 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. React Native provides the keyboard API that allows us to listen for native keyboard events and react to them. To do all of this you can leverage the keyboard API. You may even want to measure the coordinates of the keyboard and make some adjustments to the UI. In some use-cases you may want to readjust the UI based on whether the keyboard is displayed or not. This is not a topic of discussion while developing web applications. Handling the virtual keyboard efficiently is crucial in mobile apps due to the limited real-estate that we have on mobile devices. To explicitly make sure that you see the virtual keyboard while entering input, press cmd+shft+k. Hence, we may overlook some issues related to the virtual keyboard on the mobile device. On emulators, while entering user input, we tend to use our physical keyboard instead of the virtual keyboard on the emulator. Note: While developing mobile apps, we tend to test our code on emulators. In React Native you will see the keyboard pop up while entering input to the TextInput component. The virtual keyboard displays, when the user has to type something.
In this blog post, we are going to discuss how to handle the virtual keyboard while developing React Native apps. August 24th, 2020 Comments Handling the Virtual Keyboard in React Native