FeedbackReact Native

Refresh control

Apply Lumen semantic colors to React Native pull-to-refresh behavior.

Usage API reference

Public APILumenRefreshControlReact Native

Native example

Use Refresh control

Attach to a React Native ScrollView or compatible list. Keep refresh state and completion in application code.

View verified React Native runtime capture

Refresh control rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<ScrollView
  refreshControl={(
    <LumenRefreshControl
      accessibilityLabel="Refresh projects"
      refreshing={refreshing}
      onRefresh={refreshProjects}
    />
  )}
>
  {content}
</ScrollView>

Reference

Public API

The primary shared and platform-specific options exposed by LumenRefreshControl.

API	Values or type	Default	Description
refreshing	`boolean`	`Required`	Reports whether the native indicator is active.
onRefresh	`() => void`	`Required`	Starts the application refresh operation.
indicatorTone	`brand · accent · neutral`	`brand`	Selects the semantic native indicator color.
accessibilityLabel	`string`	`Application-provided`	Names the content refreshed by the gesture.

Native behavior

Design and accessibility

When to use it

Attach to a React Native ScrollView or compatible list. Keep refresh state and completion in application code.

Accessibility

The native refresh gesture remains owned by the scroll container. Supply an accessibility label that describes the refreshed content.