forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix layout calculations (#2816)
+31
-11
+31
-11
src/view/com/pager/PagerWithHeader.tsx
+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