Preserves the scroll position on lock and unlock
Avoids page width changes

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 something you would usually do when you show content on top of the page and need to avoid the user scrolling the background until it's closed. You can try the following demo to see how it works:

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>
() => ({
  scrollLocked: boolean,
  lockScroll: () => {},
  unlockScroll: () => {},