From af5bed9489b0945713d471289cac193d076e73a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= <cysiak0412@gmail.com>
Date: Wed, 7 Aug 2024 09:10:15 +0200
Subject: [PATCH] add import to ref

---
 .../docs/advanced/useEvent.mdx                | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/docs-reanimated/docs/advanced/useEvent.mdx b/packages/docs-reanimated/docs/advanced/useEvent.mdx
index e8a1eeffcdbe..becf23188c9a 100644
--- a/packages/docs-reanimated/docs/advanced/useEvent.mdx
+++ b/packages/docs-reanimated/docs/advanced/useEvent.mdx
@@ -9,37 +9,28 @@ sidebar_position: 4
 ## Reference
 
 ```js
-function useEventExample() {
-  const dependencies = [{ isWeb: false }];
-  const handlers = {
-    onScroll: (event) => {
-      'worklet';
-      console.log(event);
-    },
-  };
+import { useEvent } from 'react-native-reanimated';
 
-  const { context, doDependenciesDiffer, useWeb } = useHandler(
-    handlers,
-    dependencies
-  );
+function useAnimatedPagerScrollHandler(handlers, dependencies) {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
 
   // highlight-start
-  const customScrollHandler = useEvent(
+  return useEvent(
     (event) => {
       'worklet';
-      const { onScroll } = handlers;
-      if (onScroll && event.eventName.endsWith('onScroll')) {
-        context.eventName = event.eventName + useWeb;
-        onScroll(event);
+      const { onPageScroll } = handlers;
+
+      if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
+        onPageScroll(event, context);
       }
     },
-    ['onScroll'],
+    ['onPageScroll'],
     doDependenciesDiffer
   );
-  // highlight-end
-
-  return <Animated.ScrollView onScroll={customScrollHandler} />;
 }
+// highlight-end
+
+return <Animated.View onScroll={useAnimatedPagerScrollHandler} />;
 ```
 
 <details>