diff options
Diffstat (limited to 'src/view/com/pager')
-rw-r--r-- | src/view/com/pager/Pager.tsx | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index 8cc346903..5eb7d7608 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,7 +1,9 @@ import { + memo, useCallback, useContext, useImperativeHandle, + useMemo, useRef, useState, } from 'react' @@ -56,6 +58,7 @@ interface Props { } const AnimatedPagerView = Animated.createAnimatedComponent(PagerView) +const MemoizedAnimatedPagerView = memo(AnimatedPagerView) export function Pager({ ref, @@ -139,10 +142,6 @@ export function Pager({ [parentOnPageScrollStateChanged], ) - const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web - const nativeGesture = - Gesture.Native().requireExternalGestureToFail(drawerGesture) - return ( <View testID={testID} style={[a.flex_1, native(a.overflow_hidden)]}> {renderTabBar({ @@ -151,19 +150,33 @@ export function Pager({ dragProgress, dragState, })} - <GestureDetector gesture={nativeGesture}> - <AnimatedPagerView + <DrawerGestureRequireFail> + <MemoizedAnimatedPagerView ref={pagerView} - style={[a.flex_1]} + style={a.flex_1} initialPage={initialPage} onPageScroll={handlePageScroll}> {children} - </AnimatedPagerView> - </GestureDetector> + </MemoizedAnimatedPagerView> + </DrawerGestureRequireFail> </View> ) } +function DrawerGestureRequireFail({children}: {children: React.ReactNode}) { + const drawerGesture = useContext(DrawerGestureContext) + + const nativeGesture = useMemo(() => { + const gesture = Gesture.Native() + if (drawerGesture) { + gesture.requireExternalGestureToFail(drawerGesture) + } + return gesture + }, [drawerGesture]) + + return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector> +} + function usePagerHandlers( handlers: { onPageScroll: (e: PagerViewOnPageScrollEventData) => void |