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.

Note

refreshing is a controlled prop, which is why it needs to be set to true in the onRefresh function. Otherwise, the refresh indicator will stop immediately.

() => {
  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.

Name	Type	Default	Required	Description
colors	Abyss.Color[] | undefined	-	-	The colors (at least one) that will be used to draw the refresh indicator
hitSlop	number | Insets | null | undefined	-	-	This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
progressBackgroundColor	Abyss.Color | undefined	-	-	The background color of the refresh indicator
progressViewOffset	Abyss.Space | undefined	-	-	The distance between the refresh indicator and the top of the view
style	Abyss.Style<"RefreshControl">	-	-	RefreshControl style properties with Abyss token mapping
tintColor	Abyss.Color | undefined	-	-	The color of the refresh indicator
titleColor	Abyss.Color | undefined	-	-	The color of the refresh indicator title