PullToRefreshBox

A Jetpack Compose PullToRefreshBox component for pull-to-refresh interactions.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.12

Expo UI PullToRefreshBox matches the official Jetpack Compose PullToRefreshBox API. It wraps scrollable content and shows a refresh indicator when pulled.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic pull to refresh

Wrap scrollable content in a PullToRefreshBox to add pull-to-refresh behavior.

BasicPullToRefresh.tsx

import { useState, useCallback } from 'react';
import { Host, PullToRefreshBox, LazyColumn, ListItem } from '@expo/ui/jetpack-compose';

export default function BasicPullToRefresh() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <Host style={{ height: 400 }}>
      <PullToRefreshBox isRefreshing={refreshing} onRefresh={onRefresh}>
        <LazyColumn>
          <ListItem>
            <ListItem.HeadlineContent>Item 1</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 2</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 3</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 4</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 5</ListItem.HeadlineContent>
          </ListItem>
        </LazyColumn>
      </PullToRefreshBox>
    </Host>
  );
}

Custom indicator colors

Use the indicator prop to customize the spinner and container colors.

CustomIndicatorColors.tsx

import { useState, useCallback } from 'react';
import { Host, PullToRefreshBox, LazyColumn, ListItem } from '@expo/ui/jetpack-compose';

export default function CustomIndicatorColors() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  return (
    <Host style={{ height: 400 }}>
      <PullToRefreshBox
        isRefreshing={refreshing}
        onRefresh={onRefresh}
        indicator={{ color: '#6200EE', containerColor: '#F5F5F5' }}>
        <LazyColumn>
          <ListItem>
            <ListItem.HeadlineContent>Item 1</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 2</ListItem.HeadlineContent>
          </ListItem>
          <ListItem>
            <ListItem.HeadlineContent>Item 3</ListItem.HeadlineContent>
          </ListItem>
        </LazyColumn>
      </PullToRefreshBox>
    </Host>
  );
}

API

import { PullToRefreshBox } from '@expo/ui/jetpack-compose';

Component