Header blurred banner on overscroll (take 2) (#5474)

* grow banner when overscrolling

* add blurview

* make backdrop blur as it scrolls

* add activity indicator

* use rotated spinner instead of arrow

* persist position of back button

* make back button prettier

* make blur less jarring

* Unify effects

* Tweak impl

* determine if should animate based on scroll amount

* sign comment

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 41 insertions, 0 deletions

diff --git a/src/view/com/pager/PagerHeaderContext.tsx b/src/view/com/pager/PagerHeaderContext.tsx
new file mode 100644
index 000000000..fd4cc7463
--- /dev/null
+++ b/src/view/com/pager/PagerHeaderContext.tsx
@@ -0,0 +1,41 @@
+import React, {useContext} from 'react'
+import {SharedValue} from 'react-native-reanimated'
+
+import {isIOS} from '#/platform/detection'
+
+export const PagerHeaderContext =
+  React.createContext<SharedValue<number> | null>(null)
+
+/**
+ * Passes the scrollY value to the pager header's banner, so it can grow on
+ * overscroll on iOS. Not necessary to use this context provider on other platforms.
+ *
+ * @platform ios
+ */
+export function PagerHeaderProvider({
+  scrollY,
+  children,
+}: {
+  scrollY: SharedValue<number>
+  children: React.ReactNode
+}) {
+  return (
+    <PagerHeaderContext.Provider value={scrollY}>
+      {children}
+    </PagerHeaderContext.Provider>
+  )
+}
+
+export function usePagerHeaderContext() {
+  const scrollY = useContext(PagerHeaderContext)
+  if (isIOS) {
+    if (!scrollY) {
+      throw new Error(
+        'usePagerHeaderContext must be used within a HeaderProvider',
+      )
+    }
+    return {scrollY}
+  } else {
+    return null
+  }
+}