From a0b60ad43ab497ce361d9e4622e242293a4029d7 Mon Sep 17 00:00:00 2001 From: Latropos Date: Tue, 19 Mar 2024 09:47:06 +0100 Subject: [PATCH 1/5] Add the info --- docs/docs/scroll/useAnimatedScrollHandler.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/docs/scroll/useAnimatedScrollHandler.mdx b/docs/docs/scroll/useAnimatedScrollHandler.mdx index 328243480e08..0a1262ac5d27 100644 --- a/docs/docs/scroll/useAnimatedScrollHandler.mdx +++ b/docs/docs/scroll/useAnimatedScrollHandler.mdx @@ -36,7 +36,7 @@ Optional array of values which changes cause this hook to receive updated values Example: -```js {11} +````js {11} const App = () => { const [state, setState] = useState(0); const sv = useSharedValue(0); @@ -52,7 +52,7 @@ const App = () => { //... return <>; }; -``` +```ś `dependencies` here may be: @@ -65,6 +65,7 @@ const App = () => { The hook returns a handler object that can be hooked into a scrollable container. Note that in order for the handler to be properly triggered, you should use containers that are wrapped with `Animated` (e.g. `Animated.ScrollView` and not just `ScrollView`). The handler should be passed under `onScroll` parameter regardless of whether it is configured to receive only scroll or also momentum or drag events. +Handlers are not supposed to be passed to multiple components, you need a separate handler for each scrollable container. ## Example @@ -104,7 +105,7 @@ function ScrollExample() { ); } -``` +```` If we are interested in receiving drag or momentum events instead of passing a single worklet object we can pass an object of worklets. Below for convenience, we only show how the `scrollHandler` should be defined in such a case. From f93d608af33d23f1d1d3a28b5a1a58d7c9ced5d7 Mon Sep 17 00:00:00 2001 From: Latropos Date: Tue, 19 Mar 2024 09:56:54 +0100 Subject: [PATCH 2/5] Remove --- docs/docs/scroll/useAnimatedScrollHandler.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/scroll/useAnimatedScrollHandler.mdx b/docs/docs/scroll/useAnimatedScrollHandler.mdx index 0a1262ac5d27..ee686cbe1277 100644 --- a/docs/docs/scroll/useAnimatedScrollHandler.mdx +++ b/docs/docs/scroll/useAnimatedScrollHandler.mdx @@ -52,7 +52,7 @@ const App = () => { //... return <>; }; -```ś +``` `dependencies` here may be: From 92e96f0856f189f0f3d9065656e67fa823cf752b Mon Sep 17 00:00:00 2001 From: Latropos Date: Tue, 19 Mar 2024 09:57:47 +0100 Subject: [PATCH 3/5] Fix typo --- docs/docs/scroll/useAnimatedScrollHandler.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/scroll/useAnimatedScrollHandler.mdx b/docs/docs/scroll/useAnimatedScrollHandler.mdx index ee686cbe1277..cc896816e095 100644 --- a/docs/docs/scroll/useAnimatedScrollHandler.mdx +++ b/docs/docs/scroll/useAnimatedScrollHandler.mdx @@ -36,7 +36,7 @@ Optional array of values which changes cause this hook to receive updated values Example: -````js {11} +```js {11} const App = () => { const [state, setState] = useState(0); const sv = useSharedValue(0); @@ -105,7 +105,7 @@ function ScrollExample() { ); } -```` +``` If we are interested in receiving drag or momentum events instead of passing a single worklet object we can pass an object of worklets. Below for convenience, we only show how the `scrollHandler` should be defined in such a case. From f1995c3cacdeb902fc67e7678c2c37408b9ed638 Mon Sep 17 00:00:00 2001 From: Latropos Date: Wed, 20 Mar 2024 13:01:13 +0100 Subject: [PATCH 4/5] document more handlers --- docs/docs/advanced/useEvent.mdx | 2 +- docs/docs/scroll/useScrollViewOffset.mdx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/docs/advanced/useEvent.mdx b/docs/docs/advanced/useEvent.mdx index 4db4a470d23d..f9ad4492e24f 100644 --- a/docs/docs/advanced/useEvent.mdx +++ b/docs/docs/advanced/useEvent.mdx @@ -31,7 +31,7 @@ Value indicating whether handler should be rebuilt. ### Returns -The hook returns event handler that will be invoked when native event is dispatched. +The hook returns event handler that will be invoked when native event is dispatched. That handler should be connected to only one component. ## Example diff --git a/docs/docs/scroll/useScrollViewOffset.mdx b/docs/docs/scroll/useScrollViewOffset.mdx index 90fae0029276..86bbb58b9c5a 100644 --- a/docs/docs/scroll/useScrollViewOffset.mdx +++ b/docs/docs/scroll/useScrollViewOffset.mdx @@ -38,7 +38,8 @@ function useScrollViewOffset( #### `animatedRef` -An [animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component. +An [animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component and +mustn't be changed dynamically. #### `initialRef` From b592d1815b9bb48ae26a93ec64dd1d6654eb1c61 Mon Sep 17 00:00:00 2001 From: Latropos Date: Mon, 25 Mar 2024 17:55:31 +0100 Subject: [PATCH 5/5] Move to remarks --- docs/docs/scroll/useAnimatedScrollHandler.mdx | 5 ++++- docs/docs/scroll/useScrollViewOffset.mdx | 7 +++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/docs/scroll/useAnimatedScrollHandler.mdx b/docs/docs/scroll/useAnimatedScrollHandler.mdx index cc896816e095..d3b033364be1 100644 --- a/docs/docs/scroll/useAnimatedScrollHandler.mdx +++ b/docs/docs/scroll/useAnimatedScrollHandler.mdx @@ -65,7 +65,10 @@ const App = () => { The hook returns a handler object that can be hooked into a scrollable container. Note that in order for the handler to be properly triggered, you should use containers that are wrapped with `Animated` (e.g. `Animated.ScrollView` and not just `ScrollView`). The handler should be passed under `onScroll` parameter regardless of whether it is configured to receive only scroll or also momentum or drag events. -Handlers are not supposed to be passed to multiple components, you need a separate handler for each scrollable container. + +### Remarks + +The hook returns a handler that is not supposed to be passed to multiple components. You need a separate handler for each scrollable container. ## Example diff --git a/docs/docs/scroll/useScrollViewOffset.mdx b/docs/docs/scroll/useScrollViewOffset.mdx index 86bbb58b9c5a..82c7c450b5a3 100644 --- a/docs/docs/scroll/useScrollViewOffset.mdx +++ b/docs/docs/scroll/useScrollViewOffset.mdx @@ -38,8 +38,7 @@ function useScrollViewOffset( #### `animatedRef` -An [animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component and -mustn't be changed dynamically. +An [animated ref](/docs/core/useAnimatedRef#returns) connected to the ScrollView component you'd want to scroll on. The animated ref has to be passed either to an [Animated component](/docs/fundamentals/glossary#animated-component) or a React Native built-in component. #### `initialRef` @@ -49,6 +48,10 @@ An optional shared value to be updated with the scroll offset. If not provided a `useScrollViewOffset` returns a [shared value](/docs/fundamentals/glossary#shared-value) which holds the current offset of the `ScrollView`. +### Remarks + +The `animatedRef` passed to the hook mustn't be changed dynamically. + ## Example import ScrollViewOffset from '@site/src/examples/ScrollViewOffset';