Refresh Control

Themed pull-to-refresh control for ScrollView and FlatList.

Installation#

npx @aniui/cli add refresh-control

Pull to refresh

Web preview — components render natively on iOS & Android

import { RefreshControl } from "@/components/ui/refresh-control";

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

  const onRefresh = () => {
    setRefreshing(true);
    fetchData().finally(() => setRefreshing(false));
  };

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      {/* Content */}
    </ScrollView>
  );
}

Usage#

app/index.tsx

import { RefreshControl } from "@/components/ui/refresh-control";

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

  const onRefresh = () => {
    setRefreshing(true);
    fetchData().finally(() => setRefreshing(false));
  };

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      {/* Content */}
    </ScrollView>
  );
}

Props#

PropTypeDefault

refreshing

boolean

-

onRefresh

() => void

-

Also accepts all React Native RefreshControl props.

Accessibility#

Themed pull-to-refresh control using React Native's built-in RefreshControl.
Refresh state is announced by the platform's accessibility system.

Source#

components/ui/refresh-control.tsx

import React from "react";
import { RefreshControl as RNRefreshControl } from "react-native";

export interface RefreshControlProps extends React.ComponentPropsWithoutRef<typeof RNRefreshControl> {
  refreshing: boolean;
  onRefresh: () => void;
}

export function RefreshControl({ refreshing, onRefresh, ...props }: RefreshControlProps) {
  return (
    <RNRefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      tintColor="hsl(240 5.9% 10%)"
      colors={["hsl(240 5.9% 10%)"]}
      {...props}
    />
  );
}

Previous← Rating NextSafe Area →