useScrollLock

import { useScrollLock } from "@uicapsule/components";

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

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>
    </View>
  );
}

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