Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix layout calculations (#2816)

authored by

dan and committed by
GitHub
43b447e5 d36b91fe

+31 -11
+31 -11
src/view/com/pager/PagerWithHeader.tsx
··· 68 68 setTabBarHeight(Math.round(height)) 69 69 } 70 70 }) 71 - const onHeaderOnlyLayout = useNonReactiveCallback( 72 - (evt: LayoutChangeEvent) => { 73 - const height = evt.nativeEvent.layout.height 74 - if (height > 0 && isHeaderReady) { 75 - // The rounding is necessary to prevent jumps on iOS 76 - setHeaderOnlyHeight(Math.round(height)) 77 - } 78 - }, 79 - ) 71 + const onHeaderOnlyLayout = useNonReactiveCallback((height: number) => { 72 + if (height > 0) { 73 + // The rounding is necessary to prevent jumps on iOS 74 + setHeaderOnlyHeight(Math.round(height)) 75 + } 76 + }) 80 77 81 78 const renderTabBar = React.useCallback( 82 79 (props: RenderTabBarFnProps) => { ··· 224 221 testID?: string 225 222 scrollY: SharedValue<number> 226 223 renderHeader?: () => JSX.Element 227 - onHeaderOnlyLayout: (e: LayoutChangeEvent) => void 224 + onHeaderOnlyLayout: (height: number) => void 228 225 onTabBarLayout: (e: LayoutChangeEvent) => void 229 226 onCurrentPageSelected?: (index: number) => void 230 227 onSelect?: (index: number) => void ··· 236 233 }, 237 234 ], 238 235 })) 236 + const headerRef = React.useRef(null) 237 + React.useEffect(() => { 238 + // Fire when layout *becomes* ready. 239 + // We can't rely on onLayout alone because it won't fire if layout is the same. 240 + // We can't rely on this effect alone because it won't fire if layout changes later. 241 + if (isHeaderReady) { 242 + // @ts-ignore 243 + headerRef.current!.measure( 244 + (_x: number, _y: number, _width: number, height: number) => { 245 + onHeaderOnlyLayout(height) 246 + }, 247 + ) 248 + } 249 + }, [isHeaderReady, onHeaderOnlyLayout]) 250 + 239 251 return ( 240 252 <Animated.View 241 253 pointerEvents="box-none" 242 254 style={[styles.tabBarMobile, headerTransform]}> 243 - <View onLayout={onHeaderOnlyLayout} pointerEvents="box-none"> 255 + <View 256 + ref={headerRef} 257 + pointerEvents="box-none" 258 + collapsable={false} 259 + onLayout={e => { 260 + if (isHeaderReady) { 261 + onHeaderOnlyLayout(e.nativeEvent.layout.height) 262 + } 263 + }}> 244 264 {renderHeader?.()} 245 265 </View> 246 266 <View