Avoiding the Keyboard in React Native
NOTICE: Coming Soon in React Native — Keyboard avoiding view
Whether you’re experienced in mobile apps or not, you don’t have to spend much time before you end up putting something behind the keyboard.
Just look at that form, hidden away and inaccessible under that keyboard! It’s such an annoying problem, and devs have to solve it often. I used to use a pod to help avoid this, but pods require a bit of wrapping in React Native, as covered in my article a few weeks ago.
Some devs keep their forms half-sized, to assure they stay visible at the top of the screen above the fold. Others wrap everything in a scrollview so the user can at least access the lower portion of the form. Let’s create a more elegant solution together.
We’ll create a cross-platform answer that looks and feels professional (more so in iOS — explained later). When the keyboard is shown, we’ll resize the display and animate the form and logo above the keyboard.
We’ll take the following actions:
- Detect when the keyboard is being shown.
- Detect the keyboard height.
- Resize the container by subtracting out the keyboard, and also resize any adaptive items, like logos.
- Animate accordingly.
Step 0: Versions Matter!
When this article was first written, you were to use DeviceEventEmitter. Since then things have changed as of version 0.27+ — You should evaluate the following:
When version 0.27+ becomes the norm, I’ll rewrite this article accordingly. For now, consider the aforementioned deprecation with all code.
Step 1: Detect when the keyboard is being shown
For this we’ll add DeviceEventEmitter to the list of imports from React Native, and then addListeners for keyboardDidShow and keyboardDidHide.
Step 2: Detect the keyboard height.
Fortunately our keyboard listeners call the function with a keyboard event passed in. We can then access endCoordinates to determine the exact height of the keyboard.
Step 3: Resize the container by subtracting out the keyboard, and also resize any adaptive items, like logos.
As you may notice in the animated gif above, we resize the Infinite Red logo depending on if the keyboard is shown or not. We store all of this in state each time our keyboard is shown or hidden:
The style of the containing view and the logo are then set using the variables in state. So as state changes, the render method updates the view. If your content cannot fit above the fold, consider still using a ScrollView.
Step 4: Animate accordingly.
If you’re unfamiliar with Layout Animations, you’re in for a treat. As demonstrated in Justin Poliachik’s article “React Native’s LayoutAnimation is Awesome”, we can animate this height change with very little effort. We simply add the following to our keyboardDidShow/Hide functions:
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)That’s it! You could choose spring, linear, easeInEaseOut, or make your own custom animation if you dare.
Android Caveats
You may think “Hey, why not use keyboardWillShow and keyboardWillHide to make it snappier!?”
As of now these do not work on Android. And neither does LayoutAnimation. Only keyboardDidShow/Hide works and LayoutAnimation is completely ignored. I’ve gone with functional on both platforms, but depending on your personal needs you might choose to modify your listener events.
ANDROID UPDATE: https://github.com/facebook/react-native/issues/5267
Full Example Code is part of a base project we’re working on at Infinite Red: seen here LoginScreen.js
You can get 80% of this pretty quickly from an existing node module. This well-maintained repo https://github.com/Andr3wHur5t/react-native-keyboard-spacer gives you a component that grows and shrinks to match the keyboard size (inverse of what we’ve done above). Simply place it at the bottom so it pushes your content up. I still think it’s key to understand the underlying problem. Additionally, if you want to do neat-o changes to your logo (as above), you still need information imparted in this blog post.
About Gant
Gant is Technical Lead at Infinite Red (⚙ web and mobile app dev ⚙), published author, public speaker, and mad-scientist in training. Read the writings of Gant and his co-workers in our Red Shift publication. If you’re looking to discuss nerdy tech, he’s all ears. View half-witty half-groan technical tweets with @GantLaborde on twitter.
