AniUI

Refresh Control

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

Installation#

npx @aniui/cli add refresh-control
Pull to refresh

New comment on your post

Order #4821 shipped

3 new followers this week

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";
import { useThemeColors } from "@/components/ui/theme-provider";

export interface RefreshControlProps extends React.ComponentPropsWithoutRef<typeof RNRefreshControl> {
  refreshing: boolean;
  onRefresh: () => void;
  tintColor?: string;
  colors?: string[];
}

export function RefreshControl({ refreshing, onRefresh, tintColor, colors, ...props }: RefreshControlProps) {
  const themeColors = useThemeColors();
  const tint = tintColor ?? themeColors.foreground;

  return (
    <RNRefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      tintColor={tint}
      colors={colors ?? [tint]}
      {...props}
    />
  );
}
Previous← PriceNextStat Card →