RefreshControl

Learn how to use RefreshControl with Uniwind className props

Overview

The RefreshControl component provides pull-to-refresh functionality for ScrollView and FlatList. 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 tintColor): Use the accent- prefix (e.g., tintColorClassName="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.

colorsClassName · string

Maps to the colors prop (Android only). The resolved color is passed as a single-item array. Requires accent- prefix for color values.

tintColorClassName · string

Maps to the tintColor prop (iOS only). Requires accent- prefix for color values.

titleColorClassName · string

Maps to the titleColor prop (iOS only). Requires accent- prefix for color values.

progressBackgroundColorClassName · string

Maps to the progressBackgroundColor prop (Android only). Requires accent- prefix for color values.

Usage Example

import { ScrollView, RefreshControl } from 'react-native'

<ScrollView
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      tintColorClassName="accent-blue-500"
      colorsClassName="accent-blue-500"
      progressBackgroundColorClassName="accent-white dark:accent-gray-800"
    />
  }
>
  {/* Content */}
</ScrollView>