> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# KeyboardAvoidingView

> Learn how to use KeyboardAvoidingView with Uniwind className props

## 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

<Info>
  **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-blue-500"`).
</Info>

## Uniwind Bindings

<ParamField path="className" type="string">
  Maps to the `style` prop. Use any Tailwind utility classes.
</ParamField>

<ParamField path="contentContainerClassName" type="string">
  Maps to the `contentContainerStyle` prop. Use regular Tailwind classes (no `accent-` prefix needed).
</ParamField>

## Usage Example

```tsx theme={null}
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>
```