diff options
| -rw-r--r-- | src/view/com/pager/PagerWithHeader.tsx | 42 |
1 files changed, 31 insertions, 11 deletions
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 31abc1ab7..dcfc616cc 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -68,15 +68,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>( setTabBarHeight(Math.round(height)) } }) - const onHeaderOnlyLayout = useNonReactiveCallback( - (evt: LayoutChangeEvent) => { - const height = evt.nativeEvent.layout.height - if (height > 0 && isHeaderReady) { - // The rounding is necessary to prevent jumps on iOS - setHeaderOnlyHeight(Math.round(height)) - } - }, - ) + const onHeaderOnlyLayout = useNonReactiveCallback((height: number) => { + if (height > 0) { + // The rounding is necessary to prevent jumps on iOS + setHeaderOnlyHeight(Math.round(height)) + } + }) const renderTabBar = React.useCallback( (props: RenderTabBarFnProps) => { @@ -224,7 +221,7 @@ let PagerTabBar = ({ testID?: string scrollY: SharedValue<number> renderHeader?: () => JSX.Element - onHeaderOnlyLayout: (e: LayoutChangeEvent) => void + onHeaderOnlyLayout: (height: number) => void onTabBarLayout: (e: LayoutChangeEvent) => void onCurrentPageSelected?: (index: number) => void onSelect?: (index: number) => void @@ -236,11 +233,34 @@ let PagerTabBar = ({ }, ], })) + const headerRef = React.useRef(null) + React.useEffect(() => { + // Fire when layout *becomes* ready. + // We can't rely on onLayout alone because it won't fire if layout is the same. + // We can't rely on this effect alone because it won't fire if layout changes later. + if (isHeaderReady) { + // @ts-ignore + headerRef.current!.measure( + (_x: number, _y: number, _width: number, height: number) => { + onHeaderOnlyLayout(height) + }, + ) + } + }, [isHeaderReady, onHeaderOnlyLayout]) + return ( <Animated.View pointerEvents="box-none" style={[styles.tabBarMobile, headerTransform]}> - <View onLayout={onHeaderOnlyLayout} pointerEvents="box-none"> + <View + ref={headerRef} + pointerEvents="box-none" + collapsable={false} + onLayout={e => { + if (isHeaderReady) { + onHeaderOnlyLayout(e.nativeEvent.layout.height) + } + }}> {renderHeader?.()} </View> <View |