acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Revert "Update react-navigation (#5967)"

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+62 -42
View File
@@ -103,7 +103,7 @@ import {
import {Wizard} from '#/screens/StarterPack/Wizard'
import TopicScreen from '#/screens/Topic'
import {VideoFeed} from '#/screens/VideoFeed'
import {type Theme, useTheme} from '#/alf'
import {useTheme} from '#/alf'
import {
EmailDialogScreenID,
useEmailDialogControl,
@@ -140,7 +140,7 @@ const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
/**
* These "common screens" are reused across stacks.
*/
function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
const title = (page: MessageDescriptor) =>
bskyTitle(i18n._(page), unreadCountLabel)
@@ -610,10 +610,6 @@ function TabsNavigator() {
tabBar={tabBar}>
<Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
<Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
<Tab.Screen
name="MessagesTab"
getComponent={() => MessagesTabNavigator}
/>
<Tab.Screen
name="NotificationsTab"
getComponent={() => NotificationsTabNavigator}
@@ -622,26 +618,29 @@ function TabsNavigator() {
name="MyProfileTab"
getComponent={() => MyProfileTabNavigator}
/>
<Tab.Screen
name="MessagesTab"
getComponent={() => MessagesTabNavigator}
/>
</Tab.Navigator>
)
}
function screenOptions(t: Theme) {
return {
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
} as const
}
function HomeTabNavigator() {
const t = useTheme()
return (
<HomeTab.Navigator screenOptions={screenOptions(t)} initialRouteName="Home">
<HomeTab.Navigator
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
<HomeTab.Screen name="Start" getComponent={() => HomeScreen} />
{commonScreens(HomeTab as typeof Flat)}
{commonScreens(HomeTab)}
</HomeTab.Navigator>
)
}
@@ -650,10 +649,15 @@ function SearchTabNavigator() {
const t = useTheme()
return (
<SearchTab.Navigator
screenOptions={screenOptions(t)}
initialRouteName="Search">
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
{commonScreens(SearchTab as typeof Flat)}
{commonScreens(SearchTab as typeof HomeTab)}
</SearchTab.Navigator>
)
}
@@ -662,14 +666,19 @@ function NotificationsTabNavigator() {
const t = useTheme()
return (
<NotificationsTab.Navigator
screenOptions={screenOptions(t)}
initialRouteName="Notifications">
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<NotificationsTab.Screen
name="Notifications"
getComponent={() => NotificationsScreen}
options={{requireAuth: true}}
/>
{commonScreens(NotificationsTab as typeof Flat)}
{commonScreens(NotificationsTab as typeof HomeTab)}
</NotificationsTab.Navigator>
)
}
@@ -678,16 +687,23 @@ function MyProfileTabNavigator() {
const t = useTheme()
return (
<MyProfileTab.Navigator
screenOptions={screenOptions(t)}
initialRouteName="MyProfile">
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<MyProfileTab.Screen
// MyProfile is not in AllNavigationParams - asserting as Profile at least
// gives us typechecking for initialParams -sfn
name={'MyProfile' as 'Profile'}
// @ts-ignore // TODO: fix this broken type in ProfileScreen
name="MyProfile"
getComponent={() => ProfileScreen}
initialParams={{name: 'me', hideBackButton: true}}
initialParams={{
name: 'me',
hideBackButton: true,
}}
/>
{commonScreens(MyProfileTab as unknown as typeof Flat)}
{commonScreens(MyProfileTab as typeof HomeTab)}
</MyProfileTab.Navigator>
)
}
@@ -696,8 +712,13 @@ function MessagesTabNavigator() {
const t = useTheme()
return (
<MessagesTab.Navigator
screenOptions={screenOptions(t)}
initialRouteName="Messages">
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<MessagesTab.Screen
name="Messages"
getComponent={() => MessagesScreen}
@@ -706,7 +727,7 @@ function MessagesTabNavigator() {
animationTypeForReplace: route.params?.animation ?? 'push',
})}
/>
{commonScreens(MessagesTab as typeof Flat)}
{commonScreens(MessagesTab as typeof HomeTab)}
</MessagesTab.Navigator>
)
}
@@ -724,7 +745,13 @@ const FlatNavigator = () => {
return (
<Flat.Navigator
screenListeners={screenListeners}
screenOptions={screenOptions(t)}>
screenOptions={{
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: t.atoms.bg,
}}>
<Flat.Screen
name="Home"
getComponent={() => HomeScreen}
@@ -750,7 +777,7 @@ const FlatNavigator = () => {
getComponent={() => HomeScreen}
options={{title: title(msg`Home`)}}
/>
{commonScreens(Flat, numUnread)}
{commonScreens(Flat as typeof HomeTab, numUnread)}
</Flat.Navigator>
)
}
@@ -857,14 +884,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
logModuleInitTime()
onReady()
logger.metric('router:navigate', {}, {statsig: false})
}}
// WARNING: Implicit navigation to nested navigators is depreciated in React Navigation 7.x
// However, there's a fair amount of places we do that, especially in when popping to the top of stacks.
// See BottomBar.tsx for an example of how to handle nested navigators in the tabs correctly.
// I'm scared of missing a spot (esp. with push notifications etc) so let's enable this legacy behaviour for now.
// We will need to confirm we handle nested navigators correctly by the time we migrate to React Navigation 8.x
// -sfn
navigationInChildEnabled>
}}>
{children}
</NavigationContainer>
</>
src/components/Link.tsx
+10 -24
View File
@@ -1,10 +1,7 @@
import React, {useMemo} from 'react'
import React from 'react'
import {type GestureResponderEvent} from 'react-native'
import {sanitizeUrl} from '@braintree/sanitize-url'
import {
type LinkProps as RNLinkProps,
StackActions,
} from '@react-navigation/native'
import {StackActions, useLinkProps} from '@react-navigation/native'
import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
@@ -32,11 +29,12 @@ import {useGlobalDialogsControlContext} from './dialogs/Context'
*/
export {useButtonContext as useLinkContext} from '#/components/Button'
type BaseLinkProps = {
type BaseLinkProps = Pick<
Parameters<typeof useLinkProps<AllNavigatorParams>>[0],
'to'
> & {
testID?: string
to: RNLinkProps<AllNavigatorParams> | string
/**
* The React Navigation `StackAction` to perform when the link is pressed.
*/
@@ -95,22 +93,10 @@ export function useLink({
shouldProxy?: boolean
}) {
const navigation = useNavigationDeduped()
const href = useMemo(() => {
return typeof to === 'string'
? convertBskyAppUrlIfNeeded(sanitizeUrl(to))
: to.screen
? router.matchName(to.screen)?.build(to.params)
: to.href
? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
: undefined
}, [to])
if (!href) {
throw new Error(
'Could not resolve screen. Link `to` prop must be a string or an object with `screen` and `params` properties',
)
}
const {href} = useLinkProps<AllNavigatorParams>({
to:
typeof to === 'string' ? convertBskyAppUrlIfNeeded(sanitizeUrl(to)) : to,
})
const isExternal = isExternalUrl(href)
const {closeModal} = useModalControls()
const {linkWarningDialogControl} = useGlobalDialogsControlContext()
src/lib/hooks/useNavigationDeduped.ts
+38 -9
View File
@@ -1,8 +1,10 @@
import {useMemo} from 'react'
import React from 'react'
import {useNavigation} from '@react-navigation/core'
import {type NavigationState} from '@react-navigation/native'
import {type NavigationAction} from '@react-navigation/routers'
import {useDedupe} from '#/lib/hooks/useDedupe'
import {type NavigationProp} from '#/lib/routes/types'
import {type AllNavigatorParams, type NavigationProp} from '#/lib/routes/types'
export type DebouncedNavigationProp = Pick<
NavigationProp,
@@ -21,19 +23,46 @@ export function useNavigationDeduped() {
const navigation = useNavigation<NavigationProp>()
const dedupe = useDedupe()
return useMemo<DebouncedNavigationProp>(
() => ({
push: (...args: Parameters<typeof navigation.push>) => {
return React.useMemo(
(): DebouncedNavigationProp => ({
// Types from @react-navigation/routers/lib/typescript/src/StackRouter.ts
push: <RouteName extends keyof AllNavigatorParams>(
...args: undefined extends AllNavigatorParams[RouteName]
?
| [screen: RouteName]
| [screen: RouteName, params: AllNavigatorParams[RouteName]]
: [screen: RouteName, params: AllNavigatorParams[RouteName]]
) => {
dedupe(() => navigation.push(...args))
},
navigate: (...args: Parameters<typeof navigation.navigate>) => {
// Types from @react-navigation/core/src/types.tsx
navigate: <RouteName extends keyof AllNavigatorParams>(
...args: RouteName extends unknown
? undefined extends AllNavigatorParams[RouteName]
?
| [screen: RouteName]
| [screen: RouteName, params: AllNavigatorParams[RouteName]]
: [screen: RouteName, params: AllNavigatorParams[RouteName]]
: never
) => {
dedupe(() => navigation.navigate(...args))
},
replace: (...args: Parameters<typeof navigation.replace>) => {
// Types from @react-navigation/routers/lib/typescript/src/StackRouter.ts
replace: <RouteName extends keyof AllNavigatorParams>(
...args: undefined extends AllNavigatorParams[RouteName]
?
| [screen: RouteName]
| [screen: RouteName, params: AllNavigatorParams[RouteName]]
: [screen: RouteName, params: AllNavigatorParams[RouteName]]
) => {
dedupe(() => navigation.replace(...args))
},
dispatch: (...args: Parameters<typeof navigation.dispatch>) => {
dedupe(() => navigation.dispatch(...args))
dispatch: (
action:
| NavigationAction
| ((state: NavigationState) => NavigationAction),
) => {
dedupe(() => navigation.dispatch(action))
},
popToTop: () => {
dedupe(() => navigation.popToTop())
src/lib/routes/types.ts
+1 -1
View File
@@ -105,7 +105,7 @@ export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
}
export type MyProfileTabNavigatorParams = CommonNavigatorParams & {
MyProfile: {name: 'me'; hideBackButton: true}
MyProfile: undefined
}
export type MessagesTabNavigatorParams = CommonNavigatorParams & {
src/view/com/util/Link.tsx
+31 -36
View File
@@ -1,4 +1,4 @@
import {memo, useCallback, useMemo} from 'react'
import React, {type ComponentProps, memo, useMemo} from 'react'
import {
type GestureResponderEvent,
Platform,
@@ -11,7 +11,7 @@ import {
type ViewStyle,
} from 'react-native'
import {sanitizeUrl} from '@braintree/sanitize-url'
import {StackActions} from '@react-navigation/native'
import {StackActions, useLinkProps} from '@react-navigation/native'
import {
type DebouncedNavigationProp,
@@ -39,7 +39,7 @@ type Event =
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
| GestureResponderEvent
interface Props extends React.ComponentProps<typeof TouchableOpacity> {
interface Props extends ComponentProps<typeof TouchableOpacity> {
testID?: string
style?: StyleProp<ViewStyle>
href?: string
@@ -48,7 +48,7 @@ interface Props extends React.ComponentProps<typeof TouchableOpacity> {
hoverStyle?: StyleProp<ViewStyle>
noFeedback?: boolean
asAnchor?: boolean
dataSet?: any
dataSet?: Object | undefined
anchorNoUnderline?: boolean
navigationAction?: 'push' | 'replace' | 'navigate'
onPointerEnter?: () => void
@@ -70,7 +70,6 @@ export const Link = memo(function Link({
onBeforePress,
accessibilityActions,
onAccessibilityAction,
dataSet: dataSetProp,
...props
}: Props) {
const t = useTheme()
@@ -79,7 +78,7 @@ export const Link = memo(function Link({
const anchorHref = asAnchor ? sanitizeUrl(href) : undefined
const openLink = useOpenLink()
const onPress = useCallback(
const onPress = React.useCallback(
(e?: Event) => {
onBeforePress?.()
if (typeof href === 'string') {
@@ -101,14 +100,6 @@ export const Link = memo(function Link({
{name: 'activate', label: title},
]
const dataSet = useMemo(() => {
const ds = {...dataSetProp}
if (anchorNoUnderline) {
ds.noUnderline = 1
}
return ds
}, [dataSetProp, anchorNoUnderline])
if (noFeedback) {
return (
<WebAuxClickWrapper>
@@ -139,6 +130,17 @@ export const Link = memo(function Link({
)
}
if (anchorNoUnderline) {
// @ts-ignore web only -prf
props.dataSet = props.dataSet || {}
// @ts-ignore web only -prf
props.dataSet.noUnderline = 1
}
if (title && !props.accessibilityLabel) {
props.accessibilityLabel = title
}
const Com = props.hoverStyle ? PressableWithHover : Pressable
return (
<Com
@@ -147,11 +149,8 @@ export const Link = memo(function Link({
onPress={onPress}
accessible={accessible}
accessibilityRole="link"
accessibilityLabel={props.accessibilityLabel ?? title}
accessibilityHint={props.accessibilityHint}
// @ts-ignore web only -prf
href={anchorHref}
dataSet={dataSet}
{...props}>
{children ? children : <Text>{title || 'link'}</Text>}
</Com>
@@ -166,14 +165,14 @@ export const TextLink = memo(function TextLink({
text,
numberOfLines,
lineHeight,
dataSet: dataSetProp,
dataSet,
title,
onPress: onPressProp,
onPress,
onBeforePress,
disableMismatchWarning,
navigationAction,
anchorNoUnderline,
...props
...orgProps
}: {
testID?: string
type?: TypographyVariant
@@ -189,6 +188,7 @@ export const TextLink = memo(function TextLink({
anchorNoUnderline?: boolean
onBeforePress?: () => void
} & TextProps) {
const {...props} = useLinkProps({to: sanitizeUrl(href)})
const navigation = useNavigationDeduped()
const {closeModal} = useModalControls()
const {linkWarningDialogControl} = useGlobalDialogsControlContext()
@@ -198,15 +198,12 @@ export const TextLink = memo(function TextLink({
console.error('Unable to detect mismatching label')
}
const dataSet = useMemo(() => {
const ds = {...dataSetProp}
if (anchorNoUnderline) {
ds.noUnderline = 1
}
return ds
}, [dataSetProp, anchorNoUnderline])
if (anchorNoUnderline) {
dataSet = dataSet ?? {}
dataSet.noUnderline = 1
}
const onPress = useCallback(
props.onPress = React.useCallback(
(e?: Event) => {
const requiresWarning =
!disableMismatchWarning &&
@@ -228,10 +225,10 @@ export const TextLink = memo(function TextLink({
return
}
onBeforePress?.()
if (onPressProp) {
if (onPress) {
e?.preventDefault?.()
// @ts-expect-error function signature differs by platform -prf
return onPressProp()
// @ts-ignore function signature differs by platform -prf
return onPress()
}
return onPressInner(
closeModal,
@@ -244,7 +241,7 @@ export const TextLink = memo(function TextLink({
},
[
onBeforePress,
onPressProp,
onPress,
closeModal,
navigation,
href,
@@ -277,10 +274,8 @@ export const TextLink = memo(function TextLink({
title={title}
// @ts-ignore web only -prf
hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
onPress={onPress}
accessibilityRole="link"
href={convertBskyAppUrlIfNeeded(sanitizeUrl(href))}
{...props}>
{...props}
{...orgProps}>
{text}
</Text>
)
src/view/shell/Drawer.tsx
+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`)
}
}
src/view/shell/bottom-bar/BottomBar.tsx
+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'
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+11 -37
View File
@@ -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)
src/view/shell/desktop/LeftNav.tsx
+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 () => {