Skip to main content

​
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 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.
​
colorClassName
string
Maps to the color prop (Android only). 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-bg-blue-500"
      colorClassName="accent-bg-blue-500"
      progressBackgroundColorClassName="accent-bg-white dark:accent-bg-gray-800"
    />
  }
>
  {/* Content */}
</ScrollView>
⌘I