fix pop-to-top behaviour
This commit is contained in:
@@ -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'
|
||||||
|
|||||||
Reference in New Issue
Block a user