Fix sticky pager jumps (#1825)

* Defer showing pager content until its header settles

* Introduce the concept of headerOnlyHeight

* Keep headerOnlyHeight in state, make headerHeight derived

* Hide content until *both* header (only) and tabbar are measured

* Hide tabbar to read its layout earlier

* Give consistent keys to pages
This commit is contained in:
dan 2023-11-06 22:30:10 +00:00 committed by GitHub
parent 4c00fc576d
commit d715246e26
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 28 deletions

View file

@ -14,7 +14,6 @@ export interface TabBarProps {
indicatorColor?: string
onSelect?: (index: number) => void
onPressSelected?: (index: number) => void
onLayout?: (evt: LayoutChangeEvent) => void
}
export function TabBar({
@ -24,7 +23,6 @@ export function TabBar({
indicatorColor,
onSelect,
onPressSelected,
onLayout,
}: TabBarProps) {
const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null)
@ -68,7 +66,7 @@ export function TabBar({
const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
return (
<View testID={testID} style={[pal.view, styles.outer]} onLayout={onLayout}>
<View testID={testID} style={[pal.view, styles.outer]}>
<DraggableScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}