WIP: try nav 8

shared/chat/audio/audio-recorder.native.tsx

@@ -7,7 +7,7 @@ import * as React from 'react'
 import {colors} from '@/styles/colors'
 import * as Reanimated from 'react-native-reanimated'
 import {AmpTracker} from './amptracker'
-import {usePanGesture, GestureDetector, type PanGestureEvent} from 'react-native-gesture-handler'
+import {usePanGesture, GestureDetector, type PanGestureActiveEvent} from 'react-native-gesture-handler'
 import {View} from 'react-native'
 import {formatAudioRecordDuration} from '@/util/timestamp'
 import {useAudioRecorder, useAudioRecorderState, AudioModule, AudioQuality, IOSOutputFormat} from 'expo-audio'
@@ -214,7 +214,7 @@ const useIconAndOverlay = (p: {
         panStartSV.set(Date.now())
       }
     },
-    onUpdate: (e: PanGestureEvent) => {
+    onUpdate: (e: PanGestureActiveEvent) => {
       'worklet'
       if (lockedSV.value || canceledSV.value) {
         return

shared/chat/conversation/header-area/index.native.tsx

@@ -100,7 +100,7 @@ export const headerNavigationOptions = (route: {params?: {conversationIDKey?: st
   const conversationIDKey = route.params?.conversationIDKey ?? Chat.noConversationIDKey
   return {
     headerLeft: (props: HeaderBackButtonProps) => {
-      const {onLabelLayout, labelStyle, ...rest} = props
+      const {labelStyle, ...rest} = props
       return (
         <Chat.ChatProvider id={conversationIDKey}>
           <BadgeHeaderLeftArray {...rest} />

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

@@ -17,7 +17,7 @@ const Header = () => {
       canBeNull={true}
       id={
         // eslint-disable-next-line
-        params?.conversationIDKey ?? Chat.noConversationIDKey
+        (params as {conversationIDKey?: string} | undefined)?.conversationIDKey ?? Chat.noConversationIDKey
       }
     >
       <Header2 />

shared/constants/init/index.native.tsx

@@ -2,7 +2,6 @@
 import {ignorePromise, neverThrowPromiseFunc, timeoutPromise} from '../utils'
 import {useChatState} from '@/stores/chat'
 import {useConfigState} from '@/stores/config'
-import {useCurrentUserState} from '@/stores/current-user'
 import {useDaemonState} from '@/stores/daemon'
 import {useDarkModeState} from '@/stores/darkmode'
 import {useFSState} from '@/stores/fs'

shared/crypto/sub-nav/index.desktop.tsx

@@ -9,7 +9,7 @@ import {
   createNavigatorFactory,
   type NavigationContainerRef,
 } from '@react-navigation/core'
-import type {TypedNavigator, NavigatorTypeBagBase, StaticConfig} from '@react-navigation/native'
+import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
 import {routeMapToScreenElements} from '@/router-v2/routes'
 import {makeLayout} from '@/router-v2/screen-layout.desktop'
 import type {RouteDef, GetOptionsParams} from '@/constants/types/router'
@@ -98,10 +98,7 @@ type NavType = NavigatorTypeBagBase & {
   }
 }
 
-export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as () => TypedNavigator<
-  NavType,
-  StaticConfig<NavigatorTypeBagBase>
->
+export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>
 const TabNavigator = createLeftTabNavigator()
 const makeOptions = (rd: RouteDef) => {
   return ({route, navigation}: GetOptionsParams) => {
@@ -110,7 +107,7 @@ const makeOptions = (rd: RouteDef) => {
     return {...opt}
   }
 }
-const cryptoScreens = routeMapToScreenElements(cryptoSubRoutes, TabNavigator.Screen, makeLayout, makeOptions, false, false)
+const cryptoScreens = routeMapToScreenElements(cryptoSubRoutes, TabNavigator.Screen, makeLayout, makeOptions, false, false, false)
 const CryptoSubNavigator = () => (
   <TabNavigator.Navigator initialRouteName={Crypto.encryptTab} backBehavior="none">
     {cryptoScreens}

shared/fs/nav-header/mobile-header.tsx

@@ -124,11 +124,11 @@ const styles = Kb.Styles.styleSheetCreate(
         isAndroid: {height: 56},
         isIOS: {height: 44},
       }),
+      filename: {marginLeft: Kb.Styles.globalMargins.xtiny},
       filesTabStatusIcon: {
         height: Kb.Styles.globalMargins.small,
         width: Kb.Styles.globalMargins.small,
       },
-      filename: {marginLeft: Kb.Styles.globalMargins.xtiny},
       headerContainer: {
         backgroundColor: Kb.Styles.globalColors.white,
         borderBottomColor: Kb.Styles.globalColors.black_10,

shared/ios/Keybase/Info.plist

@@ -122,7 +122,5 @@
 	<false/>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
 	<true/>
-  <key>UIDesignRequiresCompatibility</key>
-  <true/>
 </dict>
 </plist>

shared/ios/Podfile.lock

@@ -148,6 +148,34 @@ PODS:
   - libwebp/sharpyuv (1.5.0)
   - libwebp/webp (1.5.0):
     - libwebp/sharpyuv
+  - LiquidGlass (0.7.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - 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
+    - SocketRocket
+    - Yoga
   - lottie-ios (4.6.0)
   - lottie-react-native (7.3.6):
     - boost
@@ -2848,6 +2876,34 @@ PODS:
     - React-perflogger (= 0.83.2)
     - React-utils (= 0.83.2)
     - SocketRocket
+  - ReactNavigation (8.0.0-alpha.16):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - 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
+    - SocketRocket
+    - Yoga
   - RNCMaskedView (0.3.2):
     - boost
     - DoubleConversion
@@ -2904,7 +2960,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNGestureHandler (3.0.0-beta.2):
+  - RNGestureHandler (3.0.0-nightly-20260323-b33f704b6):
     - boost
     - DoubleConversion
     - fast_float
@@ -3228,6 +3284,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - KBCommon (from `../../rnmodules/kb-common`)
+  - "LiquidGlass (from `../node_modules/@callstack/liquid-glass`)"
   - lottie-react-native (from `../node_modules/lottie-react-native`)
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
@@ -3304,6 +3361,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios/ReactAppDependencyProvider`)
   - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "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`)
@@ -3397,6 +3455,8 @@ EXTERNAL SOURCES:
     :tag: hermes-v0.14.1
   KBCommon:
     :path: "../../rnmodules/kb-common"
+  LiquidGlass:
+    :path: "../node_modules/@callstack/liquid-glass"
   lottie-react-native:
     :path: "../node_modules/lottie-react-native"
   RCT-Folly:
@@ -3547,6 +3607,8 @@ EXTERNAL SOURCES:
     :path: build/generated/ios/ReactCodegen
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNavigation:
+    :path: "../node_modules/@react-navigation/native"
   RNCMaskedView:
     :path: "../node_modules/@react-native-masked-view/masked-view"
   RNCPicker:
@@ -3602,6 +3664,7 @@ SPEC CHECKSUMS:
   libavif: 5f8e715bea24debec477006f21ef9e95432e254d
   libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
+  LiquidGlass: 3201cf56cdcacd9b273b67fef52ddc41d48e2253
   lottie-ios: 8f959969761e9c45d70353667d00af0e5b9cadb3
   lottie-react-native: e542fe4b6e8eddcf893d5a8cef9f8b5c6d2f7331
   RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
@@ -3678,9 +3741,10 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: d69159b417e8c9d82b8fe4d0a27def4c3e8f767f
   ReactCodegen: 38a7e572859b574c88edd9f194aee7658033191f
   ReactCommon: d86bdfcf07cfd551be3f83831ede1b7680dfd4e7
+  ReactNavigation: 429a9d773e474c289aa46c224e2021aa7f902c58
   RNCMaskedView: d707a83784c67099b54b37d056ababb2767ce15e
   RNCPicker: 35fc66f352403cdfe99d53b541f5180482ca2bc5
-  RNGestureHandler: 7c754ff0794b76c3fb05e28a8cc05fa129f285e3
+  RNGestureHandler: ca82fc41df69680c318515112c507f5b587b6858
   RNReanimated: a0068c25e0b27d5418d66289a915f53eb97380df
   RNScreens: e902eba58a27d3ad399a495d578e8aba3ea0f490
   RNWorklets: 6daa3975bebe6047822c7485666d501a716674ca

shared/package.json

@@ -80,6 +80,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@callstack/liquid-glass": "0.7.0",
     "@gorhom/bottom-sheet": "5.2.8",
     "@gorhom/portal": "1.0.14",
     "@khanacademy/simple-markdown": "2.2.2",
@@ -88,10 +89,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.7",
-    "@react-navigation/core": "7.17.0",
-    "@react-navigation/native": "7.2.0",
-    "@react-navigation/native-stack": "7.14.7",
+    "@react-navigation/bottom-tabs": "8.0.0-alpha.19",
+    "@react-navigation/core": "8.0.0-alpha.8",
+    "@react-navigation/native": "8.0.0-alpha.16",
+    "@react-navigation/native-stack": "8.0.0-alpha.19",
     "classnames": "2.5.1",
     "date-fns": "4.1.0",
     "emoji-datasource-apple": "16.0.0",
@@ -128,7 +129,7 @@
     "react-error-boundary": "5.0.0",
     "react-is": "19.2.0",
     "react-native": "0.83.2",
-    "react-native-gesture-handler": "3.0.0-beta.2",
+    "react-native-gesture-handler": "3.0.0-nightly-20260323-b33f704b6",
     "react-native-kb": "file:../rnmodules/react-native-kb",
     "react-native-keyboard-controller": "1.21.2",
     "react-native-reanimated": "4.2.3",

shared/router-v2/left-tab-navigator.desktop.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import TabBar from './tab-bar.desktop'
 import {useNavigationBuilder, TabRouter, createNavigatorFactory} from '@react-navigation/core'
-import type {TypedNavigator, NavigatorTypeBagBase, StaticConfig} from '@react-navigation/native'
+import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
 import type * as Tabs from '@/constants/tabs'
 import {useRouterState} from '@/stores/router'
 import {getModalStack} from '@/constants/router'
@@ -68,7 +68,4 @@ type NavType = NavigatorTypeBagBase & {
   }
 }
 
-export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as () => TypedNavigator<
-  NavType,
-  StaticConfig<NavigatorTypeBagBase>
->
+export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>

shared/router-v2/router.native.tsx

@@ -12,11 +12,12 @@ import logger from '@/logger'
 import {Platform, StatusBar, View} from 'react-native'
 import {HeaderLeftButton} from '@/common-adapters/header-buttons'
 import {NavigationContainer} from '@react-navigation/native'
-import {createNativeBottomTabNavigator} from '@react-navigation/bottom-tabs/unstable'
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 import {modalRoutes, routes, loggedOutRoutes, tabRoots, routeMapToStaticScreens} from './routes'
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
 
 import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+import type {SFSymbol} from 'sf-symbols-typescript'
 import {makeLayout} from './screen-layout.native'
 import {useRootKey} from './hooks.native'
 import {createLinkingConfig} from './linking'
@@ -40,12 +41,11 @@ const tabToLabel = new Map<string, string>([
 // just to get badge rollups
 const tabs = C.isTablet ? Tabs.tabletTabs : Tabs.phoneTabs
 
-const Tab = createNativeBottomTabNavigator()
+const Tab = createBottomTabNavigator()
 const tabRoutes = routes
 const settingsTabChildren = [Tabs.gitTab, Tabs.devicesTab, Tabs.settingsTab] as const
 
-const phoneTabRoutes = {...tabRoutes}
-delete phoneTabRoutes.chatConversation
+const {chatConversation: _chatConversation, ...phoneTabRoutes} = tabRoutes
 
 const tabStackOptions = {
   ...Common.defaultNavigationOptions,
@@ -81,7 +81,7 @@ const androidTabIcons = new Map<Tabs.Tab, number>([
   [Tabs.teamsTab, require('../images/icons/icon-folder-team-32.png')],
 ])
 
-const iosTabIcons = new Map<Tabs.Tab, {active: string; inactive: string}>([
+const iosTabIcons = new Map<Tabs.Tab, {active: SFSymbol; inactive: SFSymbol}>([
   [Tabs.chatTab, {active: 'message.fill', inactive: 'message'}],
   [Tabs.fsTab, {active: 'folder.fill', inactive: 'folder'}],
   [Tabs.peopleTab, {active: 'person.crop.circle.fill', inactive: 'person.crop.circle'}],
@@ -95,22 +95,29 @@ const getNativeTabIcon = (tab: Tabs.Tab) => {
     return icon
       ? ({focused}: {focused: boolean}) => ({
           name: focused ? icon.active : icon.inactive,
-          type: 'sfSymbol',
+          type: 'sfSymbol' as const,
         })
       : undefined
   }
   const source = androidTabIcons.get(tab)
-  return source ? {source, type: 'image'} : undefined
+  return source ? {source, type: 'image' as const} : undefined
 }
 
-const getBadgeNumber = (routeName: Tabs.Tab, navBadges: Map<Tabs.Tab, number>, hasPermissions: boolean) => {
+const getBadgeNumber = (routeName: Tabs.Tab, navBadges: ReadonlyMap<Tabs.Tab, number>, hasPermissions: boolean) => {
   const onSettings = routeName === Tabs.settingsTab
   const tabsToCount: ReadonlyArray<Tabs.Tab> = onSettings ? settingsTabChildren : [routeName]
-  const count = tabsToCount.reduce((res, tab) => res + (navBadges.get(tab) || 0), onSettings && !hasPermissions ? 1 : 0)
+  const count = tabsToCount.reduce(
+    (res, tab) => res + (navBadges.get(tab) || 0),
+    onSettings && !hasPermissions ? 1 : 0
+  )
   return count || undefined
 }
 
-const appTabsScreenOptions = (routeName: Tabs.Tab, navBadges: Map<Tabs.Tab, number>, hasPermissions: boolean) => {
+const appTabsScreenOptions = (
+  routeName: Tabs.Tab,
+  navBadges: ReadonlyMap<Tabs.Tab, number>,
+  hasPermissions: boolean
+) => {
   const isIOS = Platform.OS === 'ios'
   return {
     headerShown: false,
@@ -123,11 +130,11 @@ const appTabsScreenOptions = (routeName: Tabs.Tab, navBadges: Map<Tabs.Tab, numb
           tabBarMinimizeBehavior: Common.tabBarMinimizeBehavior,
         }
       : {tabBarActiveTintColor: Kb.Styles.globalColors.white}),
-    tabBarControllerMode: C.isTablet ? 'auto' : undefined,
+    tabBarControllerMode: (isIOS && C.isTablet ? 'auto' : undefined) as 'auto' | undefined,
     tabBarIcon: getNativeTabIcon(routeName),
     ...(isIOS ? {} : {tabBarInactiveTintColor: Kb.Styles.globalColors.blueLighter}),
     tabBarLabel: tabToLabel.get(routeName) ?? routeName,
-    tabBarLabelVisibilityMode: C.isTablet ? 'labeled' : 'selected',
+    tabBarLabelVisibilityMode: (C.isTablet ? 'labeled' : 'selected') as 'labeled' | 'selected',
     ...(isIOS ? {} : {tabBarStyle: Common.tabBarStyle}),
     title: tabToLabel.get(routeName) ?? routeName,
   }

shared/router-v2/screen-layout.desktop.tsx

@@ -176,7 +176,7 @@ type LayoutProps = {
   navigation: GetOptionsParams['navigation']
 }
 
-export const makeLayout = (isModal: boolean, _isLoggedOut: boolean, getOptions?: GetOptions) => {
+export const makeLayout = (isModal: boolean, _isLoggedOut: boolean, _isTabScreen: boolean, getOptions?: GetOptions) => {
   return ({children, route, navigation}: LayoutProps) => {
     const navigationOptions = typeof getOptions === 'function' ? getOptions({navigation, route}) : getOptions