diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ProgressGuide/FollowDialog.tsx | 26 |
1 files changed, 6 insertions, 20 deletions
diff --git a/src/components/ProgressGuide/FollowDialog.tsx b/src/components/ProgressGuide/FollowDialog.tsx index cafa958cc..06487ca34 100644 --- a/src/components/ProgressGuide/FollowDialog.tsx +++ b/src/components/ProgressGuide/FollowDialog.tsx @@ -471,7 +471,6 @@ let Tabs = ({ contentContainerStyle?: StyleProp<ViewStyle> }): React.ReactNode => { const listRef = useRef<ScrollView>(null) - const [scrollX, setScrollX] = useState(0) const [totalWidth, setTotalWidth] = useState(0) const pendingTabOffsets = useRef<{x: number; width: number}[]>([]) const [tabOffsets, setTabOffsets] = useState<{x: number; width: number}[]>([]) @@ -490,24 +489,11 @@ let Tabs = ({ function scrollIntoViewIfNeeded(index: number) { const btnLayout = tabOffsets[index] if (!btnLayout) return - - const viewportLeftEdge = scrollX - const viewportRightEdge = scrollX + totalWidth - const shouldScrollToLeftEdge = viewportLeftEdge > btnLayout.x - const shouldScrollToRightEdge = - viewportRightEdge < btnLayout.x + btnLayout.width - - if (shouldScrollToLeftEdge) { - listRef.current?.scrollTo({ - x: btnLayout.x - tokens.space.lg, - animated: true, - }) - } else if (shouldScrollToRightEdge) { - listRef.current?.scrollTo({ - x: btnLayout.x - totalWidth + btnLayout.width + tokens.space.lg, - animated: true, - }) - } + listRef.current?.scrollTo({ + // centered + x: btnLayout.x - (totalWidth / 2 - btnLayout.width / 2), + animated: true, + }) } function handleSelectTab(index: number) { @@ -539,7 +525,7 @@ let Tabs = ({ } onLayout={evt => setTotalWidth(evt.nativeEvent.layout.width)} scrollEventThrottle={200} // big throttle - onScroll={evt => setScrollX(evt.nativeEvent.contentOffset.x)}> + > {interests.map((interest, i) => { const active = interest === selectedInterest && !hasSearchText return ( |