ScrollView with BlurView header / footer

BlurScrollExample.tsx

const BlurScrollTestScreen = () => {
  const insets = useSafeAreaInsets();

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

  const refresh = async () => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 3000);
  };

  const headerHeight = sizes[12];
  const footerHeight = sizes[8];

  return (
    <Relative>
      {/* Header */}
      <BlurView
        tint="regular"
        intensity={100}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: headerHeight + insets.top,
          zIndex: 5,
        }}
      />

      {/* Footer */}
      <BlurView
        tint="regular"
        intensity={100}
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          height: footerHeight + insets.bottom,
          zIndex: 5,
        }}
      />

      <ScrollView
        //  contentContainerStyle, contentOffset, and contentInset are needed to get everything to line up perfectly.
        contentContainerStyle={{
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
        }}
        contentOffset={{
          y: -insets.top,
          x: 0,
        }}
        //  Only this gets the scroll indicator perfect.
        contentInset={{
          top: headerHeight,
          bottom: footerHeight,
        }}
        refreshControl={
          <RefreshControl
            progressViewOffset={headerHeight + insets.top}
            refreshing={refreshing}
            onRefresh={refresh}
          />
        }
      >
        <FakeContent1 />
      </ScrollView>
    </Relative>
  );
};