jeanmachine.dev / witchsky.app
forked from jollywhoppers.com/witchsky.app
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 measurements (again) (#2866)

authored by

dan and committed by
GitHub b9301bef 7e6b666e

+14 -21
+14 -21
src/view/com/pager/PagerWithHeader.tsx
··· 233 233 }, 234 234 ], 235 235 })) 236 - const pendingHeaderHeight = React.useRef<null | number>(null) 236 + const headerRef = React.useRef(null) 237 237 return ( 238 238 <Animated.View 239 239 pointerEvents="box-none" 240 240 style={[styles.tabBarMobile, headerTransform]}> 241 - <View 242 - pointerEvents="box-none" 243 - collapsable={false} 244 - onLayout={e => { 245 - if (isHeaderReady) { 246 - onHeaderOnlyLayout(e.nativeEvent.layout.height) 247 - pendingHeaderHeight.current = null 248 - } else { 249 - // Stash it away for when `isHeaderReady` turns `true` later. 250 - pendingHeaderHeight.current = e.nativeEvent.layout.height 251 - } 252 - }}> 241 + <View ref={headerRef} pointerEvents="box-none" collapsable={false}> 253 242 {renderHeader?.()} 254 243 { 255 - // When `isHeaderReady` turns `true`, we want to send the parent layout. 256 - // However, if that didn't lead to a layout change, parent `onLayout` wouldn't get called again. 257 - // We're conditionally rendering an empty view so that we can send the last measurement. 244 + // It wouldn't be enough to place `onLayout` on the parent node because 245 + // this would risk measuring before `isHeaderReady` has turned `true`. 246 + // Instead, we'll render a brand node conditionally and get fresh layout. 258 247 isHeaderReady && ( 259 248 <View 249 + // It wouldn't be enough to do this in a `ref` of an effect because, 250 + // even if `isHeaderReady` might have turned `true`, the associated 251 + // layout might not have been performed yet on the native side. 260 252 onLayout={() => { 261 - // We're assuming the parent `onLayout` already ran (parent -> child ordering). 262 - if (pendingHeaderHeight.current !== null) { 263 - onHeaderOnlyLayout(pendingHeaderHeight.current) 264 - pendingHeaderHeight.current = null 265 - } 253 + // @ts-ignore 254 + headerRef.current?.measure( 255 + (_x: number, _y: number, _width: number, height: number) => { 256 + onHeaderOnlyLayout(height) 257 + }, 258 + ) 266 259 }} 267 260 /> 268 261 )