RefreshControl

RefreshControl adds pull to refresh to a ScrollView, FlatList or SectionList. Pass it as the list's refreshControl prop, and when the user drags down from the top past a threshold, it calls onRefresh. Its one required prop, refreshing, is controlled: set it to true in onRefresh, or the spinner vanishes as the finger lifts, and back to false when the data arrives.

  const onRefresh = async () => {
    setRefreshing(true); // controlled: you switch the spinner on...
    await new Promise((resolve) => setTimeout(resolve, 2000)); // stand-in for fetch()
    setChecked(new Date());
    setRefreshing(false); // ...and you switch it off
  };
  ...
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh}
            colors={['#1565c0', '#ef6c00']} progressBackgroundColor="#e3f2fd" // Android
            tintColor="#1565c0" title="Checking for new books" /> // iOS
        }

The styling props are split by platform: Android reads colors (the arc colors, cycled), progressBackgroundColor, size and enabled; iOS reads tintColor, title and titleColor. Both honor progressViewOffset, which moves the spinner below an overlapping header. The figure in Loading States in BookNest catches the Android disc mid-gesture, by holding a drag with adb shell input motionevent DOWN and MOVE before UP.