navigation 8

shared/chat/conversation/input-area/normal/index.tsx

@@ -126,7 +126,7 @@ const doInjectText = (inputRef: React.RefObject<InputRef | null>, text: string,
 }
 
 const ConnectedPlatformInput = function ConnectedPlatformInput() {
-  const route = useRoute<RootRouteProps<'chatConversation'> | RootRouteProps<'chatRoot'>>()
+  const route = useRoute() as RootRouteProps<'chatConversation'> | RootRouteProps<'chatRoot'>
   const params = getRouteParamsFromRoute<'chatConversation' | 'chatRoot'>(route)
   const infoPanelShowing = !!(params && typeof params === 'object' && 'infoPanel' in params && params.infoPanel)
   const uiData = InputState.useConversationInput(

shared/chat/conversation/thread-load-status-context.test.tsx

@@ -6,7 +6,6 @@ import * as T from '@/constants/types'
 import {notifyEngineActionListeners} from '@/engine/action-listener'
 import {resetAllStores} from '@/util/zustand'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useShellState} from '@/stores/shell'
 import {
   ConversationThreadLoadStatusProvider,
   useThreadLoadStatus,
@@ -15,20 +14,6 @@ import {
 } from './thread-load-status-context'
 import {ConversationThreadProvider} from './thread-context'
 
-let mockRouteFocused = true
-let mockVisibleScreenName: string | undefined
-jest.mock('@react-navigation/core', () => ({
-  createNavigationContainerRef: jest.fn(() => ({current: null})),
-  useIsFocused: () => mockRouteFocused,
-}))
-jest.mock('@/constants/router', () => {
-  const actual = jest.requireActual('@/constants/router')
-  return {
-    ...actual,
-    getVisibleScreen: () => (mockVisibleScreenName ? {name: mockVisibleScreenName} : undefined),
-  }
-})
-
 jest.mock('@/stores/inbox-rows', () => ({
   flushInboxRowUpdates: jest.fn(),
   getInboxRowTrustedState: jest.fn(() => undefined),
@@ -53,8 +38,6 @@ const flushPromises = async () => {
 }
 
 beforeEach(() => {
-  mockRouteFocused = true
-  mockVisibleScreenName = undefined
   jest.spyOn(T.RPCChat, 'localRequestInboxUnboxRpcPromise').mockResolvedValue(undefined)
   useCurrentUserState.getState().dispatch.setBootstrap({
     deviceID: 'device-id',
@@ -143,71 +126,3 @@ test('mounted stale-thread reload reports status through the provider', async ()
 
   expect(result.current).toBe(T.RPCChat.UIChatThreadStatusTyp.server)
 })
-
-test('mounted route focus reload reports status through the provider', async () => {
-  mockRouteFocused = false
-  jest.spyOn(T.RPCChat, 'localGetThreadNonblockRpcListener').mockImplementation(async p => {
-    p.incomingCallMap['chat.1.chatUi.chatThreadStatus']?.({
-      status: {typ: T.RPCChat.UIChatThreadStatusTyp.server},
-    })
-    await Promise.resolve()
-    return {offline: false}
-  })
-  const {rerender, result} = renderHook(() => useThreadLoadStatus(), {wrapper})
-
-  act(() => {
-    mockRouteFocused = true
-    rerender()
-  })
-  await act(async () => {
-    await flushPromises()
-  })
-
-  expect(result.current).toBe(T.RPCChat.UIChatThreadStatusTyp.server)
-})
-
-test('mounted route focus skips reload after returning from emoji picker', async () => {
-  mockRouteFocused = false
-  mockVisibleScreenName = 'chatChooseEmoji'
-  const getThread = jest.spyOn(T.RPCChat, 'localGetThreadNonblockRpcListener').mockResolvedValue({
-    offline: false,
-  })
-  const {rerender} = renderHook(() => useThreadLoadStatus(), {wrapper})
-
-  act(() => {
-    mockRouteFocused = true
-    mockVisibleScreenName = undefined
-    rerender()
-  })
-  await act(async () => {
-    await flushPromises()
-  })
-
-  expect(getThread).not.toHaveBeenCalled()
-})
-
-test('mounted app foreground does not reload the thread', async () => {
-  const getThread = jest.spyOn(T.RPCChat, 'localGetThreadNonblockRpcListener').mockImplementation(async p => {
-    p.incomingCallMap['chat.1.chatUi.chatThreadStatus']?.({
-      status: {typ: T.RPCChat.UIChatThreadStatusTyp.server},
-    })
-    await Promise.resolve()
-    return {offline: false}
-  })
-  renderHook(() => useThreadLoadStatus(), {wrapper})
-
-  act(() => {
-    useShellState.getState().dispatch.changedFocus(false)
-  })
-  await act(async () => {
-    await flushPromises()
-  })
-  act(() => {
-    useShellState.getState().dispatch.changedFocus(true)
-  })
-  await act(async () => {
-    await flushPromises()
-  })
-
-  expect(getThread).not.toHaveBeenCalled()
-})

shared/chat/conversation/thread-load-status-context.tsx

@@ -130,7 +130,6 @@ export const ConversationThreadLoadStatusProvider = (
     })
   }
 
-
   useEngineActionListener('chat.1.NotifyChat.ChatThreadsStale', action => {
     const hasStaleThread = (action.payload.params.updates ?? []).some(
       update => T.Chat.conversationIDToKey(update.convID) === id

shared/chat/conversation/thread-search-route.tsx

@@ -30,7 +30,7 @@ const isThreadSearchRouteParams = (
     Object.prototype.hasOwnProperty.call(params, 'inputAction'))
 
 export const useChatThreadRouteParams = (): ThreadSearchRouteProps | undefined => {
-  const route = useRoute<RootRouteProps<'chatConversation'> | RootRouteProps<'chatRoot'>>()
+  const route = useRoute() as RootRouteProps<'chatConversation'> | RootRouteProps<'chatRoot'>
   const params = getRouteParamsFromRoute<'chatConversation' | 'chatRoot'>(route)
   return isThreadSearchRouteParams(params) ? params : undefined
 }

shared/chat/inbox-and-conversation-header.tsx

@@ -28,7 +28,7 @@ const Header = () => {
 }
 
 const Header2 = () => {
-  const {params} = useRoute<ChatRootRoute>()
+  const {params} = useRoute() as ChatRootRoute
   const username = useCurrentUserState(s => s.username)
   const infoPanelShowing = !!params.infoPanel
   const conversationIDKey = params.conversationIDKey ?? Chat.noConversationIDKey

shared/chat/inbox/get-options.tsx

@@ -38,7 +38,7 @@ const desktopOptions = {
 }
 
 export default {
-  freezeOnBlur: false,
+  inactiveBehavior: 'none' as const,
   ...(Kb.Styles.isMobile ? mobileOptions : desktopOptions),
   headerTitle: () => (
     <Kb.Text type="BodyBig" center={true}>

shared/chat/inbox/index.native.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
 import {useChosenChannelsTeamnames} from '@/chat/conversation/manage-channels-badge'
 import {useNavigation, type NavigationProp} from '@react-navigation/native'
-import type {NativeBottomTabNavigationProp} from '@react-navigation/bottom-tabs/unstable'
+import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'
 import {PerfProfiler} from '@/perf/react-profiler'
 import * as RowSizes from './row/sizes'
 import BigTeamsDivider from './row/big-teams-divider'
@@ -85,7 +85,7 @@ function InboxBody(p: ControlledInboxProps) {
   const {unreadIndices, unreadTotal, rows, smallTeamsExpanded, isSearching, allowShowFloatingButton} = inbox
   const {neverLoaded, onNewChat, inboxNumSmallRows, setInboxNumSmallRows} = inbox
   const headComponent = C.isTablet ? null : <SearchRow search={search} showSearch={C.isMobile} />
-  const navigation = useNavigation<NavigationProp<RootParamList, 'chatRoot'>>()
+  const navigation = useNavigation() as NavigationProp<RootParamList, 'chatRoot'>
   const chosenChannelsTeamnames = useChosenChannelsTeamnames()
   const listExtraData = React.useMemo(
     () => ({
@@ -196,7 +196,7 @@ function InboxBody(p: ControlledInboxProps) {
     if (!useTabBottomAccessory) {
       return
     }
-    const parent = navigation.getParent<NativeBottomTabNavigationProp<RootParamList> | undefined>()
+    const parent = navigation.getParent() as BottomTabNavigationProp<RootParamList> | undefined
     parent?.setOptions({bottomAccessory: showFloatingDivider ? renderBottomAccessory : undefined})
     return () => {
       parent?.setOptions({bottomAccessory: undefined})

shared/crypto/decrypt.tsx

@@ -136,7 +136,7 @@ export const useDecryptState = (params?: CryptoInputRouteParams) => {
 }
 
 export const DecryptInput = (_props: unknown) => {
-  const {params} = useRoute<RootRouteProps<'decryptTab'>>()
+  const {params} = useRoute() as RootRouteProps<'decryptTab'>
   const controller = useDecryptState(params)
   const navigateAppend = C.Router2.navigateAppend
 
@@ -207,7 +207,7 @@ export const DecryptOutput = ({route}: {route: {params: CommonOutputRouteParams}
 }
 
 export const DecryptIO = () => {
-  const {params} = useRoute<RootRouteProps<'decryptTab'>>()
+  const {params} = useRoute() as RootRouteProps<'decryptTab'>
   const controller = useDecryptState(params)
   return (
     <DragAndDrop

shared/crypto/encrypt.tsx

@@ -555,7 +555,7 @@ const EncryptOutputBody = ({params}: {params: EncryptOutputRouteParams}) => (
 )
 
 export const EncryptInput = (_props: unknown) => {
-  const {params} = useRoute<RootRouteProps<'encryptTab'>>()
+  const {params} = useRoute() as RootRouteProps<'encryptTab'>
   return <EncryptInputBody params={params} />
 }
 
@@ -564,7 +564,7 @@ export const EncryptOutput = ({route}: {route: {params: EncryptOutputRouteParams
 }
 
 export const EncryptIO = () => {
-  const {params} = useRoute<RootRouteProps<'encryptTab'>>()
+  const {params} = useRoute() as RootRouteProps<'encryptTab'>
   const controller = useEncryptScreenState(params)
   const appendEncryptRecipientsBuilder = C.Router2.appendEncryptRecipientsBuilder
 

shared/crypto/sign.tsx

@@ -144,7 +144,7 @@ const SignOutputBanner = ({state}: {state: CommonOutputRouteParams}) => (
 )
 
 export const SignInput = (_props: unknown) => {
-  const {params} = useRoute<RootRouteProps<'signTab'>>()
+  const {params} = useRoute() as RootRouteProps<'signTab'>
   const controller = useSignState(params)
   const blurCBRef = React.useRef(() => {})
   const navigateAppend = C.Router2.navigateAppend
@@ -217,7 +217,7 @@ export const SignOutput = ({route}: {route: {params: CommonOutputRouteParams}})
 }
 
 export const SignIO = () => {
-  const {params} = useRoute<RootRouteProps<'signTab'>>()
+  const {params} = useRoute() as RootRouteProps<'signTab'>
   const controller = useSignState(params)
   return (
     <DragAndDrop

shared/crypto/verify.tsx

@@ -136,7 +136,7 @@ export const useVerifyState = (params?: CryptoInputRouteParams) => {
 }
 
 export const VerifyInput = (_props: unknown) => {
-  const {params} = useRoute<RootRouteProps<'verifyTab'>>()
+  const {params} = useRoute() as RootRouteProps<'verifyTab'>
   const controller = useVerifyState(params)
   const navigateAppend = C.Router2.navigateAppend
 
@@ -204,7 +204,7 @@ export const VerifyOutput = ({route}: {route: {params: CommonOutputRouteParams}}
 }
 
 export const VerifyIO = () => {
-  const {params} = useRoute<RootRouteProps<'verifyTab'>>()
+  const {params} = useRoute() as RootRouteProps<'verifyTab'>
   const controller = useVerifyState(params)
   return (
     <DragAndDrop

shared/devices/index.tsx

@@ -45,7 +45,7 @@ const splitAndSortDevices = (devices: ReadonlyArray<T.Devices.Device>) =>
 const itemHeight = {height: 48, type: 'fixed'} as const
 
 function ReloadableDevices() {
-  const navigation = useNavigation<NativeStackNavigationProp<DevicesRootParamList, 'devicesRoot'>>()
+  const navigation = useNavigation() as unknown as NativeStackNavigationProp<DevicesRootParamList, 'devicesRoot'>
   const [devices, setDevices] = React.useState<Array<T.Devices.Device>>([])
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyDevices)
   const loadDevicesRPC = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise)

shared/fs/footer/upload-container.native.tsx

@@ -5,7 +5,7 @@ import * as T from '@/constants/types'
 import {useColorScheme, Image} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 import {useIsFocused} from '@react-navigation/core'
-import type {NativeBottomTabNavigationProp} from '@react-navigation/bottom-tabs/unstable'
+import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'
 import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
 import type {RootParamList} from '@/router-v2/route-params'
 import Upload from './upload'
@@ -79,7 +79,7 @@ const UploadContainer = () => {
 
   React.useEffect(() => {
     if (!useTabBottomAccessory || !isFocused) return
-    const parent = navigation.getParent<NativeBottomTabNavigationProp<RootParamList> | undefined>()
+    const parent = navigation.getParent() as BottomTabNavigationProp<RootParamList> | undefined
     parent?.setOptions({bottomAccessory: np.showing ? renderBottomAccessory : undefined})
     return () => {
       parent?.setOptions({bottomAccessory: undefined})

shared/ios/Podfile.lock

@@ -2151,6 +2151,28 @@ PODS:
     - React-utils (= 0.85.3)
     - ReactNativeDependencies
   - ReactNativeDependencies (0.85.3)
+  - ReactNavigation (8.0.0-alpha.23):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - RNCMaskedView (0.3.2):
     - hermes-engine
     - RCTRequired
@@ -2541,6 +2563,7 @@ DEPENDENCIES:
   - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeDependencies (from `../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec`)
+  - "ReactNavigation (from `../node_modules/@react-navigation/native`)"
   - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -2784,6 +2807,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   ReactNativeDependencies:
     :podspec: "../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec"
+  ReactNavigation:
+    :path: "../node_modules/@react-navigation/native"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNCPicker:
@@ -2916,6 +2941,7 @@ SPEC CHECKSUMS:
   ReactCodegen: 7016a2114079361a2f1536b3c91a15ceb8eb7ca4
   ReactCommon: 7dfc3250793bf36cf221096ff59e1179e13eef7f
   ReactNativeDependencies: a6322d261348755da88238e31671807522b1ad9d
+  ReactNavigation: eab388d91957f537b337f21486b08931dd08d148
   RNCMaskedView: 8069b4d4e23b3d28b4fcac70bf266be43ffc3d2e
   RNCPicker: a3921be99ae291e420e3e8940e5b2b53e572c543
   RNGestureHandler: d4cbb1077ca262ff651f66d4aebcd1448fc3463b

shared/jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/$1',
     '^@/logger$': '<rootDir>/test/mocks/logger.js',
     '^@react-navigation/core$': '<rootDir>/test/mocks/react-navigation-core.js',
+    '^@react-navigation/native$': '<rootDir>/test/mocks/react-navigation-native.js',
     '^react-native$': '<rootDir>/test/mocks/react-native.js',
   },
   setupFiles: ['<rootDir>/jest.setup.js'],

shared/login/reset/confirm.test.tsx

@@ -69,7 +69,7 @@ describe('ConfirmReset', () => {
     })
     mockSetOptions.mockReset()
     mockSubmitResetPrompt.mockReset()
-    ;(useNavigation as jest.Mock).mockReturnValue({
+    ;(useNavigation as unknown as jest.Mock).mockReturnValue({
       addListener: mockAddListener,
       setOptions: mockSetOptions,
     })

shared/package.json

@@ -93,10 +93,10 @@
     "@react-native-community/netinfo": "12.0.1",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native-picker/picker": "2.11.4",
-    "@react-navigation/bottom-tabs": "7.15.12",
-    "@react-navigation/core": "7.17.3",
-    "@react-navigation/native": "7.2.3",
-    "@react-navigation/native-stack": "7.14.13",
+    "@react-navigation/bottom-tabs": "8.0.0-alpha.28",
+    "@react-navigation/core": "8.0.0-alpha.14",
+    "@react-navigation/native": "8.0.0-alpha.23",
+    "@react-navigation/native-stack": "8.0.0-alpha.29",
     "date-fns": "4.1.0",
     "emoji-datasource-apple": "16.0.0",
     "emoji-regex": "10.6.0",