Samuel Newman
f7a2368100
* 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>
42 lines
954 B
TypeScript
42 lines
954 B
TypeScript
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
|
|
}
|
|
}
|