fix pop-to-top behaviour

This commit is contained in:
Samuel Newman
2025-05-28 16:02:44 +03:00
parent 571d16e8cf
commit 2e260be80c
+30 -22
View File
@@ -1,4 +1,4 @@
import React, {type ComponentProps} from 'react' import {useCallback} from 'react'
import {type GestureResponderEvent, View} from 'react-native' import {type GestureResponderEvent, View} from 'react-native'
import Animated from 'react-native-reanimated' import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -52,13 +52,7 @@ import {
import {useDemoMode} from '#/storage/hooks/demo-mode' import {useDemoMode} from '#/storage/hooks/demo-mode'
import {styles} from './BottomBarStyles' import {styles} from './BottomBarStyles'
type TabOptions = type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
| 'Home'
| 'Search'
| 'Notifications'
| 'MyProfile'
| 'Feeds'
| 'Messages'
export function BottomBar({navigation}: BottomTabBarProps) { export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
@@ -81,48 +75,62 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const gate = useGate() const gate = useGate()
const iconWidth = 28 const iconWidth = 28
const showSignIn = React.useCallback(() => { const showSignIn = useCallback(() => {
closeAllActiveElements() closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'none'}) requestSwitchToAccount({requestedAccount: 'none'})
}, [requestSwitchToAccount, closeAllActiveElements]) }, [requestSwitchToAccount, closeAllActiveElements])
const showCreateAccount = React.useCallback(() => { const showCreateAccount = useCallback(() => {
closeAllActiveElements() closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'new'}) requestSwitchToAccount({requestedAccount: 'new'})
// setShowLoggedOut(true) // setShowLoggedOut(true)
}, [requestSwitchToAccount, closeAllActiveElements]) }, [requestSwitchToAccount, closeAllActiveElements])
const onPressTab = React.useCallback( const onPressTab = useCallback(
(tab: TabOptions) => { (tab: TabOptions) => {
const state = navigation.getState() const state = navigation.getState()
const tabState = getTabState(state, tab) const tabState = getTabState(state, tab)
if (tabState === TabState.InsideAtRoot) { if (tabState === TabState.InsideAtRoot) {
emitSoftReset() emitSoftReset()
} else if (tabState === TabState.Inside) { } else if (tabState === TabState.Inside) {
dedupe(() => navigation.dispatch(StackActions.popToTop())) // find the correct navigator in which to pop-to-top
const target = state.routes.find(route => route.name === `${tab}Tab`)
?.state?.key
dedupe(() => {
if (target) {
// if we found it, trigger pop-to-top
navigation.dispatch({
...StackActions.popToTop(),
target,
})
} else {
// fallback: reset navigation
navigation.reset({
index: 0,
routes: [{name: `${tab}Tab`}],
})
}
})
} else { } else {
dedupe(() => navigation.navigate(`${tab}Tab`)) dedupe(() => navigation.navigate(`${tab}Tab`))
} }
}, },
[navigation, dedupe], [navigation, dedupe],
) )
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab]) const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
const onPressSearch = React.useCallback( const onPressSearch = useCallback(() => onPressTab('Search'), [onPressTab])
() => onPressTab('Search'), const onPressNotifications = useCallback(
[onPressTab],
)
const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'), () => onPressTab('Notifications'),
[onPressTab], [onPressTab],
) )
const onPressProfile = React.useCallback(() => { const onPressProfile = useCallback(() => {
onPressTab('MyProfile') onPressTab('MyProfile')
}, [onPressTab]) }, [onPressTab])
const onPressMessages = React.useCallback(() => { const onPressMessages = useCallback(() => {
onPressTab('Messages') onPressTab('Messages')
}, [onPressTab]) }, [onPressTab])
const onLongPressProfile = React.useCallback(() => { const onLongPressProfile = useCallback(() => {
playHaptic() playHaptic()
accountSwitchControl.open() accountSwitchControl.open()
}, [accountSwitchControl, playHaptic]) }, [accountSwitchControl, playHaptic])
@@ -361,7 +369,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
interface BtnProps interface BtnProps
extends Pick< extends Pick<
ComponentProps<typeof PressableScale>, React.ComponentProps<typeof PressableScale>,
| 'accessible' | 'accessible'
| 'accessibilityRole' | 'accessibilityRole'
| 'accessibilityHint' | 'accessibilityHint'