Skip to main content

​
Overview

The KeyboardAvoidingView component automatically adjusts its height, position, or padding based on keyboard height to prevent content from being hidden. Uniwind provides className prop support for styling this component.

​
Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-bg-blue-500").

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.
​
contentContainerClassName
string
Maps to the contentContainerStyle prop. Use regular Tailwind classes (no accent- prefix needed).

​
Usage Example

import { KeyboardAvoidingView, TextInput } from 'react-native'

<KeyboardAvoidingView
  behavior="padding"
  className="flex-1 bg-white"
  contentContainerClassName="p-4 justify-end"
>
  <TextInput
    placeholder="Type here..."
    className="border border-gray-300 rounded p-2"
  />
</KeyboardAvoidingView>
⌘I