How I handle keyboard avoidance in React Native

Keyboard avoidance in React Native can be tricky, especially when you want inputs to stay visible and focused as the keyboard appears and disappears. In this video, I share my approach to handling keyboard avoidance in a scheduling app UI, focusing on smooth animations and reliable input focus behavior.

I demonstrate how to use the react-native-keyboard-controller package combined with Reanimated to create an animated spacer that pushes content up as the keyboard animates. This method works well on different devices, including smaller screens like the iPhone SE, and handles keyboard toolbar offsets gracefully.

What's inside

Introduction to keyboard avoidance challenges in React Native
Overview of the scheduling app UI and input focus behavior
Testing keyboard avoidance on iPhone SE for reliable results
Fixing Android text alignment issues with textAlignVertical
Using a toggle button to test keyboard focus and view switching
Implementing keyboard avoidance with react-native-keyboard-controller
Creating an animated spacer that grows with keyboard height
Adjusting keyboard padding to accommodate keyboard toolbar

Introduction to keyboard avoidance challenges in React Native

Keyboard avoidance is often difficult because the keyboard height and animation timing vary across devices and platforms. In this video, I explain how I struggled to implement a UI where users can select inputs and accounts while keeping the keyboard behavior smooth and intuitive.

The main challenge is ensuring inputs remain visible and focused as the keyboard appears and disappears, without awkward jumps or layout issues. This is especially important in apps where users interact with multiple inputs and controls on the same screen.

Overview of the scheduling app UI and input focus behavior

The app shown is for scheduling posts to multiple platforms. The UI includes an input field and account selectors at the bottom. By default, the input is automatically focused when the screen loads, and users can switch focus between inputs and accounts.

I demonstrate how the keyboard automatically focuses the input on screen entry and how users can hide and show the keyboard while maintaining focus. This behavior took a few hours to implement properly, but it results in a smooth user experience.

Testing keyboard avoidance on iPhone SE for reliable results

I always test keyboard avoidance on an iPhone SE because its small screen size makes it a good baseline. If the keyboard avoidance works well there, it will generally work on larger devices.

I show the input automatically avoiding the keyboard on the iPhone SE, allowing typing and closing the keyboard without layout issues. This testing approach helps catch edge cases early.

Fixing Android text alignment issues with textAlignVertical

On Android, I fixed a text alignment problem by setting the input's prop to . This ensures the text inside multiline inputs aligns properly at the top rather than centering vertically.

This small fix improves the appearance and usability of inputs on Android devices, making the keyboard avoidance solution consistent across platforms.

Using a toggle button to test keyboard focus and view switching

The UI includes a toggle button that switches between views. When toggling back to the keyboard-avoiding view, the input is automatically focused again, and the keyboard appears as expected.

This toggle test confirms that the keyboard avoidance logic works correctly even when navigating between different views or screens in the app.

Implementing keyboard avoidance with react-native-keyboard-controller

The core of the solution uses the package (version 1.1.7 at recording time). This package provides a hook called that returns the keyboard height at each animation frame.

I use this hook to track the keyboard height dynamically and feed it into an animated shared value using Reanimated. This approach lets me animate UI changes smoothly in sync with the keyboard's appearance and disappearance.

Creating an animated spacer that grows with keyboard height

The keyboard avoidance is achieved by rendering an animated view at the bottom of the screen. This view's height increases from zero to the keyboard's height as the keyboard animates up.

By pushing the content up with this animated spacer, the inputs remain visible and accessible without complex layout shifts. The animation matches the keyboard's timing, resulting in a natural feel.

Because I also use a keyboard toolbar in the app, I add an extra offset of 42 pixels to the keyboard height when calculating the spacer size. This ensures the toolbar does not overlap the inputs.

You can tweak this offset depending on your UI needs. Increasing or decreasing it adjusts the space above the keyboard, giving you control over the final layout.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro membership

Get access to source code and exclusive React Native content.

Let's connect!