InputAccessoryView

Learn how to use InputAccessoryView with Uniwind className props

Overview

The InputAccessoryView component displays a custom view above the keyboard on iOS. Uniwind provides className prop support for styling this component.

Web support (Uniwind Pro 1.8.0+): InputAccessoryView is also available on web and supports styling through className. It renders React Native Web’s InputAccessoryView when available (0.21.3+), or a View on older versions. backgroundColorClassName is only resolved on native, so use a bg-* class in className on web.

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-blue-500").

Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

Uniwind Bindings

className · string

Maps to the style prop. Use any Tailwind utility classes.

backgroundColorClassName · string

Maps to the backgroundColor prop (native only). Requires accent- prefix for color values.

Usage Example

import { InputAccessoryView, Button } from 'react-native'

<InputAccessoryView
  nativeID="uniqueID"
  className="p-4 border-t border-gray-300"
  backgroundColorClassName="accent-white dark:accent-gray-800"
>
  <Button title="Done" onPress={() => {}} />
</InputAccessoryView>