Make scroll handling contextual (#2200)

* Add an intermediate List component

* Fix type

* Add onScrolledDownChange

* Port pager to use onScrolledDownChange

* Fix on mobile

* Don't pass down onScroll (replacement TBD)

* Remove resetMainScroll

* Replace onMainScroll with MainScrollProvider

* Hook ScrollProvider to pager

* Fix the remaining special case

* Optimize a bit

* Enforce that onScroll cannot be passed

* Keep value updated even if no handler

* Also memo it

1 files changed, 35 insertions, 0 deletions

diff --git a/src/lib/ScrollContext.tsx b/src/lib/ScrollContext.tsx
new file mode 100644
index 000000000..00b197bed
--- /dev/null
+++ b/src/lib/ScrollContext.tsx
@@ -0,0 +1,35 @@
+import React, {createContext, useContext, useMemo} from 'react'
+import {ScrollHandlers} from 'react-native-reanimated'
+
+const ScrollContext = createContext<ScrollHandlers<any>>({
+  onBeginDrag: undefined,
+  onEndDrag: undefined,
+  onScroll: undefined,
+})
+
+export function useScrollHandlers(): ScrollHandlers<any> {
+  return useContext(ScrollContext)
+}
+
+type ProviderProps = {children: React.ReactNode} & ScrollHandlers<any>
+
+// Note: this completely *overrides* the parent handlers.
+// It's up to you to compose them with the parent ones via useScrollHandlers() if needed.
+export function ScrollProvider({
+  children,
+  onBeginDrag,
+  onEndDrag,
+  onScroll,
+}: ProviderProps) {
+  const handlers = useMemo(
+    () => ({
+      onBeginDrag,
+      onEndDrag,
+      onScroll,
+    }),
+    [onBeginDrag, onEndDrag, onScroll],
+  )
+  return (
+    <ScrollContext.Provider value={handlers}>{children}</ScrollContext.Provider>
+  )
+}