Revert "Update react-navigation (#5967)"

This reverts commit f938963462.
This commit is contained in:
Hailey
2025-07-07 15:56:59 -07:00
parent 34291131b4
commit 86a01f18d5
11 changed files with 256 additions and 284 deletions
+4 -18
View File
@@ -160,7 +160,7 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
// =
const onPressTab = React.useCallback(
(tab: 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile') => {
(tab: string) => {
const state = navigation.getState()
setDrawerOpen(false)
if (isWeb) {
@@ -168,7 +168,7 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
if (tab === 'MyProfile') {
navigation.navigate('Profile', {name: currentAccount!.handle})
} else {
// @ts-expect-error struggles with string unions, apparently
// @ts-ignore must be Home, Search, Notifications, or MyProfile
navigation.navigate(tab)
}
} else {
@@ -176,23 +176,9 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
if (tabState === TabState.InsideAtRoot) {
emitSoftReset()
} else if (tabState === TabState.Inside) {
// find the correct navigator in which to pop-to-top
const target = state.routes.find(route => route.name === `${tab}Tab`)
?.state?.key
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`}],
})
}
navigation.dispatch(StackActions.popToTop())
} else {
// @ts-ignore must be Home, Search, Notifications, or MyProfile
navigation.navigate(`${tab}Tab`)
}
}
+22 -30
View File
@@ -1,4 +1,4 @@
import {useCallback} from 'react'
import React, {type ComponentProps} from 'react'
import {type GestureResponderEvent, View} from 'react-native'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -53,7 +53,13 @@ import {
import {useDemoMode} from '#/storage/hooks/demo-mode'
import {styles} from './BottomBarStyles'
type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
type TabOptions =
| 'Home'
| 'Search'
| 'Notifications'
| 'MyProfile'
| 'Feeds'
| 'Messages'
export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession()
@@ -77,62 +83,48 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const hideBorder = useHideBottomBarBorder()
const iconWidth = 28
const showSignIn = useCallback(() => {
const showSignIn = React.useCallback(() => {
closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'none'})
}, [requestSwitchToAccount, closeAllActiveElements])
const showCreateAccount = useCallback(() => {
const showCreateAccount = React.useCallback(() => {
closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'new'})
// setShowLoggedOut(true)
}, [requestSwitchToAccount, closeAllActiveElements])
const onPressTab = useCallback(
const onPressTab = React.useCallback(
(tab: TabOptions) => {
const state = navigation.getState()
const tabState = getTabState(state, tab)
if (tabState === TabState.InsideAtRoot) {
emitSoftReset()
} else if (tabState === TabState.Inside) {
// 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`}],
})
}
})
dedupe(() => navigation.dispatch(StackActions.popToTop()))
} else {
dedupe(() => navigation.navigate(`${tab}Tab`))
}
},
[navigation, dedupe],
)
const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
const onPressSearch = useCallback(() => onPressTab('Search'), [onPressTab])
const onPressNotifications = useCallback(
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
const onPressSearch = React.useCallback(
() => onPressTab('Search'),
[onPressTab],
)
const onPressNotifications = React.useCallback(
() => onPressTab('Notifications'),
[onPressTab],
)
const onPressProfile = useCallback(() => {
const onPressProfile = React.useCallback(() => {
onPressTab('MyProfile')
}, [onPressTab])
const onPressMessages = useCallback(() => {
const onPressMessages = React.useCallback(() => {
onPressTab('Messages')
}, [onPressTab])
const onLongPressProfile = useCallback(() => {
const onLongPressProfile = React.useCallback(() => {
playHaptic()
accountSwitchControl.open()
}, [accountSwitchControl, playHaptic])
@@ -371,7 +363,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
interface BtnProps
extends Pick<
React.ComponentProps<typeof PressableScale>,
ComponentProps<typeof PressableScale>,
| 'accessible'
| 'accessibilityRole'
| 'accessibilityHint'
@@ -1,29 +1,25 @@
import * as React from 'react'
import {View} from 'react-native'
// Based on @react-navigation/native-stack/src/navigators/createNativeStackNavigator.ts
// Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts
// MIT License
// Copyright (c) 2017 React Navigation Contributors
import {
createNavigatorFactory,
type EventArg,
type NavigatorTypeBagBase,
type ParamListBase,
type StackActionHelpers,
StackActions,
type StackNavigationState,
StackRouter,
type StackRouterOptions,
type StaticConfig,
type TypedNavigator,
useNavigationBuilder,
} from '@react-navigation/native'
import {NativeStackView} from '@react-navigation/native-stack'
import {
type NativeStackNavigationEventMap,
type NativeStackNavigationOptions,
type NativeStackNavigationProp,
type NativeStackNavigatorProps,
} from '@react-navigation/native-stack'
import {NativeStackView} from '@react-navigation/native-stack'
import {type NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types'
import {PWI_ENABLED} from '#/lib/build-flags'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -52,14 +48,12 @@ function NativeStackNavigator({
id,
initialRouteName,
children,
layout,
screenListeners,
screenOptions,
screenLayout,
...rest
}: NativeStackNavigatorProps) {
// --- this is copy and pasted from the original native stack navigator ---
const {state, describe, descriptors, navigation, NavigationContent} =
const {state, descriptors, navigation, NavigationContent} =
useNavigationBuilder<
StackNavigationState<ParamListBase>,
StackRouterOptions,
@@ -70,12 +64,9 @@ function NativeStackNavigator({
id,
initialRouteName,
children,
layout,
screenListeners,
screenOptions,
screenLayout,
})
React.useEffect(
() =>
// @ts-expect-error: there may not be a tab navigator in parent
@@ -157,8 +148,7 @@ function NativeStackNavigator({
{...rest}
state={state}
navigation={navigation}
descriptors={descriptors}
describe={describe}
descriptors={newDescriptors}
/>
</View>
{isWeb && (
@@ -171,25 +161,9 @@ function NativeStackNavigator({
)
}
export function createNativeStackNavigatorWithAuth<
const ParamList extends ParamListBase,
const NavigatorID extends string | undefined = undefined,
const TypeBag extends NavigatorTypeBagBase = {
ParamList: ParamList
NavigatorID: NavigatorID
State: StackNavigationState<ParamList>
ScreenOptions: NativeStackNavigationOptionsWithAuth
EventMap: NativeStackNavigationEventMap
NavigationList: {
[RouteName in keyof ParamList]: NativeStackNavigationProp<
ParamList,
RouteName,
NavigatorID
>
}
Navigator: typeof NativeStackNavigator
},
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
>(config?: Config): TypedNavigator<TypeBag, Config> {
return createNavigatorFactory(NativeStackNavigator)(config)
}
export const createNativeStackNavigatorWithAuth = createNavigatorFactory<
StackNavigationState<ParamListBase>,
NativeStackNavigationOptionsWithAuth,
NativeStackNavigationEventMap,
typeof NativeStackNavigator
>(NativeStackNavigator)
+8 -8
View File
@@ -1,10 +1,10 @@
import {useCallback, useMemo, useState} from 'react'
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {type AppBskyActorDefs} from '@atproto/api'
import {msg, plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {
useLinkTo,
useLinkProps,
useNavigation,
useNavigationState,
} from '@react-navigation/native'
@@ -326,7 +326,7 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
const {_} = useLingui()
const {currentAccount} = useSession()
const {leftNavMinimal} = useLayoutBreakpoints()
const [pathName] = useMemo(() => router.matchPath(href), [href])
const [pathName] = React.useMemo(() => router.matchPath(href), [href])
const currentRouteInfo = useNavigationState(state => {
if (!state) {
return {name: 'Home'}
@@ -339,8 +339,8 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
(currentRouteInfo.params as CommonNavigatorParams['Profile']).name ===
currentAccount?.handle
: isTab(currentRouteInfo.name, pathName)
const linkTo = useLinkTo()
const onPressWrapped = useCallback(
const {onPress} = useLinkProps({to: href})
const onPressWrapped = React.useCallback(
(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
if (e.ctrlKey || e.metaKey || e.altKey) {
return
@@ -349,10 +349,10 @@ function NavItem({count, hasNew, href, icon, iconFilled, label}: NavItemProps) {
if (isCurrent) {
emitSoftReset()
} else {
linkTo(href)
onPress()
}
},
[linkTo, href, isCurrent],
[onPress, isCurrent],
)
return (
@@ -468,7 +468,7 @@ function ComposeBtn() {
const {openComposer} = useOpenComposer()
const {_} = useLingui()
const {leftNavMinimal} = useLayoutBreakpoints()
const [isFetchingHandle, setIsFetchingHandle] = useState(false)
const [isFetchingHandle, setIsFetchingHandle] = React.useState(false)
const fetchHandle = useFetchHandle()
const getProfileHandle = async () => {