useScrollLock

import { useScrollLock } from "reshaped";

Overlay utility component is using useScrollLock internally, so you don’t have to worry about the scrolling if you’re displaying the content inside the Overlay.

Locking page scrolling is typically implemented when displaying content on top of the page to prevent users from scrolling the background until the content is closed. You can experiment with the following demo to observe how it functions:

function Example() {
  const { scrollLocked, lockScroll, unlockScroll } = useScrollLock();

  return (
    <View gap={3} direction="row">
      <Button onClick={() => lockScroll()}>Lock scroll</Button>
      <Button onClick={() => unlockScroll()}>Unlock scroll</Button>
    </View>
  );
}

() => ({
  scrollLocked: boolean,
  lockScroll: () => {},
  unlockScroll: () => {},
});