In this lesson, you will learn how to prevent the software keyboard from obscuring your UI components by leveraging the system's "view insets."
The Keyboard Overlap Problem
When a user taps an input field, the host platform (iOS or Android) slides a software keyboard onto the screen. By default, this keyboard often sits on top of your application’s view tree. Because your React Native components are mapped to native views, the keyboard essentially covers whatever content happens to be at the bottom of the screen.
Understanding View Insets
To solve this, we rely on View Insets. Think of an inset as a "protected area" or a buffer. When the keyboard opens, the operating system informs the React Native bridge about the new geometry of the available screen space.
In the React Native architecture, we detect these changes to calculate the space occupied by the keyboard. We then adjust the layout of our components—usually by increasing the bottom padding or changing the height of a container—so that the UI "pushes" up, remaining visible above the keyboard.
Implementing the Adjustment
While there are high-level components designed to handle this, understanding the core mechanism is key. When the keyboard appears, the native layer updates the window insets. You can respond to these events to shift your View structure. Here is a simplified mental model of how a container might respond:
// A conceptual wrapper that adjusts based on keyboard height
<View style={{ paddingBottom: keyboardHeight }}>
<TextInput placeholder="Type here..." />
</View>
When the keyboard slides up, the keyboardHeight variable updates, triggering a new calculation in the Yoga layout engine. Yoga recalculates the positions of your components in the Shadow Tree, and the UI Manager then commits these updated frames to the native display. This ensures your inputs remain accessible to the user without being buried behind the system keyboard.
By observing these insets, you bridge the gap between the static design of your interface and the dynamic reality of mobile input.
Key Takeaway: Keyboard management is the process of responding to system-level inset updates to dynamically adjust your layout, ensuring the Yoga engine recalculates component positions so your UI remains visible above the keyboard.