@bsky.app/expo-scroll-edge-effect

An Expo module wrapping UIScrollEdgeElementContainerInteraction (iOS 26+). Allows views overlaying the edges of a scroll view to automatically influence the scroll edge effect shape.

On older iOS versions and other platforms, the components render as plain Views.

https://github.com/user-attachments/assets/3c6e3ed1-b785-48cc-9d2e-63dfadb45ad2

Installation

npm install @bsky.app/expo-scroll-edge-effect

Then run npx pod-install to link the native module.

Requires expo to be configured in your project.

Usage

import {
  ScrollEdgeEffectProvider,
  ScrollEdgeEffect,
  useScrollEdgeEffectRef,
} from "@bsky.app/expo-scroll-edge-effect";

function Screen() {
  return (
    <ScrollEdgeEffectProvider>
      <ScrollEdgeEffect edge="top">
        <MyHeader />
      </ScrollEdgeEffect>

      <ScrollContent />

      <ScrollEdgeEffect edge="bottom">
        <MyFooter />
      </ScrollEdgeEffect>
    </ScrollEdgeEffectProvider>
  );
}

function ScrollContent() {
  const scrollEdgeRef = useScrollEdgeEffectRef();

  return (
    <ScrollView ref={scrollEdgeRef}>
      {/* ... */}
    </ScrollView>
  );
}

With Reanimated

The ref returned by useScrollEdgeEffectRef is a callback ref, so it works with mergeRefs:

const animatedRef = useAnimatedRef();
const scrollEdgeRef = useScrollEdgeEffectRef();

<Animated.ScrollView ref={mergeRefs([animatedRef, scrollEdgeRef])} />

API

<ScrollEdgeEffectProvider>

Wraps your screen content. Holds the scroll view reference in context so that <ScrollEdgeEffect> components can attach to it.

useScrollEdgeEffectRef()

Returns a callback ref to pass to your ScrollView. Must be used within a <ScrollEdgeEffectProvider>.

<ScrollEdgeEffect>

Wraps content that overlays a scroll view edge. On iOS 26+, descendant views (labels, buttons, images, etc.) automatically influence the scroll edge effect shape.

Platform support

License

MIT