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 - RefreshControlopens in a new window props.

Name	Type	Default	Description
colors	Color[] | undefined		The colors (at least one) that will be used to draw the refresh indicator
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
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	Color | undefined		The background color of the refresh indicator
progressViewOffset	Space | undefined		The distance between the refresh indicator and the top of the view
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"RefreshControl">		Style properties with Abyss token mapping
styles	Styles<RefreshControlClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.
tintColor	Color | undefined		The color of the refresh indicator
titleColor	Color | undefined		The color of the refresh indicator title