Remove tab bar autoscroll

This will be replaced by a different mechanism.
This commit is contained in:
Dan Abramov
2024-11-26 20:36:16 +00:00
parent 82b227e64a
commit 6acbe15f54
+2 -30
View File
@@ -1,5 +1,5 @@
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import {useCallback, useMemo, useRef} from 'react'
import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native' import {ScrollView, StyleSheet, View} from 'react-native'
import {usePalette} from '#/lib/hooks/usePalette' import {usePalette} from '#/lib/hooks/usePalette'
import {PressableWithHover} from '../util/PressableWithHover' import {PressableWithHover} from '../util/PressableWithHover'
@@ -14,10 +14,6 @@ export interface TabBarProps {
onPressSelected?: (index: number) => void onPressSelected?: (index: number) => void
} }
// How much of the previous/next item we're showing
// to give the user a hint there's more to scroll.
const OFFSCREEN_ITEM_WIDTH = 20
export function TabBar({ export function TabBar({
testID, testID,
selectedPage, selectedPage,
@@ -28,21 +24,11 @@ export function TabBar({
}: TabBarProps) { }: TabBarProps) {
const pal = usePalette('default') const pal = usePalette('default')
const scrollElRef = useRef<ScrollView>(null) const scrollElRef = useRef<ScrollView>(null)
const [itemXs, setItemXs] = useState<number[]>([])
const indicatorStyle = useMemo( const indicatorStyle = useMemo(
() => ({borderBottomColor: indicatorColor || pal.colors.link}), () => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal], [indicatorColor, pal],
) )
useEffect(() => {
// On native, the primary interaction is swiping.
// We adjust the scroll little by little on every tab change.
// Scroll into view but keep the end of the previous item visible.
let x = itemXs[selectedPage] || 0
x = Math.max(0, x - OFFSCREEN_ITEM_WIDTH)
scrollElRef.current?.scrollTo({x})
}, [scrollElRef, itemXs, selectedPage])
const onPressItem = useCallback( const onPressItem = useCallback(
(index: number) => { (index: number) => {
onSelect?.(index) onSelect?.(index)
@@ -53,19 +39,6 @@ export function TabBar({
[onSelect, selectedPage, onPressSelected], [onSelect, selectedPage, onPressSelected],
) )
// calculates the x position of each item on mount and on layout change
const onItemLayout = React.useCallback(
(e: LayoutChangeEvent, index: number) => {
const x = e.nativeEvent.layout.x
setItemXs(prev => {
const Xs = [...prev]
Xs[index] = x
return Xs
})
},
[],
)
return ( return (
<View <View
testID={testID} testID={testID}
@@ -83,7 +56,6 @@ export function TabBar({
<PressableWithHover <PressableWithHover
testID={`${testID}-selector-${i}`} testID={`${testID}-selector-${i}`}
key={`${item}-${i}`} key={`${item}-${i}`}
onLayout={e => onItemLayout(e, i)}
style={styles.item} style={styles.item}
hoverStyle={pal.viewLight} hoverStyle={pal.viewLight}
onPress={() => onPressItem(i)} onPress={() => onPressItem(i)}