import { RefreshControl } from '@uhg-abyss/mobile';

Usage

The RefreshControl component is used to implement pull-to-refresh functionality in scrollable views, such as ScrollView, FlatList, or SectionList. This component is a customized version of React Native's core RefreshControl, offering enhanced styling, animations, and better integration with our design system.

() => {
  const [refreshing, setRefreshing] = useState(false);

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

  return (
    <ScrollView
      contentContainerStyle={{
        flex: 1,
        backgroundColor: '#D9E9FA',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      refreshControl={
        <RefreshControl
          colors={[
            'red',
            '$core.color.yellow.100',
            '$semantic.color.surface.accent.decorative.3',
            'green',
          ]}
          progressBackgroundColor="$semantic.color.surface.container.emphasis.1"
          tintColor="$semantic.color.surface.container.emphasis.4"
          titleColor="$semantic.color.icon.status.info"
          title="Page is refreshing"
          progressViewOffset="$semantic.spacing.xs"
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};

RefreshControl Classes

Class Name	Description
abyss-refresh-control-root	RefreshControl root element

RefreshControl Props

Extends React Native - RefreshControl Props

Prop Name	Type	Default	Description
colors	Abyss.Color[]	-	The colors (at least one) that will be used to draw the refresh indicator
progressBackgroundColor	Abyss.Color	-	The background color of the refresh indicator
progressViewOffset	number	-	The distance between the refresh indicator and the top of the view
style	Abyss.Style<"RefreshControl">	-	Object or array of objects defining the style of the RefreshControl component
tintColor	Abyss.Color	-	The tint color of the refresh indicator
titleColor	string	-	The color of the refresh indicator title