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:
parent
4c00fc576d
commit
d715246e26
4 changed files with 48 additions and 28 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue