diff --git a/shared/app/index.native.tsx b/shared/app/index.native.tsx
index 7858e811c81a..35ee779518d0 100644
--- a/shared/app/index.native.tsx
+++ b/shared/app/index.native.tsx
@@ -4,7 +4,7 @@ import {useConfigState} from '@/stores/config'
 import {useShellState} from '@/stores/shell'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import Main from './main.native'
+import Main from './main'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
 import Animated, {ReducedMotionConfig, ReduceMotion} from 'react-native-reanimated'
 import {AppRegistry, AppState, Appearance, Keyboard} from 'react-native'
@@ -20,7 +20,7 @@ import {useUnmountAll} from '@/util/debug-react'
 import {darkModeSupported, guiConfig} from 'react-native-kb'
 import {install} from 'react-native-kb'
 import * as DarkMode from '@/stores/darkmode'
-import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index.native'
+import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index'
 import logger from '@/logger'
 
 logger.info('INIT App index module load')
diff --git a/shared/app/main.desktop.tsx b/shared/app/main.desktop.tsx
deleted file mode 100644
index 64e506f443fa..000000000000
--- a/shared/app/main.desktop.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Router from '@/router-v2/router'
-import ResetModal from '../login/reset/modal'
-import GlobalError from './global-errors'
-import OutOfDate from './out-of-date'
-import RemoteProxies from '../desktop/remote/proxies.desktop'
-import {FsStatusProvider} from '@/fs/common/status'
-import {SystemFileManagerIntegrationProvider} from '@/fs/common/sfmi'
-
-const Main = function Main() {
-  return (
-    <FsStatusProvider>
-      <SystemFileManagerIntegrationProvider>
-        <RemoteProxies />
-        <Router />
-        <ResetModal />
-        <GlobalError />
-        <OutOfDate />
-      </SystemFileManagerIntegrationProvider>
-    </FsStatusProvider>
-  )
-}
-// get focus so react doesn't hold onto old divs
-
-export default Main
diff --git a/shared/app/main.native.tsx b/shared/app/main.tsx
similarity index 64%
rename from shared/app/main.native.tsx
rename to shared/app/main.tsx
index c5f107199f63..62aff1061068 100644
--- a/shared/app/main.native.tsx
+++ b/shared/app/main.tsx
@@ -1,14 +1,29 @@
 import Router from '@/router-v2/router'
-import {PortalHost} from '@/common-adapters/portal.native'
 import ResetModal from '../login/reset/modal'
 import GlobalError from './global-errors'
 import OutOfDate from './out-of-date'
-import RuntimeStats from './runtime-stats'
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
 import {FsStatusProvider} from '@/fs/common/status'
 import {SystemFileManagerIntegrationProvider} from '@/fs/common/sfmi'
+import RemoteProxies from '../desktop/remote/proxies.desktop'
+import {PortalHost} from '@/common-adapters/portal.native'
+import RuntimeStats from './runtime-stats'
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
+
+const DesktopMain = function DesktopMain() {
+  return (
+    <FsStatusProvider>
+      <SystemFileManagerIntegrationProvider>
+        <RemoteProxies />
+        <Router />
+        <ResetModal />
+        <GlobalError />
+        <OutOfDate />
+      </SystemFileManagerIntegrationProvider>
+    </FsStatusProvider>
+  )
+}
 
-const Main = () => {
+const NativeMain = () => {
   return (
     <FsStatusProvider>
       <SystemFileManagerIntegrationProvider>
@@ -25,4 +40,4 @@ const Main = () => {
   )
 }
 
-export default Main
+export default isMobile ? NativeMain : DesktopMain
diff --git a/shared/chat/audio/audio-video.tsx b/shared/chat/audio/audio-video.tsx
index ea8247f2f57e..14dca8d7b226 100644
--- a/shared/chat/audio/audio-video.tsx
+++ b/shared/chat/audio/audio-video.tsx
@@ -1,14 +1,9 @@
 import * as React from 'react'
-import type * as ExpoAudioModule from 'expo-audio'
-import type * as ExpoModule from 'expo'
+import {useAudioPlayer} from 'expo-audio'
+import {useEventListener} from 'expo'
 import type {Props} from './audio-video.shared'
 
 const MobileAudioVideo = (props: Props) => {
-   
-  const {useAudioPlayer} = require('expo-audio') as typeof ExpoAudioModule
-
-  const {useEventListener} = require('expo') as typeof ExpoModule
-
   const {url, paused, onPositionUpdated, onEnded} = props
   const player = useAudioPlayer(url)
 
@@ -55,9 +50,9 @@ const DesktopAudioVideo = (props: Props) => {
     }
   }, [paused])
 
-  const onTimeUpdate = (e: React.SyntheticEvent<{currentTime: number; duration: number}>) => {
-    const ct = e.currentTarget.currentTime
-    const dur = e.currentTarget.duration
+  const onTimeUpdate = () => {
+    const ct = vidRef.current?.currentTime ?? 0
+    const dur = vidRef.current?.duration ?? 0
     if (dur === 0) return
     onPositionUpdated(ct / dur)
   }
diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx
index cdbe6b0ae1a5..98e842d3cfd6 100644
--- a/shared/chat/conversation/attachment-fullscreen/index.tsx
+++ b/shared/chat/conversation/attachment-fullscreen/index.tsx
@@ -5,6 +5,11 @@ import logger from '@/logger'
 import type {Props} from './index.shared'
 import {useData, usePreviewFallback} from './hooks'
 import type {StyleOverride} from '@/common-adapters/markdown'
+import {ShowToastAfterSaving} from '../messages/attachment/shared'
+import {Animated, View} from 'react-native'
+import {useSafeAreaFrame} from 'react-native-safe-area-context'
+import {Image} from 'expo-image'
+import {useVideoPlayer, VideoView} from 'expo-video'
 
 // Stub type to avoid DOM lib dependency in native tsconfig
 type VideoRef = {pause?: () => void}
@@ -168,10 +173,6 @@ const DesktopFullscreen = (p: Props) => {
 type GestureEvent = {
   nativeEvent: {touches: Array<unknown>; pageX: number}
 }
-type AnimatedValue = {
-  addListener?: (cb: (v: {value: number}) => void) => string
-  removeAllListeners?: () => void
-}
 
 const NativeFullscreenVideo = (p: {
   path: string
@@ -182,29 +183,6 @@ const NativeFullscreenVideo = (p: {
 }) => {
   const {path, previewHeight, onTouchStart, onTouchEnd, onLoaded} = p
 
-  const {useVideoPlayer, VideoView} = require('expo-video') as {
-    useVideoPlayer: (uri: string) => {
-      addListener: (
-        event: string,
-        cb: (e: {status?: string; error?: unknown}) => void
-      ) => {remove: () => void}
-    }
-    VideoView: React.ComponentType<{
-      player: unknown
-      nativeControls?: boolean
-      contentFit?: string
-      style?: Kb.Styles.StylesCrossPlatform
-    }>
-  }
-  const {View} = require('react-native') as {
-    View: React.ComponentType<{
-      style?: Kb.Styles.StylesCrossPlatform
-      onTouchStart?: (e: GestureEvent) => void
-      onTouchEnd?: (e: GestureEvent) => void
-      children?: React.ReactNode
-    }>
-  }
-
   const sourceUri = `${path}&contentforce=true`
   const player = useVideoPlayer(sourceUri)
 
@@ -243,36 +221,13 @@ const NativeFullscreen = (p: Props) => {
   const {hasMessageID} = data
   const [loaded, setLoaded] = React.useState(false)
   const [showHeader, setShowHeader] = React.useState(_showHeader)
-  const fadeAnimRef = React.useRef<AnimatedValue | null>(null)
-  const [fadeAnim, setFadeAnim] = React.useState<AnimatedValue | null>(null)
-
-  const {ShowToastAfterSaving} = require('../messages/attachment/shared') as {
-    ShowToastAfterSaving: React.ComponentType<{transferState: unknown}>
-  }
-  const {Animated} = require('react-native') as {
-    Animated: {
-      Value: new (v: number) => AnimatedValue
-      View: React.ComponentType<{
-        style?: Array<Kb.Styles.StylesCrossPlatform | {opacity: AnimatedValue | number}>
-        children?: React.ReactNode
-      }>
-      timing: (
-        val: AnimatedValue,
-        opts: {toValue: number; duration: number; useNativeDriver: boolean}
-      ) => {start: () => void}
-    }
-  }
-  const {useSafeAreaFrame} = require('react-native-safe-area-context') as {
-    useSafeAreaFrame: () => {width: number; height: number}
-  }
-  const {Image} = require('expo-image') as {
-    Image: {prefetch: (path: string) => Promise<void>}
-  }
+  const fadeAnimRef = React.useRef<Animated.Value | null>(null)
+  const [fadeAnim, setFadeAnim] = React.useState<Animated.Value | null>(null)
 
   React.useEffect(() => {
     fadeAnimRef.current = new Animated.Value(1)
     setFadeAnim(fadeAnimRef.current)
-  }, [Animated])
+  }, [])
 
   React.useEffect(() => {
     if (fadeAnim) {
@@ -282,7 +237,7 @@ const NativeFullscreen = (p: Props) => {
         useNativeDriver: true,
       }).start()
     }
-  }, [showHeader, fadeAnim, Animated])
+  }, [showHeader, fadeAnim])
 
   const preload = (src: string, onLoad: () => void, onError: () => void) => {
     const f = async () => {
diff --git a/shared/chat/conversation/giphy/index.native.tsx b/shared/chat/conversation/giphy/index.native.tsx
deleted file mode 100644
index db191d9a09b7..000000000000
--- a/shared/chat/conversation/giphy/index.native.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as Kb from '@/common-adapters'
-import {colors, darkColors} from '@/styles/colors'
-import {WebView} from 'react-native-webview'
-import noop from 'lodash/noop'
-import {useHooks} from './hooks'
-import {useColorScheme} from 'react-native'
-
-const GiphySearch = () => {
-  const p = useHooks()
-  const source = {uri: p.galleryURL}
-  const darkMode = useColorScheme() === 'dark'
-  const injectedJavaScript = `
-(function() {
-    window.document.querySelector("body").style.backgroundColor = "${
-      darkMode ? darkColors.white : colors.white
-    }";
-})();
-`
-
-  return (
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
-      {p.previews ? (
-        <WebView
-          onMessage={noop}
-          injectedJavaScript={injectedJavaScript}
-          allowsInlineMediaPlayback={true}
-          source={source}
-          automaticallyAdjustContentInsets={false}
-          mediaPlaybackRequiresUserAction={false}
-        />
-      ) : (
-        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} fullHeight={true}>
-          <Kb.ProgressIndicator />
-        </Kb.Box2>
-      )}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {height: 80},
-    }) as const
-)
-
-export default GiphySearch
diff --git a/shared/chat/conversation/giphy/index.desktop.tsx b/shared/chat/conversation/giphy/index.tsx
similarity index 71%
rename from shared/chat/conversation/giphy/index.desktop.tsx
rename to shared/chat/conversation/giphy/index.tsx
index 807d8e8fc73c..51746eab4c35 100644
--- a/shared/chat/conversation/giphy/index.desktop.tsx
+++ b/shared/chat/conversation/giphy/index.tsx
@@ -1,21 +1,31 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import UnfurlImage from '../messages/text/unfurl/unfurl-list/image'
-import {getMargins, scaledWidth} from './width'
+import * as React from 'react'
 import {useHooks} from './hooks'
+import {getMargins, scaledWidth} from './width'
+import UnfurlImage from '../messages/text/unfurl/unfurl-list/image'
+import {colors, darkColors} from '@/styles/colors'
+import {WebView} from 'react-native-webview'
+import {useColorScheme} from 'react-native'
+import noop from 'lodash/noop'
 
-const gridHeight = 100
+// Stub type to avoid dom lib dependency in native tsconfig
+type DivRef = {
+  getBoundingClientRect: () => DOMRect
+  clientWidth: number
+}
 
-const GiphySearch = () => {
+const DesktopGiphySearch = () => {
+  const gridHeight = 100
   const props = useHooks()
   const [width, setWidth] = React.useState<number | undefined>(undefined)
-  const divRef = React.useRef<HTMLDivElement>(null)
+  const divRef = React.useRef<DivRef | null>(null)
   const learnMoreUrlProps = Kb.useClickURL('https://keybase.io/docs/chat/linkpreviews')
 
   React.useEffect(() => {
     if (!divRef.current) return
-    const cs = getComputedStyle(divRef.current)
-    setWidth(divRef.current.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight))
+    const gc = (globalThis as {getComputedStyle?: (el: unknown) => {paddingLeft: string; paddingRight: string}}).getComputedStyle
+    const cs = gc?.(divRef.current)
+    setWidth(divRef.current.clientWidth - parseFloat(cs?.paddingLeft ?? '0') - parseFloat(cs?.paddingRight ?? '0'))
   }, [])
 
   let margins: Array<number> = []
@@ -32,7 +42,7 @@ const GiphySearch = () => {
     <Kb.Box2 direction="vertical" relative={true} style={styles.outerContainer}>
       <Kb.Box2
         direction="vertical"
-        ref={divRef}
+        ref={divRef as React.RefObject<DivRef>}
         style={Kb.Styles.collapseStyles([
           styles.scrollContainer,
           Kb.Styles.platformStyles({isElectron: {overflowY: width ? 'auto' : 'scroll'}}),
@@ -89,6 +99,38 @@ const GiphySearch = () => {
   )
 }
 
+const NativeGiphySearch = () => {
+  const p = useHooks()
+  const source = {uri: p.galleryURL}
+  const darkMode = useColorScheme() === 'dark'
+  const injectedJavaScript = `
+(function() {
+    window.document.querySelector("body").style.backgroundColor = "${
+      darkMode ? darkColors['white'] : colors['white']
+    }";
+})();
+`
+
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true} style={nativeStyles.container}>
+      {p.previews ? (
+        <WebView
+          onMessage={noop}
+          injectedJavaScript={injectedJavaScript}
+          allowsInlineMediaPlayback={true}
+          source={source}
+          automaticallyAdjustContentInsets={false}
+          mediaPlaybackRequiresUserAction={false}
+        />
+      ) : (
+        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} fullHeight={true}>
+          <Kb.ProgressIndicator />
+        </Kb.Box2>
+      )}
+    </Kb.Box2>
+  )
+}
+
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
@@ -116,7 +158,6 @@ const styles = Kb.Styles.styleSheetCreate(
           lineHeight: 17,
         },
       }),
-
       loadingContainer: {
         minHeight: 200,
       },
@@ -144,4 +185,11 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default GiphySearch
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {height: 80},
+    }) as const
+)
+
+export default isMobile ? NativeGiphySearch : DesktopGiphySearch
diff --git a/shared/chat/conversation/input-area/location-popup.tsx b/shared/chat/conversation/input-area/location-popup.tsx
index 3fdfb6b4d242..a5d25b63dabd 100644
--- a/shared/chat/conversation/input-area/location-popup.tsx
+++ b/shared/chat/conversation/input-area/location-popup.tsx
@@ -7,7 +7,7 @@ import * as T from '@/constants/types'
 import LocationMap from '@/chat/location-map'
 import {useCurrentUserState} from '@/stores/current-user'
 import {requestLocationPermission} from '@/util/platform-specific'
-import type * as ExpoLocationModule from 'expo-location'
+import * as ExpoLocation from 'expo-location'
 import {ignorePromise} from '@/constants/utils'
 import {openAppSettings} from '@/util/storeless-actions'
 import {setThreadInputCommandStatus} from '@/constants/router'
@@ -63,13 +63,12 @@ const useWatchPosition = (
     logger.info('[location] perms check due to map')
     const f = async () => {
       try {
-        const ExpoLocation = require('expo-location') as typeof ExpoLocationModule
         await (requestLocationPermission as (mode?: T.RPCChat.UIWatchPositionPerm) => Promise<void>)(
           T.RPCChat.UIWatchPositionPerm.base
         )
         const sub = await ExpoLocation.watchPositionAsync(
           {accuracy: ExpoLocation.LocationAccuracy.Highest},
-          (location: ExpoLocationModule.LocationObject) => {
+          (location: ExpoLocation.LocationObject) => {
             const coord = {
               accuracy: Math.floor(location.coords.accuracy ?? 0),
               lat: location.coords.latitude,
diff --git a/shared/chat/conversation/input-area/normal/input.desktop.tsx b/shared/chat/conversation/input-area/normal/input.desktop.tsx
deleted file mode 100644
index 60b6fe6569b2..000000000000
--- a/shared/chat/conversation/input-area/normal/input.desktop.tsx
+++ /dev/null
@@ -1,680 +0,0 @@
-import * as C from '@/constants'
-import * as T from '@/constants/types'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import * as InputState from '../input-state'
-import SetExplodingMessagePopup from './set-explode-popup'
-import Typing from './typing'
-import type {Props as InputLowLevelProps, TextInfo, RefType} from './input.shared'
-import type {PlatformInputProps as Props} from './input.shared'
-export type {Selection, RefType, TextInfo, PlatformInputProps} from './input.shared'
-import {EmojiPickerDesktop} from '@/chat/emoji-picker/container'
-import {KeyEventHandler} from '@/common-adapters/key-event-handler.desktop'
-import {formatDurationShort} from '@/util/timestamp'
-import {useSuggestors} from '../suggestors'
-import {ScrollContext} from '@/chat/conversation/normal/context'
-import {getTextStyle} from '@/common-adapters/text.styles'
-import {useColorScheme} from 'react-native'
-import KB2 from '@/util/electron.desktop'
-import {useConversationThreadID} from '../../thread-context'
-
-const {getPathForFile} = KB2.functions
-
-const maybeParseInt = (input: string | number, radix: number): number =>
-  typeof input === 'string' ? parseInt(input, radix) : input
-
-export function Input(p: InputLowLevelProps) {
-  const {style: _style, onChangeText: _onChangeText, multiline, ref} = p
-  const {textType = 'Body', rowsMax, rowsMin, padding, placeholder, onKeyUp: _onKeyUp} = p
-  const {allowKeyboardEvents, className, disabled, autoFocus, onKeyDown: _onKeyDown, onEnterKeyDown} = p
-
-  const isDarkMode = useColorScheme() === 'dark'
-
-  const [value, setValue] = React.useState('')
-  // this isn't a value react can set on the input, so we need to drive it manually
-  const selectionRef = React.useRef({end: 0, start: 0})
-  const inputSingleRef = React.useRef<HTMLInputElement>(null)
-  const inputMultiRef = React.useRef<HTMLTextAreaElement>(null)
-
-  const onChangeTextRef = React.useRef(_onChangeText)
-  React.useEffect(() => {
-    onChangeTextRef.current = _onChangeText
-  }, [_onChangeText])
-  const [onChange] = React.useState(() => (e: {target: HTMLInputElement | HTMLTextAreaElement}) => {
-    const s = e.target.value
-    setValue(s)
-    onChangeTextRef.current?.(s)
-  })
-  const onSelect = (e: {currentTarget: HTMLInputElement | HTMLTextAreaElement}) => {
-    selectionRef.current = {
-      end: e.currentTarget.selectionEnd || 0,
-      start: e.currentTarget.selectionStart || 0,
-    }
-  }
-
-  React.useImperativeHandle(ref, () => {
-    const i = multiline ? inputMultiRef.current : inputSingleRef.current
-    return {
-      blur: () => {
-        i?.blur()
-      },
-      clear: () => {
-        if (i) {
-          i.value = ''
-          onChange({target: i})
-        }
-      },
-      focus: () => {
-        i?.focus()
-      },
-      getBoundingClientRect: () => {
-        return i?.getBoundingClientRect()
-      },
-      getSelection: () => {
-        return selectionRef.current
-      },
-      isFocused: () => !!i && document.activeElement === i,
-      transformText: (fn: (textInfo: TextInfo) => TextInfo, reflectChange: boolean): void => {
-        const ti = fn({selection: selectionRef.current, text: value})
-        // defer since we can do this in other renders
-        setTimeout(() => {
-          setValue(ti.text)
-          selectionRef.current = {end: ti.selection?.end ?? 0, start: ti.selection?.start ?? 0}
-          // defer this else we'll get onSelect called and wipe it out
-          setTimeout(() => {
-            if (i && ti.selection) {
-              if (typeof ti.selection.start === 'number') {
-                i.selectionStart = ti.selection.start
-              }
-              if (typeof ti.selection.end === 'number') {
-                i.selectionEnd = ti.selection.end
-              }
-            }
-          }, 10)
-          if (reflectChange) {
-            setTimeout(() => {
-              if (!i) return
-              onChange({target: i})
-            }, 100)
-          }
-        }, 0)
-      },
-      value,
-    }
-  }, [value, multiline, onChange])
-
-  const rows = multiline ? rowsMin || Math.min(2, rowsMax || 2) : 0
-  const style = (() => {
-    const textStyle = getTextStyle(textType, isDarkMode)
-    if (multiline) {
-      const heightStyles: {minHeight: number; maxHeight?: number} = {
-        minHeight:
-          rows * (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20) +
-          (padding ? Kb.Styles.globalMargins[padding] * 2 : 0),
-      }
-
-      if (rowsMax) {
-        heightStyles.maxHeight =
-          rowsMax * (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20)
-      }
-
-      const paddingStyles = padding ? Kb.Styles.padding(Kb.Styles.globalMargins[padding]) : {}
-
-      return Kb.Styles.collapseStyles([
-        inputLowLevelStyles.noChrome, // noChrome comes before because we want lineHeight set in multiline
-        textStyle,
-        inputLowLevelStyles.multiline,
-        heightStyles,
-        paddingStyles,
-        _style,
-      ])
-    } else {
-      return Kb.Styles.collapseStyles([
-        textStyle,
-        inputLowLevelStyles.noChrome, // noChrome comes after to unset lineHeight in singleline
-        _style,
-      ])
-    }
-  })()
-
-  const isComposingIMERef = React.useRef(false)
-
-  const onCompositionStart = () => {
-    isComposingIMERef.current = true
-  }
-
-  const onCompositionEnd = () => {
-    isComposingIMERef.current = false
-  }
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (isComposingIMERef.current) {
-      return
-    }
-    _onKeyDown?.(e)
-    if (onEnterKeyDown && e.key === 'Enter' && !(e.shiftKey || e.ctrlKey || e.altKey)) {
-      onEnterKeyDown(e)
-    }
-  }
-
-  const onKeyUp = (e: React.KeyboardEvent) => {
-    if (isComposingIMERef.current) {
-      return
-    }
-    _onKeyUp?.(e)
-  }
-
-  const commonProps = {
-    autoFocus,
-    className,
-    onChange,
-    onCompositionEnd,
-    onCompositionStart,
-    onKeyDown,
-    onKeyUp,
-    onSelect,
-    placeholder,
-    value,
-    ...(disabled ? {readOnly: true} : {}),
-    ...((allowKeyboardEvents ?? true) ? {'data-allow-keyboard-shortcuts': 'true'} : {}),
-  }
-
-  return multiline ? (
-    <textarea {...commonProps} style={Kb.Styles.castStyleDesktop(style)} ref={inputMultiRef} rows={rows} />
-  ) : (
-    <input {...commonProps} ref={inputSingleRef} style={Kb.Styles.castStyleDesktop(style)} />
-  )
-}
-
-const inputLowLevelStyles = Kb.Styles.styleSheetCreate(() => ({
-  multiline: Kb.Styles.platformStyles({
-    isElectron: {
-      fieldSizing: 'content',
-      paddingBottom: 0,
-      paddingTop: 0,
-      resize: 'none',
-      width: '100%',
-    },
-  }),
-  noChrome: Kb.Styles.platformStyles({
-    isElectron: {
-      borderWidth: 0,
-      lineHeight: 'unset',
-      outline: 'none',
-    },
-  }),
-}))
-
-// Sub-components for the chat input chrome
-
-type HtmlInputRefType = React.RefObject<HTMLInputElement | null>
-type InputRefType = React.RefObject<RefType | null>
-
-type ExplodingButtonProps = Pick<Props, 'explodingModeSeconds'> & {
-  focusInput: () => void
-  setExplodingMode: (mode: number) => void
-}
-const ExplodingButton = function ExplodingButton(p: ExplodingButtonProps) {
-  const {explodingModeSeconds, focusInput, setExplodingMode} = p
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    return (
-      <SetExplodingMessagePopup
-        attachTo={attachTo}
-        onAfterSelect={focusInput}
-        onHidden={hidePopup}
-        visible={true}
-        setExplodingMode={setExplodingMode}
-      />
-    )
-  }
-  const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup)
-
-  return (
-    <Kb.ClickableBox2
-      className={Kb.Styles.classNames({expanded: showingPopup}, 'timer-icon-container')}
-      onClick={showPopup}
-      ref={popupAnchor}
-      style={Kb.Styles.collapseStyles([
-        styles.explodingIconContainer,
-        !!explodingModeSeconds && {
-          backgroundColor: Kb.Styles.globalColors.black,
-        },
-      ])}
-    >
-      {popup}
-      <Kb.Box2
-        direction="vertical"
-        style={styles.explodingInsideWrapper}
-        tooltip={explodingModeSeconds ? undefined : 'Timer'}
-        justifyContent="center"
-      >
-        {explodingModeSeconds ? (
-          <Kb.Text type="BodyTinyBold" negative={true}>
-            {formatDurationShort(explodingModeSeconds * 1000)}
-          </Kb.Text>
-        ) : (
-          <Kb.Icon
-            className={Kb.Styles.classNames('timer-icon', 'hover_color_black')}
-            onClick={showPopup}
-            padding="xtiny"
-            type="iconfont-timer"
-          />
-        )}
-      </Kb.Box2>
-    </Kb.ClickableBox2>
-  )
-}
-
-type EmojiButtonProps = {inputRef: InputRefType}
-const EmojiButton = function EmojiButton(p: EmojiButtonProps) {
-  const {inputRef} = p
-  const conversationIDKey = useConversationThreadID()
-  const insertEmoji = (emojiColons: string) => {
-    inputRef.current?.transformText(({text, selection}) => {
-      const newText =
-        text.slice(0, selection?.start || 0) + emojiColons + text.slice(selection?.end || 0) + ' '
-      const pos = (selection?.start || 0) + emojiColons.length + 1
-      return {
-        selection: {end: pos, start: pos},
-        text: newText,
-      }
-    }, true)
-    inputRef.current?.focus()
-  }
-
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    return (
-      <Kb.Popup attachTo={attachTo} visible={true} onHidden={hidePopup} position="top right">
-        <EmojiPickerDesktop
-          conversationIDKey={conversationIDKey}
-          onPickAction={insertEmoji}
-          onDidPick={hidePopup}
-        />
-      </Kb.Popup>
-    )
-  }
-
-  const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup)
-
-  return (
-    <>
-      <Kb.Box2
-        direction="vertical"
-        style={styles.icon}
-        ref={popupAnchor}
-        tooltip="Emoji"
-        className="tooltip-top-left"
-      >
-        <Kb.Icon
-          color={showingPopup ? Kb.Styles.globalColors.black : undefined}
-          onClick={showPopup}
-          type="iconfont-emoji"
-        />
-      </Kb.Box2>
-      {popup}
-    </>
-  )
-}
-
-const GiphyButton = function GiphyButton() {
-  const toggleGiphyPrefill = InputState.useConversationInputDispatch(s => s.toggleGiphyPrefill)
-  const onGiphyToggle = toggleGiphyPrefill
-
-  return (
-    <Kb.Box2 direction="vertical" style={styles.icon} tooltip="GIF" className="tooltip-top-left">
-      <Kb.Icon onClick={onGiphyToggle} type="iconfont-gif" />
-    </Kb.Box2>
-  )
-}
-
-const fileListToPaths = (f: FileList): Array<string> => {
-  return Array.from(f).map(f => getPathForFile?.(f) ?? '')
-}
-
-const FileButton = function FileButton(p: {setHtmlInputRef: (i: HTMLInputElement | null) => void}) {
-  const {setHtmlInputRef} = p
-  const htmlInputRef = React.useRef<HTMLInputElement | null>(null)
-  const conversationIDKey = useConversationThreadID()
-  const pickFile = () => {
-    const paths = htmlInputRef.current?.files ? fileListToPaths(htmlInputRef.current.files) : undefined
-    const pathAndOutboxIDs = paths?.reduce<Array<{path: string}>>((arr, path: string) => {
-      if (path) {
-        arr.push({path})
-      }
-      return arr
-    }, [])
-    if (pathAndOutboxIDs?.length) {
-      C.Router2.navigateAppend({
-        name: 'chatAttachmentGetTitles',
-        params: {conversationIDKey, pathAndOutboxIDs},
-      })
-    }
-
-    if (htmlInputRef.current) {
-      htmlInputRef.current.value = ''
-    }
-  }
-
-  const filePickerOpen = () => {
-    htmlInputRef.current?.click()
-  }
-
-  const setRef = (e: HTMLInputElement | null) => {
-    htmlInputRef.current = e
-    setHtmlInputRef(e)
-  }
-
-  return (
-    <Kb.Box2 direction="vertical" style={styles.icon} tooltip="Attachment" className="tooltip-top-left">
-      <Kb.Icon onClick={filePickerOpen} type="iconfont-attachment" />
-      <input type="file" style={styles.hidden} ref={setRef} onChange={pickFile} multiple={true} />
-    </Kb.Box2>
-  )
-}
-
-const Footer = () => {
-  return (
-    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" justifyContent="space-between">
-      <Typing />
-      <Kb.Text lineClamp={1} type="BodyTiny" style={styles.footer} selectable={true}>
-        {`*bold*, _italics_, \`code\`, >quote, !>spoiler<!, @user, @team, #channel`}
-      </Kb.Text>
-    </Kb.Box2>
-  )
-}
-
-type UseKeyboardProps = Pick<Props, 'isEditing' | 'onChangeText' | 'showReplyPreview'> & {
-  focusInput: () => void
-  htmlInputRef: HtmlInputRefType
-  onKeyDown?: (evt: React.KeyboardEvent) => void
-  onEditLastMessage: () => void
-  onCancelEditing: () => void
-}
-const useKeyboard = (p: UseKeyboardProps) => {
-  const {htmlInputRef, focusInput, isEditing, onKeyDown, onCancelEditing} = p
-  const {onChangeText, onEditLastMessage, showReplyPreview} = p
-  const lastText = React.useRef('')
-  const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
-  const {scrollDown, scrollUp} = React.useContext(ScrollContext)
-  const onCancelReply = () => {
-    setReplyTo(T.Chat.numberToOrdinal(0))
-  }
-
-  const commonOnKeyDown = (e: React.KeyboardEvent | KeyboardEvent) => {
-    const text = lastText.current
-    if (e.key === 'ArrowUp' && !isEditing && !text) {
-      e.preventDefault()
-      onEditLastMessage()
-      return true
-    } else if (e.key === 'Escape' && isEditing) {
-      onCancelEditing()
-      return true
-    } else if (e.key === 'Escape' && showReplyPreview) {
-      onCancelReply()
-      return true
-    } else if (e.key === 'u' && (e.ctrlKey || e.metaKey)) {
-      htmlInputRef.current?.click()
-      return true
-    } else if (e.key === 'PageDown') {
-      scrollDown()
-      return true
-    } else if (e.key === 'PageUp') {
-      scrollUp()
-      return true
-    }
-
-    return false
-  }
-
-  const globalKeyDownPressHandler = (ev: KeyboardEvent) => {
-    const target = ev.target
-    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-      return
-    }
-
-    if (commonOnKeyDown(ev)) {
-      return
-    }
-
-    const isPasteKey = ev.key === 'v' && (ev.ctrlKey || ev.metaKey)
-    const isValidSpecialKey = [
-      'Backspace',
-      'Delete',
-      'ArrowLeft',
-      'ArrowRight',
-      'ArrowUp',
-      'ArrowDown',
-      'Enter',
-      'Escape',
-    ].includes(ev.key)
-    if (ev.type === 'keypress' || isPasteKey || isValidSpecialKey) {
-      focusInput()
-    }
-  }
-
-  const inputKeyDown = (e: React.KeyboardEvent) => {
-    commonOnKeyDown(e)
-    onKeyDown?.(e)
-  }
-
-  const onChangeTextInner = (text: string) => {
-    lastText.current = text
-    onChangeText(text)
-  }
-
-  return {globalKeyDownPressHandler, inputKeyDown, onChangeText: onChangeTextInner}
-}
-
-type SideButtonsProps = Pick<Props, 'cannotWrite'> & {
-  setHtmlInputRef: (i: HTMLInputElement | null) => void
-  inputRef: InputRefType
-}
-
-const SideButtons = (p: SideButtonsProps) => {
-  const {setHtmlInputRef, cannotWrite, inputRef} = p
-  return (
-    <Kb.Box2 direction="horizontal" style={styles.sideButtons}>
-      {!cannotWrite && (
-        <>
-          <GiphyButton />
-          <EmojiButton inputRef={inputRef} />
-          <FileButton setHtmlInputRef={setHtmlInputRef} />
-        </>
-      )}
-    </Kb.Box2>
-  )
-}
-
-const PlatformInput = function PlatformInput(p: Props) {
-  const {cannotWrite, explodingModeSeconds, onCancelEditing, setExplodingMode} = p
-  const {showReplyPreview, hintText, setInputRef, isEditing, onSubmit} = p
-  const htmlInputRef = React.useRef<HTMLInputElement | null>(null)
-  const setHtmlInputRef = (i: HTMLInputElement | null) => {
-    htmlInputRef.current = i
-  }
-  const inputRef = React.useRef<RefType | null>(null)
-
-  React.useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
-
-  const checkEnterOnKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !(e.altKey || e.shiftKey || e.metaKey)) {
-      e.preventDefault()
-      if (inputRef.current) {
-        onSubmit(inputRef.current.value)
-      }
-    }
-  }
-
-  const {
-    popup,
-    onKeyDown,
-    onChangeText: onChangeTextSuggestors,
-  } = useSuggestors({
-    inputRef,
-    onChangeText: p.onChangeText,
-    onKeyDown: checkEnterOnKeyDown,
-    suggestionListStyle: undefined,
-    suggestionOverlayStyle: p.suggestionOverlayStyle,
-    suggestionSpinnerStyle: styles.suggestionSpinnerStyle,
-  })
-
-  const focusInput = () => {
-    inputRef.current?.focus()
-  }
-  const setEditing = InputState.useConversationInputDispatch(s => s.setEditing)
-  const onEditLastMessage = () => {
-    setEditing('last')
-  }
-
-  const {globalKeyDownPressHandler, inputKeyDown, onChangeText} = useKeyboard({
-    focusInput,
-    htmlInputRef,
-    isEditing,
-    onCancelEditing,
-    onChangeText: onChangeTextSuggestors,
-    onEditLastMessage,
-    onKeyDown,
-    showReplyPreview,
-  })
-
-  const setRefs = (ref: null | RefType) => {
-    setInputRef(ref)
-    inputRef.current = ref
-  }
-
-  return (
-    <>
-      {popup}
-      <KeyEventHandler onKeyDown={globalKeyDownPressHandler} onKeyPress={globalKeyDownPressHandler}>
-        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
-          <Kb.Box2
-            direction="horizontal"
-            alignItems="flex-end"
-            style={Kb.Styles.collapseStyles([
-              styles.inputWrapper,
-              isEditing && styles.inputWrapperEditing,
-              explodingModeSeconds && styles.inputWrapperExplodingMode,
-            ])}
-          >
-            {!isEditing && !cannotWrite && (
-              <ExplodingButton
-                explodingModeSeconds={explodingModeSeconds}
-                focusInput={focusInput}
-                setExplodingMode={setExplodingMode}
-              />
-            )}
-            {isEditing && (
-              <Kb.Button
-                label="Cancel"
-                onClick={onCancelEditing}
-                small={true}
-                style={styles.cancelEditingBtn}
-                type="Dim"
-              />
-            )}
-            <Kb.Box2 direction="horizontal" flex={1} overflow="hidden" style={styles.inputBox}>
-              <Input
-                allowKeyboardEvents={true}
-                disabled={cannotWrite}
-                autoFocus={false}
-                ref={setRefs}
-                placeholder={hintText}
-                style={Kb.Styles.collapseStyles([styles.input, isEditing && styles.inputEditing])}
-                onChangeText={onChangeText}
-                multiline={true}
-                rowsMin={1}
-                rowsMax={10}
-                onKeyDown={inputKeyDown}
-              />
-            </Kb.Box2>
-            <SideButtons cannotWrite={cannotWrite} setHtmlInputRef={setHtmlInputRef} inputRef={inputRef} />
-          </Kb.Box2>
-          <Footer />
-        </Kb.Box2>
-      </KeyEventHandler>
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      cancelEditingBtn: {margin: Kb.Styles.globalMargins.xtiny},
-      container: {
-        backgroundColor: Kb.Styles.globalColors.white,
-      },
-      explodingIconContainer: Kb.Styles.platformStyles({
-        common: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
-          alignSelf: 'stretch',
-          borderBottomLeftRadius: 3,
-          borderTopLeftRadius: 3,
-          justifyContent: 'flex-end',
-          textAlign: 'center',
-          width: 32,
-        },
-        isElectron: {
-          borderRight: `1px solid ${Kb.Styles.globalColors.black_20}`,
-          ...Kb.Styles.desktopStyles.clickable,
-        },
-      }),
-      explodingInsideWrapper: {alignItems: 'center', height: 32},
-      footer: {
-        alignSelf: 'flex-end',
-        color: Kb.Styles.globalColors.black_20,
-        marginBottom: Kb.Styles.globalMargins.xtiny,
-        marginRight: Kb.Styles.globalMargins.medium + 2,
-        marginTop: 2,
-        textAlign: 'right',
-      },
-      hidden: {display: 'none'},
-      icon: {
-        alignSelf: 'flex-end',
-        marginBottom: 2,
-        marginRight: Kb.Styles.globalMargins.xtiny,
-        padding: Kb.Styles.globalMargins.xtiny,
-      },
-      input: Kb.Styles.platformStyles({
-        isElectron: {
-          backgroundColor: Kb.Styles.globalColors.transparent,
-          lineHeight: 22,
-          minHeight: 22,
-        },
-      }),
-      inputBox: {
-        minWidth: 0,
-        paddingBottom: Kb.Styles.globalMargins.xtiny,
-        paddingLeft: 6,
-        paddingRight: 6,
-        paddingTop: Kb.Styles.globalMargins.tiny - 2,
-        textAlign: 'left',
-      },
-      inputEditing: {color: Kb.Styles.globalColors.blackOrBlack},
-      inputWrapper: {
-        alignSelf: 'stretch',
-        backgroundColor: Kb.Styles.globalColors.white,
-        borderColor: Kb.Styles.globalColors.black_20,
-        borderRadius: 4,
-        borderStyle: 'solid',
-        borderWidth: 1,
-        marginLeft: Kb.Styles.globalMargins.small,
-        marginRight: Kb.Styles.globalMargins.small,
-        paddingRight: Kb.Styles.globalMargins.xtiny,
-      },
-      inputWrapperEditing: {backgroundColor: Kb.Styles.globalColors.yellowOrYellowAlt},
-      inputWrapperExplodingMode: {borderColor: Kb.Styles.globalColors.black},
-      sideButtons: {alignSelf: 'flex-end'},
-      suggestionSpinnerStyle: {
-        bottom: Kb.Styles.globalMargins.tiny,
-        position: 'absolute',
-        right: Kb.Styles.globalMargins.medium,
-      },
-    }) as const
-)
-
-export default PlatformInput
diff --git a/shared/chat/conversation/input-area/normal/input.native.tsx b/shared/chat/conversation/input-area/normal/input.native.tsx
deleted file mode 100644
index b19e8a77cd39..000000000000
--- a/shared/chat/conversation/input-area/normal/input.native.tsx
+++ /dev/null
@@ -1,799 +0,0 @@
-import * as C from '@/constants'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import AudioRecorder from '@/chat/audio/audio-recorder.native'
-import FilePickerPopup from '../filepicker-popup'
-import MoreMenuPopup from './moremenu-popup.native'
-import SetExplodingMessagePicker from './set-explode-popup'
-import Typing from './typing'
-import logger from '@/logger'
-import type * as ImagePicker from 'expo-image-picker'
-import type {LayoutEvent} from '@/common-adapters/box'
-import type {Props as InputLowLevelProps, PlatformInputProps as Props, TextInfo, RefType} from './input.shared'
-import {AudioSendWrapper} from '@/chat/audio/audio-send.native'
-import {Keyboard, TextInput, type NativeSyntheticEvent, type TextInputSelectionChangeEventData, useColorScheme} from 'react-native'
-import {MaxInputAreaContext} from './max-input-area-context'
-import {
-  default as Animated,
-  skipAnimations,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from '@/common-adapters/reanimated'
-import {formatDurationShort} from '@/util/timestamp'
-import {getTextStyle} from '@/common-adapters/text.styles'
-import {launchCameraAsync, launchImageLibraryAsync} from '@/util/expo-image-picker.native'
-import {onHWKeyPressed, registerPasteImage, removeOnHWKeyPressed} from 'react-native-kb'
-import {pickDocumentsAsync} from '@/util/expo-document-picker.native'
-import {standardTransformer} from '../suggestors/common'
-import {filePickerError} from '@/util/storeless-actions'
-import {usePickerState} from '@/chat/emoji-picker/use-picker'
-import {useSuggestors} from '../suggestors'
-import {useConversationThreadID} from '../../thread-context'
-
-// Low-level TextInput wrapper
-
-export function Input(p: InputLowLevelProps) {
-  const {style: _style, onChangeText: _onChangeText, multiline, placeholder, ref} = p
-  const {textType = 'Body', rowsMax, rowsMin, padding, disabled, onPasteImage} = p
-  const {
-    autoFocus: _autoFocus,
-    autoCorrect,
-    autoCapitalize,
-    onBlur,
-    onFocus,
-    onSelectionChange: _onSelectionChange,
-  } = p
-
-  const isDarkMode = useColorScheme() === 'dark'
-  const [autoFocus, setAutoFocus] = React.useState(_autoFocus)
-  const [value, setValue] = React.useState('')
-  const [selection, setSelection] = React.useState<{start: number; end?: number | undefined} | undefined>(
-    undefined
-  )
-  const inputRef = React.useRef<TextInput | null>(null)
-
-  const setInputRef = (ti: TextInput | null) => {
-    inputRef.current = ti
-  }
-
-  const onChangeTextRef = React.useRef(_onChangeText)
-  React.useEffect(() => {
-    onChangeTextRef.current = _onChangeText
-  })
-  const [onChangeText] = React.useState(() => (s: string) => {
-    setValue(s)
-    onChangeTextRef.current?.(s)
-  })
-  const onSelectionChange = (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    setSelection(e.nativeEvent.selection)
-    _onSelectionChange?.(e)
-  }
-
-  React.useImperativeHandle(ref, () => {
-    const i = inputRef.current
-    return {
-      blur: () => {
-        i?.blur()
-      },
-      clear: () => {
-        setValue('')
-        onChangeText('')
-        setAutoFocus(true)
-      },
-      focus: () => {
-        i?.focus()
-      },
-      getSelection: () => {
-        return selection
-      },
-      isFocused: () => !!inputRef.current?.isFocused(),
-      transformText: (fn: (textInfo: TextInfo) => TextInfo, reflectChange: boolean): void => {
-        const ti = fn({selection, text: value})
-        if (!reflectChange) {
-          return
-        }
-        onChangeText(ti.text)
-        setSelection(ti.selection)
-      },
-      get value() {
-        return value
-      },
-    }
-  }, [onChangeText, selection, value])
-
-  const style = (() => {
-    let textStyle = getTextStyle(textType, isDarkMode)
-    // RN TextInput plays better without this
-    if (isIOS) {
-      const {lineHeight, ...rest} = textStyle
-      textStyle = rest
-    }
-    const commonStyle = Kb.Styles.collapseStyles([inputLowLevelStyles.common, textStyle])
-
-    const lineHeight = textStyle.lineHeight
-    let lineStyle: Array<Kb.Styles.StylesCrossPlatform>
-    if (multiline) {
-      const defaultRowsToShow = Math.min(2, rowsMax ?? 2)
-      const paddingStyles = padding ? Kb.Styles.padding(Kb.Styles.globalMargins[padding]) : {}
-      lineStyle = [
-        inputLowLevelStyles.multiline,
-        {
-          minHeight: (rowsMin || defaultRowsToShow) * (lineHeight ?? 0),
-        },
-        !!rowsMax && {maxHeight: rowsMax * (lineHeight ?? 0)},
-        paddingStyles,
-      ]
-    } else {
-      lineStyle = [inputLowLevelStyles.singleline, {maxHeight: lineHeight, minHeight: lineHeight}]
-    }
-
-    return Kb.Styles.collapseStyles([commonStyle, ...lineStyle, _style])
-  })()
-
-  const onPasteImageImpl = (uris: Array<string>) => {
-    if (onPasteImage) {
-      onPasteImage(uris)
-    }
-  }
-
-  const onPaste = onPasteImage ? onPasteImageImpl : undefined
-
-  React.useEffect(() => {
-    if (!onPaste) return
-    const dereg = registerPasteImage(uris => {
-      Keyboard.dismiss()
-      onPaste(uris)
-    })
-    return () => {
-      dereg()
-    }
-  }, [onPaste])
-
-  return (
-    <TextInput
-      autoCapitalize={autoCapitalize}
-      autoCorrect={autoCorrect}
-      autoFocus={autoFocus}
-      blurOnSubmit={false}
-      multiline={multiline}
-      onBlur={onBlur}
-      onChangeText={onChangeText}
-      onFocus={onFocus}
-      onSelectionChange={onSelectionChange}
-      placeholder={placeholder}
-      readOnly={disabled}
-      ref={setInputRef}
-      selection={selection}
-      style={style}
-      value={value}
-    />
-  )
-}
-
-const inputLowLevelStyles = Kb.Styles.styleSheetCreate(() => ({
-  common: {borderWidth: 0, flexGrow: 1},
-  multiline: Kb.Styles.platformStyles({
-    isMobile: {
-      height: undefined,
-      textAlignVertical: 'top', // android centers by default
-    },
-  }),
-  singleline: {padding: 0},
-}))
-
-// Sub-components
-
-const singleLineHeight = 36
-const threeLineHeight = 78
-const inputAreaHeight = 91
-const maxExpandedSuggestionListHeight = 240
-const minExpandedSuggestionListHeight = 120
-
-type MenuType = 'exploding' | 'filepickerpopup' | 'moremenu'
-
-type ButtonsProps = Pick<
-  Props,
-  'explodingModeSeconds' | 'isExploding' | 'cannotWrite' | 'onCancelEditing'
-> & {
-  hasText: boolean
-  isEditing: boolean
-  toggleShowingMenu: () => void
-  insertText: (s: string) => void
-  onSubmit: () => void
-  ourShowMenu: (m: MenuType) => void
-  onSelectionChange?: (p: {start: number | null; end: number | null}) => void
-  showAudioSend: boolean
-  setShowAudioSend: (s: boolean) => void
-}
-
-const Buttons = function Buttons(p: ButtonsProps) {
-  const {insertText, ourShowMenu, onSubmit, onCancelEditing} = p
-  const {hasText, isEditing, isExploding, explodingModeSeconds, cannotWrite, toggleShowingMenu} = p
-  const {showAudioSend, setShowAudioSend} = p
-
-  const openFilePicker = () => {
-    ourShowMenu('filepickerpopup')
-  }
-  const openMoreMenu = () => {
-    ourShowMenu('moremenu')
-  }
-
-  const insertMentionMarker = () => {
-    insertText('@')
-  }
-
-  const pickKey = 'chatInput'
-  const emojiStr = usePickerState(s => s.pickerMap.get(pickKey)?.emojiStr) ?? ''
-  const updatePickerMap = usePickerState(s => s.dispatch.updatePickerMap)
-
-  const lastEmojiRef = React.useRef('')
-  React.useEffect(() => {
-    if (lastEmojiRef.current === emojiStr) {
-      return
-    }
-    lastEmojiRef.current = emojiStr
-    if (emojiStr) {
-      insertText(emojiStr + ' ')
-      updatePickerMap(pickKey, undefined)
-    }
-  }, [emojiStr, insertText, updatePickerMap])
-
-  const conversationIDKey = useConversationThreadID()
-  const openEmojiPicker = () => {
-    C.Router2.navigateAppend({
-      name: 'chatChooseEmoji',
-      params: {conversationIDKey, pickKey},
-    })
-  }
-
-  const explodingIcon = !isEditing && !cannotWrite && (
-    <Kb.ClickableBox style={styles.explodingWrapper} onClick={toggleShowingMenu}>
-      {isExploding ? (
-        <Kb.Box2 direction="horizontal" style={styles.exploding} centerChildren={true}>
-          <Kb.Text type="BodyTinyBold" negative={true} style={styles.explodingText}>
-            {formatDurationShort(explodingModeSeconds * 1000)}
-          </Kb.Text>
-        </Kb.Box2>
-      ) : (
-        <Kb.Icon color={undefined} type="iconfont-timer" />
-      )}
-    </Kb.ClickableBox>
-  )
-
-  return (
-    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.actionContainer}>
-      {isEditing && (
-        <Kb.Button
-          style={styles.editingButton}
-          small={true}
-          onClick={onCancelEditing}
-          label="Cancel"
-          type="Dim"
-        />
-      )}
-      {explodingIcon}
-      <Kb.Icon padding="tiny" onClick={openEmojiPicker} type="iconfont-emoji" />
-      <Kb.Icon padding="tiny" onClick={insertMentionMarker} type="iconfont-mention" />
-      <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexGrow} />
-      {!hasText && (
-        <Kb.Box2 direction="horizontal" alignItems="flex-end">
-          <Kb.Icon onClick={openFilePicker} padding="tiny" type="iconfont-camera" />
-          <AudioRecorder showAudioSend={showAudioSend} setShowAudioSend={setShowAudioSend} />
-          <Kb.Icon onClick={openMoreMenu} padding="tiny" type="iconfont-add" />
-        </Kb.Box2>
-      )}
-      {hasText && (
-        <Kb.Button
-          type="Default"
-          small={true}
-          onClick={onSubmit}
-          disabled={!hasText}
-          label={isEditing ? 'Save' : 'Send'}
-          style={isExploding ? styles.explodingSendBtn : styles.sendBtn}
-        />
-      )}
-    </Kb.Box2>
-  )
-}
-
-const AnimatedExpand = (() => {
-  'use no memo'
-  if (skipAnimations) {
-    return function AnimatedExpand() {
-      return null
-    }
-  } else {
-    return function AnimatedExpand(p: {expandInput: () => void; expanded: boolean}) {
-      'use no memo'
-      const {expandInput, expanded} = p
-      const offset = useSharedValue(expanded ? 1 : 0)
-      const topStyle = useAnimatedStyle(() => ({
-        transform: [{rotate: withTiming(`${offset.value ? 45 + 180 : 45}deg`)}, {scale: 0.6}],
-      }))
-      const bottomStyle = useAnimatedStyle(() => ({
-        transform: [
-          {rotate: withTiming(`${offset.value ? 45 + 180 : 45}deg`)},
-          {scaleX: -0.6},
-          {scaleY: -0.6},
-        ],
-      }))
-      const lastExpandedRef = React.useRef(expanded)
-      React.useEffect(() => {
-        if (lastExpandedRef.current !== expanded) {
-          lastExpandedRef.current = expanded
-          offset.set(expanded ? 1 : 0)
-        }
-      }, [expanded, offset])
-
-      return (
-        <Kb.ClickableBox onClick={expandInput} style={styles.iconContainer}>
-          <Animated.View style={[styles.iconTop, topStyle]} pointerEvents="none">
-            <Kb.Icon
-              type="iconfont-arrow-full-up"
-              fontSize={18}
-              color={Kb.Styles.globalColors.black_35}
-            />
-          </Animated.View>
-          <Animated.View style={[styles.iconBottom, bottomStyle]} pointerEvents="none">
-            <Kb.Icon
-              type="iconfont-arrow-full-up"
-              fontSize={18}
-              color={Kb.Styles.globalColors.black_35}
-            />
-          </Animated.View>
-        </Kb.ClickableBox>
-      )
-    }
-  }
-})()
-
-type ChatFilePickerProps = {
-  attachTo?: React.RefObject<Kb.MeasureRef | null>
-  showingPopup: boolean
-  hidePopup: () => void
-}
-const ChatFilePicker = (p: ChatFilePickerProps) => {
-  const {attachTo, showingPopup, hidePopup} = p
-  const conversationIDKey = useConversationThreadID()
-  const launchNativeImagePicker = (mediaType: 'photo' | 'video' | 'mixed' | 'file', location: string) => {
-    const f = async () => {
-      const handleSelection = (result: ImagePicker.ImagePickerResult) => {
-        if (result.canceled || result.assets.length === 0) {
-          return
-        }
-        const pathAndOutboxIDs = result.assets.map(a => ({path: a.uri}))
-        C.Router2.navigateAppend({
-          name: 'chatAttachmentGetTitles',
-          params: {conversationIDKey, pathAndOutboxIDs},
-        })
-      }
-
-      switch (location) {
-        case 'camera':
-          try {
-            const res = await launchCameraAsync(mediaType as 'photo' | 'video' | 'mixed')
-            handleSelection(res)
-          } catch (error) {
-            filePickerError(new Error(String(error)))
-          }
-          break
-        case 'library':
-          try {
-            const res = await launchImageLibraryAsync(mediaType as 'photo' | 'video' | 'mixed', true, true)
-            handleSelection(res)
-          } catch (error) {
-            filePickerError(new Error(String(error)))
-          }
-          break
-        case 'file':
-          try {
-            const res = await pickDocumentsAsync(true)
-            if (!res.canceled && res.assets.length > 0) {
-              const pathAndOutboxIDs = res.assets.map(a => ({path: a.uri}))
-              C.Router2.navigateAppend({
-                name: 'chatAttachmentGetTitles',
-                params: {conversationIDKey, pathAndOutboxIDs},
-              })
-            }
-          } catch (error) {
-            filePickerError(new Error(String(error)))
-          }
-          break
-      }
-    }
-    C.ignorePromise(f())
-  }
-
-  return (
-    <FilePickerPopup
-      attachTo={attachTo}
-      visible={showingPopup}
-      onHidden={hidePopup}
-      onSelect={launchNativeImagePicker}
-    />
-  )
-}
-
-type AnimatedInputProps = Omit<InputLowLevelProps, 'ref'> & {
-  expanded: boolean
-  inputRef?: React.Ref<RefType>
-  reservedHeight?: number
-}
-const AnimatedInput = (() => {
-  if (skipAnimations) {
-    return function AnimatedInput(p: AnimatedInputProps) {
-      const {expanded: _expanded, inputRef, reservedHeight: _reservedHeight, ...rest} = p
-      return (
-        <Animated.View style={[p.style, rest.style]}>
-          <Input multiline={true} {...rest} ref={inputRef} style={styles.inputInner} />
-        </Animated.View>
-      )
-    }
-  } else {
-    return function AnimatedInput(p: AnimatedInputProps) {
-      'use no memo'
-      const maxInputArea = React.useContext(MaxInputAreaContext)
-      const {expanded, inputRef, reservedHeight = 0, ...rest} = p
-      const lastExpandedRef = React.useRef(expanded)
-      const offset = useSharedValue(expanded ? 1 : 0)
-      const maxHeight = Math.max(threeLineHeight, maxInputArea - inputAreaHeight - 15 - reservedHeight)
-      const as = useAnimatedStyle(() => ({
-        maxHeight: withTiming(offset.value ? maxHeight : threeLineHeight),
-        minHeight: withTiming(offset.value ? maxHeight : singleLineHeight),
-      }))
-      React.useEffect(() => {
-        if (expanded !== lastExpandedRef.current) {
-          lastExpandedRef.current = expanded
-          offset.set(expanded ? 1 : 0)
-        }
-      }, [expanded, offset])
-      return (
-        <Animated.View style={[p.style, as]}>
-          <Input multiline={true} {...rest} ref={inputRef} style={styles.inputInner} />
-        </Animated.View>
-      )
-    }
-  }
-})()
-
-// Main component
-
-const PlatformInput = (p: Props) => {
-  const [showAudioSend, setShowAudioSend] = React.useState(false)
-  const [height, setHeight] = React.useState(0)
-  const [expanded, setExpanded] = React.useState(false) // updates immediately, used for the icon etc
-  const inputRef = React.useRef<RefType | null>(null)
-  const maxInputArea = React.useContext(MaxInputAreaContext)
-  const preferredExpandedSuggestionListHeight = maxInputArea
-    ? Math.max(
-        minExpandedSuggestionListHeight,
-        Math.min(maxExpandedSuggestionListHeight, Math.floor(maxInputArea * 0.35))
-      )
-    : 0
-  const maxSuggestionReserveHeight = Math.max(0, maxInputArea - inputAreaHeight - 15 - threeLineHeight)
-  const expandedSuggestionListHeight = Math.min(
-    preferredExpandedSuggestionListHeight,
-    maxSuggestionReserveHeight
-  )
-  const suggestionListStyle = Kb.Styles.collapseStyles([
-    styles.suggestionList,
-    !!height && {marginBottom: height},
-    expanded && {maxHeight: expandedSuggestionListHeight},
-  ])
-  const suggestionSpinnerStyle = Kb.Styles.collapseStyles([styles.suggestionSpinnerStyle, !!height && {marginBottom: height}])
-  const {
-    popup: suggestorPopup,
-    onChangeText,
-    onBlur,
-    onSelectionChange,
-    onFocus,
-    suggestionsShowing,
-  } = useSuggestors({
-    inputRef,
-    onChangeText: p.onChangeText,
-    suggestionListStyle,
-    suggestionOverlayStyle: p.suggestionOverlayStyle,
-    suggestionSpinnerStyle,
-  })
-  const {cannotWrite, isEditing, isExploding, setInputRef, setExplodingMode} = p
-  const {onSubmit, explodingModeSeconds, hintText, onCancelEditing} = p
-  const suggestionListReserveHeight = expanded && suggestionsShowing ? expandedSuggestionListHeight : 0
-
-  const lastText = React.useRef('')
-  const whichMenu = React.useRef<MenuType | undefined>(undefined)
-  const [hasText, setHasText] = React.useState(false)
-
-  const toggleExpandInput = () => {
-    const nextState = !expanded
-    setExpanded(nextState)
-  }
-
-  const insertText = (toInsert: string) => {
-    const i = inputRef.current
-    i?.transformText(({selection, text}) => {
-      return standardTransformer(
-        toInsert,
-        {position: {end: selection?.end || null, start: selection?.start || null}, text},
-        true
-      )
-    }, true)
-  }
-
-  const expandedRef = React.useRef(expanded)
-  const onSubmitRef = React.useRef(onSubmit)
-  React.useEffect(() => {
-    expandedRef.current = expanded
-    onSubmitRef.current = onSubmit
-  }, [expanded, onSubmit])
-
-  const [onQueueSubmit] = React.useState(() => () => {
-    setTimeout(() => {
-      const text = lastText.current
-      if (text) {
-        onSubmitRef.current(text)
-        if (expandedRef.current) {
-          setExpanded(false)
-        }
-      }
-    }, 60)
-  })
-
-  React.useEffect(() => {
-    // Enter should send a message like on desktop, when a hardware keyboard's
-    // attached.  On Android we get "hardware" keypresses from soft keyboards,
-    // so check whether a soft keyboard's up.
-    const cb = (hwKeyEvent: {pressedKey: string}) => {
-      switch (hwKeyEvent.pressedKey) {
-        case 'enter':
-          onQueueSubmit()
-          break
-        case 'shift-enter': {
-          const i = inputRef.current
-          i?.transformText(({selection, text}) => {
-            return standardTransformer(
-              '\n',
-              {position: {end: selection?.end || null, start: selection?.start || null}, text},
-              true
-            )
-          }, true)
-        }
-      }
-    }
-    onHWKeyPressed(cb)
-    return () => {
-      removeOnHWKeyPressed()
-    }
-  }, [onQueueSubmit])
-
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    switch (whichMenu.current) {
-      case 'filepickerpopup':
-        return <ChatFilePicker attachTo={attachTo} showingPopup={true} hidePopup={hidePopup} />
-      case 'moremenu':
-        return <MoreMenuPopup onHidden={hidePopup} visible={true} />
-      default:
-        return (
-          <SetExplodingMessagePicker
-            attachTo={attachTo}
-            onHidden={hidePopup}
-            visible={true}
-            setExplodingMode={setExplodingMode}
-          />
-        )
-    }
-  }
-
-  const {popup: popupMenu, showPopup} = Kb.usePopup2(makePopup)
-
-  const ourShowMenu = (menu: MenuType) => {
-    // Hide the keyboard on mobile when showing the menu.
-    Keyboard.dismiss()
-    whichMenu.current = menu
-    showPopup()
-  }
-
-  const openExplodingMenu = () => {
-    ourShowMenu('exploding')
-  }
-
-  const conversationIDKey = useConversationThreadID()
-  const onPasteImage = (uri: Array<string>) => {
-    try {
-      const pathAndOutboxIDs = uri.map(path => ({path}))
-      C.Router2.navigateAppend({
-        name: 'chatAttachmentGetTitles',
-        params: {conversationIDKey, pathAndOutboxIDs},
-      })
-    } catch (e) {
-      logger.info('onPasteImage error', e)
-    }
-  }
-
-  const onLayout = (p: LayoutEvent) => {
-    const {nativeEvent} = p
-    const {layout} = nativeEvent
-    const {height} = layout
-    setHeight(height)
-  }
-
-  const onAnimatedInputRef = (ref: RefType | null) => {
-    setInputRef(ref)
-    inputRef.current = ref
-  }
-  const aiOnChangeText = (text: string) => {
-    setHasText(!!text)
-    lastText.current = text
-    onChangeText(text)
-  }
-
-  const lastEditRef = React.useRef(isEditing)
-  React.useEffect(() => {
-    if (isEditing !== lastEditRef.current) {
-      lastEditRef.current = isEditing
-      if (isEditing) {
-        inputRef.current?.focus()
-      }
-    }
-  }, [isEditing])
-
-  const _onSelectionChange = (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-    onSelectionChange(e.nativeEvent.selection)
-  }
-
-  return (
-    <>
-      <Kb.Box2 direction="vertical" fullWidth={true} onLayout={onLayout} relative={true}>
-        {suggestorPopup}
-        {popupMenu}
-        {!suggestorPopup && <Typing />}
-        <Kb.Box2
-          direction="vertical"
-          style={Kb.Styles.collapseStyles([styles.container, isExploding && styles.explodingContainer])}
-          fullWidth={true}
-        >
-          <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.inputContainer}>
-            <AnimatedInput
-              onPasteImage={onPasteImage}
-              autoCorrect={true}
-              autoCapitalize="sentences"
-              disabled={cannotWrite}
-              placeholder={hintText}
-              multiline={true}
-              onBlur={onBlur}
-              onFocus={onFocus}
-              onChangeText={aiOnChangeText}
-              onSelectionChange={_onSelectionChange}
-              inputRef={onAnimatedInputRef}
-              style={styles.input}
-              textType="Body"
-              rowsMin={1}
-              reservedHeight={suggestionListReserveHeight}
-              expanded={expanded}
-            />
-            <AnimatedExpand expandInput={toggleExpandInput} expanded={expanded} />
-          </Kb.Box2>
-          <Buttons
-            insertText={insertText}
-            ourShowMenu={ourShowMenu}
-            onCancelEditing={onCancelEditing}
-            onSelectionChange={onSelectionChange}
-            onSubmit={onQueueSubmit}
-            hasText={hasText}
-            isEditing={isEditing}
-            isExploding={isExploding}
-            explodingModeSeconds={explodingModeSeconds}
-            cannotWrite={cannotWrite}
-            toggleShowingMenu={openExplodingMenu}
-            showAudioSend={showAudioSend}
-            setShowAudioSend={setShowAudioSend}
-          />
-        </Kb.Box2>
-      </Kb.Box2>
-      {showAudioSend && (
-        <Kb.Box2 fullHeight={true} fullWidth={true} direction="vertical" style={styles.sendWrapper}>
-          <AudioSendWrapper />
-        </Kb.Box2>
-      )}
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      actionContainer: {
-        flexShrink: 0,
-        minHeight: 32,
-      },
-      container: {
-        alignItems: 'center',
-        borderTopColor: Kb.Styles.globalColors.black_10,
-        borderTopWidth: 1,
-        minHeight: 1,
-        overflow: 'hidden',
-        ...Kb.Styles.padding(0, 0, Kb.Styles.globalMargins.tiny, 0),
-      },
-      editingButton: {
-        marginLeft: Kb.Styles.globalMargins.tiny,
-        marginRight: Kb.Styles.globalMargins.tiny,
-      },
-      exploding: {
-        backgroundColor: Kb.Styles.globalColors.black,
-        borderRadius: Kb.Styles.globalMargins.mediumLarge / 2,
-        height: 28,
-        margin: Kb.Styles.globalMargins.xtiny,
-        width: 28,
-      },
-      explodingContainer: {borderTopColor: Kb.Styles.globalColors.black},
-      explodingSendBtn: {
-        backgroundColor: Kb.Styles.globalColors.black,
-        marginRight: Kb.Styles.globalMargins.tiny,
-      },
-      explodingText: {
-        fontSize: 11,
-        lineHeight: 16,
-      },
-      explodingWrapper: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        height: 38,
-        justifyContent: 'center',
-        width: 36,
-      },
-      iconBottom: {
-        bottom: 0,
-        left: 1,
-        position: 'absolute',
-      },
-      iconContainer: {
-        height: 28,
-        marginRight: -Kb.Styles.globalMargins.xtiny,
-        marginTop: Kb.Styles.globalMargins.tiny,
-        position: 'relative',
-        width: 28,
-      },
-      iconTop: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-      },
-      input: Kb.Styles.platformStyles({
-        common: {
-          flex: 1,
-          flexShrink: 1,
-          minHeight: 0,
-        },
-      }),
-      inputContainer: {
-        ...Kb.Styles.padding(0, Kb.Styles.globalMargins.tiny),
-        flexGrow: 1,
-        flexShrink: 1,
-        maxHeight: '100%',
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-      },
-      inputInner: {flexGrow: 1},
-      sendBtn: {marginRight: Kb.Styles.globalMargins.tiny},
-      sendWrapper: {backgroundColor: Kb.Styles.globalColors.white_90, position: 'absolute'},
-      suggestionList: Kb.Styles.platformStyles({
-        isMobile: {
-          backgroundColor: Kb.Styles.globalColors.white,
-          borderColor: Kb.Styles.globalColors.black_10,
-          borderStyle: 'solid',
-          borderTopWidth: 3,
-          maxHeight: '50%',
-          overflow: 'hidden',
-        },
-      }),
-      suggestionSpinnerStyle: Kb.Styles.platformStyles({
-        isMobile: {
-          bottom: Kb.Styles.globalMargins.small,
-          position: 'absolute',
-          right: Kb.Styles.globalMargins.small,
-        },
-      }),
-    }) as const
-)
-
-export default PlatformInput
diff --git a/shared/chat/conversation/input-area/normal/input.tsx b/shared/chat/conversation/input-area/normal/input.tsx
new file mode 100644
index 000000000000..2e73f7bcf1d1
--- /dev/null
+++ b/shared/chat/conversation/input-area/normal/input.tsx
@@ -0,0 +1,1522 @@
+import * as C from '@/constants'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import * as ChatTypes from '@/constants/types/chat/message'
+import * as InputState from '../input-state'
+import SetExplodingMessagePopup from './set-explode-popup'
+import Typing from './typing'
+import type {Props as InputLowLevelProps, TextInfo, RefType} from './input.shared'
+import type {PlatformInputProps as Props} from './input.shared'
+export type {Selection, RefType, TextInfo, PlatformInputProps} from './input.shared'
+import {formatDurationShort} from '@/util/timestamp'
+import {useSuggestors} from '../suggestors'
+import {ScrollContext} from '@/chat/conversation/normal/context'
+import {getTextStyle} from '@/common-adapters/text.styles'
+import {useColorScheme} from 'react-native'
+import {useConversationThreadID} from '../../thread-context'
+import {TextInput, Keyboard} from 'react-native'
+import {registerPasteImage, removeOnHWKeyPressed, onHWKeyPressed} from 'react-native-kb'
+import {EmojiPickerDesktop} from '@/chat/emoji-picker/container'
+import KB2 from '@/util/electron'
+import {KeyEventHandler} from '@/common-adapters/key-event-handler.desktop'
+import AudioRecorder from '@/chat/audio/audio-recorder.native'
+import {usePickerState} from '@/chat/emoji-picker/use-picker'
+import {skipAnimations, useSharedValue, useAnimatedStyle, withTiming, default as Reanimated} from '@/common-adapters/reanimated'
+import FilePickerPopup from '../filepicker-popup'
+import {launchCameraAsync, launchImageLibraryAsync} from '@/util/expo-image-picker'
+import {pickDocumentsAsync} from '@/util/expo-document-picker.native'
+import {filePickerError} from '@/util/storeless-actions'
+import {AudioSendWrapper} from '@/chat/audio/audio-send.native'
+import {standardTransformer} from '../suggestors/common'
+import logger from '@/logger'
+import {MaxInputAreaContext} from './max-input-area-context'
+import MoreMenuPopup from './moremenu-popup.native'
+
+// ==================== DESKTOP LOW-LEVEL INPUT ====================
+
+// Stub types to avoid dom lib dependency in native tsconfig
+type HtmlInputRef = {
+  blur: () => void
+  focus: () => void
+  value: string
+  selectionStart: number | null
+  selectionEnd: number | null
+  click: () => void
+  getBoundingClientRect: () => DOMRect
+  files?: HtmlFileList | null
+}
+type HtmlTextAreaRef = {
+  blur: () => void
+  focus: () => void
+  value: string
+  selectionStart: number | null
+  selectionEnd: number | null
+  click: () => void
+  getBoundingClientRect: () => DOMRect
+}
+type HtmlFileList = {
+  length: number
+  [index: number]: HtmlFile
+  [Symbol.iterator]: () => Iterator<HtmlFile>
+}
+type HtmlFile = {
+  name: string
+  size: number
+  type: string
+}
+type NativeSyntheticEvent<T> = {nativeEvent: T}
+type TextInputSelectionChangeEventData = {selection: {start: number; end: number}}
+type DesktopKeyboardEvent = {
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  type: string
+  target: unknown
+  preventDefault: () => void
+}
+
+const maybeParseInt = (input: string | number, radix: number): number =>
+  typeof input === 'string' ? parseInt(input, radix) : input
+
+function DesktopInput(p: InputLowLevelProps) {
+  const {style: _style, onChangeText: _onChangeText, multiline, ref} = p
+  const {textType = 'Body', rowsMax, rowsMin, padding, placeholder, onKeyUp: _onKeyUp} = p
+  const {allowKeyboardEvents, className, disabled, autoFocus, onKeyDown: _onKeyDown, onEnterKeyDown} = p
+
+  const isDarkMode = useColorScheme() === 'dark'
+
+  const [value, setValue] = React.useState('')
+  // this isn't a value react can set on the input, so we need to drive it manually
+  const selectionRef = React.useRef({end: 0, start: 0})
+  const inputSingleRef = React.useRef<HtmlInputRef>(null)
+  const inputMultiRef = React.useRef<HtmlTextAreaRef>(null)
+
+  const onChangeTextRef = React.useRef(_onChangeText)
+  React.useEffect(() => {
+    onChangeTextRef.current = _onChangeText
+  }, [_onChangeText])
+  const [onChange] = React.useState(() => (e: {target: {value: string}}) => {
+    const s = e.target.value
+    setValue(s)
+    onChangeTextRef.current?.(s)
+  })
+  const onSelect = (e: {currentTarget: {selectionEnd: number | null; selectionStart: number | null}}) => {
+    selectionRef.current = {
+      end: e.currentTarget.selectionEnd || 0,
+      start: e.currentTarget.selectionStart || 0,
+    }
+  }
+
+  React.useImperativeHandle(ref, () => {
+    const i = multiline ? inputMultiRef.current : inputSingleRef.current
+    return {
+      blur: () => {
+        i?.blur()
+      },
+      clear: () => {
+        if (i) {
+          i.value = ''
+          onChange({target: i})
+        }
+      },
+      focus: () => {
+        i?.focus()
+      },
+      getBoundingClientRect: () => {
+        return i?.getBoundingClientRect()
+      },
+      getSelection: () => {
+        return selectionRef.current
+      },
+      isFocused: () => !!i && (globalThis as {document?: {activeElement: unknown}}).document?.activeElement === i,
+      transformText: (fn: (textInfo: TextInfo) => TextInfo, reflectChange: boolean): void => {
+        const ti = fn({selection: selectionRef.current, text: value})
+        // defer since we can do this in other renders
+        setTimeout(() => {
+          setValue(ti.text)
+          selectionRef.current = {end: ti.selection?.end ?? 0, start: ti.selection?.start ?? 0}
+          // defer this else we'll get onSelect called and wipe it out
+          setTimeout(() => {
+            if (i && ti.selection) {
+              if (typeof ti.selection.start === 'number') {
+                i.selectionStart = ti.selection.start
+              }
+              if (typeof ti.selection.end === 'number') {
+                i.selectionEnd = ti.selection.end
+              }
+            }
+          }, 10)
+          if (reflectChange) {
+            setTimeout(() => {
+              if (!i) return
+              onChange({target: i})
+            }, 100)
+          }
+        }, 0)
+      },
+      value,
+    }
+  }, [value, multiline, onChange])
+
+  const rows = multiline ? rowsMin || Math.min(2, rowsMax || 2) : 0
+  const style = (() => {
+    const textStyle = getTextStyle(textType, isDarkMode)
+    if (multiline) {
+      const heightStyles: {minHeight: number; maxHeight?: number} = {
+        minHeight:
+          rows * (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20) +
+          (padding ? Kb.Styles.globalMargins[padding] * 2 : 0),
+      }
+
+      if (rowsMax) {
+        heightStyles.maxHeight =
+          rowsMax * (textStyle.lineHeight === undefined ? 20 : maybeParseInt(textStyle.lineHeight, 10) || 20)
+      }
+
+      const paddingStyles = padding ? Kb.Styles.padding(Kb.Styles.globalMargins[padding]) : {}
+
+      return Kb.Styles.collapseStyles([
+        desktopInputLowLevelStyles.noChrome, // noChrome comes before because we want lineHeight set in multiline
+        textStyle,
+        desktopInputLowLevelStyles.multiline,
+        heightStyles,
+        paddingStyles,
+        _style,
+      ])
+    } else {
+      return Kb.Styles.collapseStyles([
+        textStyle,
+        desktopInputLowLevelStyles.noChrome, // noChrome comes after to unset lineHeight in singleline
+        _style,
+      ])
+    }
+  })()
+
+  const isComposingIMERef = React.useRef(false)
+
+  const onCompositionStart = () => {
+    isComposingIMERef.current = true
+  }
+
+  const onCompositionEnd = () => {
+    isComposingIMERef.current = false
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (isComposingIMERef.current) {
+      return
+    }
+    _onKeyDown?.(e)
+    if (onEnterKeyDown && e.key === 'Enter' && !(e.shiftKey || e.ctrlKey || e.altKey)) {
+      onEnterKeyDown(e)
+    }
+  }
+
+  const onKeyUp = (e: React.KeyboardEvent) => {
+    if (isComposingIMERef.current) {
+      return
+    }
+    _onKeyUp?.(e)
+  }
+
+  const commonProps = {
+    autoFocus,
+    className,
+    onChange,
+    onCompositionEnd,
+    onCompositionStart,
+    onKeyDown,
+    onKeyUp,
+    onSelect,
+    placeholder,
+    value,
+    ...(disabled ? {readOnly: true} : {}),
+    ...((allowKeyboardEvents ?? true) ? {'data-allow-keyboard-shortcuts': 'true'} : {}),
+  }
+
+  // commonProps uses stub types so need to cast for JSX compatibility
+  const desktopCommonProps = commonProps as unknown as React.HTMLAttributes<HTMLElement>
+  return multiline ? (
+    <textarea {...desktopCommonProps} style={Kb.Styles.castStyleDesktop(style)} ref={inputMultiRef as React.RefObject<HTMLTextAreaElement>} rows={rows} />
+  ) : (
+    <input {...desktopCommonProps} ref={inputSingleRef as React.RefObject<HTMLInputElement>} style={Kb.Styles.castStyleDesktop(style)} />
+  )
+}
+
+const desktopInputLowLevelStyles = Kb.Styles.styleSheetCreate(() => ({
+  multiline: Kb.Styles.platformStyles({
+    isElectron: {
+      fieldSizing: 'content',
+      paddingBottom: 0,
+      paddingTop: 0,
+      resize: 'none',
+      width: '100%',
+    },
+  }),
+  noChrome: Kb.Styles.platformStyles({
+    isElectron: {
+      borderWidth: 0,
+      lineHeight: 'unset',
+      outline: 'none',
+    },
+  }),
+}))
+
+// ==================== NATIVE LOW-LEVEL INPUT ====================
+
+// Low-level TextInput wrapper
+function NativeInput(p: InputLowLevelProps) {
+  type RNTextInput = {
+    blur: () => void
+    focus: () => void
+    clear: () => void
+    isFocused: () => boolean
+    setNativeProps: (props: {selection?: {start: number; end?: number}}) => void
+  }
+
+  const {style: _style, onChangeText: _onChangeText, multiline, placeholder, ref} = p
+  const {textType = 'Body', rowsMax, rowsMin, padding, disabled, onPasteImage} = p
+  const {
+    autoFocus: _autoFocus,
+    autoCorrect,
+    autoCapitalize,
+    onBlur,
+    onFocus,
+    onSelectionChange: _onSelectionChange,
+  } = p
+
+  const isDarkMode = useColorScheme() === 'dark'
+  const [autoFocus, setAutoFocus] = React.useState(_autoFocus)
+  const [value, setValue] = React.useState('')
+  const [selection, setSelection] = React.useState<{start: number; end?: number | undefined} | undefined>(
+    undefined
+  )
+  const inputRef = React.useRef<RNTextInput | null>(null)
+
+  const setInputRef = (ti: RNTextInput | null) => {
+    inputRef.current = ti
+  }
+
+  const onChangeTextRef = React.useRef(_onChangeText)
+  React.useEffect(() => {
+    onChangeTextRef.current = _onChangeText
+  })
+  const [onChangeText] = React.useState(() => (s: string) => {
+    setValue(s)
+    onChangeTextRef.current?.(s)
+  })
+  const onSelectionChange = (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    setSelection(e.nativeEvent.selection)
+    _onSelectionChange?.(e as Parameters<NonNullable<typeof _onSelectionChange>>[0])
+  }
+
+  React.useImperativeHandle(ref, () => {
+    const i = inputRef.current
+    return {
+      blur: () => {
+        i?.blur()
+      },
+      clear: () => {
+        setValue('')
+        onChangeText('')
+        setAutoFocus(true)
+      },
+      focus: () => {
+        i?.focus()
+      },
+      getSelection: () => {
+        return selection
+      },
+      isFocused: () => !!inputRef.current?.isFocused(),
+      transformText: (fn: (textInfo: TextInfo) => TextInfo, reflectChange: boolean): void => {
+        const ti = fn({selection, text: value})
+        if (!reflectChange) {
+          return
+        }
+        onChangeText(ti.text)
+        setSelection(ti.selection)
+      },
+      get value() {
+        return value
+      },
+    }
+  }, [onChangeText, selection, value])
+
+  const style = (() => {
+    let textStyle = getTextStyle(textType, isDarkMode)
+    // RN TextInput plays better without this
+    if (isIOS) {
+      const {lineHeight, ...rest} = textStyle
+      textStyle = rest
+    }
+    const commonStyle = Kb.Styles.collapseStyles([nativeInputLowLevelStyles.common, textStyle])
+
+    const lineHeight = textStyle.lineHeight
+    let lineStyle: Array<Kb.Styles.StylesCrossPlatform>
+    if (multiline) {
+      const defaultRowsToShow = Math.min(2, rowsMax ?? 2)
+      const paddingStyles = padding ? Kb.Styles.padding(Kb.Styles.globalMargins[padding]) : {}
+      lineStyle = [
+        nativeInputLowLevelStyles.multiline,
+        {
+          minHeight: (rowsMin || defaultRowsToShow) * (lineHeight ?? 0),
+        },
+        !!rowsMax && {maxHeight: rowsMax * (lineHeight ?? 0)},
+        paddingStyles,
+      ]
+    } else {
+      lineStyle = [nativeInputLowLevelStyles.singleline, {maxHeight: lineHeight, minHeight: lineHeight}]
+    }
+
+    return Kb.Styles.collapseStyles([commonStyle, ...lineStyle, _style])
+  })()
+
+  const onPasteImageImpl = (uris: Array<string>) => {
+    if (onPasteImage) {
+      onPasteImage(uris)
+    }
+  }
+
+  const onPaste = onPasteImage ? onPasteImageImpl : undefined
+
+  React.useEffect(() => {
+    if (!onPaste) return
+    const dereg = registerPasteImage(uris => {
+      Keyboard.dismiss()
+      onPaste(uris)
+    })
+    return () => {
+      dereg()
+    }
+  }, [onPaste])
+
+  void removeOnHWKeyPressed
+  void onHWKeyPressed
+
+  return (
+    <TextInput
+      autoCapitalize={autoCapitalize}
+      autoCorrect={autoCorrect}
+      autoFocus={autoFocus}
+      blurOnSubmit={false}
+      multiline={multiline}
+      onBlur={onBlur as ((e: unknown) => void) | undefined}
+      onChangeText={onChangeText}
+      onFocus={onFocus as ((e: unknown) => void) | undefined}
+      onSelectionChange={onSelectionChange}
+      placeholder={placeholder}
+      readOnly={disabled}
+      ref={setInputRef}
+      selection={selection}
+      style={style as object | null | undefined}
+      value={value}
+    />
+  )
+}
+
+const nativeInputLowLevelStyles = Kb.Styles.styleSheetCreate(() => ({
+  common: {borderWidth: 0, flexGrow: 1},
+  multiline: Kb.Styles.platformStyles({
+    isMobile: {
+      height: undefined,
+      textAlignVertical: 'top', // android centers by default
+    },
+  }),
+  singleline: {padding: 0},
+}))
+
+export const Input = isMobile ? NativeInput : DesktopInput
+
+// ==================== DESKTOP PLATFORM INPUT ====================
+
+type HtmlInputRefType = React.RefObject<HtmlInputRef | null>
+type InputRefType = React.RefObject<RefType | null>
+
+type ExplodingButtonProps = Pick<Props, 'explodingModeSeconds'> & {
+  focusInput: () => void
+  setExplodingMode: (mode: number) => void
+}
+const ExplodingButton = function ExplodingButton(p: ExplodingButtonProps) {
+  const {explodingModeSeconds, focusInput, setExplodingMode} = p
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    return (
+      <SetExplodingMessagePopup
+        attachTo={attachTo}
+        onAfterSelect={focusInput}
+        onHidden={hidePopup}
+        visible={true}
+        setExplodingMode={setExplodingMode}
+      />
+    )
+  }
+  const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup)
+
+  return (
+    <Kb.ClickableBox2
+      className={Kb.Styles.classNames({expanded: showingPopup}, 'timer-icon-container')}
+      onClick={showPopup}
+      ref={popupAnchor}
+      style={Kb.Styles.collapseStyles([
+        desktopStyles.explodingIconContainer,
+        !!explodingModeSeconds && {
+          backgroundColor: Kb.Styles.globalColors.black,
+        },
+      ])}
+    >
+      {popup}
+      <Kb.Box2
+        direction="vertical"
+        style={desktopStyles.explodingInsideWrapper}
+        tooltip={explodingModeSeconds ? undefined : 'Timer'}
+        justifyContent="center"
+      >
+        {explodingModeSeconds ? (
+          <Kb.Text type="BodyTinyBold" negative={true}>
+            {formatDurationShort(explodingModeSeconds * 1000)}
+          </Kb.Text>
+        ) : (
+          <Kb.Icon
+            className={Kb.Styles.classNames('timer-icon', 'hover_color_black')}
+            onClick={showPopup}
+            padding="xtiny"
+            type="iconfont-timer"
+          />
+        )}
+      </Kb.Box2>
+    </Kb.ClickableBox2>
+  )
+}
+
+type EmojiButtonProps = {inputRef: InputRefType}
+const EmojiButton = function EmojiButton(p: EmojiButtonProps) {
+  const {inputRef} = p
+  const conversationIDKey = useConversationThreadID()
+  const insertEmoji = (emojiColons: string) => {
+    inputRef.current?.transformText(({text, selection}) => {
+      const newText =
+        text.slice(0, selection?.start || 0) + emojiColons + text.slice(selection?.end || 0) + ' '
+      const pos = (selection?.start || 0) + emojiColons.length + 1
+      return {
+        selection: {end: pos, start: pos},
+        text: newText,
+      }
+    }, true)
+    inputRef.current?.focus()
+  }
+
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    return (
+      <Kb.Popup attachTo={attachTo} visible={true} onHidden={hidePopup} position="top right">
+        <EmojiPickerDesktop
+          conversationIDKey={conversationIDKey}
+          onPickAction={insertEmoji}
+          onDidPick={hidePopup}
+        />
+      </Kb.Popup>
+    )
+  }
+
+  const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup)
+
+  return (
+    <>
+      <Kb.Box2
+        direction="vertical"
+        style={desktopStyles.icon}
+        ref={popupAnchor}
+        tooltip="Emoji"
+        className="tooltip-top-left"
+      >
+        <Kb.Icon
+          color={showingPopup ? Kb.Styles.globalColors.black : undefined}
+          onClick={showPopup}
+          type="iconfont-emoji"
+        />
+      </Kb.Box2>
+      {popup}
+    </>
+  )
+}
+
+const GiphyButton = function GiphyButton() {
+  const toggleGiphyPrefill = InputState.useConversationInputDispatch(s => s.toggleGiphyPrefill)
+  const onGiphyToggle = toggleGiphyPrefill
+
+  return (
+    <Kb.Box2 direction="vertical" style={desktopStyles.icon} tooltip="GIF" className="tooltip-top-left">
+      <Kb.Icon onClick={onGiphyToggle} type="iconfont-gif" />
+    </Kb.Box2>
+  )
+}
+
+const fileListToPaths = (f: HtmlFileList): Array<string> => {
+  const {getPathForFile} = KB2.functions
+  return Array.from(f).map(f => getPathForFile?.(f as File) ?? '')
+}
+
+const FileButton = function FileButton(p: {setHtmlInputRef: (i: HtmlInputRef | null) => void}) {
+  const {setHtmlInputRef} = p
+  const htmlInputRef = React.useRef<HtmlInputRef | null>(null)
+  const conversationIDKey = useConversationThreadID()
+  const pickFile = () => {
+    const paths = htmlInputRef.current?.files ? fileListToPaths(htmlInputRef.current.files) : undefined
+    const pathAndOutboxIDs = paths?.reduce<Array<{path: string}>>((arr, path: string) => {
+      if (path) {
+        arr.push({path})
+      }
+      return arr
+    }, [])
+    if (pathAndOutboxIDs?.length) {
+      C.Router2.navigateAppend({
+        name: 'chatAttachmentGetTitles',
+        params: {conversationIDKey, pathAndOutboxIDs},
+      })
+    }
+
+    if (htmlInputRef.current) {
+      htmlInputRef.current.value = ''
+    }
+  }
+
+  const filePickerOpen = () => {
+    htmlInputRef.current?.click()
+  }
+
+  const setRef = (e: HtmlInputRef | null) => {
+    htmlInputRef.current = e
+    setHtmlInputRef(e)
+  }
+
+  return (
+    <Kb.Box2 direction="vertical" style={desktopStyles.icon} tooltip="Attachment" className="tooltip-top-left">
+      <Kb.Icon onClick={filePickerOpen} type="iconfont-attachment" />
+      <input type="file" style={desktopStyles.hidden} ref={setRef} onChange={pickFile} multiple={true} />
+    </Kb.Box2>
+  )
+}
+
+const DesktopFooter = () => {
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" justifyContent="space-between">
+      <Typing />
+      <Kb.Text lineClamp={1} type="BodyTiny" style={desktopStyles.footer} selectable={true}>
+        {`*bold*, _italics_, \`code\`, >quote, !>spoiler<!, @user, @team, #channel`}
+      </Kb.Text>
+    </Kb.Box2>
+  )
+}
+
+type UseKeyboardProps = Pick<Props, 'isEditing' | 'onChangeText' | 'showReplyPreview'> & {
+  focusInput: () => void
+  htmlInputRef: HtmlInputRefType
+  onKeyDown?: (evt: React.KeyboardEvent) => void
+  onEditLastMessage: () => void
+  onCancelEditing: () => void
+}
+const useKeyboard = (p: UseKeyboardProps) => {
+  const {htmlInputRef, focusInput, isEditing, onKeyDown, onCancelEditing} = p
+  const {onChangeText, onEditLastMessage, showReplyPreview} = p
+  const lastText = React.useRef('')
+  const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
+  const {scrollDown, scrollUp} = React.useContext(ScrollContext)
+  const onCancelReply = () => {
+    setReplyTo(ChatTypes.numberToOrdinal(0))
+  }
+
+  const commonOnKeyDown = (e: React.KeyboardEvent | DesktopKeyboardEvent) => {
+    const text = lastText.current
+    if (e.key === 'ArrowUp' && !isEditing && !text) {
+      e.preventDefault()
+      onEditLastMessage()
+      return true
+    } else if (e.key === 'Escape' && isEditing) {
+      onCancelEditing()
+      return true
+    } else if (e.key === 'Escape' && showReplyPreview) {
+      onCancelReply()
+      return true
+    } else if (e.key === 'u' && (e.ctrlKey || e.metaKey)) {
+      htmlInputRef.current?.click()
+      return true
+    } else if (e.key === 'PageDown') {
+      scrollDown()
+      return true
+    } else if (e.key === 'PageUp') {
+      scrollUp()
+      return true
+    }
+
+    return false
+  }
+
+  const globalKeyDownPressHandler = (ev: DesktopKeyboardEvent) => {
+    const target = ev.target
+    const tagName = (target as {tagName?: string} | null)?.tagName?.toUpperCase()
+    if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+      return
+    }
+
+    if (commonOnKeyDown(ev)) {
+      return
+    }
+
+    const isPasteKey = ev.key === 'v' && (ev.ctrlKey || ev.metaKey)
+    const isValidSpecialKey = [
+      'Backspace',
+      'Delete',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Enter',
+      'Escape',
+    ].includes(ev.key)
+    if (ev.type === 'keypress' || isPasteKey || isValidSpecialKey) {
+      focusInput()
+    }
+  }
+
+  const inputKeyDown = (e: React.KeyboardEvent) => {
+    commonOnKeyDown(e)
+    onKeyDown?.(e)
+  }
+
+  const onChangeTextInner = (text: string) => {
+    lastText.current = text
+    onChangeText(text)
+  }
+
+  return {globalKeyDownPressHandler, inputKeyDown, onChangeText: onChangeTextInner}
+}
+
+type SideButtonsProps = Pick<Props, 'cannotWrite'> & {
+  setHtmlInputRef: (i: HtmlInputRef | null) => void
+  inputRef: InputRefType
+}
+
+const SideButtons = (p: SideButtonsProps) => {
+  const {setHtmlInputRef, cannotWrite, inputRef} = p
+  return (
+    <Kb.Box2 direction="horizontal" style={desktopStyles.sideButtons}>
+      {!cannotWrite && (
+        <>
+          <GiphyButton />
+          <EmojiButton inputRef={inputRef} />
+          <FileButton setHtmlInputRef={setHtmlInputRef} />
+        </>
+      )}
+    </Kb.Box2>
+  )
+}
+
+const DesktopPlatformInput = function DesktopPlatformInput(p: Props) {
+  const {cannotWrite, explodingModeSeconds, onCancelEditing, setExplodingMode} = p
+  const {showReplyPreview, hintText, setInputRef, isEditing, onSubmit} = p
+  const htmlInputRef = React.useRef<HtmlInputRef | null>(null)
+  const setHtmlInputRef = (i: HtmlInputRef | null) => {
+    htmlInputRef.current = i
+  }
+  const inputRef = React.useRef<RefType | null>(null)
+
+  React.useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  const checkEnterOnKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !(e.altKey || e.shiftKey || e.metaKey)) {
+      e.preventDefault()
+      if (inputRef.current) {
+        onSubmit(inputRef.current.value)
+      }
+    }
+  }
+
+  const {
+    popup,
+    onKeyDown,
+    onChangeText: onChangeTextSuggestors,
+  } = useSuggestors({
+    inputRef,
+    onChangeText: p.onChangeText,
+    onKeyDown: checkEnterOnKeyDown,
+    suggestionListStyle: undefined,
+    suggestionOverlayStyle: p.suggestionOverlayStyle,
+    suggestionSpinnerStyle: desktopStyles.suggestionSpinnerStyle,
+  })
+
+  const focusInput = () => {
+    inputRef.current?.focus()
+  }
+  const setEditing = InputState.useConversationInputDispatch(s => s.setEditing)
+  const onEditLastMessage = () => {
+    setEditing('last')
+  }
+
+  const {globalKeyDownPressHandler, inputKeyDown, onChangeText} = useKeyboard({
+    focusInput,
+    htmlInputRef,
+    isEditing,
+    onCancelEditing,
+    onChangeText: onChangeTextSuggestors,
+    onEditLastMessage,
+    onKeyDown,
+    showReplyPreview,
+  })
+
+  const setRefs = (ref: null | RefType) => {
+    setInputRef(ref)
+    inputRef.current = ref
+  }
+
+  return (
+    <>
+      {popup}
+      <KeyEventHandler onKeyDown={globalKeyDownPressHandler as never} onKeyPress={globalKeyDownPressHandler as never}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={desktopStyles.container}>
+          <Kb.Box2
+            direction="horizontal"
+            alignItems="flex-end"
+            style={Kb.Styles.collapseStyles([
+              desktopStyles.inputWrapper,
+              isEditing && desktopStyles.inputWrapperEditing,
+              explodingModeSeconds && desktopStyles.inputWrapperExplodingMode,
+            ])}
+          >
+            {!isEditing && !cannotWrite && (
+              <ExplodingButton
+                explodingModeSeconds={explodingModeSeconds}
+                focusInput={focusInput}
+                setExplodingMode={setExplodingMode}
+              />
+            )}
+            {isEditing && (
+              <Kb.Button
+                label="Cancel"
+                onClick={onCancelEditing}
+                small={true}
+                style={desktopStyles.cancelEditingBtn}
+                type="Dim"
+              />
+            )}
+            <Kb.Box2 direction="horizontal" flex={1} overflow="hidden" style={desktopStyles.inputBox}>
+              <DesktopInput
+                allowKeyboardEvents={true}
+                disabled={cannotWrite}
+                autoFocus={false}
+                ref={setRefs}
+                placeholder={hintText}
+                style={Kb.Styles.collapseStyles([desktopStyles.input, isEditing && desktopStyles.inputEditing])}
+                onChangeText={onChangeText}
+                multiline={true}
+                rowsMin={1}
+                rowsMax={10}
+                onKeyDown={inputKeyDown}
+              />
+            </Kb.Box2>
+            <SideButtons cannotWrite={cannotWrite} setHtmlInputRef={setHtmlInputRef} inputRef={inputRef} />
+          </Kb.Box2>
+          <DesktopFooter />
+        </Kb.Box2>
+      </KeyEventHandler>
+    </>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      cancelEditingBtn: {margin: Kb.Styles.globalMargins.xtiny},
+      container: {
+        backgroundColor: Kb.Styles.globalColors.white,
+      },
+      explodingIconContainer: Kb.Styles.platformStyles({
+        common: {
+          ...Kb.Styles.globalStyles.flexBoxColumn,
+          alignItems: 'center',
+          alignSelf: 'stretch',
+          borderBottomLeftRadius: 3,
+          borderTopLeftRadius: 3,
+          justifyContent: 'flex-end',
+          textAlign: 'center',
+          width: 32,
+        },
+        isElectron: {
+          borderRight: `1px solid ${Kb.Styles.globalColors.black_20}`,
+          ...Kb.Styles.desktopStyles.clickable,
+        },
+      }),
+      explodingInsideWrapper: {alignItems: 'center', height: 32},
+      footer: {
+        alignSelf: 'flex-end',
+        color: Kb.Styles.globalColors.black_20,
+        marginBottom: Kb.Styles.globalMargins.xtiny,
+        marginRight: Kb.Styles.globalMargins.medium + 2,
+        marginTop: 2,
+        textAlign: 'right',
+      },
+      hidden: {display: 'none'},
+      icon: {
+        alignSelf: 'flex-end',
+        marginBottom: 2,
+        marginRight: Kb.Styles.globalMargins.xtiny,
+        padding: Kb.Styles.globalMargins.xtiny,
+      },
+      input: Kb.Styles.platformStyles({
+        isElectron: {
+          backgroundColor: Kb.Styles.globalColors.transparent,
+          lineHeight: 22,
+          minHeight: 22,
+        },
+      }),
+      inputBox: {
+        minWidth: 0,
+        paddingBottom: Kb.Styles.globalMargins.xtiny,
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: Kb.Styles.globalMargins.tiny - 2,
+        textAlign: 'left',
+      },
+      inputEditing: {color: Kb.Styles.globalColors.blackOrBlack},
+      inputWrapper: {
+        alignSelf: 'stretch',
+        backgroundColor: Kb.Styles.globalColors.white,
+        borderColor: Kb.Styles.globalColors.black_20,
+        borderRadius: 4,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        marginLeft: Kb.Styles.globalMargins.small,
+        marginRight: Kb.Styles.globalMargins.small,
+        paddingRight: Kb.Styles.globalMargins.xtiny,
+      },
+      inputWrapperEditing: {backgroundColor: Kb.Styles.globalColors.yellowOrYellowAlt},
+      inputWrapperExplodingMode: {borderColor: Kb.Styles.globalColors.black},
+      sideButtons: {alignSelf: 'flex-end'},
+      suggestionSpinnerStyle: {
+        bottom: Kb.Styles.globalMargins.tiny,
+        position: 'absolute',
+        right: Kb.Styles.globalMargins.medium,
+      },
+    }) as const
+)
+
+// ==================== NATIVE PLATFORM INPUT ====================
+
+const singleLineHeight = 36
+const threeLineHeight = 78
+const inputAreaHeight = 91
+const maxExpandedSuggestionListHeight = 240
+const minExpandedSuggestionListHeight = 120
+
+type MenuType = 'exploding' | 'filepickerpopup' | 'moremenu'
+
+type NativeButtonsProps = Pick<
+  Props,
+  'explodingModeSeconds' | 'isExploding' | 'cannotWrite' | 'onCancelEditing'
+> & {
+  hasText: boolean
+  isEditing: boolean
+  toggleShowingMenu: () => void
+  insertText: (s: string) => void
+  onSubmit: () => void
+  ourShowMenu: (m: MenuType) => void
+  onSelectionChange?: (p: {start: number | null; end: number | null}) => void
+  showAudioSend: boolean
+  setShowAudioSend: (s: boolean) => void
+}
+
+const NativeButtons = function NativeButtons(p: NativeButtonsProps) {
+  const {insertText, ourShowMenu, onSubmit, onCancelEditing} = p
+  const {hasText, isEditing, isExploding, explodingModeSeconds, cannotWrite, toggleShowingMenu} = p
+  const {showAudioSend, setShowAudioSend} = p
+
+  const openFilePicker = () => {
+    ourShowMenu('filepickerpopup')
+  }
+  const openMoreMenu = () => {
+    ourShowMenu('moremenu')
+  }
+
+  const insertMentionMarker = () => {
+    insertText('@')
+  }
+
+  const pickKey = 'chatInput'
+  const emojiStr = usePickerState(s => s.pickerMap.get(pickKey)?.emojiStr) ?? ''
+  const updatePickerMap = usePickerState(s => s.dispatch.updatePickerMap)
+
+  const lastEmojiRef = React.useRef('')
+  React.useEffect(() => {
+    if (lastEmojiRef.current === emojiStr) {
+      return
+    }
+    lastEmojiRef.current = emojiStr
+    if (emojiStr) {
+      insertText(emojiStr + ' ')
+      updatePickerMap(pickKey, undefined)
+    }
+  }, [emojiStr, insertText, updatePickerMap])
+
+  const conversationIDKey = useConversationThreadID()
+  const openEmojiPicker = () => {
+    C.Router2.navigateAppend({
+      name: 'chatChooseEmoji',
+      params: {conversationIDKey, pickKey},
+    })
+  }
+
+  const explodingIcon = !isEditing && !cannotWrite && (
+    <Kb.ClickableBox style={nativeStyles.explodingWrapper} onClick={toggleShowingMenu}>
+      {isExploding ? (
+        <Kb.Box2 direction="horizontal" style={nativeStyles.exploding} centerChildren={true}>
+          <Kb.Text type="BodyTinyBold" negative={true} style={nativeStyles.explodingText}>
+            {formatDurationShort(explodingModeSeconds * 1000)}
+          </Kb.Text>
+        </Kb.Box2>
+      ) : (
+        <Kb.Icon color={undefined} type="iconfont-timer" />
+      )}
+    </Kb.ClickableBox>
+  )
+
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={nativeStyles.actionContainer}>
+      {isEditing && (
+        <Kb.Button
+          style={nativeStyles.editingButton}
+          small={true}
+          onClick={onCancelEditing}
+          label="Cancel"
+          type="Dim"
+        />
+      )}
+      {explodingIcon}
+      <Kb.Icon padding="tiny" onClick={openEmojiPicker} type="iconfont-emoji" />
+      <Kb.Icon padding="tiny" onClick={insertMentionMarker} type="iconfont-mention" />
+      <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexGrow} />
+      {!hasText && (
+        <Kb.Box2 direction="horizontal" alignItems="flex-end">
+          <Kb.Icon onClick={openFilePicker} padding="tiny" type="iconfont-camera" />
+          <AudioRecorder showAudioSend={showAudioSend} setShowAudioSend={setShowAudioSend} />
+          <Kb.Icon onClick={openMoreMenu} padding="tiny" type="iconfont-add" />
+        </Kb.Box2>
+      )}
+      {hasText && (
+        <Kb.Button
+          type="Default"
+          small={true}
+          onClick={onSubmit}
+          disabled={!hasText}
+          label={isEditing ? 'Save' : 'Send'}
+          style={isExploding ? nativeStyles.explodingSendBtn : nativeStyles.sendBtn}
+        />
+      )}
+    </Kb.Box2>
+  )
+}
+
+const NativeAnimatedExpand = (() => {
+  const Animated = Reanimated
+  if (skipAnimations) {
+    return function NativeAnimatedExpand() {
+      return null
+    }
+  } else {
+    return function NativeAnimatedExpand(p: {expandInput: () => void; expanded: boolean}) {
+      'use no memo'
+      const {expandInput, expanded} = p
+      const offset = useSharedValue(expanded ? 1 : 0)
+      const topStyle = useAnimatedStyle(() => ({
+        transform: [{rotate: withTiming(`${offset.value ? 45 + 180 : 45}deg`)}, {scale: 0.6}],
+      }))
+      const bottomStyle = useAnimatedStyle(() => ({
+        transform: [
+          {rotate: withTiming(`${offset.value ? 45 + 180 : 45}deg`)},
+          {scaleX: -0.6},
+          {scaleY: -0.6},
+        ],
+      }))
+      const lastExpandedRef = React.useRef(expanded)
+      React.useEffect(() => {
+        if (lastExpandedRef.current !== expanded) {
+          lastExpandedRef.current = expanded
+          offset.set(expanded ? 1 : 0)
+        }
+      }, [expanded, offset])
+
+      return (
+        <Kb.ClickableBox onClick={expandInput} style={nativeStyles.iconContainer}>
+          <Animated.View style={[nativeStyles.iconTop, topStyle]} pointerEvents="none">
+            <Kb.Icon
+              type="iconfont-arrow-full-up"
+              fontSize={18}
+              color={Kb.Styles.globalColors.black_35}
+            />
+          </Animated.View>
+          <Animated.View style={[nativeStyles.iconBottom, bottomStyle]} pointerEvents="none">
+            <Kb.Icon
+              type="iconfont-arrow-full-up"
+              fontSize={18}
+              color={Kb.Styles.globalColors.black_35}
+            />
+          </Animated.View>
+        </Kb.ClickableBox>
+      )
+    }
+  }
+})()
+
+type NativeChatFilePickerProps = {
+  attachTo?: React.RefObject<Kb.MeasureRef | null>
+  showingPopup: boolean
+  hidePopup: () => void
+}
+const NativeChatFilePicker = (p: NativeChatFilePickerProps) => {
+
+  const {attachTo, showingPopup, hidePopup} = p
+  const conversationIDKey = useConversationThreadID()
+  const launchNativeImagePicker = (mediaType: string, location: string) => {
+    const f = async () => {
+      const mt = mediaType as 'photo' | 'video' | 'mixed'
+      const handleSelection = (result: {canceled: boolean; assets: Array<{uri: string}> | null}) => {
+        if (result.canceled || !result.assets || result.assets.length === 0) {
+          return
+        }
+        const pathAndOutboxIDs = result.assets.map(a => ({path: a.uri}))
+        C.Router2.navigateAppend({
+          name: 'chatAttachmentGetTitles',
+          params: {conversationIDKey, pathAndOutboxIDs},
+        })
+      }
+
+      switch (location) {
+        case 'camera':
+          try {
+            const res = await launchCameraAsync(mt)
+            handleSelection(res)
+          } catch (error) {
+            filePickerError(new Error(String(error)))
+          }
+          break
+        case 'library':
+          try {
+            const res = await launchImageLibraryAsync(mt, true, true)
+            handleSelection(res)
+          } catch (error) {
+            filePickerError(new Error(String(error)))
+          }
+          break
+        case 'file':
+          try {
+            const res = await pickDocumentsAsync(true)
+            if (!res.canceled && res.assets.length > 0) {
+              const pathAndOutboxIDs = res.assets.map(a => ({path: a.uri}))
+              C.Router2.navigateAppend({
+                name: 'chatAttachmentGetTitles',
+                params: {conversationIDKey, pathAndOutboxIDs},
+              })
+            }
+          } catch (error) {
+            filePickerError(new Error(String(error)))
+          }
+          break
+      }
+    }
+    C.ignorePromise(f())
+  }
+
+  return (
+    <FilePickerPopup
+      attachTo={attachTo}
+      visible={showingPopup}
+      onHidden={hidePopup}
+      onSelect={launchNativeImagePicker}
+    />
+  )
+}
+
+type NativeAnimatedInputProps = Omit<InputLowLevelProps, 'ref'> & {
+  expanded: boolean
+  inputRef?: React.Ref<RefType>
+  reservedHeight?: number
+}
+const NativeAnimatedInput = (() => {
+  const Animated = Reanimated
+  if (skipAnimations) {
+    return function NativeAnimatedInput(p: NativeAnimatedInputProps) {
+      const {expanded: _expanded, inputRef, reservedHeight: _reservedHeight, ...rest} = p
+      return (
+        <Animated.View style={[p.style, rest.style]}>
+          <NativeInput multiline={true} {...rest} ref={inputRef} style={nativeStyles.inputInner} />
+        </Animated.View>
+      )
+    }
+  } else {
+    return function NativeAnimatedInput(p: NativeAnimatedInputProps) {
+      'use no memo'
+      const maxInputArea = React.useContext(MaxInputAreaContext)
+      const {expanded, inputRef, reservedHeight = 0, ...rest} = p
+      const lastExpandedRef = React.useRef(expanded)
+      const offset = useSharedValue(expanded ? 1 : 0)
+      const maxHeight = Math.max(threeLineHeight, maxInputArea - inputAreaHeight - 15 - reservedHeight)
+      const as = useAnimatedStyle(() => ({
+        maxHeight: withTiming(offset.value ? maxHeight : threeLineHeight),
+        minHeight: withTiming(offset.value ? maxHeight : singleLineHeight),
+      }))
+      React.useEffect(() => {
+        if (expanded !== lastExpandedRef.current) {
+          lastExpandedRef.current = expanded
+          offset.set(expanded ? 1 : 0)
+        }
+      }, [expanded, offset])
+      return (
+        <Animated.View style={[p.style, as]}>
+          <NativeInput multiline={true} {...rest} ref={inputRef} style={nativeStyles.inputInner} />
+        </Animated.View>
+      )
+    }
+  }
+})()
+
+const NativePlatformInput = (p: Props) => {
+  type LayoutEvent = {nativeEvent: {layout: {height: number}}}
+
+
+  const [showAudioSend, setShowAudioSend] = React.useState(false)
+  const [height, setHeight] = React.useState(0)
+  const [expanded, setExpanded] = React.useState(false) // updates immediately, used for the icon etc
+  const inputRef = React.useRef<RefType | null>(null)
+  const maxInputArea = React.useContext(MaxInputAreaContext)
+  const preferredExpandedSuggestionListHeight = maxInputArea
+    ? Math.max(
+        minExpandedSuggestionListHeight,
+        Math.min(maxExpandedSuggestionListHeight, Math.floor(maxInputArea * 0.35))
+      )
+    : 0
+  const maxSuggestionReserveHeight = Math.max(0, maxInputArea - inputAreaHeight - 15 - threeLineHeight)
+  const expandedSuggestionListHeight = Math.min(
+    preferredExpandedSuggestionListHeight,
+    maxSuggestionReserveHeight
+  )
+  const suggestionListStyle = Kb.Styles.collapseStyles([
+    nativeStyles.suggestionList,
+    !!height && {marginBottom: height},
+    expanded && {maxHeight: expandedSuggestionListHeight},
+  ])
+  const suggestionSpinnerStyle = Kb.Styles.collapseStyles([nativeStyles.suggestionSpinnerStyle, !!height && {marginBottom: height}])
+  const {
+    popup: suggestorPopup,
+    onChangeText,
+    onBlur,
+    onSelectionChange,
+    onFocus,
+    suggestionsShowing,
+  } = useSuggestors({
+    inputRef,
+    onChangeText: p.onChangeText,
+    suggestionListStyle,
+    suggestionOverlayStyle: p.suggestionOverlayStyle,
+    suggestionSpinnerStyle,
+  })
+  const {cannotWrite, isEditing, isExploding, setInputRef, setExplodingMode} = p
+  const {onSubmit, explodingModeSeconds, hintText, onCancelEditing} = p
+  const suggestionListReserveHeight = expanded && suggestionsShowing ? expandedSuggestionListHeight : 0
+
+  const lastText = React.useRef('')
+  const whichMenu = React.useRef<MenuType | undefined>(undefined)
+  const [hasText, setHasText] = React.useState(false)
+
+  const toggleExpandInput = () => {
+    const nextState = !expanded
+    setExpanded(nextState)
+  }
+
+  const insertText = (toInsert: string) => {
+    const i = inputRef.current
+    i?.transformText(({selection, text}) => {
+      return standardTransformer(
+        toInsert,
+        {position: {end: selection?.end || null, start: selection?.start || null}, text},
+        true
+      )
+    }, true)
+  }
+
+  const expandedRef = React.useRef(expanded)
+  const onSubmitRef = React.useRef(onSubmit)
+  React.useEffect(() => {
+    expandedRef.current = expanded
+    onSubmitRef.current = onSubmit
+  }, [expanded, onSubmit])
+
+  const [onQueueSubmit] = React.useState(() => () => {
+    setTimeout(() => {
+      const text = lastText.current
+      if (text) {
+        onSubmitRef.current(text)
+        if (expandedRef.current) {
+          setExpanded(false)
+        }
+      }
+    }, 60)
+  })
+
+  React.useEffect(() => {
+    // Enter should send a message like on desktop, when a hardware keyboard's
+    // attached.  On Android we get "hardware" keypresses from soft keyboards,
+    // so check whether a soft keyboard's up.
+    const cb = (hwKeyEvent: {pressedKey: string}) => {
+      switch (hwKeyEvent.pressedKey) {
+        case 'enter':
+          onQueueSubmit()
+          break
+        case 'shift-enter': {
+          const i = inputRef.current
+          i?.transformText(({selection, text}) => {
+            return standardTransformer(
+              '\n',
+              {position: {end: selection?.end || null, start: selection?.start || null}, text},
+              true
+            )
+          }, true)
+        }
+      }
+    }
+    onHWKeyPressed(cb)
+    return () => {
+      removeOnHWKeyPressed()
+    }
+  }, [onQueueSubmit])
+
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    switch (whichMenu.current) {
+      case 'filepickerpopup':
+        return <NativeChatFilePicker attachTo={attachTo} showingPopup={true} hidePopup={hidePopup} />
+      case 'moremenu':
+        return <MoreMenuPopup onHidden={hidePopup} visible={true} />
+      default:
+        return (
+          <SetExplodingMessagePopup
+            attachTo={attachTo}
+            onHidden={hidePopup}
+            visible={true}
+            setExplodingMode={setExplodingMode}
+          />
+        )
+    }
+  }
+
+  const {popup: popupMenu, showPopup} = Kb.usePopup2(makePopup)
+
+  const ourShowMenu = (menu: MenuType) => {
+    // Hide the keyboard on mobile when showing the menu.
+    Keyboard.dismiss()
+    whichMenu.current = menu
+    showPopup()
+  }
+
+  const openExplodingMenu = () => {
+    ourShowMenu('exploding')
+  }
+
+  const conversationIDKey = useConversationThreadID()
+  const onPasteImage = (uri: Array<string>) => {
+    try {
+      const pathAndOutboxIDs = uri.map(path => ({path}))
+      C.Router2.navigateAppend({
+        name: 'chatAttachmentGetTitles',
+        params: {conversationIDKey, pathAndOutboxIDs},
+      })
+    } catch (e) {
+      logger.info('onPasteImage error', e)
+    }
+  }
+
+  const onLayout = (p: LayoutEvent) => {
+    const {nativeEvent} = p
+    const {layout} = nativeEvent
+    const {height} = layout
+    setHeight(height)
+  }
+
+  const onAnimatedInputRef = (ref: RefType | null) => {
+    setInputRef(ref)
+    inputRef.current = ref
+  }
+  const aiOnChangeText = (text: string) => {
+    setHasText(!!text)
+    lastText.current = text
+    onChangeText(text)
+  }
+
+  const lastEditRef = React.useRef(isEditing)
+  React.useEffect(() => {
+    if (isEditing !== lastEditRef.current) {
+      lastEditRef.current = isEditing
+      if (isEditing) {
+        inputRef.current?.focus()
+      }
+    }
+  }, [isEditing])
+
+  const _onSelectionChange = (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+    onSelectionChange(e.nativeEvent.selection)
+  }
+
+  return (
+    <>
+      <Kb.Box2 direction="vertical" fullWidth={true} onLayout={onLayout} relative={true}>
+        {suggestorPopup}
+        {popupMenu}
+        {!suggestorPopup && <Typing />}
+        <Kb.Box2
+          direction="vertical"
+          style={Kb.Styles.collapseStyles([nativeStyles.container, isExploding && nativeStyles.explodingContainer])}
+          fullWidth={true}
+        >
+          <Kb.Box2 direction="horizontal" fullWidth={true} style={nativeStyles.inputContainer}>
+            <NativeAnimatedInput
+              onPasteImage={onPasteImage}
+              autoCorrect={true}
+              autoCapitalize="sentences"
+              disabled={cannotWrite}
+              placeholder={hintText}
+              multiline={true}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              onChangeText={aiOnChangeText}
+              onSelectionChange={_onSelectionChange}
+              inputRef={onAnimatedInputRef}
+              style={nativeStyles.input}
+              textType="Body"
+              rowsMin={1}
+              reservedHeight={suggestionListReserveHeight}
+              expanded={expanded}
+            />
+            <NativeAnimatedExpand expandInput={toggleExpandInput} expanded={expanded} />
+          </Kb.Box2>
+          <NativeButtons
+            insertText={insertText}
+            ourShowMenu={ourShowMenu}
+            onCancelEditing={onCancelEditing}
+            onSelectionChange={onSelectionChange}
+            onSubmit={onQueueSubmit}
+            hasText={hasText}
+            isEditing={isEditing}
+            isExploding={isExploding}
+            explodingModeSeconds={explodingModeSeconds}
+            cannotWrite={cannotWrite}
+            toggleShowingMenu={openExplodingMenu}
+            showAudioSend={showAudioSend}
+            setShowAudioSend={setShowAudioSend}
+          />
+        </Kb.Box2>
+      </Kb.Box2>
+      {showAudioSend && (
+        <Kb.Box2 fullHeight={true} fullWidth={true} direction="vertical" style={nativeStyles.sendWrapper}>
+          <AudioSendWrapper />
+        </Kb.Box2>
+      )}
+    </>
+  )
+}
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      actionContainer: {
+        flexShrink: 0,
+        minHeight: 32,
+      },
+      container: {
+        alignItems: 'center',
+        borderTopColor: Kb.Styles.globalColors.black_10,
+        borderTopWidth: 1,
+        minHeight: 1,
+        overflow: 'hidden',
+        ...Kb.Styles.padding(0, 0, Kb.Styles.globalMargins.tiny, 0),
+      },
+      editingButton: {
+        marginLeft: Kb.Styles.globalMargins.tiny,
+        marginRight: Kb.Styles.globalMargins.tiny,
+      },
+      exploding: {
+        backgroundColor: Kb.Styles.globalColors.black,
+        borderRadius: Kb.Styles.globalMargins.mediumLarge / 2,
+        height: 28,
+        margin: Kb.Styles.globalMargins.xtiny,
+        width: 28,
+      },
+      explodingContainer: {borderTopColor: Kb.Styles.globalColors.black},
+      explodingSendBtn: {
+        backgroundColor: Kb.Styles.globalColors.black,
+        marginRight: Kb.Styles.globalMargins.tiny,
+      },
+      explodingText: {
+        fontSize: 11,
+        lineHeight: 16,
+      },
+      explodingWrapper: {
+        ...Kb.Styles.globalStyles.flexBoxColumn,
+        alignItems: 'center',
+        height: 38,
+        justifyContent: 'center',
+        width: 36,
+      },
+      iconBottom: {
+        bottom: 0,
+        left: 1,
+        position: 'absolute',
+      },
+      iconContainer: {
+        height: 28,
+        marginRight: -Kb.Styles.globalMargins.xtiny,
+        marginTop: Kb.Styles.globalMargins.tiny,
+        position: 'relative',
+        width: 28,
+      },
+      iconTop: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+      },
+      input: Kb.Styles.platformStyles({
+        common: {
+          flex: 1,
+          flexShrink: 1,
+          minHeight: 0,
+        },
+      }),
+      inputContainer: {
+        ...Kb.Styles.padding(0, Kb.Styles.globalMargins.tiny),
+        flexGrow: 1,
+        flexShrink: 1,
+        maxHeight: '100%',
+        paddingBottom: Kb.Styles.globalMargins.tiny,
+      },
+      inputInner: {flexGrow: 1},
+      sendBtn: {marginRight: Kb.Styles.globalMargins.tiny},
+      sendWrapper: {backgroundColor: Kb.Styles.globalColors.white_90, position: 'absolute'},
+      suggestionList: Kb.Styles.platformStyles({
+        isMobile: {
+          backgroundColor: Kb.Styles.globalColors.white,
+          borderColor: Kb.Styles.globalColors.black_10,
+          borderStyle: 'solid',
+          borderTopWidth: 3,
+          maxHeight: '50%',
+          overflow: 'hidden',
+        },
+      }),
+      suggestionSpinnerStyle: Kb.Styles.platformStyles({
+        isMobile: {
+          bottom: Kb.Styles.globalMargins.small,
+          position: 'absolute',
+          right: Kb.Styles.globalMargins.small,
+        },
+      }),
+    }) as const
+)
+
+export default isMobile ? NativePlatformInput : DesktopPlatformInput
diff --git a/shared/chat/conversation/list-area/index.native.tsx b/shared/chat/conversation/list-area/index.native.tsx
deleted file mode 100644
index 51ea828f0392..000000000000
--- a/shared/chat/conversation/list-area/index.native.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-import * as C from '@/constants'
-import * as T from '@/constants/types'
-import * as Hooks from './hooks'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import Separator from '../messages/separator'
-import SpecialBottomMessage from '../messages/special-bottom-message'
-import SpecialTopMessage from '../messages/special-top-message'
-import type {ItemType} from './index.shared'
-import {FlatList} from 'react-native'
-// import {FlashList, type ListRenderItemInfo} from '@shopify/flash-list'
-import {MessageRow} from '../messages/wrapper'
-import {mobileTypingContainerHeight} from '../input-area/normal/typing'
-// import {useChatDebugDump} from '@/constants/chat/debug'
-import {usingFlashList} from './flashlist-config'
-import {PerfProfiler} from '@/perf/react-profiler'
-import {ScrollContext} from '../normal/context'
-import noop from 'lodash/noop'
-import * as RowMetadata from '../messages/row-metadata'
-import {useConversationCenter} from '../center-context'
-import {
-  useConversationThreadID,
-  useConversationThreadLoadOlderMessagesDueToScroll,
-  useConversationThreadSelector,
-  useConversationThreadStore,
-} from '../thread-context'
-import {useThreadLoadStatusOptionsGetter} from '../thread-load-status-context'
-// import {useDebugLayout} from '@/util/debug-react'
-
-// TODO if we bring flashlist back bring back the patch
-const List = /*usingFlashList ? FlashList :*/ FlatList
-const noOrdinals: ReadonlyArray<T.Chat.Ordinal> = []
-
-export const DEBUGDump = () => {}
-
-const useInvertedMessageOrdinals = (messageOrdinals?: ReadonlyArray<T.Chat.Ordinal>) => {
-  const source = messageOrdinals ?? noOrdinals
-  return React.useMemo(() => (source.length > 1 ? [...source].reverse() : source), [source])
-}
-
-const useScrolling = (p: {
-  centeredOrdinal: T.Chat.Ordinal
-  messageOrdinals: ReadonlyArray<T.Chat.Ordinal>
-  conversationIDKey: T.Chat.ConversationIDKey
-  listRef: React.RefObject</*FlashList<ItemType> |*/ FlatList<ItemType> | null>
-}) => {
-  const {listRef, centeredOrdinal, messageOrdinals} = p
-  const numOrdinals = messageOrdinals.length
-  const loadOlderMessages = useConversationThreadLoadOlderMessagesDueToScroll()
-  const getThreadLoadStatusOptions = useThreadLoadStatusOptionsGetter()
-  const [scrollToBottom] = React.useState(() => () => {
-    listRef.current?.scrollToOffset({animated: false, offset: 0})
-  })
-
-  const {setScrollRef} = React.useContext(ScrollContext)
-  React.useEffect(() => {
-    setScrollRef({scrollDown: noop, scrollToBottom, scrollUp: noop})
-  }, [setScrollRef, scrollToBottom])
-
-  // only scroll to center once per
-  const lastScrollToCentered = React.useRef(-1)
-  React.useEffect(() => {
-    if (T.Chat.ordinalToNumber(centeredOrdinal) < 0) {
-      lastScrollToCentered.current = -1
-    }
-  }, [centeredOrdinal])
-
-  const centeredOrdinalRef = React.useRef(centeredOrdinal)
-  React.useEffect(() => {
-    centeredOrdinalRef.current = centeredOrdinal
-  }, [centeredOrdinal])
-  const [scrollToCentered] = React.useState(() => () => {
-    setTimeout(() => {
-      const list = listRef.current
-      if (!list) {
-        return
-      }
-      const co = centeredOrdinalRef.current
-      if (lastScrollToCentered.current === co) {
-        return
-      }
-
-      lastScrollToCentered.current = co
-      list.scrollToItem({animated: false, item: co, viewPosition: 0.5})
-    }, 100)
-  })
-
-  const onEndReached = () => {
-    loadOlderMessages(numOrdinals, getThreadLoadStatusOptions())
-  }
-
-  return {
-    onEndReached,
-    scrollToBottom,
-    scrollToCentered,
-  }
-}
-
-// This keeps the list stable when data changes. If we don't do this it will jump around
-// when new messages come in and its very easy to get this to cause an unstoppable loop of
-// quick janking up and down
-const maintainVisibleContentPosition = {autoscrollToTopThreshold: 1, minIndexForVisible: 0}
-const ConversationList = function ConversationList() {
-  const debugWhichList = __DEV__ ? (
-    <Kb.Text type="HeaderBig" style={{backgroundColor: 'red', left: 0, position: 'absolute', top: 0}}>
-      {usingFlashList ? 'FLASH' : 'old'}
-    </Kb.Text>
-  ) : null
-
-  const conversationIDKey = useConversationThreadID()
-  const listData = useConversationThreadSelector(
-    C.useShallow(s => ({
-      loaded: s.loaded,
-      messageOrdinals: s.messageOrdinals,
-    }))
-  )
-  const {centeredHighlightOrdinal, centeredOrdinal} = useConversationCenter()
-  const noCenteredOrdinal = T.Chat.numberToOrdinal(-1)
-  const centeredOrdinalOrNone = centeredOrdinal ?? noCenteredOrdinal
-  const centeredHighlightOrdinalOrNone = centeredHighlightOrdinal ?? noCenteredOrdinal
-  const {loaded} = listData
-
-  const messageOrdinals = useInvertedMessageOrdinals(listData.messageOrdinals)
-
-  const listRef = React.useRef</*FlashList<ItemType> |*/ FlatList<ItemType> | null>(null)
-  const {markInitiallyLoadedThreadAsRead} = Hooks.useActions()
-  const keyExtractor = (ordinal: ItemType) => {
-    return String(ordinal)
-  }
-
-  const renderItem = (info?: /*ListRenderItemInfo<ItemType>*/ {item?: ItemType}) => {
-    const ordinal = info?.item
-    if (!ordinal) {
-      return null
-    }
-    return <MessageRow isCenteredHighlight={centeredHighlightOrdinalOrNone === ordinal} ordinal={ordinal} />
-  }
-
-  const numOrdinals = messageOrdinals.length
-
-  const threadStore = useConversationThreadStore()
-  const getItemType = React.useCallback(
-    (ordinal: T.Chat.Ordinal) => {
-      if (!ordinal) {
-        return 'null'
-      }
-      const {messageMap, messageTypeMap} = threadStore.getState()
-      const message = messageMap.get(ordinal)
-      return message
-        ? RowMetadata.getMessageRowType(message, messageTypeMap.get(ordinal))
-        : (messageTypeMap.get(ordinal) ?? 'text')
-    },
-    [threadStore]
-  )
-
-  const {scrollToCentered, scrollToBottom, onEndReached} = useScrolling({
-    centeredOrdinal: centeredOrdinalOrNone,
-    conversationIDKey,
-    listRef,
-    messageOrdinals,
-  })
-
-  const jumpToRecent = Hooks.useJumpToRecent(scrollToBottom, messageOrdinals.length)
-
-  const lastCenteredOrdinal = React.useRef(0)
-  React.useEffect(() => {
-    if (lastCenteredOrdinal.current === centeredOrdinalOrNone) {
-      return
-    }
-    lastCenteredOrdinal.current = centeredOrdinalOrNone
-    if (centeredOrdinalOrNone > 0) {
-      const id = setTimeout(() => {
-        scrollToCentered()
-      }, 200)
-      return () => {
-        clearTimeout(id)
-      }
-    }
-    return undefined
-  }, [centeredOrdinalOrNone, scrollToCentered])
-
-  const prevLoadedRef = React.useRef(false)
-  const markedLoadedThreadRef = React.useRef(false)
-  React.useLayoutEffect(() => {
-    prevLoadedRef.current = false
-    markedLoadedThreadRef.current = false
-  }, [conversationIDKey])
-  React.useLayoutEffect(() => {
-    const justLoaded = loaded && !prevLoadedRef.current
-    prevLoadedRef.current = loaded
-
-    if (!justLoaded) return
-
-    if (!markedLoadedThreadRef.current) {
-      markedLoadedThreadRef.current = true
-      markInitiallyLoadedThreadAsRead()
-    }
-
-    if (centeredOrdinalOrNone > 0) {
-      scrollToCentered()
-      setTimeout(() => {
-        scrollToCentered()
-      }, 100)
-    } else if (numOrdinals > 0) {
-      scrollToBottom()
-      setTimeout(() => {
-        scrollToBottom()
-      }, 100)
-    }
-  }, [
-    centeredOrdinalOrNone,
-    loaded,
-    markInitiallyLoadedThreadAsRead,
-    numOrdinals,
-    scrollToBottom,
-    scrollToCentered,
-  ])
-
-  // useChatDebugDump(
-  //   'listArea',
-  //   C.useEvent(() => {
-  //     if (!listRef.current) return ''
-  //     const {props, state} = listRef.current as {
-  //       props: {data?: [number]}
-  //       state?: object
-  //     }
-  //     const {data} = props
-  //
-  //     // const layoutManager = (state?.layoutProvider?._lastLayoutManager ?? ({} as unknown)) as {
-  //     //   _layouts?: [unknown]
-  //     //   _renderWindowSize: unknown
-  //     //   _totalHeight: unknown
-  //     //   _totalWidth: unknown
-  //     // }
-  //     // const {_layouts, _renderWindowSize, _totalHeight, _totalWidth} = layoutManager
-  //     // const mm = window.DEBUGStore.store.getState().chat.messageMap.get(conversationIDKey)
-  //     // const stateItems = messageOrdinals.map(o => ({o, type: mm.get(o)?.type}))
-  //
-  //     console.log(listRef.current)
-  //
-  //     const items = data?.map((ordinal: number, idx: number) => {
-  //       const layout = _layouts?.[idx]
-  //       // const m = mm.get(ordinal) ?? ({} as any)
-  //       return {
-  //         idx,
-  //         layout,
-  //         ordinal,
-  //         // rid: m.id,
-  //         // rtype: m.type,
-  //       }
-  //     })
-  //
-  //     const details = {
-  //       // children,
-  //       _renderWindowSize,
-  //       _totalHeight,
-  //       _totalWidth,
-  //       data,
-  //       items,
-  //     }
-  //     return JSON.stringify(details)
-  //   })
-  // )
-
-  const onViewableItemsChanged = useSafeOnViewableItemsChanged(onEndReached, messageOrdinals.length)
-  // const onLayout = useDebugLayout()
-
-  return (
-    <Kb.ErrorBoundary>
-      <PerfProfiler id="MessageList">
-        <Kb.Box2 direction="vertical" fullWidth={true} flex={1} relative={true}>
-          <List
-            key={conversationIDKey}
-            testID="messageList"
-            onScrollToIndexFailed={noop}
-            // @ts-expect-error LegendList/FlashList prop; ignored by FlatList
-            estimatedItemSize={72}
-            ListHeaderComponent={SpecialBottomMessage}
-            ListFooterComponent={SpecialTopMessage}
-            ItemSeparatorComponent={Separator}
-            overScrollMode="never"
-            contentContainerStyle={styles.contentContainer}
-            data={messageOrdinals}
-            getItemType={getItemType}
-            inverted={true}
-            renderItem={renderItem}
-            onViewableItemsChanged={onViewableItemsChanged.current}
-            keyboardDismissMode="on-drag"
-            keyboardShouldPersistTaps="handled"
-            keyExtractor={keyExtractor}
-            ref={listRef}
-            maintainVisibleContentPosition={
-              // MUST do this else if you come into a new thread it'll slowly scroll down when it loads
-              numOrdinals ? maintainVisibleContentPosition : undefined
-            }
-          />
-          {jumpToRecent}
-          {debugWhichList}
-        </Kb.Box2>
-      </PerfProfiler>
-    </Kb.ErrorBoundary>
-  )
-}
-
-const minTimeDelta = 1000
-const minDistanceFromEnd = 10
-
-const useSafeOnViewableItemsChanged = (onEndReached: () => void, numOrdinals: number) => {
-  const nextCallbackRef = React.useRef(new Date().getTime())
-  const onEndReachedRef = React.useRef(onEndReached)
-  React.useEffect(() => {
-    onEndReachedRef.current = onEndReached
-  }, [onEndReached])
-  const numOrdinalsRef = React.useRef(numOrdinals)
-  React.useEffect(() => {
-    numOrdinalsRef.current = numOrdinals
-    nextCallbackRef.current = new Date().getTime() + minTimeDelta
-  }, [numOrdinals])
-
-  // this can't change ever, so we have to use refs to keep in sync
-  const onViewableItemsChanged = React.useRef(
-    ({viewableItems}: {viewableItems: Array<{index: number | null}>}) => {
-      const idx = viewableItems.at(-1)?.index ?? 0
-      const lastIdx = numOrdinalsRef.current - 1
-      const offset = numOrdinalsRef.current > 50 ? minDistanceFromEnd : 1
-      const deltaIdx = idx - lastIdx + offset
-      // not far enough from the end
-      if (deltaIdx < 0) {
-        return
-      }
-      const t = new Date().getTime()
-      const deltaT = t - nextCallbackRef.current
-      // enough time elapsed?
-      if (deltaT > 0) {
-        nextCallbackRef.current = t + minTimeDelta
-        onEndReachedRef.current()
-      }
-    }
-  )
-  return onViewableItemsChanged
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      contentContainer: {
-        paddingBottom: 0,
-        paddingTop: mobileTypingContainerHeight,
-      },
-    }) as const
-)
-
-export default ConversationList
diff --git a/shared/chat/conversation/list-area/index.desktop.tsx b/shared/chat/conversation/list-area/index.tsx
similarity index 58%
rename from shared/chat/conversation/list-area/index.desktop.tsx
rename to shared/chat/conversation/list-area/index.tsx
index fb19b9b51a33..546dc176cc6f 100644
--- a/shared/chat/conversation/list-area/index.desktop.tsx
+++ b/shared/chat/conversation/list-area/index.tsx
@@ -2,28 +2,62 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as Hooks from './hooks'
 import * as React from 'react'
-import * as InputState from '../input-area/input-state'
-import {PerfProfiler} from '@/perf/react-profiler'
 import * as T from '@/constants/types'
 import Separator from '../messages/separator'
 import SpecialBottomMessage from '../messages/special-bottom-message'
 import SpecialTopMessage from '../messages/special-top-message'
-import chunk from 'lodash/chunk'
-import {findLast} from '@/util/arrays'
+import type {ItemType} from './index.shared'
 import {MessageRow} from '../messages/wrapper'
-import {globalMargins} from '@/styles/shared'
-import {FocusContext, ScrollContext} from '../normal/context'
-import useResizeObserver from '@/util/use-resize-observer.desktop'
-import useIntersectionObserver from '@/util/use-intersection-observer'
-import {copyToClipboard} from '@/util/storeless-actions'
+import {PerfProfiler} from '@/perf/react-profiler'
+import {ScrollContext} from '../normal/context'
 import {useConversationCenter} from '../center-context'
 import {
   useConversationThreadID,
   useConversationThreadLoadNewerMessagesDueToScroll,
   useConversationThreadLoadOlderMessagesDueToScroll,
   useConversationThreadSelector,
+  useConversationThreadStore,
 } from '../thread-context'
 import {useThreadLoadStatusOptionsGetter} from '../thread-load-status-context'
+import {findLast} from '@/util/arrays'
+import {getMessageRowType} from '../messages/row-metadata'
+import * as InputState from '../input-area/input-state'
+import chunk from 'lodash/chunk'
+import useIntersectionObserver from '@/util/use-intersection-observer'
+import useResizeObserver from '@/util/use-resize-observer'
+import {copyToClipboard} from '@/util/storeless-actions'
+import {FocusContext} from '../normal/context'
+import noop from 'lodash/noop'
+import {FlatList} from 'react-native'
+import {usingFlashList} from './flashlist-config'
+import {mobileTypingContainerHeight} from '../input-area/normal/typing'
+
+// ==================== DESKTOP ====================
+
+// Stub types to avoid dom lib dependency in native tsconfig
+type ScrollDivRef = {
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+  offsetHeight: number
+  classList: {add: (s: string) => void; remove: (s: string) => void}
+  getBoundingClientRect: () => DOMRect
+  querySelectorAll: (sel: string) => ArrayLike<WaypointElement>
+  addEventListener: (event: string, handler: (...args: Array<unknown>) => void, opts?: {passive?: boolean}) => void
+  removeEventListener: (event: string, handler: (...args: Array<unknown>) => void) => void
+  closest: (sel: string) => unknown
+}
+type RNFlatListRef = {
+  scrollToOffset: (opts: {animated: boolean; offset: number}) => void
+  scrollToItem: (opts: {animated: boolean; item: unknown; viewPosition?: number}) => void
+}
+type WaypointElement = {
+  getBoundingClientRect: () => DOMRect
+  scrollIntoView: (opts: {block: string; inline: string}) => void
+  dataset: Record<string, string | undefined>
+  closest: (sel: string) => WaypointElement | null | undefined
+  tagName?: string
+}
 
 // Infinite scrolling list.
 // We group messages into a series of Waypoints. When the waypoint exits the screen we replace it with a single div instead
@@ -35,13 +69,12 @@ const ordinalsInAWaypoint = 10
 // we send an action on the first mount once
 let markedInitiallyLoaded = false
 
-// scrolling related things
-const useScrolling = (p: {
+const useDesktopScrolling = (p: {
   containsLatestMessage: boolean
   messageOrdinals: ReadonlyArray<T.Chat.Ordinal>
-  listRef: React.RefObject<HTMLDivElement | null>
+  listRef: React.RefObject<ScrollDivRef | null>
   loaded: boolean
-  setListRef: (r: HTMLDivElement | null) => void
+  setListRef: (r: ScrollDivRef | null) => void
   centeredOrdinal: T.Chat.Ordinal | undefined
 }) => {
   const {listRef, setListRef: _setListRef, containsLatestMessage} = p
@@ -71,8 +104,8 @@ const useScrolling = (p: {
   const ignoreOnScrollRef = React.useRef(false)
   const lockedToBottomRef = React.useRef(true)
   // so we can turn pointer events on / off
-  const pointerWrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const setPointerWrapperRef = (r: HTMLDivElement | null) => {
+  const pointerWrapperRef = React.useRef<ScrollDivRef | null>(null)
+  const setPointerWrapperRef = (r: ScrollDivRef | null) => {
     pointerWrapperRef.current = r
   }
   const numOrdinalsRef = React.useRef(numOrdinals)
@@ -122,7 +155,7 @@ const useScrolling = (p: {
 
   const [performScrollToCentered] = React.useState(() => () => {
     const list = listRef.current
-    const waypoint = list?.querySelectorAll(`[data-key=${scrollOrdinalKey}]`)[0] as HTMLElement | undefined
+    const waypoint = list?.querySelectorAll(`[data-key=${scrollOrdinalKey}]`)[0] as WaypointElement | undefined
     if (!list || !waypoint) return
     const listRect = list.getBoundingClientRect()
     const waypointRect = waypoint.getBoundingClientRect()
@@ -233,7 +266,7 @@ const useScrolling = (p: {
     onScrollThrottledRef.current()
   })
 
-  const setListRef = (list: HTMLDivElement | null) => {
+  const setListRef = (list: ScrollDivRef | null) => {
     if (listRef.current) {
       listRef.current.removeEventListener('scroll', onScroll)
     }
@@ -251,8 +284,8 @@ const useScrolling = (p: {
 
   const [didFirstLoad, setDidFirstLoad] = React.useState(false)
 
-  // Handle scrolling when loaded becomes true. Scroll to centered ordinal if present, else bottom
   const prevLoadedRef = React.useRef(false)
+  // Handle scrolling when loaded becomes true. Scroll to centered ordinal if present, else bottom
   React.useLayoutEffect(() => {
     const justLoaded = loaded && !prevLoadedRef.current
     prevLoadedRef.current = loaded
@@ -356,7 +389,7 @@ const useScrolling = (p: {
       if (waypoints) {
         // find an id that should be our parent
         const toFind = Math.floor(T.Chat.ordinalToNumber(editingOrdinal) / ordinalsInAWaypoint)
-        const allWaypoints = Array.from(waypoints) as Array<HTMLElement>
+        const allWaypoints = Array.from(waypoints) as Array<WaypointElement>
         const found = findLast(allWaypoints, w => {
           const key = w.dataset['key']
           return key !== undefined && parseInt(key, 10) === toFind
@@ -366,16 +399,18 @@ const useScrolling = (p: {
     }
   }, [editingOrdinal, messageOrdinals, listRef])
 
+  void chunk
+
   return {didFirstLoad, isLockedToBottom, scrollToBottom, setListRef, setPointerWrapperRef}
 }
 
-const useItems = (p: {
+const useDesktopItems = (p: {
   centeredHighlightOrdinal: T.Chat.Ordinal | undefined
   messageOrdinals: ReadonlyArray<T.Chat.Ordinal>
   centeredOrdinal: T.Chat.Ordinal | undefined
   editingOrdinal: T.Chat.Ordinal | undefined
 }) => {
-  const {messageOrdinals, centeredHighlightOrdinal, centeredOrdinal, editingOrdinal} = p
+  const {centeredHighlightOrdinal, centeredOrdinal, editingOrdinal, messageOrdinals} = p
   const waypointData = React.useMemo(() => {
     const items: Array<{key: string; ordinals: Array<T.Chat.Ordinal>}> = []
     const numOrdinals = messageOrdinals.length
@@ -447,7 +482,7 @@ const useItems = (p: {
   const items = [
     <SpecialTopMessage key="specialTop" />,
     ...waypointData.map(({key, ordinals}) => (
-      <OrdinalWaypoint key={key} id={key} rowRenderer={rowRenderer} ordinals={ordinals} />
+      <DesktopOrdinalWaypoint key={key} id={key} rowRenderer={rowRenderer} ordinals={ordinals} />
     )),
     <SpecialBottomMessage key="specialBottom" />,
   ]
@@ -455,7 +490,7 @@ const useItems = (p: {
   return items
 }
 
-const ThreadWrapper = function ThreadWrapper() {
+const DesktopThreadWrapper = function DesktopThreadWrapper() {
   const editingOrdinal = InputState.useConversationInput(s => s.editing)
   const conversationIDKey = useConversationThreadID()
   const data = useConversationThreadSelector(
@@ -467,11 +502,11 @@ const ThreadWrapper = function ThreadWrapper() {
   )
   const {centeredHighlightOrdinal, centeredOrdinal} = useConversationCenter()
   const {containsLatestMessage, messageOrdinals, loaded} = data
-  const listRef = React.useRef<HTMLDivElement | null>(null)
-  const _setListRef = (r: HTMLDivElement | null) => {
+  const listRef = React.useRef<ScrollDivRef | null>(null)
+  const _setListRef = (r: ScrollDivRef | null) => {
     listRef.current = r
   }
-  const {isLockedToBottom, scrollToBottom, setListRef, didFirstLoad, setPointerWrapperRef} = useScrolling({
+  const {isLockedToBottom, scrollToBottom, setListRef, didFirstLoad, setPointerWrapperRef} = useDesktopScrolling({
     centeredOrdinal,
     containsLatestMessage,
     listRef,
@@ -482,27 +517,37 @@ const ThreadWrapper = function ThreadWrapper() {
 
   const jumpToRecent = Hooks.useJumpToRecent(scrollToBottom, messageOrdinals.length)
   const onCopyCapture = (e: React.BaseSyntheticEvent) => {
-    // Copy text only, not HTML/styling. We use virtualText on texts to make uncopyable text
+    type DocGlobal = {
+      createElement: (tag: string) => {
+        appendChild: (n: unknown) => void
+        querySelectorAll: (sel: string) => ArrayLike<{parentNode?: {removeChild?: (n: unknown) => void; replaceChild?: (a: unknown, b: unknown) => void}}>
+        textContent: string | null
+        remove: () => void
+      }
+    }
+    type WinGlobal = {
+      getSelection: () => {
+        getRangeAt: (i: number) => {cloneContents: () => unknown}
+      } | null
+    }
     e.preventDefault()
-    const sel = window.getSelection()
-    if (!sel) return
+    const doc = (globalThis as unknown as {document?: DocGlobal}).document
+    const win = (globalThis as unknown as {window?: WinGlobal}).window
+    const sel = win?.getSelection()
+    if (!sel || !doc) return
     const temp = sel.getRangeAt(0).cloneContents()
-    // cloning it and making a new new fixes issues where icons will give you
-    // extra newlines only when you do toString() vs getting the textContents
-    const tempDiv = document.createElement('div')
+    const tempDiv = doc.createElement('div')
     tempDiv.appendChild(temp)
-    // filter
     const styles = tempDiv.querySelectorAll('style')
-    styles.forEach(s => {
-      s.parentNode?.removeChild(s)
+    Array.from(styles).forEach(s => {
+      s.parentNode?.removeChild?.(s)
     })
     const imgs = tempDiv.querySelectorAll('img')
-    imgs.forEach(i => {
-      const dummy = document.createElement('div')
+    Array.from(imgs).forEach(i => {
+      const dummy = doc.createElement('div')
       dummy.textContent = '\n[IMAGE]\n'
-      i.parentNode?.replaceChild(dummy, i)
+      i.parentNode?.replaceChild?.(dummy, i)
     })
-
     const tc = tempDiv.textContent
     if (tc) {
       copyToClipboard(tc)
@@ -511,39 +556,41 @@ const ThreadWrapper = function ThreadWrapper() {
   }
   const {focusInput} = React.useContext(FocusContext)
   const handleListClick = (ev: React.MouseEvent) => {
-    const target = ev.target
-    // allow focusing other inner inputs such as the reacji picker filter
+    const target = ev.target as unknown as WaypointElement | null
+    const tagName = (target as {tagName?: string} | null)?.tagName?.toUpperCase()
     if (
-      target instanceof HTMLInputElement ||
-      target instanceof HTMLTextAreaElement ||
-      (target as HTMLElement).closest('[data-search-filter="true"]')
+      tagName === 'INPUT' ||
+      tagName === 'TEXTAREA' ||
+      target?.closest('[data-search-filter="true"]')
     ) {
       return
     }
 
-    const sel = window.getSelection()
+    const sel = (globalThis as unknown as {getSelection?: () => {isCollapsed: boolean} | null}).getSelection?.()
     if (sel?.isCollapsed) {
       focusInput()
     }
   }
 
-  const items = useItems({
+  const items = useDesktopItems({
     centeredHighlightOrdinal,
     centeredOrdinal,
     editingOrdinal,
     messageOrdinals,
   })
-  const setListContents = useHandleListResize({
+  const setListContents = useDesktopHandleListResize({
     centeredOrdinal,
     isLockedToBottom,
     scrollToBottom,
     setPointerWrapperRef,
+    useResizeObserver,
   })
 
+
   return (
     <Kb.ErrorBoundary>
       <div
-        style={Kb.Styles.castStyleDesktop(styles.container)}
+        style={Kb.Styles.castStyleDesktop(desktopStyles.container)}
         onClick={handleListClick}
         onCopyCapture={onCopyCapture}
       >
@@ -552,11 +599,11 @@ const ThreadWrapper = function ThreadWrapper() {
           className="chat-scroller"
           key={conversationIDKey}
           style={Kb.Styles.castStyleDesktop(
-            Kb.Styles.collapseStyles([styles.list, {opacity: didFirstLoad ? 1 : 0}])
+            Kb.Styles.collapseStyles([desktopStyles.list, {opacity: didFirstLoad ? 1 : 0}])
           )}
-          ref={setListRef}
+          ref={setListRef as (r: HTMLDivElement | null) => void}
         >
-          <div style={Kb.Styles.castStyleDesktop(styles.listContents)} ref={setListContents}>
+          <div style={Kb.Styles.castStyleDesktop(desktopStyles.listContents)} ref={setListContents as React.Ref<HTMLDivElement>}>
             {items}
           </div>
         </div>
@@ -566,13 +613,14 @@ const ThreadWrapper = function ThreadWrapper() {
   )
 }
 
-const useHandleListResize = (p: {
+const useDesktopHandleListResize = (p: {
   centeredOrdinal: T.Chat.Ordinal | undefined
   isLockedToBottom: () => boolean
   scrollToBottom: () => void
-  setPointerWrapperRef: (r: HTMLDivElement | null) => void
+  setPointerWrapperRef: (r: ScrollDivRef | null) => void
+  useResizeObserver: (ref: React.RefObject<Element | null>, cb: (e: {contentRect: {height: number}}) => void) => void
 }) => {
-  const {isLockedToBottom, scrollToBottom, setPointerWrapperRef, centeredOrdinal} = p
+  const {isLockedToBottom, scrollToBottom, setPointerWrapperRef, centeredOrdinal, useResizeObserver} = p
   const lastResizeHeightRef = React.useRef(0)
   const onListSizeChanged = function onListSizeChanged(contentRect: {height: number}) {
     const {height} = contentRect
@@ -584,40 +632,40 @@ const useHandleListResize = (p: {
     }
   }
 
-  const pointerWrapperRef = React.useRef<HTMLDivElement | null>(null)
-  const setListContents = (listContents: HTMLDivElement | null) => {
+  const pointerWrapperRef = React.useRef<ScrollDivRef | null>(null)
+  const setListContents = (listContents: ScrollDivRef | null) => {
     setPointerWrapperRef(listContents)
     pointerWrapperRef.current = listContents
   }
 
-  useResizeObserver(pointerWrapperRef, e => onListSizeChanged(e.contentRect))
+  useResizeObserver(pointerWrapperRef as React.RefObject<Element | null>, e => onListSizeChanged(e.contentRect))
 
   return setListContents
 }
 
-type OrdinalWaypointProps = {
+type DesktopOrdinalWaypointProps = {
   id: string
   rowRenderer: (ordinal: T.Chat.Ordinal) => React.ReactNode
   ordinals: Array<T.Chat.Ordinal>
 }
 
 const colorWaypoints = __DEV__ && (false as boolean)
-const colors = new Array<string>()
+const waypointColors = new Array<string>()
 if (colorWaypoints) {
   for (let i = 0; i < 10; ++i) {
     console.log('COLOR WAYPOINTS ON!!!!!!!!!!!!!!!!')
-    colors.push(`rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
+    waypointColors.push(`rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`)
   }
 }
 
 // Render unmeasured waypoints once so initial scroll positioning uses real heights.
 // After measuring, off-screen waypoints can collapse back to placeholders.
-const OrdinalWaypoint = function OrdinalWaypoint(p: OrdinalWaypointProps) {
+const DesktopOrdinalWaypoint = function DesktopOrdinalWaypoint(p: DesktopOrdinalWaypointProps) {
   const {ordinals, id, rowRenderer} = p
   const estimatedHeight = 40 * ordinals.length
   const [height, setHeight] = React.useState(-1)
-  const [wRef, setRef] = React.useState<HTMLDivElement | null>(null)
-  const [setContentRef] = React.useState(() => (ref: HTMLDivElement | null) => {
+  const [wRef, setRef] = React.useState<ScrollDivRef | null>(null)
+  const [setContentRef] = React.useState(() => (ref: ScrollDivRef | null) => {
     if (ref) {
       const height = ref.offsetHeight
       if (height) {
@@ -627,56 +675,56 @@ const OrdinalWaypoint = function OrdinalWaypoint(p: OrdinalWaypointProps) {
     setRef(ref)
   })
   const root = wRef?.closest('.chat-scroller') as HTMLElement | undefined
-  const {isIntersecting} = useIntersectionObserver(wRef, {root})
+  const {isIntersecting} = useIntersectionObserver(wRef as unknown as React.RefObject<HTMLElement>, {root})
   const renderMessages = height < 0 || isIntersecting
   let content: React.ReactElement
 
   if (renderMessages) {
-    content = <Content key={id} id={id} ref={setContentRef} ordinals={ordinals} rowRenderer={rowRenderer} />
+    content = <DesktopContent key={id} id={id} ref={setContentRef} ordinals={ordinals} rowRenderer={rowRenderer} />
   } else {
-    content = <Dummy key={id} id={id} height={height < 0 ? estimatedHeight : height} ref={setRef} />
+    content = <DesktopDummy key={id} id={id} height={height < 0 ? estimatedHeight : height} ref={setRef} />
   }
 
   if (colorWaypoints) {
     let cidx = parseInt(id)
     if (isNaN(cidx)) cidx = 0
-    cidx = cidx % colors.length
-    return <div style={{backgroundColor: colors[cidx]}}>{content}</div>
+    cidx = cidx % waypointColors.length
+    return <div style={{backgroundColor: waypointColors[cidx]}}>{content}</div>
   } else {
     return content
   }
 }
 
-type ContentType = {
+type DesktopContentType = {
   id: string
   ordinals: Array<T.Chat.Ordinal>
   rowRenderer: (o: T.Chat.Ordinal) => React.ReactNode
-  ref?: React.Ref<HTMLDivElement>
+  ref?: React.Ref<ScrollDivRef>
 }
-function Content(p: ContentType) {
+function DesktopContent(p: DesktopContentType) {
   const {id, ordinals, rowRenderer, ref} = p
   // Apply data-key to the dom node so we can search for editing messages
   return (
     <PerfProfiler id="MessageWaypoint">
-      <div data-key={id} ref={ref}>
+      <div data-key={id} ref={ref as React.Ref<HTMLDivElement>}>
         {ordinals.map((o): React.ReactNode => rowRenderer(o))}
       </div>
     </PerfProfiler>
   )
 }
 
-type DummyType = {
+type DesktopDummyType = {
   id: string
   height: number
-  ref?: React.Ref<HTMLDivElement>
+  ref?: React.Ref<ScrollDivRef>
 }
-function Dummy(p: DummyType) {
+function DesktopDummy(p: DesktopDummyType) {
   const {id, height, ref} = p
   // Apply data-key to the dom node so we can search for editing messages
-  return <div data-key={id} style={{contentVisibility: 'auto', height}} ref={ref} />
+  return <div data-key={id} style={{contentVisibility: 'auto', height}} ref={ref as React.Ref<HTMLDivElement>} />
 }
 
-const styles = Kb.Styles.styleSheetCreate(
+const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: Kb.Styles.platformStyles({
@@ -695,7 +743,7 @@ const styles = Kb.Styles.styleSheetCreate(
           overflowX: 'hidden',
           overflowY: 'auto',
           overscrollBehavior: 'contain',
-          paddingBottom: globalMargins.small,
+          paddingBottom: 16,
           // get our own layer so we can scroll faster
           willChange: 'transform',
         },
@@ -709,10 +757,286 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const ThreadWrapperWithProfiler = () => (
+const DesktopThreadWrapperWithProfiler = () => (
   <PerfProfiler id="MessageList">
-    <ThreadWrapper />
+    <DesktopThreadWrapper />
   </PerfProfiler>
 )
 
-export default ThreadWrapperWithProfiler
+// ==================== NATIVE ====================
+
+const useInvertedMessageOrdinals = (messageOrdinals?: ReadonlyArray<T.Chat.Ordinal>) => {
+  const source = messageOrdinals ?? noOrdinals
+  return React.useMemo(() => (source.length > 1 ? [...source].reverse() : source), [source])
+}
+
+const useNativeScrolling = (p: {
+  centeredOrdinal: T.Chat.Ordinal
+  messageOrdinals: ReadonlyArray<T.Chat.Ordinal>
+  conversationIDKey: T.Chat.ConversationIDKey
+  listRef: React.RefObject<RNFlatListRef | null>
+}) => {
+  const {listRef, centeredOrdinal, messageOrdinals} = p
+  const numOrdinals = messageOrdinals.length
+  const loadOlderMessages = useConversationThreadLoadOlderMessagesDueToScroll()
+  const getThreadLoadStatusOptions = useThreadLoadStatusOptionsGetter()
+  const [scrollToBottom] = React.useState(() => () => {
+    listRef.current?.scrollToOffset({animated: false, offset: 0})
+  })
+
+  const {setScrollRef} = React.useContext(ScrollContext)
+  React.useEffect(() => {
+    setScrollRef({scrollDown: noop, scrollToBottom, scrollUp: noop})
+  }, [setScrollRef, scrollToBottom])
+
+  // only scroll to center once per
+  const lastScrollToCentered = React.useRef(-1)
+  React.useEffect(() => {
+    if (T.Chat.ordinalToNumber(centeredOrdinal) < 0) {
+      lastScrollToCentered.current = -1
+    }
+  }, [centeredOrdinal])
+
+  const centeredOrdinalRef = React.useRef(centeredOrdinal)
+  React.useEffect(() => {
+    centeredOrdinalRef.current = centeredOrdinal
+  }, [centeredOrdinal])
+  const [scrollToCentered] = React.useState(() => () => {
+    setTimeout(() => {
+      const list = listRef.current
+      if (!list) {
+        return
+      }
+      const co = centeredOrdinalRef.current
+      if (lastScrollToCentered.current === co) {
+        return
+      }
+
+      lastScrollToCentered.current = co
+      list.scrollToItem({animated: false, item: co, viewPosition: 0.5})
+    }, 100)
+  })
+
+  const onEndReached = () => {
+    loadOlderMessages(numOrdinals, getThreadLoadStatusOptions())
+  }
+
+  return {
+    onEndReached,
+    scrollToBottom,
+    scrollToCentered,
+  }
+}
+
+// This keeps the list stable when data changes. If we don't do this it will jump around
+// when new messages come in and its very easy to get this to cause an unstoppable loop of
+// quick janking up and down
+const maintainVisibleContentPosition = {autoscrollToTopThreshold: 1, minIndexForVisible: 0}
+
+const NativeConversationList = function NativeConversationList() {
+  const List = FlatList as unknown as React.ComponentType<Record<string, unknown> & {ref?: React.Ref<RNFlatListRef>}>
+
+  const debugWhichList = __DEV__ ? (
+    <Kb.Text type="HeaderBig" style={{backgroundColor: 'red', left: 0, position: 'absolute', top: 0}}>
+      {usingFlashList ? 'FLASH' : 'old'}
+    </Kb.Text>
+  ) : null
+
+  const conversationIDKey = useConversationThreadID()
+  const listData = useConversationThreadSelector(
+    C.useShallow(s => ({
+      loaded: s.loaded,
+      messageOrdinals: s.messageOrdinals,
+    }))
+  )
+  const {centeredHighlightOrdinal, centeredOrdinal} = useConversationCenter()
+  const noCenteredOrdinal = T.Chat.numberToOrdinal(-1)
+  const centeredOrdinalOrNone = centeredOrdinal ?? noCenteredOrdinal
+  const centeredHighlightOrdinalOrNone = centeredHighlightOrdinal ?? noCenteredOrdinal
+  const {loaded} = listData
+
+  const messageOrdinals = useInvertedMessageOrdinals(listData.messageOrdinals)
+
+  const listRef = React.useRef<RNFlatListRef | null>(null)
+  const {markInitiallyLoadedThreadAsRead} = Hooks.useActions()
+  const keyExtractor = (ordinal: ItemType) => {
+    return String(ordinal)
+  }
+
+  const renderItem = (info?: {item?: ItemType}) => {
+    const ordinal = info?.item
+    if (!ordinal) {
+      return null
+    }
+    return <MessageRow isCenteredHighlight={centeredHighlightOrdinalOrNone === ordinal} ordinal={ordinal} />
+  }
+
+  const numOrdinals = messageOrdinals.length
+
+  const threadStore = useConversationThreadStore()
+  const getItemType = React.useCallback(
+    (ordinal: T.Chat.Ordinal) => {
+      if (!ordinal) {
+        return 'null'
+      }
+      const {messageMap, messageTypeMap} = threadStore.getState()
+      const message = messageMap.get(ordinal)
+      return message
+        ? getMessageRowType(message, messageTypeMap.get(ordinal))
+        : (messageTypeMap.get(ordinal) ?? 'text')
+    },
+    [threadStore]
+  )
+
+  const {scrollToCentered, scrollToBottom, onEndReached} = useNativeScrolling({
+    centeredOrdinal: centeredOrdinalOrNone,
+    conversationIDKey,
+    listRef,
+    messageOrdinals,
+  })
+
+  const jumpToRecent = Hooks.useJumpToRecent(scrollToBottom, messageOrdinals.length)
+
+  const lastCenteredOrdinal = React.useRef(0)
+  React.useEffect(() => {
+    if (lastCenteredOrdinal.current === centeredOrdinalOrNone) {
+      return
+    }
+    lastCenteredOrdinal.current = centeredOrdinalOrNone
+    if (centeredOrdinalOrNone > 0) {
+      const id = setTimeout(() => {
+        scrollToCentered()
+      }, 200)
+      return () => {
+        clearTimeout(id)
+      }
+    }
+    return undefined
+  }, [centeredOrdinalOrNone, scrollToCentered])
+
+  const prevLoadedRef = React.useRef(false)
+  const markedLoadedThreadRef = React.useRef(false)
+  React.useLayoutEffect(() => {
+    prevLoadedRef.current = false
+    markedLoadedThreadRef.current = false
+  }, [conversationIDKey])
+  React.useLayoutEffect(() => {
+    const justLoaded = loaded && !prevLoadedRef.current
+    prevLoadedRef.current = loaded
+
+    if (!justLoaded) return
+
+    if (!markedLoadedThreadRef.current) {
+      markedLoadedThreadRef.current = true
+      markInitiallyLoadedThreadAsRead()
+    }
+
+    if (centeredOrdinalOrNone > 0) {
+      scrollToCentered()
+      setTimeout(() => {
+        scrollToCentered()
+      }, 100)
+    } else if (numOrdinals > 0) {
+      scrollToBottom()
+      setTimeout(() => {
+        scrollToBottom()
+      }, 100)
+    }
+  }, [
+    centeredOrdinalOrNone,
+    loaded,
+    markInitiallyLoadedThreadAsRead,
+    numOrdinals,
+    scrollToBottom,
+    scrollToCentered,
+  ])
+
+  const onViewableItemsChanged = useNativeSafeOnViewableItemsChanged(onEndReached, messageOrdinals.length)
+
+  const nativeContentContainer = Kb.Styles.styleSheetCreate(
+    () =>
+      ({
+        contentContainer: {
+          paddingBottom: 0,
+          paddingTop: mobileTypingContainerHeight,
+        },
+      }) as const
+  )
+
+  return (
+    <Kb.ErrorBoundary>
+      <PerfProfiler id="MessageList">
+        <Kb.Box2 direction="vertical" fullWidth={true} flex={1} relative={true}>
+          <List
+            key={conversationIDKey}
+            testID="messageList"
+            onScrollToIndexFailed={noop}
+            estimatedItemSize={72}
+            ListHeaderComponent={SpecialBottomMessage}
+            ListFooterComponent={SpecialTopMessage}
+            ItemSeparatorComponent={Separator}
+            overScrollMode="never"
+            contentContainerStyle={nativeContentContainer.contentContainer}
+            data={messageOrdinals}
+            getItemType={getItemType}
+            inverted={true}
+            renderItem={renderItem}
+            onViewableItemsChanged={onViewableItemsChanged.current}
+            keyboardDismissMode="on-drag"
+            keyboardShouldPersistTaps="handled"
+            keyExtractor={keyExtractor}
+            ref={listRef}
+            maintainVisibleContentPosition={
+              // MUST do this else if you come into a new thread it'll slowly scroll down when it loads
+              numOrdinals ? maintainVisibleContentPosition : undefined
+            }
+          />
+          {jumpToRecent}
+          {debugWhichList}
+        </Kb.Box2>
+      </PerfProfiler>
+    </Kb.ErrorBoundary>
+  )
+}
+
+const minTimeDelta = 1000
+const minDistanceFromEnd = 10
+
+const useNativeSafeOnViewableItemsChanged = (onEndReached: () => void, numOrdinals: number) => {
+  const nextCallbackRef = React.useRef(new Date().getTime())
+  const onEndReachedRef = React.useRef(onEndReached)
+  React.useEffect(() => {
+    onEndReachedRef.current = onEndReached
+  }, [onEndReached])
+  const numOrdinalsRef = React.useRef(numOrdinals)
+  React.useEffect(() => {
+    numOrdinalsRef.current = numOrdinals
+    nextCallbackRef.current = new Date().getTime() + minTimeDelta
+  }, [numOrdinals])
+
+  // this can't change ever, so we have to use refs to keep in sync
+  const onViewableItemsChanged = React.useRef(
+    ({viewableItems}: {viewableItems: Array<{index: number | null}>}) => {
+      const idx = viewableItems.at(-1)?.index ?? 0
+      const lastIdx = numOrdinalsRef.current - 1
+      const offset = numOrdinalsRef.current > 50 ? minDistanceFromEnd : 1
+      const deltaIdx = idx - lastIdx + offset
+      // not far enough from the end
+      if (deltaIdx < 0) {
+        return
+      }
+      const t = new Date().getTime()
+      const deltaT = t - nextCallbackRef.current
+      // enough time elapsed?
+      if (deltaT > 0) {
+        nextCallbackRef.current = t + minTimeDelta
+        onEndReachedRef.current()
+      }
+    }
+  )
+  return onViewableItemsChanged
+}
+
+export const DEBUGDump = () => {}
+
+export default isMobile ? NativeConversationList : DesktopThreadWrapperWithProfiler
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.desktop.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.desktop.tsx
deleted file mode 100644
index ea46dce0ea59..000000000000
--- a/shared/chat/conversation/messages/attachment/video/videoimpl.desktop.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import type {Props} from './videoimpl.shared'
-import {getAttachmentPreviewSize, maxWidth, maxHeight} from '../shared'
-
-// its important we use explicit height/width so we never CLS while loading
-const VideoImpl = (p: Props) => {
-  const {allowPlay, message, openFullscreen} = p
-  const {fileURL: url, videoDuration} = message
-  const {previewURL, height, width} = getAttachmentPreviewSize(message)
-  const [showPoster, setShowPoster] = React.useState(true)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastUrl !== url) {
-    setLastUrl(url)
-    setShowPoster(true)
-  }
-
-  const onPress = () => {
-    setShowPoster(false)
-  }
-
-  const onDoubleClick = () => {
-    ref.current?.pause()
-    openFullscreen?.()
-  }
-
-  const ref = React.useRef<HTMLVideoElement | null>(null)
-
-  return showPoster ? (
-    <div onClick={onPress} style={styles.posterContainer}>
-      <Kb.Image src={previewURL} style={{height, width}} />
-      {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={styles.playButton} /> : null}
-      <Kb.Box2 direction="vertical" overflow="hidden" style={styles.durationContainer}>
-        <Kb.Text type="BodyTinyBold" style={styles.durationText}>
-          {videoDuration}
-        </Kb.Text>
-      </Kb.Box2>
-    </div>
-  ) : (
-    <video
-      ref={ref}
-      autoPlay={true}
-      onDoubleClick={openFullscreen ? onDoubleClick : undefined}
-      height={height}
-      width={width}
-      poster={previewURL}
-      preload="none"
-      controls={true}
-      playsInline={true}
-      controlsList="nodownload noremoteplayback nofullscreen"
-      style={Kb.Styles.castStyleDesktop(styles.video)}
-    >
-      <source src={url} />
-    </video>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      durationContainer: {
-        alignSelf: 'flex-end',
-        backgroundColor: Kb.Styles.globalColors.black_50,
-        borderRadius: 2,
-        bottom: Kb.Styles.globalMargins.tiny,
-        padding: 1,
-        position: 'absolute',
-        right: Kb.Styles.globalMargins.tiny,
-      },
-      durationText: {
-        color: Kb.Styles.globalColors.white,
-        paddingLeft: 3,
-        paddingRight: 3,
-      },
-      playButton: {
-        left: '50%',
-        marginLeft: -32,
-        marginTop: -32,
-        position: 'absolute',
-        top: '50%',
-      },
-      posterContainer: {
-        display: 'flex',
-        flexShrink: 1,
-        position: 'relative',
-      },
-      video: Kb.Styles.platformStyles({
-        isElectron: {
-          ...Kb.Styles.globalStyles.rounded,
-          maxHeight,
-          maxWidth,
-          objectFit: 'contain',
-        },
-      }),
-    }) as const
-)
-
-export default VideoImpl
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.native.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.native.tsx
deleted file mode 100644
index 29c47a0d0be3..000000000000
--- a/shared/chat/conversation/messages/attachment/video/videoimpl.native.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {ShowToastAfterSaving} from '../shared'
-import {useVideoPlayer, VideoView} from 'expo-video'
-import {useEventListener} from 'expo'
-import {Pressable} from 'react-native'
-import type {Props} from './videoimpl.shared'
-import {getAttachmentPreviewSize} from '../shared'
-
-const VideoImpl = (p: Props) => {
-  const {allowPlay, message, showPopup} = p
-  const {fileURL: url, transferState, videoDuration} = message
-  const {previewURL, height, width} = getAttachmentPreviewSize(message)
-  const sourceUri = `${url}&contentforce=true`
-
-  const player = useVideoPlayer(sourceUri, pl => {
-    pl.loop = false
-  })
-
-  const [showPoster, setShowPoster] = React.useState(true)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastUrl !== url) {
-    setLastUrl(url)
-    setShowPoster(true)
-  }
-
-  const onPress = () => {
-    setShowPoster(false)
-    player.play()
-  }
-
-  useEventListener(player, 'playToEnd', () => {
-    player.replay()
-  })
-
-  return (
-    <>
-      <ShowToastAfterSaving transferState={transferState} />
-      {showPoster ? (
-        <Pressable onPress={onPress} style={styles.pressable} onLongPress={showPopup}>
-          <Kb.Box2
-            direction="vertical"
-            style={Kb.Styles.collapseStyles([styles.posterContainer, {height, width}])}
-          >
-            <Kb.Image src={previewURL} style={Kb.Styles.collapseStyles([styles.poster, {height, width}])} />
-            {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={styles.playButton} /> : null}
-            <Kb.Box2 direction="vertical" overflow="hidden" style={styles.durationContainer}>
-              <Kb.Text type="BodyTinyBold" style={styles.durationText}>
-                {videoDuration}
-              </Kb.Text>
-            </Kb.Box2>
-          </Kb.Box2>
-        </Pressable>
-      ) : (
-        <VideoView
-          player={player}
-          nativeControls={true}
-          contentFit="cover"
-          style={Kb.Styles.collapseStyles([styles.video, {height, width}])}
-        />
-      )}
-    </>
-  )
-}
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      durationContainer: {
-        alignSelf: 'flex-end',
-        backgroundColor: Kb.Styles.globalColors.black_50,
-        borderRadius: 2,
-        bottom: Kb.Styles.globalMargins.tiny,
-        padding: 1,
-        position: 'absolute',
-        right: Kb.Styles.globalMargins.tiny,
-      },
-      durationText: {
-        color: Kb.Styles.globalColors.white,
-        paddingLeft: 3,
-        paddingRight: 3,
-      },
-      playButton: {
-        left: '50%',
-        marginLeft: -32,
-        marginTop: -32,
-        position: 'absolute',
-        top: '50%',
-      },
-      poster: {
-        backgroundColor: Kb.Styles.globalColors.black_05_on_white,
-        opacity: 1,
-      },
-      posterContainer: {
-        position: 'relative',
-      },
-      pressable: {
-        position: 'relative',
-        width: '100%',
-      },
-      video: {
-        alignSelf: 'center',
-      },
-    }) as const
-)
-
-export default VideoImpl
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx
index 20e58705321e..1db34229fde3 100644
--- a/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx
+++ b/shared/chat/conversation/messages/attachment/video/videoimpl.shared.tsx
@@ -1,4 +1,6 @@
 import type * as T from '@/constants/types'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
 
 export type Props = {
   openFullscreen?: () => void
@@ -6,3 +8,40 @@ export type Props = {
   allowPlay: boolean
   message: T.Chat.MessageAttachment
 }
+
+export const usePosterState = (url: string) => {
+  const [showPoster, setShowPoster] = React.useState(true)
+  const [lastUrl, setLastUrl] = React.useState(url)
+  if (lastUrl !== url) {
+    setLastUrl(url)
+    setShowPoster(true)
+  }
+  return {showPoster, reveal: () => setShowPoster(false)}
+}
+
+export const sharedStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      durationContainer: {
+        alignSelf: 'flex-end',
+        backgroundColor: Kb.Styles.globalColors.black_50,
+        borderRadius: 2,
+        bottom: Kb.Styles.globalMargins.tiny,
+        padding: 1,
+        position: 'absolute',
+        right: Kb.Styles.globalMargins.tiny,
+      },
+      durationText: {
+        color: Kb.Styles.globalColors.white,
+        paddingLeft: 3,
+        paddingRight: 3,
+      },
+      playButton: {
+        left: '50%',
+        marginLeft: -32,
+        marginTop: -32,
+        position: 'absolute',
+        top: '50%',
+      },
+    }) as const
+)
diff --git a/shared/chat/conversation/messages/attachment/video/videoimpl.tsx b/shared/chat/conversation/messages/attachment/video/videoimpl.tsx
new file mode 100644
index 000000000000..52207a2b4b42
--- /dev/null
+++ b/shared/chat/conversation/messages/attachment/video/videoimpl.tsx
@@ -0,0 +1,145 @@
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import type {Props} from './videoimpl.shared'
+import {usePosterState, sharedStyles} from './videoimpl.shared'
+import {getAttachmentPreviewSize, ShowToastAfterSaving, maxHeight, maxWidth} from '../shared'
+import {useVideoPlayer, VideoView} from 'expo-video'
+import {useEventListener} from 'expo'
+import {Pressable} from 'react-native'
+
+// Stub type to avoid dom lib dependency in native tsconfig
+type VideoElementRef = {
+  pause: () => void
+}
+
+const DesktopVideoImpl = (p: Props) => {
+  const {allowPlay, message, openFullscreen} = p
+  const {fileURL: url, videoDuration} = message
+  const {previewURL, height, width} = getAttachmentPreviewSize(message)
+  const {showPoster, reveal} = usePosterState(url)
+  const ref = React.useRef<VideoElementRef | null>(null)
+
+  const onDoubleClick = () => {
+    ref.current?.pause()
+    openFullscreen?.()
+  }
+
+  return showPoster ? (
+    <div onClick={reveal} style={desktopStyles.posterContainer}>
+      <Kb.Image src={previewURL} style={{height, width}} />
+      {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} /> : null}
+      <Kb.Box2 direction="vertical" overflow="hidden" style={sharedStyles.durationContainer}>
+        <Kb.Text type="BodyTinyBold" style={sharedStyles.durationText}>
+          {videoDuration}
+        </Kb.Text>
+      </Kb.Box2>
+    </div>
+  ) : (
+    <video
+      ref={ref as React.RefObject<HTMLVideoElement>}
+      autoPlay={true}
+      onDoubleClick={openFullscreen ? onDoubleClick : undefined}
+      height={height}
+      width={width}
+      poster={previewURL}
+      preload="none"
+      controls={true}
+      playsInline={true}
+      controlsList="nodownload noremoteplayback nofullscreen"
+      style={Kb.Styles.castStyleDesktop(desktopStyles.video)}
+    >
+      <source src={url} />
+    </video>
+  )
+}
+
+const NativeVideoImpl = (p: Props) => {
+  const {allowPlay, message, showPopup} = p
+  const {fileURL: url, transferState, videoDuration} = message
+  const {previewURL, height, width} = getAttachmentPreviewSize(message)
+  const {showPoster, reveal} = usePosterState(url)
+  const sourceUri = `${url}&contentforce=true`
+
+  const player = useVideoPlayer(sourceUri, pl => {
+    pl.loop = false
+  })
+
+  const onPress = () => {
+    reveal()
+    player.play()
+  }
+
+  useEventListener(player, 'playToEnd', () => {
+    player.replay()
+  })
+
+  return (
+    <>
+      <ShowToastAfterSaving transferState={transferState} />
+      {showPoster ? (
+        <Pressable onPress={onPress} style={nativeStyles.pressable} onLongPress={showPopup}>
+          <Kb.Box2
+            direction="vertical"
+            style={Kb.Styles.collapseStyles([nativeStyles.posterContainer, {height, width}])}
+          >
+            <Kb.Image src={previewURL} style={Kb.Styles.collapseStyles([nativeStyles.poster, {height, width}])} />
+            {allowPlay ? <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} /> : null}
+            <Kb.Box2 direction="vertical" overflow="hidden" style={sharedStyles.durationContainer}>
+              <Kb.Text type="BodyTinyBold" style={sharedStyles.durationText}>
+                {videoDuration}
+              </Kb.Text>
+            </Kb.Box2>
+          </Kb.Box2>
+        </Pressable>
+      ) : (
+        <VideoView
+          player={player}
+          nativeControls={true}
+          contentFit="cover"
+          style={(Kb.Styles.collapseStyles([nativeStyles.video, {height, width}]) ?? {}) as object}
+        />
+      )}
+    </>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      posterContainer: {
+        display: 'flex',
+        flexShrink: 1,
+        position: 'relative',
+      },
+      video: Kb.Styles.platformStyles({
+        isElectron: {
+          ...Kb.Styles.globalStyles.rounded,
+          maxHeight,
+          maxWidth,
+          objectFit: 'contain',
+        },
+      }),
+    }) as const
+)
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      poster: {
+        backgroundColor: Kb.Styles.globalColors.black_05_on_white,
+        opacity: 1,
+      },
+      posterContainer: {
+        position: 'relative',
+      },
+      pressable: {
+        position: 'relative',
+        width: '100%',
+      },
+      video: {
+        alignSelf: 'center',
+      },
+    }) as const
+)
+
+export default isMobile ? NativeVideoImpl : DesktopVideoImpl
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx
deleted file mode 100644
index 3c0f18f40a7d..000000000000
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.desktop.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters/index'
-import type {Props} from './video.shared'
-
-export const Video = (p: Props) => {
-  const {autoPlay, onClick, height, width, style, url} = p
-  const videoRef = React.useRef<HTMLVideoElement | null>(null)
-  const [playing, setPlaying] = React.useState(autoPlay)
-  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
-    setLastAutoPlay(autoPlay)
-    setLastUrl(url)
-    setPlaying(autoPlay)
-  }
-
-  const _onClick = () => {
-    if (onClick) {
-      onClick()
-      return
-    }
-    if (!videoRef.current) {
-      return
-    }
-    if (!playing) {
-      videoRef.current
-        .play()
-        .then(() => {})
-        .catch(() => {})
-    } else {
-      videoRef.current.pause()
-    }
-    setPlaying(p => !p)
-  }
-
-  return (
-    <Kb.Box2 direction="horizontal" relative={true} style={styles.container}>
-      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
-        {!playing && <Kb.ImageIcon type="icon-play-64" style={styles.playButton} />}
-      </Kb.Box2>
-      <video
-        ref={videoRef}
-        onClick={_onClick}
-        autoPlay={autoPlay}
-        muted={true}
-        src={url}
-        style={style}
-        loop={true}
-      />
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      absoluteContainer: {
-        left: 0,
-        position: 'absolute',
-        top: 0,
-      },
-      container: {
-        alignSelf: 'flex-start',
-      },
-      playButton: {
-        bottom: '50%',
-        left: '50%',
-        marginBottom: -32,
-        marginLeft: -32,
-        marginRight: -32,
-        marginTop: -32,
-        position: 'absolute',
-        right: '50%',
-        top: '50%',
-      },
-    }) as const
-)
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx
deleted file mode 100644
index 6e29df22dec3..000000000000
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters/index'
-import logger from '@/logger'
-import {useVideoPlayer, VideoView} from 'expo-video'
-import type {Props} from './video.shared'
-
-export const Video = (props: Props) => {
-  const {autoPlay, onClick, url, style, width, height} = props
-  const [playing, setPlaying] = React.useState(autoPlay)
-  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
-  const [lastUrl, setLastUrl] = React.useState(url)
-
-  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
-    setLastAutoPlay(autoPlay)
-    setLastUrl(url)
-    setPlaying(autoPlay)
-  }
-
-  /*
-    The video library thinks any URI that doesn't start with /https?:// to be an asset bundled
-    with the app, and will straight crash of that is not true. Solution here is if we somehow end up with a
-    blank URL in a native video component, then just put some bogus string in there that at least doesn't
-    send the library down the crasher path.
-    */
-  const uri = url.length > 0 ? url : 'https://'
-  const sourceUri = `${uri}&autoplay=${autoPlay ? 'true' : 'false'}&contentforce=true`
-
-  const player = useVideoPlayer(sourceUri, p => {
-    p.loop = true
-    p.muted = true
-    if (autoPlay) {
-      p.play()
-    }
-  })
-
-  React.useEffect(() => {
-    if (playing) {
-      player.play()
-    } else {
-      player.pause()
-    }
-  }, [player, playing])
-
-  // Handle errors
-  React.useEffect(() => {
-    const sub = player.addListener('statusChange', ({status, error}) => {
-      if (status === 'error' && error) {
-        logger.error(`Error loading vid: ${JSON.stringify(error)}`)
-      }
-    })
-    return () => sub.remove()
-  }, [player])
-
-  const _onClick = () => {
-    if (onClick) {
-      onClick()
-      return
-    }
-    setPlaying(p => !p)
-  }
-
-  return (
-    <Kb.ClickableBox onClick={_onClick} style={Kb.Styles.collapseStyles([style, styles.container])}>
-      <VideoView
-        player={player}
-        nativeControls={false}
-        contentFit="contain"
-        style={Kb.Styles.collapseStyles([styles.player, style])}
-      />
-      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([styles.absoluteContainer, {height, width}])}>
-        {!playing && <Kb.ImageIcon type="icon-play-64" style={styles.playButton} />}
-      </Kb.Box2>
-    </Kb.ClickableBox>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      absoluteContainer: {
-        left: 0,
-        position: 'absolute',
-        top: 0,
-      },
-      container: {
-        alignSelf: 'flex-start',
-        position: 'relative',
-      },
-      playButton: {
-        bottom: '50%',
-        left: '50%',
-        marginBottom: -32,
-        marginLeft: -32,
-        marginRight: -32,
-        marginTop: -32,
-        position: 'absolute',
-        right: '50%',
-        top: '50%',
-      },
-      player: {
-        position: 'relative',
-      },
-    }) as const
-)
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx
index 3917b659dd22..28e4c752e4ef 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.shared.tsx
@@ -1,3 +1,6 @@
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+
 export type Props = {
   autoPlay: boolean
   height: number
@@ -6,3 +9,37 @@ export type Props = {
   url: string
   width: number
 }
+
+export const usePlayState = (url: string, autoPlay: boolean) => {
+  const [playing, setPlaying] = React.useState(autoPlay)
+  const [lastAutoPlay, setLastAutoPlay] = React.useState(autoPlay)
+  const [lastUrl, setLastUrl] = React.useState(url)
+  if (lastAutoPlay !== autoPlay || lastUrl !== url) {
+    setLastAutoPlay(autoPlay)
+    setLastUrl(url)
+    setPlaying(autoPlay)
+  }
+  return {playing, setPlaying}
+}
+
+export const sharedStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      absoluteContainer: {
+        left: 0,
+        position: 'absolute',
+        top: 0,
+      },
+      playButton: {
+        bottom: '50%',
+        left: '50%',
+        marginBottom: -32,
+        marginLeft: -32,
+        marginRight: -32,
+        marginTop: -32,
+        position: 'absolute',
+        right: '50%',
+        top: '50%',
+      },
+    }) as const
+)
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx
new file mode 100644
index 000000000000..cc0ef41e7069
--- /dev/null
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx
@@ -0,0 +1,133 @@
+import * as Kb from '@/common-adapters/index'
+import * as React from 'react'
+import type {Props} from './video.shared'
+import {usePlayState, sharedStyles} from './video.shared'
+import logger from '@/logger'
+import {useVideoPlayer, VideoView} from 'expo-video'
+
+// Stub type to avoid dom lib dependency in native tsconfig
+type VideoElementRef = {
+  play: () => Promise<void>
+  pause: () => void
+}
+
+const DesktopVideo = (p: Props) => {
+  const {autoPlay, onClick, height, width, style, url} = p
+  const videoRef = React.useRef<VideoElementRef | null>(null)
+  const {playing, setPlaying} = usePlayState(url, autoPlay)
+
+  const _onClick = () => {
+    if (onClick) {
+      onClick()
+      return
+    }
+    if (!videoRef.current) {
+      return
+    }
+    if (!playing) {
+      videoRef.current
+        .play()
+        .then(() => {})
+        .catch(() => {})
+    } else {
+      videoRef.current.pause()
+    }
+    setPlaying(p => !p)
+  }
+
+  return (
+    <Kb.Box2 direction="horizontal" relative={true} style={desktopStyles.container}>
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([sharedStyles.absoluteContainer, {height, width}])}>
+        {!playing && <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} />}
+      </Kb.Box2>
+      <video
+        ref={videoRef as React.RefObject<HTMLVideoElement>}
+        onClick={_onClick}
+        autoPlay={autoPlay}
+        muted={true}
+        src={url}
+        style={style}
+        loop={true}
+      />
+    </Kb.Box2>
+  )
+}
+
+const NativeVideo = (props: Props) => {
+  const {autoPlay, onClick, url, style, width, height} = props
+  const {playing, setPlaying} = usePlayState(url, autoPlay)
+
+  const uri = url.length > 0 ? url : 'https://'
+  const sourceUri = `${uri}&autoplay=${autoPlay ? 'true' : 'false'}&contentforce=true`
+
+  const player = useVideoPlayer(sourceUri, p => {
+    p.loop = true
+    p.muted = true
+    if (autoPlay) {
+      p.play()
+    }
+  })
+
+  React.useEffect(() => {
+    if (playing) {
+      player.play()
+    } else {
+      player.pause()
+    }
+  }, [player, playing])
+
+  React.useEffect(() => {
+    const sub = player.addListener('statusChange', ({status, error}) => {
+      if (status === 'error' && error) {
+        logger.error(`Error loading vid: ${JSON.stringify(error)}`)
+      }
+    })
+    return () => sub.remove()
+  }, [player])
+
+  const _onClick = () => {
+    if (onClick) {
+      onClick()
+      return
+    }
+    setPlaying(p => !p)
+  }
+
+  return (
+    <Kb.ClickableBox onClick={_onClick} style={Kb.Styles.collapseStyles([style, nativeStyles.container])}>
+      <VideoView
+        player={player}
+        nativeControls={false}
+        contentFit="contain"
+        style={(Kb.Styles.collapseStyles([nativeStyles.player, style]) ?? {}) as object}
+      />
+      <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([sharedStyles.absoluteContainer, {height, width}])}>
+        {!playing && <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} />}
+      </Kb.Box2>
+    </Kb.ClickableBox>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        alignSelf: 'flex-start',
+      },
+    }) as const
+)
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        alignSelf: 'flex-start',
+        position: 'relative',
+      },
+      player: {
+        position: 'relative',
+      },
+    }) as const
+)
+
+export const Video = isMobile ? NativeVideo : DesktopVideo
diff --git a/shared/chat/conversation/normal/index.native.tsx b/shared/chat/conversation/normal/index.native.tsx
deleted file mode 100644
index 1a4ed7c3434b..000000000000
--- a/shared/chat/conversation/normal/index.native.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as C from '@/constants'
-import {PortalHost} from '@/common-adapters/portal.native'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import {useSafeAreaInsets, useSafeAreaFrame} from 'react-native-safe-area-context'
-import Banner from '../bottom-banner'
-import InputArea from '../input-area/container'
-import InvitationToBlock from '@/chat/blocking/invitation-to-block'
-import ListArea from '../list-area'
-import PinnedMessage from '../pinned-message'
-import ThreadLoadStatus from '../load-status'
-import type {LayoutEvent} from '@/common-adapters/box'
-import {MaxInputAreaContext} from '../input-area/normal/max-input-area-context'
-import {PerfProfiler} from '@/perf/react-profiler'
-import logger from '@/logger'
-import {useConversationThreadID, useConversationThreadSelector} from '../thread-context'
-
-const Offline = () => (
-  <Kb.Banner color="grey" small={true} style={styles.offline}>
-    {"Couldn't load all chat messages due to network connectivity. Retrying..."}
-  </Kb.Banner>
-)
-
-const LoadingLine = () => {
-  const conversationIDKey = useConversationThreadID()
-  const showLoader = C.Waiting.useAnyWaiting([
-    C.waitingKeyChatThreadLoad(conversationIDKey),
-    C.waitingKeyChatInboxSyncStarted,
-  ])
-  return showLoader ? <Kb.LoadingLine /> : null
-}
-
-const Conversation = function Conversation() {
-  const [maxInputArea, setMaxInputArea] = React.useState(0)
-  const onLayout = (e: LayoutEvent) => {
-    setMaxInputArea(e.nativeEvent.layout.height)
-  }
-
-  const conversationIDKey = useConversationThreadID()
-  logger.info(`Conversation: rendering convID: ${conversationIDKey}`)
-
-  const innerComponent = (
-    <Kb.BoxGrow onLayout={onLayout}>
-      <Kb.Box2 direction="vertical" fullWidth={true} flex={1} relative={true}>
-        <ThreadLoadStatus />
-        <PinnedMessage />
-        <ListArea />
-        <LoadingLine />
-      </Kb.Box2>
-      <InvitationToBlock />
-      <Banner />
-      <MaxInputAreaContext value={maxInputArea}>
-        <InputArea />
-      </MaxInputAreaContext>
-    </Kb.BoxGrow>
-  )
-
-  const insets = useSafeAreaInsets()
-  const headerHeight = Kb.Styles.isTablet ? 115 : 44
-  const windowHeight = useSafeAreaFrame().height
-  const height = windowHeight - insets.top - headerHeight
-
-  const safeStyle = isAndroid
-    ? {paddingBottom: insets.bottom}
-    : {
-        height,
-        maxHeight: height,
-        minHeight: height,
-        paddingBottom: Kb.Styles.isTablet ? 0 : insets.bottom,
-      }
-
-  const threadLoadedOffline = useConversationThreadSelector(s => s.meta.offline)
-
-  const content = (
-    <Kb.Box2
-      direction="vertical"
-      flex={1}
-      fullWidth={true}
-      fullHeight={true}
-      key={conversationIDKey}
-          relative={true}
-    >
-      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
-        {threadLoadedOffline && <Offline />}
-        {innerComponent}
-      </Kb.Box2>
-      <PortalHost name="convOverlay" />
-    </Kb.Box2>
-  )
-
-  return (
-    <PerfProfiler id="Conversation">
-      {isAndroid ? (
-        <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={safeStyle}>
-          {content}
-        </Kb.Box2>
-      ) : (
-        <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={safeStyle}>
-          <Kb.KeyboardAvoidingView2
-            extraPadding={Kb.Styles.isTablet ? -65 : -insets.bottom}
-            behavior="padding"
-          >
-            {content}
-          </Kb.KeyboardAvoidingView2>
-        </Kb.Box2>
-      )}
-    </PerfProfiler>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      offline: {padding: Kb.Styles.globalMargins.xxtiny},
-    }) as const
-)
-
-export default Conversation
diff --git a/shared/chat/conversation/normal/index.desktop.tsx b/shared/chat/conversation/normal/index.tsx
similarity index 54%
rename from shared/chat/conversation/normal/index.desktop.tsx
rename to shared/chat/conversation/normal/index.tsx
index a3f799870791..3c7e0f65a0f6 100644
--- a/shared/chat/conversation/normal/index.desktop.tsx
+++ b/shared/chat/conversation/normal/index.tsx
@@ -1,6 +1,6 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
-import type * as React from 'react'
+import * as React from 'react'
 import {PerfProfiler} from '@/perf/react-profiler'
 import Banner from '../bottom-banner'
 import InputArea from '../input-area/container'
@@ -8,14 +8,18 @@ import InvitationToBlock from '@/chat/blocking/invitation-to-block'
 import ListArea from '../list-area'
 import PinnedMessage from '../pinned-message'
 import ThreadLoadStatus from '../load-status'
-import ThreadSearch from '../search'
 import {useConversationCenter} from '../center-context'
 import {useConversationThreadID, useConversationThreadSelector, useConversationThreadToggleSearch} from '../thread-context'
 import {useThreadSearchRoute} from '../thread-search-route'
-import {readImageFromClipboard} from '@/util/clipboard.desktop'
-import '../conversation.css'
 import {indefiniteArticle} from '@/util/string'
 import {makePasteAttachment} from '../attachment-actions'
+import {readImageFromClipboard} from '@/util/clipboard.desktop'
+import ThreadSearch from '../search'
+import '../conversation.css'
+import {PortalHost} from '@/common-adapters/portal.native'
+import {useSafeAreaInsets, useSafeAreaFrame} from 'react-native-safe-area-context'
+import {MaxInputAreaContext} from '../input-area/normal/max-input-area-context'
+import logger from '@/logger'
 
 const Offline = () => (
   <Kb.Banner color="grey" small={true} style={styles.offline}>
@@ -32,7 +36,7 @@ const LoadingLine = () => {
   return showLoader ? <Kb.LoadingLine /> : null
 }
 
-const Conversation = function Conversation() {
+const DesktopConversation = function DesktopConversation() {
   const conversationIDKey = useConversationThreadID()
   const navigateAppend = C.Router2.navigateAppend
   const onAttach = (paths: Array<string>) => {
@@ -69,7 +73,7 @@ const Conversation = function Conversation() {
   Kb.useHotKey('mod+f', onToggleThreadSearch)
 
   return (
-    <div className="conversation" style={styles.container} onPaste={onPaste} key={conversationIDKey}>
+    <div className="conversation" style={desktopStyles.container} onPaste={onPaste} key={conversationIDKey}>
       <Kb.DragAndDrop
         onAttach={cannotWrite ? undefined : onAttach}
         fullHeight={true}
@@ -83,7 +87,7 @@ const Conversation = function Conversation() {
             <ThreadLoadStatus />
             {!showThreadSearch && <PinnedMessage />}
           </Kb.Box2>
-          {showThreadSearch && <ThreadSearch style={styles.threadSearchStyle} />}
+          {showThreadSearch && <ThreadSearch style={desktopStyles.threadSearchStyle} />}
           <LoadingLine />
         </Kb.Box2>
         <InvitationToBlock />
@@ -94,7 +98,93 @@ const Conversation = function Conversation() {
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(
+const DesktopConversationWithProfiler = () => (
+  <PerfProfiler id="Conversation">
+    <DesktopConversation />
+  </PerfProfiler>
+)
+
+const NativeConversation = function NativeConversation() {
+  type LayoutEvent = {nativeEvent: {layout: {height: number}}}
+
+  const [maxInputArea, setMaxInputArea] = React.useState(0)
+  const onLayout = (e: LayoutEvent) => {
+    setMaxInputArea(e.nativeEvent.layout.height)
+  }
+
+  const conversationIDKey = useConversationThreadID()
+  logger.info(`Conversation: rendering convID: ${conversationIDKey}`)
+
+  const innerComponent = (
+    <Kb.BoxGrow onLayout={onLayout}>
+      <Kb.Box2 direction="vertical" fullWidth={true} flex={1} relative={true}>
+        <ThreadLoadStatus />
+        <PinnedMessage />
+        <ListArea />
+        <LoadingLine />
+      </Kb.Box2>
+      <InvitationToBlock />
+      <Banner />
+      <MaxInputAreaContext value={maxInputArea}>
+        <InputArea />
+      </MaxInputAreaContext>
+    </Kb.BoxGrow>
+  )
+
+  const insets = useSafeAreaInsets()
+  const headerHeight = Kb.Styles.isTablet ? 115 : 44
+  const windowHeight = useSafeAreaFrame().height
+  const height = windowHeight - insets.top - headerHeight
+
+  const safeStyle = isAndroid
+    ? {paddingBottom: insets.bottom}
+    : {
+        height,
+        maxHeight: height,
+        minHeight: height,
+        paddingBottom: Kb.Styles.isTablet ? 0 : insets.bottom,
+      }
+
+  const threadLoadedOffline = useConversationThreadSelector(s => s.meta.offline)
+
+  const content = (
+    <Kb.Box2
+      direction="vertical"
+      flex={1}
+      fullWidth={true}
+      fullHeight={true}
+      key={conversationIDKey}
+      relative={true}
+    >
+      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+        {threadLoadedOffline && <Offline />}
+        {innerComponent}
+      </Kb.Box2>
+      <PortalHost name="convOverlay" />
+    </Kb.Box2>
+  )
+
+  return (
+    <PerfProfiler id="Conversation">
+      {isAndroid ? (
+        <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={safeStyle}>
+          {content}
+        </Kb.Box2>
+      ) : (
+        <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={safeStyle}>
+          <Kb.KeyboardAvoidingView2
+            extraPadding={Kb.Styles.isTablet ? -65 : -insets.bottom}
+            behavior="padding"
+          >
+            {content}
+          </Kb.KeyboardAvoidingView2>
+        </Kb.Box2>
+      )}
+    </PerfProfiler>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       container: {
@@ -112,10 +202,13 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const ConversationWithProfiler = () => (
-  <PerfProfiler id="Conversation">
-    <Conversation />
-  </PerfProfiler>
+const styles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      offline: {padding: Kb.Styles.globalMargins.xxtiny},
+    }) as const
 )
 
-export default ConversationWithProfiler
+void styles
+
+export default isMobile ? NativeConversation : DesktopConversationWithProfiler
diff --git a/shared/chat/inbox/index.native.tsx b/shared/chat/inbox/index.native.tsx
deleted file mode 100644
index c840acfdd252..000000000000
--- a/shared/chat/inbox/index.native.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import * as C from '@/constants'
-import * as Chat from '@/constants/chat'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import {useChosenChannelsTeamnames} from '@/chat/conversation/manage-channels-badge'
-import {PerfProfiler} from '@/perf/react-profiler'
-import * as RowSizes from './row/sizes'
-import BigTeamsDivider from './row/big-teams-divider'
-import BuildTeam from './row/build-team'
-import ConnectedTeamsDivider from './row/teams-divider-container'
-import SearchRow from './search-row'
-import InboxSearch from '../inbox-search'
-import UnreadShortcut from './unread-shortcut'
-import type * as T from '@/constants/types'
-import {Alert} from 'react-native'
-import type {LegendListRef} from '@/common-adapters'
-import {makeRow} from './row'
-import {useOpenedRowState} from './row/opened-row-state'
-import type {InboxSearchController} from './use-inbox-search'
-import {useInboxSearch} from './use-inbox-search'
-import {useInboxState} from './use-inbox-state'
-import {type RowItem, type ViewableItemsData, viewabilityConfig, getItemType, keyExtractor, useUnreadShortcut, useScrollUnbox} from './list-helpers'
-
-const NoChats = (props: {onNewChat: () => void}) => (
-  <>
-    <Kb.Box2
-      direction="vertical"
-      gapStart={true}
-      gap="small"
-      justifyContent="flex-end"
-      style={styles.noChatsContainer}
-    >
-      <Kb.ImageIcon type="icon-fancy-encrypted-phone-mobile-226-96" />
-      <Kb.Box2 direction="vertical">
-        <Kb.Text type="BodySmall" center={true}>
-          All conversations are
-        </Kb.Text>
-        <Kb.Text type="BodySmall" center={true}>
-          end-to-end encrypted.
-        </Kb.Text>
-      </Kb.Box2>
-    </Kb.Box2>
-    <Kb.Box2 direction="vertical" gapStart={true} gap="medium" style={styles.newChat}>
-      <Kb.Button
-        fullWidth={true}
-        onClick={props.onNewChat}
-        mode="Primary"
-        label="Start a new chat"
-        style={styles.button}
-      />
-    </Kb.Box2>
-  </>
-)
-
-type InboxProps = {
-  conversationIDKey?: T.Chat.ConversationIDKey
-  refreshInbox?: T.Chat.ChatRootInboxRefresh
-  search?: InboxSearchController
-}
-
-type ControlledInboxProps = {
-  conversationIDKey?: T.Chat.ConversationIDKey
-  refreshInbox?: T.Chat.ChatRootInboxRefresh
-  search: InboxSearchController
-}
-
-function InboxWithSearch(props: {
-  conversationIDKey?: T.Chat.ConversationIDKey
-  refreshInbox?: T.Chat.ChatRootInboxRefresh
-}) {
-  const search = useInboxSearch()
-  return <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={search} />
-}
-
-function InboxBody(p: ControlledInboxProps) {
-  const {search} = p
-  const inbox = useInboxState(p.conversationIDKey, search.isSearching, p.refreshInbox)
-  const {onUntrustedInboxVisible, toggleSmallTeamsExpanded, selectedConversationIDKey} = inbox
-  const {unreadIndices, unreadTotal, rows, smallTeamsExpanded, isSearching, allowShowFloatingButton} = inbox
-  const {neverLoaded, onNewChat, inboxNumSmallRows, setInboxNumSmallRows} = inbox
-  const headComponent = C.isTablet ? null : <SearchRow search={search} showSearch={isMobile} />
-  const chosenChannelsTeamnames = useChosenChannelsTeamnames()
-  const listExtraData = React.useMemo(
-    () => ({
-      chosenChannelsTeamnames,
-      selectedConversationIDKey: C.isTablet ? selectedConversationIDKey : undefined,
-    }),
-    [chosenChannelsTeamnames, selectedConversationIDKey]
-  )
-
-  const listRef = React.useRef<LegendListRef | null>(null)
-
-  const getSize = React.useCallback((item: RowItem) => {
-    switch (item.type) {
-      case 'small': return RowSizes.smallRowHeight
-      case 'big': return RowSizes.bigRowHeight
-      case 'bigHeader': return RowSizes.bigHeaderHeight
-      case 'divider': return RowSizes.dividerHeight(item.showButton)
-      case 'teamBuilder': return 120
-    }
-  }, [])
-
-  const {showFloating, showUnread, unreadCount, scrollToUnread, applyUnreadAndFloating} =
-    useUnreadShortcut({listRef, rows, unreadIndices, unreadTotal, getSize})
-  const onScrollUnbox = useScrollUnbox(onUntrustedInboxVisible, 1000)
-
-  const itemHeight = {getSize, type: 'perItem' as const}
-
-  const renderItem = (_index: number, item: RowItem): React.ReactElement | null => {
-    const row = item
-    let element: React.ReactElement | null
-    if (row.type === 'divider') {
-      element = (
-        <ConnectedTeamsDivider
-          rows={rows}
-          showButton={row.showButton}
-          hiddenCount={row.hiddenCount}
-          toggle={toggleSmallTeamsExpanded}
-          smallTeamsExpanded={smallTeamsExpanded}
-        />
-      )
-    } else if (row.type === 'teamBuilder') {
-      element = <BuildTeam />
-    } else {
-      const isSelected = 'conversationIDKey' in row && selectedConversationIDKey === row.conversationIDKey
-      element = makeRow(row, isSelected, chosenChannelsTeamnames)
-    }
-
-    return <PerfProfiler id={`InboxRow-${row.type}`}>{element}</PerfProfiler>
-  }
-
-  const onViewChanged = (data: ViewableItemsData) => {
-    onScrollUnbox(data)
-    applyUnreadAndFloating()
-  }
-
-  const setOpenRow = useOpenedRowState(s => s.dispatch.setOpenRow)
-
-  C.Router2.useSafeFocusEffect(() => {
-    setOpenRow(Chat.noConversationIDKey)
-  })
-
-  const promptSmallTeamsNum = React.useCallback(() => {
-    if (isIOS) {
-      Alert.prompt(
-        'Change shown',
-        'Number of conversations to show above this button',
-        ns => {
-          const n = parseInt(ns, 10)
-          if (n > 0) {
-            setInboxNumSmallRows(n)
-          }
-        },
-        'plain-text',
-        String(inboxNumSmallRows)
-      )
-    }
-  }, [inboxNumSmallRows, setInboxNumSmallRows])
-
-  const scrollToBigTeams = React.useCallback(() => {
-    if (smallTeamsExpanded) {
-      toggleSmallTeamsExpanded()
-    }
-    void listRef.current?.scrollToIndex({animated: true, index: inboxNumSmallRows, viewPosition: 0.5})
-  }, [inboxNumSmallRows, smallTeamsExpanded, toggleSmallTeamsExpanded])
-
-  const renderFloatingDivider = React.useCallback(
-    (inlineLayout = false) => (
-      <BigTeamsDivider
-        inlineLayout={inlineLayout}
-        toggle={scrollToBigTeams}
-        onEdit={isIOS ? promptSmallTeamsNum : undefined}
-      />
-    ),
-    [promptSmallTeamsNum, scrollToBigTeams]
-  )
-  const showFloatingDivider = showFloating && !isSearching && allowShowFloatingButton
-
-  const noChats = !neverLoaded && !isSearching && !rows.length && <NoChats onNewChat={onNewChat} />
-
-  return (
-    <Kb.ErrorBoundary>
-      <PerfProfiler id="Inbox">
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
-        <LoadingLine />
-        {isSearching ? (
-          <Kb.Box2 direction="vertical" fullWidth={true}>
-            <InboxSearch header={headComponent} search={search} />
-          </Kb.Box2>
-        ) : (
-          <Kb.List
-            testID="inboxList"
-            ListHeaderComponent={headComponent}
-            items={rows}
-            itemHeight={itemHeight}
-            estimatedItemHeight={64}
-            getItemType={getItemType}
-            recycleItems={true}
-            keyExtractor={keyExtractor}
-            keyboardShouldPersistTaps="handled"
-            onViewableItemsChanged={onViewChanged}
-            viewabilityConfig={viewabilityConfig}
-            ref={listRef}
-            renderItem={renderItem}
-            drawDistance={250}
-            extraData={listExtraData}
-          />
-        )}
-        {noChats}
-        {showFloatingDivider ? (
-          <Kb.BottomAccessory>{renderFloatingDivider(true)}</Kb.BottomAccessory>
-        ) : (
-          rows.length === 0 && !neverLoaded && <NoRowsBuildTeam />
-        )}
-        {showUnread && !isSearching && !showFloating && (
-          <UnreadShortcut onClick={scrollToUnread} unreadCount={unreadCount} />
-        )}
-      </Kb.Box2>
-      </PerfProfiler>
-    </Kb.ErrorBoundary>
-  )
-}
-
-function Inbox(props: InboxProps) {
-  return props.search ? (
-    <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={props.search} />
-  ) : (
-    <InboxWithSearch conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} />
-  )
-}
-
-const NoRowsBuildTeam = () => {
-  const isLoading = C.useWaitingState(s => [...s.counts.keys()].some(k => k.startsWith('chat:')))
-  return isLoading ? null : <BuildTeam />
-}
-
-const LoadingLine = () => {
-  const isLoading = C.Waiting.useAnyWaiting([C.waitingKeyChatInboxRefresh, C.waitingKeyChatInboxSyncStarted])
-  return isLoading ? (
-    <Kb.Box2 direction="vertical" style={styles.loadingContainer}>
-      <Kb.LoadingLine />
-    </Kb.Box2>
-  ) : null
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      button: {width: '100%'},
-      container: Kb.Styles.platformStyles({
-        common: {
-          flexGrow: 1,
-          position: 'relative',
-        },
-        isTablet: {
-          backgroundColor: Kb.Styles.globalColors.blueGrey,
-          maxWidth: Kb.Styles.globalStyles.mediumSubNavWidth,
-        },
-      }),
-      loadingContainer: {
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        zIndex: 1000,
-      },
-      newChat: {
-        ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
-        flexShrink: 0,
-        width: '100%',
-      },
-      noChatsContainer: {
-        alignItems: 'center',
-        paddingBottom: Kb.Styles.globalMargins.large,
-        paddingLeft: Kb.Styles.globalMargins.small,
-        paddingRight: Kb.Styles.globalMargins.small,
-        paddingTop: Kb.Styles.globalMargins.large,
-      },
-    }) as const
-)
-
-export default Inbox
diff --git a/shared/chat/inbox/index.desktop.tsx b/shared/chat/inbox/index.tsx
similarity index 56%
rename from shared/chat/inbox/index.desktop.tsx
rename to shared/chat/inbox/index.tsx
index 9532bb4cfb8a..a9163c7bd50a 100644
--- a/shared/chat/inbox/index.desktop.tsx
+++ b/shared/chat/inbox/index.tsx
@@ -1,5 +1,7 @@
 import * as C from '@/constants'
+import * as Chat from '@/constants/chat'
 import * as React from 'react'
+import * as RowSizes from './row/sizes'
 import type * as T from '@/constants/types'
 import {useChosenChannelsTeamnames} from '@/chat/conversation/manage-channels-badge'
 import {PerfProfiler} from '@/perf/react-profiler'
@@ -19,42 +21,61 @@ import ConnectedTeamsDivider from './row/teams-divider-container'
 import UnreadShortcut from './unread-shortcut'
 import * as Kb from '@/common-adapters'
 import type {LegendListRef} from '@/common-adapters'
-import {createPortal} from 'react-dom'
 import {inboxWidth, smallRowHeight, getRowHeight} from './row/sizes'
 import {makeRow} from './row'
 import type {InboxSearchController} from './use-inbox-search'
 import {useInboxSearch} from './use-inbox-search'
 import {useInboxState} from './use-inbox-state'
-import './inbox.css'
+import {createPortal} from 'react-dom'
+import SearchRow from './search-row'
+import {useOpenedRowState} from './row/opened-row-state'
+import {Alert} from 'react-native'
+
+// Stub types to avoid dom lib dependency in native tsconfig
+type InboxDivRef = {
+  firstElementChild: InboxDivRef | null
+  getBoundingClientRect: () => DOMRect
+  scrollTop: number
+  scrollBy: (opts: {behavior?: string; top: number}) => void
+  addEventListener: (event: string, handler: (e: InboxDragEvent) => void) => void
+  removeEventListener: (event: string, handler: (e: InboxDragEvent) => void) => void
+}
+type InboxDragEvent = {
+  preventDefault: () => void
+  dataTransfer?: {types: Array<string>; setData: (key: string, val: string) => void}
+  clientY: number
+}
+
+// Desktop-only: DragLine + FakeRow + FakeRemovingRow
 
 const widths = [10, 80, 2, 66]
 const stableWidth = (idx: number) => 160 + -widths[idx % widths.length]!
 
-const FakeRow = ({idx}: {idx: number}) => (
-  <Kb.Box2 direction="horizontal" style={styles.fakeRow}>
-    <Kb.Box2 direction="vertical" style={styles.fakeAvatar} />
-    <Kb.Box2 direction="vertical" justifyContent="space-around" flex={1} style={styles.fakeText}>
+const DesktopFakeRow = ({idx}: {idx: number}) => (
+  <Kb.Box2 direction="horizontal" style={desktopStyles.fakeRow}>
+    <Kb.Box2 direction="vertical" style={desktopStyles.fakeAvatar} />
+    <Kb.Box2 direction="vertical" justifyContent="space-around" flex={1} style={desktopStyles.fakeText}>
       <Kb.Box2
         direction="vertical"
-        style={Kb.Styles.collapseStyles([styles.fakeTextTop, {width: stableWidth(idx) / 4}])}
+        style={Kb.Styles.collapseStyles([desktopStyles.fakeTextTop, {width: stableWidth(idx) / 4}])}
         alignSelf="flex-start"
       />
       <Kb.Box2
         direction="vertical"
-        style={Kb.Styles.collapseStyles([styles.fakeTextBottom, {width: stableWidth(idx)}])}
+        style={Kb.Styles.collapseStyles([desktopStyles.fakeTextBottom, {width: stableWidth(idx)}])}
         alignSelf="flex-start"
       />
     </Kb.Box2>
   </Kb.Box2>
 )
 
-const FakeRemovingRow = () => <Kb.Box2 direction="horizontal" style={styles.fakeRemovingRow} />
+const DesktopFakeRemovingRow = () => <Kb.Box2 direction="horizontal" style={desktopStyles.fakeRemovingRow} />
 
 const dragKey = 'application/keybase_inbox'
 
-const DragLine = (p: {
+const DesktopDragLine = (p: {
   rows: ReadonlyArray<RowItem>
-  scrollDiv: React.RefObject<HTMLDivElement | null>
+  scrollDiv: React.RefObject<InboxDivRef | null>
   inboxNumSmallRows: number
   showButton: boolean
   hiddenCount: number
@@ -94,14 +115,14 @@ const DragLine = (p: {
     if (!d) {
       return
     }
-    const onDragOver = (e: DragEvent) => {
+    const onDragOver = (e: InboxDragEvent) => {
       e.preventDefault()
       if (
         scrollDiv.current &&
         (e.dataTransfer?.types.length ?? 0) > 0 &&
         e.dataTransfer?.types[0] === dragKey
       ) {
-        const scrollableDiv = scrollDiv.current.firstElementChild as HTMLDivElement | null
+        const scrollableDiv = scrollDiv.current.firstElementChild as InboxDivRef | null
         if (scrollableDiv) {
           const dy = e.clientY - scrollDiv.current.getBoundingClientRect().top + scrollableDiv.scrollTop
           const dvt = inboxNumSmallRows * smallRowHeight - scrollableDiv.scrollTop
@@ -109,7 +130,7 @@ const DragLine = (p: {
         }
       }
     }
-    const onDrop = (e: DragEvent) => {
+    const onDrop = (e: InboxDragEvent) => {
       e.preventDefault()
       goodDropRef.current = true
     }
@@ -121,8 +142,8 @@ const DragLine = (p: {
     }
   }, [scrollDiv, throttledDragUpdate, inboxNumSmallRows])
 
-  const onDragStart = (e: React.DragEvent<HTMLDivElement>) => {
-    e.dataTransfer.setData(dragKey, dragKey)
+  const onDragStart = (e: React.DragEvent) => {
+    ;(e.dataTransfer as unknown as {setData: (k: string, v: string) => void}).setData(dragKey, dragKey)
     goodDropRef.current = false
   }
   const onDragEnd = () => {
@@ -146,7 +167,7 @@ const DragLine = (p: {
           <Kb.Box2
             direction="vertical"
             style={Kb.Styles.collapseStyles([
-              styles.fakeRowContainer,
+              desktopStyles.fakeRowContainer,
               {
                 height: (expandingRows.length || removingRows.length) * smallRowHeight,
                 top: overlayTop,
@@ -154,18 +175,18 @@ const DragLine = (p: {
             ])}
           >
             {expandingRows.map((_, idx) => (
-              <FakeRow idx={idx} key={idx} />
+              <DesktopFakeRow idx={idx} key={idx} />
             ))}
             {removingRows.map((_, idx) => (
-              <FakeRemovingRow key={idx} />
+              <DesktopFakeRemovingRow key={idx} />
             ))}
           </Kb.Box2>,
-          scrollDiv.current
+          scrollDiv.current as unknown as Element
         )
       : null
 
   return (
-    <div style={styles.dragLineWrapper}>
+    <div style={desktopStyles.dragLineWrapper}>
       {showButton && !smallTeamsExpanded && (
         <>
           <div
@@ -173,15 +194,15 @@ const DragLine = (p: {
             draggable={true}
             onDragStart={onDragStart}
             onDragEnd={onDragEnd}
-            style={Kb.Styles.castStyleDesktop(styles.grabber)}
+            style={Kb.Styles.castStyleDesktop(desktopStyles.grabber)}
           >
-            <Kb.Box2 className="grabLines" direction="vertical" style={styles.grabberLineContainer}>
-              <Kb.Box2 direction="horizontal" style={styles.grabberLine} />
-              <Kb.Box2 direction="horizontal" style={styles.grabberLine} />
-              <Kb.Box2 direction="horizontal" style={styles.grabberLine} />
+            <Kb.Box2 className="grabLines" direction="vertical" style={desktopStyles.grabberLineContainer}>
+              <Kb.Box2 direction="horizontal" style={desktopStyles.grabberLine} />
+              <Kb.Box2 direction="horizontal" style={desktopStyles.grabberLine} />
+              <Kb.Box2 direction="horizontal" style={desktopStyles.grabberLine} />
             </Kb.Box2>
           </div>
-          <Kb.Box2 direction="vertical" style={styles.spacer} />
+          <Kb.Box2 direction="vertical" style={desktopStyles.spacer} />
         </>
       )}
       <ConnectedTeamsDivider
@@ -198,6 +219,55 @@ const DragLine = (p: {
   )
 }
 
+// Native-only components
+
+const NativeNoChats = (props: {onNewChat: () => void}) => (
+  <>
+    <Kb.Box2
+      direction="vertical"
+      gapStart={true}
+      gap="small"
+      justifyContent="flex-end"
+      style={nativeStyles.noChatsContainer}
+    >
+      <Kb.ImageIcon type="icon-fancy-encrypted-phone-mobile-226-96" />
+      <Kb.Box2 direction="vertical">
+        <Kb.Text type="BodySmall" center={true}>
+          All conversations are
+        </Kb.Text>
+        <Kb.Text type="BodySmall" center={true}>
+          end-to-end encrypted.
+        </Kb.Text>
+      </Kb.Box2>
+    </Kb.Box2>
+    <Kb.Box2 direction="vertical" gapStart={true} gap="medium" style={nativeStyles.newChat}>
+      <Kb.Button
+        fullWidth={true}
+        onClick={props.onNewChat}
+        mode="Primary"
+        label="Start a new chat"
+        style={nativeStyles.button}
+      />
+    </Kb.Box2>
+  </>
+)
+
+const NativeNoRowsBuildTeam = () => {
+  const isLoading = C.useWaitingState(s => [...s.counts.keys()].some(k => k.startsWith('chat:')))
+  return isLoading ? null : <BuildTeam />
+}
+
+const NativeLoadingLine = () => {
+  const isLoading = C.Waiting.useAnyWaiting([C.waitingKeyChatInboxRefresh, C.waitingKeyChatInboxSyncStarted])
+  return isLoading ? (
+    <Kb.Box2 direction="vertical" style={nativeStyles.loadingContainer}>
+      <Kb.LoadingLine />
+    </Kb.Box2>
+  ) : null
+}
+
+// Shared types
+
 type InboxProps = {
   conversationIDKey?: T.Chat.ConversationIDKey
   refreshInbox?: T.Chat.ChatRootInboxRefresh
@@ -218,7 +288,8 @@ function InboxWithSearch(props: {
   return <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={search} />
 }
 
-function InboxBody(props: ControlledInboxProps) {
+// Desktop InboxBody
+function DesktopInboxBody(props: ControlledInboxProps) {
   const {conversationIDKey, refreshInbox, search} = props
   const inbox = useInboxState(conversationIDKey, search.isSearching, refreshInbox)
   const {smallTeamsExpanded, rows, unreadIndices, unreadTotal, inboxNumSmallRows} = inbox
@@ -230,7 +301,7 @@ function InboxBody(props: ControlledInboxProps) {
     [chosenChannelsTeamnames, selectedConversationIDKey]
   )
 
-  const scrollDiv = React.useRef<HTMLDivElement | null>(null)
+  const scrollDiv = React.useRef<InboxDivRef | null>(null)
   const listRef = React.useRef<LegendListRef | null>(null)
 
   const getSize = React.useCallback(
@@ -273,7 +344,7 @@ function InboxBody(props: ControlledInboxProps) {
       toggleSmallTeamsExpanded()
     }
 
-    const scrollableDiv = scrollDiv.current.firstElementChild as HTMLDivElement | null
+    const scrollableDiv = scrollDiv.current.firstElementChild as InboxDivRef | null
     if (!scrollableDiv) return
 
     const top = inboxNumSmallRows * smallRowHeight
@@ -288,7 +359,7 @@ function InboxBody(props: ControlledInboxProps) {
   const renderItem = (_index: number, item: RowItem): React.ReactElement | null => {
     if (item.type === 'divider') {
       return (
-        <DragLine
+        <DesktopDragLine
           rows={rows}
           scrollDiv={scrollDiv}
           inboxNumSmallRows={inboxNumSmallRows}
@@ -313,12 +384,12 @@ function InboxBody(props: ControlledInboxProps) {
 
   return (
     <Kb.ErrorBoundary>
-      <Kb.Box2 direction="vertical" className="inbox-hover-container" style={styles.container}>
-        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.body}>
+      <Kb.Box2 direction="vertical" className="inbox-hover-container" style={desktopStyles.container}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={desktopStyles.body}>
           {search.isSearching ? (
             <InboxSearch search={search} />
           ) : (
-            <div data-testid="inbox-list" style={styles.list} ref={scrollDiv}>
+            <div data-testid="inbox-list" style={desktopStyles.list} ref={scrollDiv as React.RefObject<HTMLDivElement>}>
               {rows.length ? (
                 <Kb.List
                   items={rows}
@@ -347,6 +418,160 @@ function InboxBody(props: ControlledInboxProps) {
   )
 }
 
+// Native InboxBody
+function NativeInboxBody(p: ControlledInboxProps) {
+  const {search} = p
+  const inbox = useInboxState(p.conversationIDKey, search.isSearching, p.refreshInbox)
+  const {onUntrustedInboxVisible, toggleSmallTeamsExpanded, selectedConversationIDKey} = inbox
+  const {unreadIndices, unreadTotal, rows, smallTeamsExpanded, isSearching, allowShowFloatingButton} = inbox
+  const {neverLoaded, onNewChat, inboxNumSmallRows, setInboxNumSmallRows} = inbox
+  const headComponent = C.isTablet ? null : <SearchRow search={search} showSearch={isMobile} />
+  const chosenChannelsTeamnames = useChosenChannelsTeamnames()
+  const listExtraData = React.useMemo(
+    () => ({
+      chosenChannelsTeamnames,
+      selectedConversationIDKey: C.isTablet ? selectedConversationIDKey : undefined,
+    }),
+    [chosenChannelsTeamnames, selectedConversationIDKey]
+  )
+
+  const listRef = React.useRef<LegendListRef | null>(null)
+
+  const getSize = React.useCallback((item: RowItem) => {
+    switch (item.type) {
+      case 'small': return RowSizes.smallRowHeight
+      case 'big': return RowSizes.bigRowHeight
+      case 'bigHeader': return RowSizes.bigHeaderHeight
+      case 'divider': return RowSizes.dividerHeight(item.showButton)
+      case 'teamBuilder': return 120
+    }
+  }, [])
+
+  const {showFloating, showUnread, unreadCount, scrollToUnread, applyUnreadAndFloating} =
+    useUnreadShortcut({listRef, rows, unreadIndices, unreadTotal, getSize})
+  const onScrollUnbox = useScrollUnbox(onUntrustedInboxVisible, 1000)
+
+  const itemHeight = {getSize, type: 'perItem' as const}
+
+  const renderItem = (_index: number, item: RowItem): React.ReactElement | null => {
+    const row = item
+    let element: React.ReactElement | null
+    if (row.type === 'divider') {
+      element = (
+        <ConnectedTeamsDivider
+          rows={rows}
+          showButton={row.showButton}
+          hiddenCount={row.hiddenCount}
+          toggle={toggleSmallTeamsExpanded}
+          smallTeamsExpanded={smallTeamsExpanded}
+        />
+      )
+    } else if (row.type === 'teamBuilder') {
+      element = <BuildTeam />
+    } else {
+      const isSelected = 'conversationIDKey' in row && selectedConversationIDKey === row.conversationIDKey
+      element = makeRow(row, isSelected, chosenChannelsTeamnames)
+    }
+
+    return <PerfProfiler id={`InboxRow-${row.type}`}>{element}</PerfProfiler>
+  }
+
+  const onViewChanged = (data: ViewableItemsData) => {
+    onScrollUnbox(data)
+    applyUnreadAndFloating()
+  }
+
+  const setOpenRow = useOpenedRowState(s => s.dispatch.setOpenRow)
+
+  C.Router2.useSafeFocusEffect(() => {
+    setOpenRow(Chat.noConversationIDKey)
+  })
+
+  const promptSmallTeamsNum = React.useCallback(() => {
+    if (isIOS) {
+      Alert.prompt(
+        'Change shown',
+        'Number of conversations to show above this button',
+        ns => {
+          const n = parseInt(ns, 10)
+          if (n > 0) {
+            setInboxNumSmallRows(n)
+          }
+        },
+        'plain-text',
+        String(inboxNumSmallRows)
+      )
+    }
+  }, [inboxNumSmallRows, setInboxNumSmallRows])
+
+  const scrollToBigTeams = React.useCallback(() => {
+    if (smallTeamsExpanded) {
+      toggleSmallTeamsExpanded()
+    }
+    void listRef.current?.scrollToIndex({animated: true, index: inboxNumSmallRows, viewPosition: 0.5})
+  }, [inboxNumSmallRows, smallTeamsExpanded, toggleSmallTeamsExpanded])
+
+  const renderFloatingDivider = React.useCallback(
+    (inlineLayout = false) => (
+      <BigTeamsDivider
+        inlineLayout={inlineLayout}
+        toggle={scrollToBigTeams}
+        onEdit={isIOS ? promptSmallTeamsNum : undefined}
+      />
+    ),
+    [promptSmallTeamsNum, scrollToBigTeams]
+  )
+  const showFloatingDivider = showFloating && !isSearching && allowShowFloatingButton
+
+  const noChats = !neverLoaded && !isSearching && !rows.length && <NativeNoChats onNewChat={onNewChat} />
+
+  return (
+    <Kb.ErrorBoundary>
+      <PerfProfiler id="Inbox">
+        <Kb.Box2 direction="vertical" fullWidth={true} style={nativeStyles.container}>
+          <NativeLoadingLine />
+          {isSearching ? (
+            <Kb.Box2 direction="vertical" fullWidth={true}>
+              <InboxSearch header={headComponent} search={search} />
+            </Kb.Box2>
+          ) : (
+            <Kb.List
+              testID="inboxList"
+              ListHeaderComponent={headComponent}
+              items={rows}
+              itemHeight={itemHeight}
+              estimatedItemHeight={64}
+              getItemType={getItemType}
+              recycleItems={true}
+              keyExtractor={keyExtractor}
+              keyboardShouldPersistTaps="handled"
+              onViewableItemsChanged={onViewChanged}
+              viewabilityConfig={viewabilityConfig}
+              ref={listRef}
+              renderItem={renderItem}
+              drawDistance={250}
+              extraData={listExtraData}
+            />
+          )}
+          {noChats}
+          {showFloatingDivider ? (
+            <Kb.BottomAccessory>{renderFloatingDivider(true)}</Kb.BottomAccessory>
+          ) : (
+            rows.length === 0 && !neverLoaded && <NativeNoRowsBuildTeam />
+          )}
+          {showUnread && !isSearching && !showFloating && (
+            <UnreadShortcut onClick={scrollToUnread} unreadCount={unreadCount} />
+          )}
+        </Kb.Box2>
+      </PerfProfiler>
+    </Kb.ErrorBoundary>
+  )
+}
+
+function InboxBody(props: ControlledInboxProps) {
+  return isMobile ? <NativeInboxBody {...props} /> : <DesktopInboxBody {...props} />
+}
+
 function Inbox(props: InboxProps) {
   return props.search ? (
     <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={props.search} />
@@ -355,7 +580,7 @@ function Inbox(props: InboxProps) {
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(
+const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       body: {
@@ -468,6 +693,42 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      button: {width: '100%'},
+      container: Kb.Styles.platformStyles({
+        common: {
+          flexGrow: 1,
+          position: 'relative',
+        },
+        isTablet: {
+          backgroundColor: Kb.Styles.globalColors.blueGrey,
+          maxWidth: Kb.Styles.globalStyles.mediumSubNavWidth,
+        },
+      }),
+      loadingContainer: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 1000,
+      },
+      newChat: {
+        ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
+        flexShrink: 0,
+        width: '100%',
+      },
+      noChatsContainer: {
+        alignItems: 'center',
+        paddingBottom: Kb.Styles.globalMargins.large,
+        paddingLeft: Kb.Styles.globalMargins.small,
+        paddingRight: Kb.Styles.globalMargins.small,
+        paddingTop: Kb.Styles.globalMargins.large,
+      },
+    }) as const
+)
+
 const InboxWithProfiler = (props: InboxProps) => (
   <PerfProfiler id="Inbox">
     <Inbox {...props} />
diff --git a/shared/common-adapters/avatar/icon-to-img-set.tsx b/shared/common-adapters/avatar/icon-to-img-set.tsx
index 7cbd32d6e3d4..2e4f6045b8d8 100644
--- a/shared/common-adapters/avatar/icon-to-img-set.tsx
+++ b/shared/common-adapters/avatar/icon-to-img-set.tsx
@@ -1,5 +1,6 @@
 import {iconMeta} from '../icon.constants-gen'
 import type {IconType} from '../icon.constants-gen'
+import type {getAssetPath as getAssetPathType} from '@/constants/platform'
 
 type MultMap = {
   [1]?: number
@@ -48,7 +49,7 @@ function getMultsMap(imgMap: {[size: string]: unknown}, targetSize: number): Mul
 }
 
 function iconTypeToImgSetDesktop(imgMap: {[key: string]: IconType}, targetSize: number) {
-  const {getAssetPath} = require('@/constants/platform.desktop') as {getAssetPath: (...a: Array<string>) => string}
+  const {getAssetPath} = require('@/constants/platform') as {getAssetPath: typeof getAssetPathType}
   const multsMap = getMultsMap(imgMap, targetSize)
   const keys = Object.keys(multsMap) as unknown as Array<keyof typeof multsMap>
   const sets = keys
diff --git a/shared/common-adapters/avatar/index.tsx b/shared/common-adapters/avatar/index.tsx
index be7086152082..f4e4eac615d1 100644
--- a/shared/common-adapters/avatar/index.tsx
+++ b/shared/common-adapters/avatar/index.tsx
@@ -6,6 +6,7 @@ import * as AvatarZus from './store'
 import {Pressable, View} from 'react-native'
 import {useColorScheme} from 'react-native'
 import {navToProfile} from '@/constants/router'
+import {Image} from 'expo-image'
 import {iconTypeToImgSet} from './icon-to-img-set'
 import type {IconType} from '../icon.constants-gen'
 import type * as React from 'react'
@@ -157,16 +158,6 @@ function Avatar(p: Props) {
     source = {uri: `http://${address}/av?typ=${typ}&name=${name}&format=square_${imgSize}&mode=${mode}&token=${token}&count=${counter}`}
   }
 
-  const {Image} = require('expo-image') as {
-    Image: React.ComponentType<{
-      source: {uri: string} | number
-      style?: Styles.StylesCrossPlatform
-      recyclingKey?: string
-      cachePolicy?: string
-      onError?: () => void
-    }>
-  }
-
   const placeholderSource = iconTypeToImgSet(isTeam ? teamPlaceHolders : avatarPlaceHolders, size) as unknown as number
   const imgError = !!source && errorUri === source.uri
   const containerStyle = style ? Styles.collapseStyles([cached.container, style]) : cached.container
diff --git a/shared/common-adapters/box.tsx b/shared/common-adapters/box.tsx
index 6991abae9097..d47f905feeeb 100644
--- a/shared/common-adapters/box.tsx
+++ b/shared/common-adapters/box.tsx
@@ -1,6 +1,7 @@
 import type * as React from 'react'
 import * as Styles from '@/styles'
 import {View} from 'react-native'
+import Reanimated from 'react-native-reanimated'
 import type {MeasureRef} from '@/common-adapters/measure-ref'
 import type {Box2Props} from '@/common-adapters/box.shared'
 export type {LayoutEvent} from '@/common-adapters/box.shared'
@@ -208,9 +209,6 @@ export const Box2Animated = (p: Box2Props & {ref?: React.Ref<MeasureRef>}) => {
   if (!isMobile) return <Box2 {...p} />
   const {ref, ...rest} = p
   const props = box2SharedProps(rest)
-  const {default: Reanimated} = require('react-native-reanimated') as {
-    default: {View: React.ComponentType<ReturnType<typeof box2SharedProps> & {ref?: React.Ref<View>}>}
-  }
   return <Reanimated.View {...props} ref={ref as React.Ref<View>} />
 }
 
diff --git a/shared/common-adapters/copyable-text.tsx b/shared/common-adapters/copyable-text.tsx
index f0ba92f16bba..d83d5495c0d2 100644
--- a/shared/common-adapters/copyable-text.tsx
+++ b/shared/common-adapters/copyable-text.tsx
@@ -4,6 +4,7 @@ import {useTimeout} from './use-timers'
 import Text from './text'
 import {Box2} from './box'
 import {TouchableHighlight} from 'react-native'
+import {setStringAsync} from 'expo-clipboard'
 import * as Styles from '@/styles'
 
 export type Props = {
@@ -30,9 +31,6 @@ const CopyableText = (props: Props) => {
   }
 
   const handleCopy = () => {
-    const {setStringAsync} = require('expo-clipboard') as {
-      setStringAsync: (text: string) => Promise<boolean>
-    }
     setStringAsync(props.value)
       .then(() => {})
       .catch(() => {})
diff --git a/shared/common-adapters/hot-key.tsx b/shared/common-adapters/hot-key.tsx
index 711888528cd9..0eb12d37105a 100644
--- a/shared/common-adapters/hot-key.tsx
+++ b/shared/common-adapters/hot-key.tsx
@@ -156,7 +156,7 @@ const handleKeyDown = (e: KeyEvent): void => {
 
 let globalHandlerAttached = false
 
-const doc = (globalThis as {document?: DocEventTarget}).document
+const doc = (globalThis as unknown as {document?: DocEventTarget}).document
 
 const ensureGlobalHandler = (): void => {
   if (!globalHandlerAttached) {
diff --git a/shared/common-adapters/image-icon.tsx b/shared/common-adapters/image-icon.tsx
index a3286e611b1d..c579bd9023c9 100644
--- a/shared/common-adapters/image-icon.tsx
+++ b/shared/common-adapters/image-icon.tsx
@@ -3,6 +3,7 @@ import {iconMeta} from './icon.constants-gen'
 import type {IconType} from './icon.constants-gen'
 import {typeExtension, getImagesDir} from './icon.shared'
 import type {Image as RNImageType} from 'react-native'
+import type {getAssetPath as getAssetPathType} from '@/constants/platform'
 
 export type ImageIconProps = {
   type: IconType
@@ -12,10 +13,8 @@ export type ImageIconProps = {
 }
 
 const ImageIconDesktop = (props: ImageIconProps) => {
+  const {getAssetPath} = require('@/constants/platform') as {getAssetPath: typeof getAssetPathType}
   const {type, style, className, allowLazy = true} = props
-  const {getAssetPath} = require('@/constants/platform.desktop') as {
-    getAssetPath: (...a: Array<string>) => string
-  }
   const hasDarkVariant = !!iconMeta[type].nameDark
   const ext = typeExtension(type)
   const imagesDir = getImagesDir(type)
diff --git a/shared/common-adapters/image.desktop.tsx b/shared/common-adapters/image.desktop.tsx
deleted file mode 100644
index 4af2eebb26f1..000000000000
--- a/shared/common-adapters/image.desktop.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import type {Props} from './image.shared'
-import LoadingStateView from './loading-state-view'
-
-const onDragStart = (e: React.BaseSyntheticEvent) => e.preventDefault()
-const Image = (p: Props) => {
-  const {showLoadingStateUntilLoaded, src, onLoad, onError} = p
-  const [loading, setLoading] = React.useState(true)
-  const _onLoad = (e: React.BaseSyntheticEvent) => {
-    setLoading(false)
-    onLoad?.(e)
-  }
-  const style = {
-    ...p.style,
-    ...(showLoadingStateUntilLoaded && loading ? styles.absolute : {}),
-    opacity: showLoadingStateUntilLoaded && loading ? 0 : 1,
-  } as const
-
-  return (
-    <>
-      <img
-        loading="lazy"
-        src={typeof src === 'string' ? src : undefined}
-        style={Styles.castStyleDesktop(style)}
-        onLoad={_onLoad}
-        onError={onError}
-        onDragStart={onDragStart}
-      />
-      {showLoadingStateUntilLoaded ? <LoadingStateView loading={loading} /> : null}
-    </>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  absolute: {position: 'absolute'},
-}))
-
-export default Image
diff --git a/shared/common-adapters/image.native.tsx b/shared/common-adapters/image.native.tsx
deleted file mode 100644
index fc0ec35223f4..000000000000
--- a/shared/common-adapters/image.native.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react'
-import LoadingStateView from './loading-state-view'
-import type {Props} from './image.shared'
-import {Image as ExpoImage, type ImageLoadEventData, type ImageErrorEventData} from 'expo-image'
-
-const Image = (p: Props) => {
-  const {showLoadingStateUntilLoaded, src, onLoad, onError, style, contentFit = 'contain', allowDownscaling} = p
-  const [loading, setLoading] = React.useState(!showLoadingStateUntilLoaded)
-  const [lastSrc, setLastSrc] = React.useState(src)
-  const _onLoad = (e?: ImageLoadEventData) => {
-    setLoading(false)
-    onLoad?.(e ?? ({} as any))
-  }
-
-  if (lastSrc !== src) {
-    setLastSrc(src)
-    setLoading(true)
-  }
-
-  const _onError = (e?: ImageErrorEventData) => {
-    setLoading(false)
-    console.log('Image load error', e?.error)
-    onError?.()
-  }
-
-  const recyclingKey = typeof src === 'string' ? src : Array.isArray(src) ? src[0]?.uri : String(src)
-
-  return (
-    <>
-      <ExpoImage
-        source={src}
-        style={style}
-        onLoad={_onLoad}
-        contentFit={contentFit}
-        onError={_onError}
-        allowDownscaling={allowDownscaling}
-        recyclingKey={recyclingKey}
-      />
-      {showLoadingStateUntilLoaded && loading ? <LoadingStateView loading={loading} /> : null}
-    </>
-  )
-}
-
-export default Image
diff --git a/shared/common-adapters/image.tsx b/shared/common-adapters/image.tsx
new file mode 100644
index 000000000000..645e60d65653
--- /dev/null
+++ b/shared/common-adapters/image.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import type {ImageLoadEventData, ImageErrorEventData} from 'expo-image'
+import {Image as ExpoImage} from 'expo-image'
+import type {Props} from './image.shared'
+import LoadingStateView from './loading-state-view'
+
+const onDragStart = (e: React.BaseSyntheticEvent) => e.preventDefault()
+
+const DesktopImage = (p: Props) => {
+  const {showLoadingStateUntilLoaded, src, onLoad, onError} = p
+  const [loading, setLoading] = React.useState(true)
+  const _onLoad = (e: React.BaseSyntheticEvent) => {
+    setLoading(false)
+    onLoad?.(e)
+  }
+  const style = {
+    ...p.style,
+    ...(showLoadingStateUntilLoaded && loading ? styles.absolute : {}),
+    opacity: showLoadingStateUntilLoaded && loading ? 0 : 1,
+  } as const
+
+  return (
+    <>
+      <img
+        loading="lazy"
+        src={typeof src === 'string' ? src : undefined}
+        style={Styles.castStyleDesktop(style)}
+        onLoad={_onLoad}
+        onError={onError}
+        onDragStart={onDragStart}
+      />
+      {showLoadingStateUntilLoaded ? <LoadingStateView loading={loading} /> : null}
+    </>
+  )
+}
+
+const NativeImage = (p: Props) => {
+  const {showLoadingStateUntilLoaded, src, onLoad, onError, style, contentFit = 'contain', allowDownscaling} = p
+  const [loading, setLoading] = React.useState(!showLoadingStateUntilLoaded)
+  const [lastSrc, setLastSrc] = React.useState(src)
+  const _onLoad = (e?: ImageLoadEventData) => {
+    setLoading(false)
+    onLoad?.(e ?? {})
+  }
+
+  if (lastSrc !== src) {
+    setLastSrc(src)
+    setLoading(true)
+  }
+
+  const _onError = (e?: ImageErrorEventData) => {
+    setLoading(false)
+    console.log('Image load error', e?.error)
+    onError?.()
+  }
+
+  const recyclingKey = typeof src === 'string' ? src : Array.isArray(src) ? src[0]?.uri : String(src)
+
+  return (
+    <>
+      <ExpoImage
+        source={src}
+        style={style}
+        onLoad={_onLoad}
+        contentFit={contentFit}
+        onError={_onError}
+        allowDownscaling={allowDownscaling}
+        recyclingKey={recyclingKey}
+      />
+      {showLoadingStateUntilLoaded && loading ? <LoadingStateView loading={loading} /> : null}
+    </>
+  )
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  absolute: {position: 'absolute'},
+}))
+
+export default isMobile ? NativeImage : DesktopImage
diff --git a/shared/common-adapters/index.desktop.tsx b/shared/common-adapters/index.desktop.tsx
deleted file mode 100644
index 837dfe644f6b..000000000000
--- a/shared/common-adapters/index.desktop.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import type {LayoutAnimation as NativeLayoutAnimation} from 'react-native'
-
-export type {MenuItem, MenuItems} from './floating-menu/menu-layout/index'
-export type {IconType} from './icon.constants-gen'
-export type {WebViewProps, WebViewInjections} from './web-view'
-export type {AnimationType} from './animation'
-
-export const LayoutAnimation = {} as unknown as typeof NativeLayoutAnimation
-export const ReAnimated = {}
-
-export {
-  BottomSheetModal,
-  BottomSheetBackdrop,
-  BottomSheetScrollView,
-  type BottomSheetBackdropProps,
-} from './popup/bottom-sheet.desktop'
-export {default as Animation} from './animation'
-export {default as Avatar} from './avatar/index'
-export {default as AvatarLine} from './avatar/avatar-line'
-export {BottomAccessory} from './bottom-accessory'
-export {default as BackButton} from './back-button'
-export {default as Badge} from './badge'
-export {Banner, BannerParagraph} from './banner'
-export {Box2, Box2Animated, type LayoutEvent} from './box'
-export type {MeasureRef} from './measure-ref'
-export {default as ButtonBar} from './button-bar'
-export {default as Button, IconButton} from './button'
-export {default as Icon, type IconProps, type SizeType} from './icon'
-export {default as IconAuto} from './icon-auto'
-export {default as BoxGrow, BoxGrow2} from './box-grow'
-export {default as Checkbox} from './checkbox'
-export {default as CheckCircle} from './check-circle'
-export {default as ChoiceList} from './choice-list'
-export {default as ClickableBox, ClickableBox2} from './clickable-box'
-export {default as ConfirmModal} from './confirm-modal'
-export {default as CopyText} from './copy-text'
-export {default as CopyableText} from './copyable-text'
-export {default as Divider} from './divider'
-export {default as Dropdown, DropdownButton, InlineDropdown} from './dropdown'
-export {default as DragAndDrop} from './drag-and-drop'
-export {default as NativeEmoji} from './emoji/native-emoji'
-export {default as Emoji} from './emoji'
-export {default as ErrorBoundary} from './error-boundary'
-export {default as FloatingMenu} from './floating-menu'
-export {default as FloatingPicker} from './floating-picker'
-export {usePopup2, type Popup2Parms} from './popup/use-popup'
-export {HeaderLeftButton} from './header-buttons'
-export {useHotKey} from './hot-key'
-export {default as Image} from './image.desktop'
-export {default as ImageIcon} from './image-icon'
-export {default as InfoNote} from './info-note'
-export {default as Input3, type Input3Ref, type Input3Props} from './input3'
-export {KeyboardAvoidingView2} from './keyboard-avoiding-view'
-export {default as List, type LegendListRef} from './list.desktop'
-export {
-  default as ListItem,
-  largeHeight as largeListItemHeight,
-  smallHeight as smallListItemHeight,
-} from './list-item'
-export {default as LoadingLine} from './loading-line'
-export {default as Markdown} from './markdown'
-export {default as Meta} from './meta'
-export {default as NameWithIcon} from './name-with-icon'
-export {default as ConnectedNameWithIcon} from './name-with-icon'
-export {default as Popup, type PopupProps} from './popup/index'
-export {default as PhoneInput} from './phone-input'
-export {default as Placeholder} from './placeholder'
-export {default as PlatformIcon} from './platform-icon'
-export {default as ProfileCard} from './profile-card'
-export {default as ProgressBar} from './progress-bar'
-export {default as ProgressIndicator} from './progress-indicator'
-export {default as ProofBrokenBanner} from './proof-broken-banner'
-export {default as RadioButton} from './radio-button'
-export {default as Reloadable} from './reload'
-export {default as RichButton} from './rich-button'
-export {default as RoundedBox} from './rounded-box'
-export {default as SafeAreaView, SafeAreaViewTop, useSafeAreaInsets} from './safe-area-view'
-export {default as SaveIndicator} from './save-indicator'
-export {default as SearchFilter, type SearchFilterRef} from './search-filter'
-export {default as SectionDivider} from './section-divider'
-export {default as ScrollView, type ScrollViewRef} from './scroll-view'
-export {default as SectionList, type SectionListRef, type SectionType} from './section-list'
-export {default as Switch} from './switch'
-export {default as Tabs} from './tabs'
-export {default as TeamWithPopup} from './team-with-popup'
-export {default as Text} from './text'
-export {useClickURL} from './text-url.desktop'
-export {default as Toast} from './toast'
-export {default as SimpleToast} from './simple-toast'
-export {default as TimelineMarker} from './timeline-marker'
-export {default as ConnectedUsernames} from './usernames'
-export {default as WaitingButton} from './waiting-button'
-export {default as WaveButton} from './wave-button'
-export {useTimeout, useInterval} from './use-timers'
-export {isValidIconType} from './icon.shared'
-export {default as Video} from './video'
-export {default as WebView} from './web-view'
-export {default as WithTooltip} from './with-tooltip'
-export {default as ZoomableImage} from './zoomable-image'
-export * as Styles from '@/styles'
diff --git a/shared/common-adapters/index.native.tsx b/shared/common-adapters/index.tsx
similarity index 90%
rename from shared/common-adapters/index.native.tsx
rename to shared/common-adapters/index.tsx
index f4696b81e416..21a06c919d8b 100644
--- a/shared/common-adapters/index.native.tsx
+++ b/shared/common-adapters/index.tsx
@@ -1,16 +1,21 @@
-export type {MenuItem, MenuItems} from './floating-menu/menu-layout/index.shared'
+import {LayoutAnimation as NativeLayoutAnimation} from 'react-native'
+
+export type {MenuItem, MenuItems} from './floating-menu/menu-layout/index'
 export type {IconType} from './icon.constants-gen'
-export type {WebViewProps, WebViewInjections} from './web-view.shared'
+export type {WebViewProps, WebViewInjections} from './web-view'
 export type {AnimationType} from './animation'
 
-export {LayoutAnimation} from 'react-native'
+export const LayoutAnimation: typeof NativeLayoutAnimation = isMobile
+  ? NativeLayoutAnimation
+  : ({} as typeof NativeLayoutAnimation)
+export const ReAnimated = {}
 
 export {
   BottomSheetModal,
   BottomSheetBackdrop,
   BottomSheetScrollView,
   type BottomSheetBackdropProps,
-} from './popup/bottom-sheet.native'
+} from './popup/bottom-sheet'
 export {default as Animation} from './animation'
 export {default as Avatar} from './avatar/index'
 export {default as AvatarLine} from './avatar/avatar-line'
@@ -44,14 +49,13 @@ export {default as FloatingPicker} from './floating-picker'
 export {usePopup2, type Popup2Parms} from './popup/use-popup'
 export {HeaderLeftButton} from './header-buttons'
 export {useHotKey} from './hot-key'
-export {default as Image} from './image.native'
+export {default as Image} from './image'
 export {default as ImageIcon} from './image-icon'
 export {default as InfoNote} from './info-note'
 export {default as Input3} from './input3'
 export type {Input3Ref, Input3Props} from './input3'
 export {KeyboardAvoidingView2} from './keyboard-avoiding-view'
-export {default as List} from './list.native'
-export type {LegendListRef} from './list.shared'
+export {default as List, type LegendListRef} from './list'
 export {
   default as ListItem,
   largeHeight as largeListItemHeight,
@@ -84,7 +88,7 @@ export {default as Switch} from './switch'
 export {default as Tabs} from './tabs'
 export {default as TeamWithPopup} from './team-with-popup'
 export {default as Text} from './text'
-export {useClickURL} from './text-url.native'
+export {useClickURL} from './text-url'
 export {default as Toast} from './toast'
 export {default as SimpleToast} from './simple-toast'
 export {default as TimelineMarker} from './timeline-marker'
diff --git a/shared/common-adapters/input3.tsx b/shared/common-adapters/input3.tsx
index 8fd94b8b61ec..fe5558beb6bf 100644
--- a/shared/common-adapters/input3.tsx
+++ b/shared/common-adapters/input3.tsx
@@ -4,14 +4,13 @@ import {Box2} from './box'
 import IconAuto from './icon-auto'
 import Text from './text'
 import {getTextStyle} from './text.styles'
-import {useColorScheme} from 'react-native'
+import {useColorScheme, TextInput as _TextInputReal} from 'react-native'
+const NativeTextInput = _TextInputReal as unknown as React.ComponentType<{autoCapitalize?: string; autoCorrect?: boolean; autoFocus?: boolean; blurOnSubmit?: boolean; editable?: boolean; keyboardType?: string; maxLength?: number; multiline?: boolean; onBlur?: () => void; onChangeText?: (text: string) => void; onFocus?: () => void; onSubmitEditing?: () => void; placeholder?: string; placeholderTextColor?: string; ref?: React.Ref<InputLikeRef>; returnKeyType?: string; secureTextEntry?: boolean; selectTextOnFocus?: boolean; style?: Styles.StylesCrossPlatform; textContentType?: string; underlineColorAndroid?: string; value?: string}>
 import type {Input3Props, Input3Ref} from './input3.shared'
 export type {Input3Props, Input3Ref} from './input3.shared'
 
 // Desktop only CSS import
-if (!isMobile) {
-  require('./input.css')
-}
+import './input.css'
 
 // Stub types to avoid DOM lib dependency in native tsconfig
 type InputLikeRef = {
@@ -208,34 +207,6 @@ const NativeInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
     focus: () => inputRef.current?.focus?.(),
   }))
 
-  const {isIOS} = require('@/constants/platform') as {isIOS: boolean}
-  const {TextInput: NativeTextInput} = require('react-native') as {
-    TextInput: React.ComponentType<{
-      autoCapitalize?: string
-      autoCorrect?: boolean
-      autoFocus?: boolean
-      blurOnSubmit?: boolean
-      editable?: boolean
-      keyboardType?: string
-      maxLength?: number
-      multiline?: boolean
-      onBlur?: () => void
-      onChangeText?: (text: string) => void
-      onFocus?: () => void
-      onSubmitEditing?: () => void
-      placeholder?: string
-      placeholderTextColor?: string
-      ref?: React.Ref<InputLikeRef>
-      returnKeyType?: string
-      secureTextEntry?: boolean
-      selectTextOnFocus?: boolean
-      style?: Styles.StylesCrossPlatform
-      textContentType?: string
-      underlineColorAndroid?: string
-      value?: string
-    }>
-  }
-
   let textStyle = getTextStyle(textType, isDarkMode)
   if (isIOS) {
     const {lineHeight: _, ...rest} = textStyle
diff --git a/shared/common-adapters/keyboard-avoiding-view.tsx b/shared/common-adapters/keyboard-avoiding-view.tsx
index 773fd9ef9d25..bfba52455ecc 100644
--- a/shared/common-adapters/keyboard-avoiding-view.tsx
+++ b/shared/common-adapters/keyboard-avoiding-view.tsx
@@ -1,26 +1,19 @@
 import type * as React from 'react'
 import type {Props} from './keyboard-avoiding-view.shared'
 import * as Styles from '@/styles'
+import {useHeaderHeight} from '@react-navigation/elements'
+import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 
 const DesktopKeyboardAvoidingView = (p: Props): React.ReactNode => p.children || null
 
 // Custom hook — only called when NativeKeyboardAvoidingView renders (mobile only)
 function useSafeHeaderHeight(): number {
-  const {useHeaderHeight} = require('@react-navigation/elements') as {useHeaderHeight: () => number}
   // useHeaderHeight throws when rendered outside a navigator; default to 0
   // eslint-disable-next-line react-hooks/rules-of-hooks
   try { return useHeaderHeight() } catch { return 0 }
 }
 
 const NativeKeyboardAvoidingView = (p: Props): React.ReactNode => {
-  type KAVType = React.ComponentType<{
-    behavior?: string
-    keyboardVerticalOffset?: number
-    pointerEvents?: string
-    style?: Styles.StylesCrossPlatform
-    children?: React.ReactNode
-  }>
-  const {KeyboardAvoidingView} = require('react-native-keyboard-controller') as {KeyboardAvoidingView: KAVType}
 
   const headerHeight = useSafeHeaderHeight()
   const {extraOffset, behavior, children} = p
diff --git a/shared/common-adapters/list.desktop.tsx b/shared/common-adapters/list.desktop.tsx
deleted file mode 100644
index af47429f1559..000000000000
--- a/shared/common-adapters/list.desktop.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type {CSSProperties} from 'react'
-import * as Styles from '@/styles'
-import {LegendList} from '@legendapp/list/react'
-import type {Props} from './list.shared'
-export type {LegendListRef, Props} from './list.shared'
-import {useListProps} from './list-common'
-
-function List<T>({ref, ...p}: Props<T>) {
-  const {empty, ...listProps} = useListProps(p as Props<T>)
-  const {style} = p
-  if (empty) return null
-
-  return (
-    <LegendList
-      ref={ref as any}
-      {...listProps}
-      style={
-        {
-          height: '100%',
-          outline: 'none',
-          overflowY: 'auto',
-          scrollbarGutter: 'stable',
-          width: '100%',
-          ...Styles.castStyleDesktop(style),
-        } as CSSProperties
-      }
-    />
-  )
-}
-
-export default List
diff --git a/shared/common-adapters/list.native.tsx b/shared/common-adapters/list.native.tsx
deleted file mode 100644
index 766b97e6af0f..000000000000
--- a/shared/common-adapters/list.native.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {View} from 'react-native'
-import * as Styles from '@/styles'
-import {LegendList} from '@legendapp/list/react-native'
-import type {Props} from './list.shared'
-import {useListProps} from './list-common'
-
-function List<T>({ref, ...p}: Props<T>) {
-  const {empty, ...listProps} = useListProps(p as Props<T>)
-  if (empty) return null
-
-  return (
-    <View style={styles.outerView}>
-      <LegendList
-        ref={ref as any}
-        {...listProps}
-        testID={p.testID}
-        contentInsetAdjustmentBehavior="automatic"
-        keyboardShouldPersistTaps={p.keyboardShouldPersistTaps ?? 'handled'}
-        overScrollMode="never"
-        bounces={p.bounces}
-        contentContainerStyle={p.style}
-      />
-    </View>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      outerView: {
-        flexGrow: 1,
-        position: 'relative',
-      },
-    }) as const
-)
-
-export default List
diff --git a/shared/common-adapters/list.tsx b/shared/common-adapters/list.tsx
new file mode 100644
index 000000000000..d3681b975c4f
--- /dev/null
+++ b/shared/common-adapters/list.tsx
@@ -0,0 +1,64 @@
+import type {CSSProperties} from 'react'
+import {View} from 'react-native'
+import * as Styles from '@/styles'
+import type {Props} from './list.shared'
+import {LegendList as LegendListWeb} from '@legendapp/list/react'
+import {LegendList as LegendListNative} from '@legendapp/list/react-native'
+import {useListProps} from './list-common'
+export type {LegendListRef, Props} from './list.shared'
+
+const DesktopList = function List<T>({ref, ...p}: Props<T>) {
+  const {empty, ...listProps} = useListProps(p as Props<T>)
+  const {style} = p
+  if (empty) return null
+
+  return (
+    <LegendListWeb
+      ref={ref as never}
+      {...listProps}
+      style={
+        {
+          height: '100%',
+          outline: 'none',
+          overflowY: 'auto',
+          scrollbarGutter: 'stable',
+          width: '100%',
+          ...Styles.castStyleDesktop(style),
+        } as CSSProperties
+      }
+    />
+  )
+}
+
+const NativeList = function List<T>({ref, ...p}: Props<T>) {
+  const {empty, ...listProps} = useListProps(p as Props<T>)
+  if (empty) return null
+
+  return (
+    <View style={styles.outerView}>
+      <LegendListNative
+        ref={ref as never}
+        {...listProps}
+        testID={p.testID}
+        contentInsetAdjustmentBehavior="automatic"
+        keyboardShouldPersistTaps={p.keyboardShouldPersistTaps ?? 'handled'}
+        overScrollMode="never"
+        bounces={p.bounces}
+        contentContainerStyle={p.style}
+      />
+    </View>
+  )
+}
+
+
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      outerView: {
+        flexGrow: 1,
+        position: 'relative',
+      },
+    }) as const
+)
+
+export default isMobile ? NativeList : DesktopList
diff --git a/shared/common-adapters/popup/bottom-sheet.desktop.tsx b/shared/common-adapters/popup/bottom-sheet.desktop.tsx
deleted file mode 100644
index ef1c3621d662..000000000000
--- a/shared/common-adapters/popup/bottom-sheet.desktop.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-
-// Desktop stubs for mobile-only bottom sheet components
-export const BottomSheetView = (_p: {children?: React.ReactNode}) => null
-export class BottomSheetModal extends React.Component<Record<string, unknown>> {
-  present() {}
-  forceClose() {}
-  override render() {
-    return null
-  }
-}
-export const BottomSheetBackdrop = (_p: Record<string, unknown>) => null
-export const BottomSheetScrollView = (_p: {style?: object; children?: React.ReactNode}) => null
-export const BottomSheetHandle = () => null
-export type BottomSheetBackdropProps = Record<string, never>
diff --git a/shared/common-adapters/popup/bottom-sheet.native.tsx b/shared/common-adapters/popup/bottom-sheet.native.tsx
deleted file mode 100644
index e1fe35f06ee6..000000000000
--- a/shared/common-adapters/popup/bottom-sheet.native.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export {
-  BottomSheetView,
-  BottomSheetModal,
-  BottomSheetBackdrop,
-  BottomSheetScrollView,
-  BottomSheetHandle,
-  type BottomSheetBackdropProps,
-} from '@gorhom/bottom-sheet'
diff --git a/shared/common-adapters/popup/bottom-sheet.tsx b/shared/common-adapters/popup/bottom-sheet.tsx
new file mode 100644
index 000000000000..e7cb6d3c0985
--- /dev/null
+++ b/shared/common-adapters/popup/bottom-sheet.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react'
+import type {BottomSheetModalProps, BottomSheetBackdropProps, BottomSheetHandleProps} from '@gorhom/bottom-sheet'
+import * as _gorhomRaw from '@gorhom/bottom-sheet'
+
+type NativeMethods = {present: () => void; forceClose: () => void}
+type BackdropProps = BottomSheetBackdropProps & {disappearsOnIndex?: number; appearsOnIndex?: number; opacity?: number}
+type HandleProps = BottomSheetHandleProps & {style?: object; indicatorStyle?: object; children?: React.ReactNode}
+type ScrollViewProps = {style?: object; children?: React.ReactNode}
+type GorhomModule = {
+  BottomSheetModal: React.ForwardRefExoticComponent<BottomSheetModalProps & React.RefAttributes<NativeMethods>>
+  BottomSheetView: React.ComponentType<{children?: React.ReactNode}>
+  BottomSheetBackdrop: React.ComponentType<BackdropProps>
+  BottomSheetScrollView: React.ComponentType<ScrollViewProps>
+  BottomSheetHandle: React.ComponentType<HandleProps>
+}
+
+const _gorhom: GorhomModule | null = isMobile ? (_gorhomRaw as unknown as GorhomModule) : null
+
+export const BottomSheetView = (_p: {children?: React.ReactNode}) => {
+  if (!isMobile) return null
+  const {BottomSheetView: NativeView} = _gorhom!
+  return <NativeView>{_p.children}</NativeView>
+}
+
+export class BottomSheetModal extends React.Component<BottomSheetModalProps> {
+  private _native: NativeMethods | null = null
+
+  present() {
+    this._native?.present()
+  }
+
+  forceClose() {
+    this._native?.forceClose()
+  }
+
+  override render() {
+    if (!isMobile) return null
+    const {BottomSheetModal: NativeModal} = _gorhom!
+    return (
+      <NativeModal
+        {...this.props}
+        ref={(r: NativeMethods | null) => {
+          this._native = r
+        }}
+      />
+    )
+  }
+}
+
+export const BottomSheetBackdrop = (_p: BackdropProps) => {
+  if (!isMobile) return null
+  const {BottomSheetBackdrop: NativeBackdrop} = _gorhom!
+  return <NativeBackdrop {..._p} />
+}
+
+export const BottomSheetScrollView = (_p: ScrollViewProps) => {
+  if (!isMobile) return null
+  const {BottomSheetScrollView: NativeScrollView} = _gorhom!
+  return <NativeScrollView {..._p} />
+}
+
+export const BottomSheetHandle = (_p: HandleProps) => {
+  if (!isMobile) return null
+  const {BottomSheetHandle: NativeHandle} = _gorhom!
+  return <NativeHandle {..._p} />
+}
+
+export type {BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
diff --git a/shared/common-adapters/popup/floating-box/index.desktop.tsx b/shared/common-adapters/popup/floating-box/index.desktop.tsx
deleted file mode 100644
index 1a1192c59570..000000000000
--- a/shared/common-adapters/popup/floating-box/index.desktop.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type {Props} from './index.shared'
-import {RelativeFloatingBox} from './relative-floating-box.desktop'
-import noop from 'lodash/noop'
-
-const FloatingBox = (props: Props) => {
-  const {attachTo, disableEscapeKey, position, positionFallbacks, children, offset} = props
-  const {onHidden, remeasureHint, propagateOutsideClicks, containerStyle, matchDimension} = props
-
-  return (
-    <RelativeFloatingBox
-      attachTo={attachTo}
-      disableEscapeKey={disableEscapeKey}
-      position={position || 'bottom center'}
-      positionFallbacks={positionFallbacks}
-      matchDimension={!!matchDimension}
-      onClosePopup={onHidden || noop}
-      remeasureHint={remeasureHint}
-      propagateOutsideClicks={propagateOutsideClicks}
-      style={containerStyle}
-      offset={offset}
-    >
-      {children}
-    </RelativeFloatingBox>
-  )
-}
-
-export default FloatingBox
diff --git a/shared/common-adapters/popup/floating-box/index.native.tsx b/shared/common-adapters/popup/floating-box/index.native.tsx
deleted file mode 100644
index 61154266a2c1..000000000000
--- a/shared/common-adapters/popup/floating-box/index.native.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react'
-import {Box2} from '@/common-adapters/box'
-import * as Styles from '@/styles'
-import {Keyboard} from 'react-native'
-import {Portal} from '../../portal.native'
-import type {Props} from './index.shared'
-
-const Kb = {
-  Box2,
-  Portal,
-}
-
-const FloatingBox = (p: Props) => {
-  const {hideKeyboard, children, containerStyle} = p
-  const [lastHK, setLastHK] = React.useState(hideKeyboard)
-  if (lastHK !== hideKeyboard) {
-    setLastHK(hideKeyboard)
-    if (hideKeyboard) {
-      Keyboard.dismiss()
-    }
-  }
-
-  return (
-    <Kb.Portal hostName="popup-root">
-      <Kb.Box2
-        direction="vertical"
-        pointerEvents="box-none"
-        style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, containerStyle])}
-      >
-        {children}
-      </Kb.Box2>
-    </Kb.Portal>
-  )
-}
-
-export default FloatingBox
diff --git a/shared/common-adapters/popup/floating-box/index.tsx b/shared/common-adapters/popup/floating-box/index.tsx
new file mode 100644
index 000000000000..c6f6b80a2000
--- /dev/null
+++ b/shared/common-adapters/popup/floating-box/index.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Box2} from '@/common-adapters/box'
+import {Keyboard} from 'react-native'
+import noop from 'lodash/noop'
+import type {Props} from './index.shared'
+import type {MeasureRef} from '../../measure-ref'
+import {Portal} from '../../portal.native'
+
+type RFBProps = {
+  attachTo?: React.RefObject<MeasureRef | null>
+  position: Styles.Position
+  positionFallbacks?: ReadonlyArray<Styles.Position>
+  matchDimension?: boolean
+  onClosePopup: () => void
+  propagateOutsideClicks?: boolean
+  remeasureHint?: number
+  style?: Styles.StylesCrossPlatform
+  children: React.ReactNode
+  disableEscapeKey?: boolean
+  offset?: number
+}
+
+const DesktopFloatingBox = (props: Props) => {
+  const {attachTo, disableEscapeKey, position, positionFallbacks, children, offset} = props
+  const {onHidden, remeasureHint, propagateOutsideClicks, containerStyle, matchDimension} = props
+  const {RelativeFloatingBox} = require('./relative-floating-box.desktop') as {
+    RelativeFloatingBox: React.ComponentType<RFBProps>
+  }
+
+  return (
+    <RelativeFloatingBox
+      attachTo={attachTo}
+      disableEscapeKey={disableEscapeKey}
+      position={position || 'bottom center'}
+      positionFallbacks={positionFallbacks}
+      matchDimension={!!matchDimension}
+      onClosePopup={onHidden || noop}
+      remeasureHint={remeasureHint}
+      propagateOutsideClicks={propagateOutsideClicks}
+      style={containerStyle}
+      offset={offset}
+    >
+      {children}
+    </RelativeFloatingBox>
+  )
+}
+
+const NativeFloatingBox = (p: Props) => {
+  const {hideKeyboard, children, containerStyle} = p
+  const [lastHK, setLastHK] = React.useState(hideKeyboard)
+  if (lastHK !== hideKeyboard) {
+    setLastHK(hideKeyboard)
+    if (hideKeyboard) {
+      Keyboard.dismiss()
+    }
+  }
+
+  return (
+    <Portal hostName="popup-root">
+      <Box2
+        direction="vertical"
+        pointerEvents="box-none"
+        style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, containerStyle])}
+      >
+        {children}
+      </Box2>
+    </Portal>
+  )
+}
+
+export default isMobile ? NativeFloatingBox : DesktopFloatingBox
diff --git a/shared/common-adapters/profile-card.tsx b/shared/common-adapters/profile-card.tsx
index 08cf30070d5d..4aa350bd3810 100644
--- a/shared/common-adapters/profile-card.tsx
+++ b/shared/common-adapters/profile-card.tsx
@@ -175,15 +175,15 @@ const ProfileCard = ({
   const _changeFollow = (follow: boolean) =>
     followUser([{follow, guiID: userDetails.guiID}, C.waitingKeyTracker], () => loadProfile(false), () => {})
 
+  const {default: FollowButton} = require('../profile/user/actions/follow-button') as {
+    default: typeof FollowButtonType
+  }
+
   const openProfile = () => {
     navToProfile(username)
     onHide?.()
   }
 
-  const {default: FollowButton} = require('../profile/user/actions/follow-button') as {
-    default: typeof FollowButtonType
-  }
-
   return (
     <Kb.Box2
       direction="vertical"
diff --git a/shared/common-adapters/text-url.desktop.tsx b/shared/common-adapters/text-url.desktop.tsx
deleted file mode 100644
index c48a64905b2d..000000000000
--- a/shared/common-adapters/text-url.desktop.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {openURL} from '@/util/misc'
-import KB2 from '@/util/electron.desktop'
-const {showContextMenu} = KB2.functions
-
-export function useClickURL(url: string | undefined) {
-  if (!url) return {} as const
-  return {
-    onClick: (e: React.BaseSyntheticEvent) => {
-      e.stopPropagation()
-      void openURL(url)
-    },
-    onContextMenu: (e: React.BaseSyntheticEvent) => {
-      e.stopPropagation()
-      showContextMenu?.(url)
-    },
-  } as const
-}
diff --git a/shared/common-adapters/text-url.native.tsx b/shared/common-adapters/text-url.native.tsx
deleted file mode 100644
index a453b5cc46ca..000000000000
--- a/shared/common-adapters/text-url.native.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {openURL} from '@/util/misc'
-import * as Clipboard from 'expo-clipboard'
-import {Alert} from 'react-native'
-
-export function useClickURL(url: string | undefined) {
-  if (!url) return {} as const
-  return {
-    onClick: () => {
-      openURL(url)
-    },
-    onLongPress: () => {
-      Alert.alert('', url, [
-        {onPress: () => openURL(url), text: 'Open'},
-        {onPress: () => { void Clipboard.setStringAsync(url) }, text: 'Copy'},
-        {text: 'Cancel'},
-      ])
-    },
-  } as const
-}
diff --git a/shared/common-adapters/text-url.tsx b/shared/common-adapters/text-url.tsx
new file mode 100644
index 000000000000..002b86d62cf0
--- /dev/null
+++ b/shared/common-adapters/text-url.tsx
@@ -0,0 +1,33 @@
+import {openURL} from '@/util/misc'
+import {Alert} from 'react-native'
+import {setStringAsync} from 'expo-clipboard'
+import KB2 from '@/util/electron'
+
+export function useClickURL(url: string | undefined) {
+  if (!url) return {} as const
+  if (isMobile) {
+    return {
+      onClick: () => {
+        void openURL(url)
+      },
+      onLongPress: () => {
+        Alert.alert('', url, [
+          {onPress: () => { void openURL(url) }, text: 'Open'},
+          {onPress: () => { void setStringAsync(url) }, text: 'Copy'},
+          {text: 'Cancel'},
+        ])
+      },
+    } as const
+  }
+  const {showContextMenu} = KB2.functions
+  return {
+    onClick: (e: React.BaseSyntheticEvent) => {
+      e.stopPropagation()
+      void Promise.resolve(openURL(url))
+    },
+    onContextMenu: (e: React.BaseSyntheticEvent) => {
+      e.stopPropagation()
+      showContextMenu?.(url)
+    },
+  } as const
+}
diff --git a/shared/common-adapters/video.tsx b/shared/common-adapters/video.tsx
index ec188d8d1b9c..fa4bce5aba7f 100644
--- a/shared/common-adapters/video.tsx
+++ b/shared/common-adapters/video.tsx
@@ -3,6 +3,8 @@ import type {Props} from './video.shared'
 import * as Styles from '@/styles'
 import {Box2} from './box'
 import {StatusBar} from 'react-native'
+import {useVideoPlayer, VideoView} from 'expo-video'
+import {useEventListener} from 'expo'
 import {useCheckURL} from './video.shared'
 
 // Desktop: normalize file paths to file:// URLs
@@ -83,27 +85,6 @@ const NativeVideo = (props: Props) => {
   const url = Styles.urlEscapeFilePath(_url)
   const uri = allowFile ? Styles.normalizePath(url) : url
 
-  const {useVideoPlayer, VideoView} = require('expo-video') as {
-    useVideoPlayer: (
-      uri: string,
-      init?: (p: {muted: boolean; play: () => void}) => void
-    ) => {muted: boolean; play: () => void}
-    VideoView: React.ComponentType<{
-      player: {muted: boolean; play: () => void}
-      nativeControls?: boolean
-      contentFit?: string
-      onFullscreenExit?: () => void
-      style?: Styles.StylesCrossPlatform
-    }>
-  }
-  const {useEventListener} = require('expo') as {
-    useEventListener: (
-      emitter: {muted: boolean; play: () => void},
-      event: string,
-      handler: (e: {status?: string; error?: unknown}) => void
-    ) => void
-  }
-
   const player = useVideoPlayer(uri, p => {
     p.muted = muted ?? false
     if (autoPlay ?? true) {
diff --git a/shared/common-adapters/zoomable-image.tsx b/shared/common-adapters/zoomable-image.tsx
index 38d16bf9c75d..e07534b4cea2 100644
--- a/shared/common-adapters/zoomable-image.tsx
+++ b/shared/common-adapters/zoomable-image.tsx
@@ -3,6 +3,10 @@ import * as Styles from '@/styles'
 import * as React from 'react'
 import Toast from './toast'
 import Text from './text'
+import {View} from 'react-native'
+import {useSharedValue, runOnJS} from 'react-native-reanimated'
+import {fitContainer, ResumableZoom, useImageResolution} from 'react-native-zoom-toolkit'
+import ImageNative from './image'
 
 // Desktop: normalize file paths to file:// URLs
 const normalizeSrc = (src: string) => {
@@ -191,44 +195,6 @@ type NativeSwipeDirection = 'left' | 'right' | 'up' | 'down'
 const NativeZoomableImage = (p: Props) => {
   const {src, style, onChanged: onZoom, onSwipe: _onSwipe, onTap} = p
 
-  const {View} = require('react-native') as {
-    View: React.ComponentType<{
-      style?: Styles.StylesCrossPlatform
-      onLayout?: (e: NativeLayoutEvent) => void
-      children?: React.ReactNode
-    }>
-  }
-  const {useSharedValue, runOnJS} = require('react-native-reanimated') as {
-    useSharedValue: (v: number) => {set: (v: number) => void; get: () => number}
-    runOnJS: <T extends object>(fn: T) => T
-  }
-  const {fitContainer, ResumableZoom, useImageResolution} = require('react-native-zoom-toolkit') as {
-    fitContainer: (
-      ratio: number,
-      container: {width: number; height: number}
-    ) => {width: number; height: number}
-    ResumableZoom: React.ComponentType<{
-      maxScale?: number
-      extendGestures?: boolean
-      onTap?: () => void
-      onUpdate?: (s: NativeCommonZoomState) => void
-      onSwipe?: (dir: NativeSwipeDirection) => void
-      panMode?: string
-      children?: React.ReactNode
-    }>
-    useImageResolution: (opts: {uri: string}) => {
-      isFetching: boolean
-      resolution?: {width: number; height: number}
-    }
-  }
-  const ImageNative = require('./image').default as React.ComponentType<{
-    contentFit?: string
-    src: string
-    style?: Styles.StylesCrossPlatform
-    showLoadingStateUntilLoaded?: boolean
-    allowDownscaling?: boolean
-  }>
-
   const {isFetching, resolution} = useImageResolution({uri: src})
   const srcDims = p.srcDims?.width && p.srcDims.height ? p.srcDims : undefined
   const imageResolution = resolution ?? srcDims
diff --git a/shared/constants/init/desktop-dom-helpers.desktop.tsx b/shared/constants/init/desktop-dom-helpers.desktop.tsx
new file mode 100644
index 000000000000..1acb78003d00
--- /dev/null
+++ b/shared/constants/init/desktop-dom-helpers.desktop.tsx
@@ -0,0 +1,36 @@
+// Desktop-only DOM helper functions for init subscriptions.
+// Isolated here so that native builds never encounter DOM types.
+import {useShellState} from '@/stores/shell'
+
+export const maybePauseVideos = () => {
+  const {appFocused} = useShellState.getState()
+  const videos = document.querySelectorAll('video')
+  const allVideos = Array.from(videos)
+
+  allVideos.forEach(v => {
+    if (appFocused) {
+      if (v.hasAttribute('data-focus-paused')) {
+        if (v.paused) {
+          v.play().then(() => {}).catch(() => {})
+        }
+      }
+    } else {
+      if (!v.paused && v.hasAttribute('loop') && v.hasAttribute('autoplay')) {
+        v.setAttribute('data-focus-paused', 'true')
+        v.pause()
+      }
+    }
+  })
+}
+
+export const setupWindowEventListeners = (
+  onFocus: () => void,
+  onBlur: () => void,
+  onOnline: () => void,
+  onOffline: () => void
+) => {
+  window.addEventListener('focus', onFocus)
+  window.addEventListener('blur', onBlur)
+  window.addEventListener('online', onOnline)
+  window.addEventListener('offline', onOffline)
+}
diff --git a/shared/constants/init/index.desktop.tsx b/shared/constants/init/index.desktop.tsx
deleted file mode 100644
index 45433c0d6229..000000000000
--- a/shared/constants/init/index.desktop.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-// links all the stores together, stores never import this
-import * as Chat from '@/constants/chat'
-import {ignorePromise} from '@/constants/utils'
-import {useConfigState} from '@/stores/config'
-import {useDaemonState} from '@/stores/daemon'
-import {openAtLoginKey, useShellState} from '@/stores/shell'
-import type * as EngineGen from '@/constants/rpc'
-import * as T from '@/constants/types'
-import InputMonitor from '@/util/platform-specific/input-monitor.desktop'
-import KB2 from '@/util/electron.desktop'
-import logger from '@/logger'
-import type {RPCError} from '@/util/errors'
-import {getEngine} from '@/engine'
-import {isLinux, isWindows} from '@/constants/platform.desktop'
-import {kbfsNotification} from '@/util/platform-specific/kbfs-notifications'
-import {skipAppFocusActions} from '@/local-debug'
-import {NotifyPopup} from '@/util/misc'
-import {noKBFSFailReason} from '@/constants/config'
-import {afterKbfsDaemonRpcStatusChanged} from '@/fs/common/lifecycle'
-import {initSharedSubscriptions, _onEngineIncoming, onEngineConnected as onSharedEngineConnected} from './shared'
-import {dumpLogs} from '@/util/storeless-actions'
-
-const {activeChanged, requestWindowsStartService} = KB2.functions
-const {quitApp, exitApp, setOpenAtLogin} = KB2.functions
-
-const maybePauseVideos = () => {
-  const {appFocused} = useShellState.getState()
-  const videos = document.querySelectorAll('video')
-  const allVideos = Array.from(videos)
-
-  allVideos.forEach(v => {
-    if (appFocused) {
-      if (v.hasAttribute('data-focus-paused')) {
-        if (v.paused) {
-          v.play()
-            .then(() => {})
-            .catch(() => {})
-        }
-      }
-    } else {
-      // only pause looping videos
-      if (!v.paused && v.hasAttribute('loop') && v.hasAttribute('autoplay')) {
-        v.setAttribute('data-focus-paused', 'true')
-        v.pause()
-      }
-    }
-  })
-}
-
-export const onEngineIncoming = (action: EngineGen.Actions) => {
-  _onEngineIncoming(action)
-  switch (action.type) {
-    case 'keybase.1.logsend.prepareLogsend': {
-      const f = async () => {
-        const response = action.payload.response
-        try {
-          await dumpLogs()
-        } finally {
-          response.result()
-        }
-      }
-      ignorePromise(f())
-      break
-    }
-    case 'keybase.1.NotifyApp.exit':
-      console.log('App exit requested')
-      exitApp?.(0)
-      break
-    case 'keybase.1.NotifyFS.FSActivity':
-      kbfsNotification(action.payload.params.notification, NotifyPopup)
-      break
-    case 'keybase.1.NotifyPGP.pgpKeyInSecretStoreFile': {
-      const f = async () => {
-        try {
-          await T.RPCGen.pgpPgpStorageDismissRpcPromise()
-        } catch (err) {
-          console.warn('Error in sending pgpPgpStorageDismissRpc:', err)
-        }
-      }
-      ignorePromise(f())
-      break
-    }
-    case 'keybase.1.NotifyService.shutdown': {
-      const {code} = action.payload.params
-      if (isWindows && code !== (T.RPCGen.ExitCode.restart as number)) {
-        console.log('Quitting due to service shutdown with code: ', code)
-        // Quit just the app, not the service
-        quitApp?.()
-      }
-      break
-    }
-
-    case 'keybase.1.logUi.log': {
-      const {params} = action.payload
-      const {level, text} = params
-      logger.info('keybase.1.logUi.log:', params.text.data)
-      if (level >= T.RPCGen.LogLevel.error) {
-        NotifyPopup(text.data)
-      }
-      break
-    }
-
-    case 'keybase.1.NotifySession.clientOutOfDate': {
-      const {upgradeTo, upgradeURI, upgradeMsg} = action.payload.params
-      const body = upgradeMsg || `Please update to ${upgradeTo} by going to ${upgradeURI}`
-      NotifyPopup('Client out of date!', {body}, 60 * 60)
-      // This is from the API server. Consider notifications from server always critical.
-      useConfigState
-        .getState()
-        .dispatch.setOutOfDate({critical: true, message: upgradeMsg, outOfDate: true, updating: false})
-      break
-    }
-    case 'keybase.1.NotifySession.loggedOut': {
-      if (useConfigState.getState().userSwitching) {
-        logger.info('Resetting renderer engine for account switch logout')
-        getEngine().reset()
-      }
-      break
-    }
-    case 'keybase.1.NotifySession.loggedIn': {
-      if (useConfigState.getState().userSwitching) {
-        logger.info('Refreshing renderer session registration for account switch login')
-        getEngine().reset()
-        onSharedEngineConnected()
-      }
-      break
-    }
-    default:
-  }
-}
-
-const _platformUnsubs: Array<() => void> = __DEV__
-  ? (globalThis.__hmr_platformUnsubs ??= [])
-  : []
-
-let _oneTimeInitDone: boolean = __DEV__
-  ? (globalThis.__hmr_oneTimeInitDone ?? false)
-  : false
-
-export const initPlatformListener = () => {
-  // HMR cleanup: unsubscribe old store subscriptions before re-subscribing
-  for (const unsub of _platformUnsubs) unsub()
-  _platformUnsubs.length = 0
-
-  _platformUnsubs.push(useConfigState.subscribe((s, old) => {
-    if (s.loggedIn !== old.loggedIn) {
-      useShellState.getState().dispatch.osNetworkStatusChanged(navigator.onLine, 'notavailable', true)
-    }
-  }))
-
-  _platformUnsubs.push(useShellState.subscribe((s, old) => {
-    if (s.appFocused !== old.appFocused) {
-      maybePauseVideos()
-    }
-
-    if (s.openAtLogin !== old.openAtLogin) {
-      const {openAtLogin} = s
-      const f = async () => {
-        if (__DEV__) {
-          console.log('onSetOpenAtLogin disabled for dev mode')
-          return
-        } else {
-          await T.RPCGen.configGuiSetValueRpcPromise({
-            path: openAtLoginKey,
-            value: {b: openAtLogin, isNull: false},
-          })
-        }
-        if (isLinux || isWindows) {
-          const enabled =
-            (await T.RPCGen.ctlGetOnLoginStartupRpcPromise()) === T.RPCGen.OnLoginStartupStatus.enabled
-          if (enabled !== openAtLogin) {
-            try {
-              await T.RPCGen.ctlSetOnLoginStartupRpcPromise({enabled: openAtLogin})
-            } catch (error_) {
-              const error = error_ as RPCError
-              logger.warn(`Error in sending ctlSetOnLoginStartup: ${error.message}`)
-            }
-          }
-        } else {
-          logger.info(`Login item settings changed! now ${openAtLogin ? 'on' : 'off'}`)
-          await setOpenAtLogin?.(openAtLogin)
-        }
-      }
-      ignorePromise(f())
-    }
-  }))
-
-  // One-time setup: window event listeners and input monitor (skip on HMR to avoid duplicates)
-  if (!_oneTimeInitDone) {
-    _oneTimeInitDone = true
-    if (__DEV__) globalThis.__hmr_oneTimeInitDone = true
-
-    const handleWindowFocusEvents = () => {
-      const handle = (appFocused: boolean) => {
-        if (skipAppFocusActions) {
-          console.log('Skipping app focus actions!')
-        } else {
-          useShellState.getState().dispatch.changedFocus(appFocused)
-        }
-      }
-      window.addEventListener('focus', () => handle(true))
-      window.addEventListener('blur', () => handle(false))
-    }
-    handleWindowFocusEvents()
-
-    const setupReachabilityWatcher = () => {
-      window.addEventListener('online', () =>
-        useShellState.getState().dispatch.osNetworkStatusChanged(true, 'notavailable')
-      )
-      window.addEventListener('offline', () =>
-        useShellState.getState().dispatch.osNetworkStatusChanged(false, 'notavailable')
-      )
-    }
-    setupReachabilityWatcher()
-
-    if (isLinux) {
-      useShellState.getState().dispatch.initUseNativeFrame()
-    }
-
-    const initializeInputMonitor = () => {
-      const inputMonitor = new InputMonitor()
-      inputMonitor.notifyActive = (userActive: boolean) => {
-        if (skipAppFocusActions) {
-          console.log('Skipping app focus actions!')
-        } else {
-          useShellState.getState().dispatch.setActive(userActive)
-          // let node thread save file
-          activeChanged?.(Date.now(), userActive)
-        }
-      }
-    }
-    initializeInputMonitor()
-  }
-
-  _platformUnsubs.push(useDaemonState.subscribe((s, old) => {
-    if (s.handshakeVersion !== old.handshakeVersion) {
-      if (!isWindows) return
-
-      const f = async () => {
-        const waitKey = 'pipeCheckFail'
-        const version = s.handshakeVersion
-        const {wait} = s.dispatch
-        wait(waitKey, version, true)
-        try {
-          logger.info('Checking RPC ownership')
-          if (KB2.functions.winCheckRPCOwnership) {
-            await KB2.functions.winCheckRPCOwnership()
-          }
-          wait(waitKey, version, false)
-        } catch (error_) {
-          // error will be logged in bootstrap check
-          getEngine().reset()
-          const error = error_ as RPCError
-          wait(waitKey, version, false, error.message || 'windows pipe owner fail', true)
-        }
-      }
-      ignorePromise(f())
-    }
-
-    if (s.handshakeState !== old.handshakeState && s.handshakeState === 'done') {
-      useConfigState.getState().dispatch.setStartupDetails({
-        conversation: Chat.noConversationIDKey,
-        followUser: '',
-        link: '',
-        tab: undefined,
-      })
-    }
-  }))
-
-  useDaemonState.setState(s => {
-    s.dispatch.onRestartHandshakeNative = () => {
-      const {handshakeFailedReason} = useDaemonState.getState()
-      if (isWindows && handshakeFailedReason === noKBFSFailReason) {
-        requestWindowsStartService?.()
-      }
-    }
-  })
-  if (!isLinux) {
-    afterKbfsDaemonRpcStatusChanged()
-  }
-
-  initSharedSubscriptions()
-}
-
-export {onEngineConnected, onEngineDisconnected} from './shared'
diff --git a/shared/constants/init/index.native.tsx b/shared/constants/init/index.native.tsx
deleted file mode 100644
index 376cf749767e..000000000000
--- a/shared/constants/init/index.native.tsx
+++ /dev/null
@@ -1,403 +0,0 @@
-// links all the stores together, stores never import this
-import {ignorePromise, neverThrowPromiseFunc} from '../utils'
-import {useConfigState} from '@/stores/config'
-import {useDaemonState} from '@/stores/daemon'
-import {useDarkModeState} from '@/stores/darkmode'
-import {useRouterState} from '@/stores/router'
-import {useShellState} from '@/stores/shell'
-import {useSettingsContactsState} from '@/stores/settings-contacts'
-import * as T from '@/constants/types'
-import type * as EngineGen from '@/constants/rpc'
-import * as ExpoLocation from 'expo-location'
-import * as ExpoTaskManager from 'expo-task-manager'
-import type * as Tabs from '@/constants/tabs'
-import * as NetInfo from '@react-native-community/netinfo'
-import {NotifyPopup} from '@/util/misc'
-import logger from '@/logger'
-import {Linking} from 'react-native'
-import {afterKbfsDaemonRpcStatusChanged} from '@/fs/common/lifecycle'
-import {logState, setThreadInputCommandStatus} from '@/constants/router'
-import {setupAudioMode} from '@/util/audio.native'
-import {
-  fsCacheDir,
-  fsDownloadDir,
-  androidAppColorSchemeChanged,
-  guiConfig,
-  shareListenersRegistered,
-} from 'react-native-kb'
-import {initPushListener, getStartupDetailsFromInitialPush} from './push-listener.native'
-import {initSharedSubscriptions, _onEngineIncoming} from './shared'
-import {noConversationIDKey} from '../types/chat/common'
-import {requestLocationPermission} from '@/util/platform-specific/index.native'
-import * as ScreenCapture from 'expo-screen-capture'
-import {getSecureFlagSetting} from '@/constants/platform.native'
-import {persistRoute} from '@/util/storeless-actions'
-
-const loadStartupDetails = async () => {
-  logger.info('[Startup] loadStartupDetails: starting')
-  const [routeState, initialUrl, push] = await Promise.all([
-    neverThrowPromiseFunc(async () => {
-      try {
-        const config = JSON.parse(guiConfig) as {ui?: {routeState2?: string}} | undefined
-        return Promise.resolve(config?.ui?.routeState2 ?? '')
-      } catch {
-        return Promise.resolve('')
-      }
-    }),
-    neverThrowPromiseFunc(async () => {
-      const linkingStart = Date.now()
-      logger.info('[Startup] loadStartupDetails: calling Linking.getInitialURL')
-      const url = await Linking.getInitialURL()
-      const elapsed = Date.now() - linkingStart
-      if (url === null) {
-        logger.warn(`[Startup] loadStartupDetails: Linking.getInitialURL returned null in ${elapsed}ms`)
-      } else {
-        logger.info(`[Startup] loadStartupDetails: Linking.getInitialURL returned in ${elapsed}ms: ${url}`)
-      }
-      return url
-    }),
-    neverThrowPromiseFunc(getStartupDetailsFromInitialPush),
-  ] as const)
-
-  let conversation: T.Chat.ConversationIDKey | undefined
-  let followUser = ''
-  let link = ''
-  let tab = ''
-
-  // Top priority, push
-  if (push) {
-    logger.info('initialState: push', push.startupConversation, push.startupFollowUser)
-    conversation = push.startupConversation
-    followUser = push.startupFollowUser ?? ''
-  } else if (initialUrl) {
-    // Second priority, deep link
-    link = initialUrl
-  } else if (routeState) {
-    // Last priority, saved from last session
-    try {
-      const item = JSON.parse(routeState) as
-        | undefined
-        | {param?: {selectedConversationIDKey?: unknown}; routeName?: string}
-      if (item) {
-        const _convo = item.param?.selectedConversationIDKey || undefined
-        if (typeof _convo === 'string') {
-          conversation = _convo
-          logger.info('initialState: routeState', conversation)
-        }
-        const _rn = item.routeName || undefined
-        if (typeof _rn === 'string') {
-          tab = _rn as unknown as typeof tab
-        }
-      }
-    } catch {
-      logger.info('initialState: routeState parseFail')
-      conversation = undefined
-      tab = ''
-    }
-  }
-
-  // never allow this case
-  if (tab === 'blank') {
-    tab = ''
-  }
-
-  useConfigState.getState().dispatch.setStartupDetails({
-    conversation: conversation ?? noConversationIDKey,
-    followUser,
-    link,
-    tab: tab as Tabs.Tab,
-  })
-
-  // Clear last value to be extra safe bad things don't hose us forever (don't block startup)
-  ignorePromise(
-    T.RPCGen.configGuiSetValueRpcPromise({
-      path: 'ui.routeState2',
-      value: {isNull: false, s: ''},
-    }).catch(() => {})
-  )
-}
-
-const locationTaskName = 'background-location-task'
-let locationRefs = 0
-let madeBackgroundTask = false
-
-const ensureBackgroundTask = () => {
-  if (madeBackgroundTask) return
-  madeBackgroundTask = true
-
-  ExpoTaskManager.defineTask(locationTaskName, async ({data, error}) => {
-    if (error) {
-      // check `error.message` for more details.
-      return Promise.resolve()
-    }
-
-    if (!data) {
-      return Promise.resolve()
-    }
-    const d = data as {locations?: Array<ExpoLocation.LocationObject>}
-    const locations = d.locations
-    if (!locations?.length) {
-      return Promise.resolve()
-    }
-    const pos = locations.at(-1)
-    const coord = {
-      accuracy: Math.floor(pos?.coords.accuracy ?? 0),
-      lat: pos?.coords.latitude ?? 0,
-      lon: pos?.coords.longitude ?? 0,
-    }
-
-    try {
-      await T.RPCChat.localLocationUpdateRpcPromise({coord})
-    } catch (error) {
-      logger.info('background location update failed: ' + String(error))
-    }
-    return Promise.resolve()
-  })
-}
-
-const setPermissionDeniedCommandStatus = (conversationIDKey: T.Chat.ConversationIDKey, text: string) => {
-  setThreadInputCommandStatus(conversationIDKey, {
-    actions: [T.RPCChat.UICommandStatusActionTyp.appsettings],
-    displayText: text,
-    displayType: T.RPCChat.UICommandStatusDisplayTyp.error,
-  })
-}
-
-const onChatWatchPosition = async (
-  action: EngineGen.EngineAction<'chat.1.chatUi.chatWatchPosition'>
-) => {
-  const response = action.payload.response
-  response.result(0)
-  try {
-    await requestLocationPermission(action.payload.params.perm)
-  } catch (_error) {
-    const error = _error as {message?: string}
-    const message = String(error.message)
-    logger.info('failed to get location perms: ' + message)
-    setPermissionDeniedCommandStatus(
-      T.Chat.conversationIDToKey(action.payload.params.convID),
-      `Failed to access location. ${message}`
-    )
-  }
-
-  locationRefs++
-
-  if (locationRefs === 1) {
-    try {
-      logger.info(
-        '[location] location watch start due to ',
-        T.Chat.conversationIDToKey(action.payload.params.convID)
-      )
-      ensureBackgroundTask()
-      await ExpoLocation.startLocationUpdatesAsync(locationTaskName, {
-        deferredUpdatesDistance: 65,
-        pausesUpdatesAutomatically: true,
-        showsBackgroundLocationIndicator: true,
-      })
-      logger.info('[location] start success')
-    } catch {
-      logger.info('[location] start failed')
-      locationRefs--
-    }
-  }
-}
-
-const onChatClearWatch = async () => {
-  locationRefs--
-  if (locationRefs <= 0) {
-    try {
-      logger.info('[location] end start')
-      ensureBackgroundTask()
-      await ExpoLocation.stopLocationUpdatesAsync(locationTaskName)
-      logger.info('[location] end success')
-    } catch {
-      logger.info('[location] end failed')
-    }
-  }
-}
-
-export const onEngineIncoming = (action: EngineGen.Actions) => {
-  _onEngineIncoming(action)
-  switch (action.type) {
-    case 'chat.1.chatUi.triggerContactSync':
-      useSettingsContactsState.getState().dispatch.manageContactsCache()
-      break
-    case 'keybase.1.logUi.log': {
-      const {params} = action.payload
-      const {level, text} = params
-      logger.info('keybase.1.logUi.log:', params.text.data)
-      if (level >= T.RPCGen.LogLevel.error) {
-        NotifyPopup(text.data)
-      }
-      break
-    }
-    case 'chat.1.chatUi.chatWatchPosition':
-      ignorePromise(onChatWatchPosition(action))
-      break
-    case 'chat.1.chatUi.chatClearWatch':
-      ignorePromise(onChatClearWatch())
-      break
-    default:
-  }
-}
-
-export const initPlatformListener = () => {
-  useShellState.subscribe((s, old) => {
-    if (s.mobileAppState === old.mobileAppState) return
-    let appFocused: boolean
-    let logState: T.RPCGen.MobileAppState
-    switch (s.mobileAppState) {
-      case 'active':
-        appFocused = true
-        logState = T.RPCGen.MobileAppState.foreground
-        break
-      case 'background':
-        appFocused = false
-        logState = T.RPCGen.MobileAppState.background
-        persistRoute(false, true, () => useConfigState.getState().startup.loaded)
-        break
-      case 'inactive':
-        appFocused = false
-        logState = T.RPCGen.MobileAppState.inactive
-        break
-      default:
-        appFocused = false
-        logState = T.RPCGen.MobileAppState.foreground
-    }
-
-    logger.info(`setting app state on service to: ${logState}`)
-    s.dispatch.changedFocus(appFocused)
-  })
-
-  const configureAndroidCacheDir = () => {
-    if (isAndroid && fsCacheDir && fsDownloadDir) {
-      ignorePromise(
-        T.RPCChat.localConfigureFileAttachmentDownloadLocalRpcPromise({
-          // Android's cache dir is (when I tried) [app]/cache but Go side uses
-          // [app]/.cache by default, which can't be used for sharing to other apps.
-          cacheDirOverride: fsCacheDir,
-          downloadDirOverride: fsDownloadDir,
-        })
-          .catch((e: unknown) => {
-            logger.error(`[Android cache override] Failed to configure: ${String(e)}`)
-          })
-      )
-    } else if (isAndroid) {
-      logger.warn(
-        `[Android cache override] Missing dirs - cacheDir: ${fsCacheDir}, downloadDir: ${fsDownloadDir}`
-      )
-    }
-  }
-
-  useDaemonState.subscribe((s, old) => {
-    const versionChanged = s.handshakeVersion !== old.handshakeVersion
-    const stateChanged = s.handshakeState !== old.handshakeState
-    const justBecameReady = stateChanged && s.handshakeState === 'done' && old.handshakeState !== 'done'
-
-    if (versionChanged || justBecameReady) {
-      configureAndroidCacheDir()
-    }
-  })
-
-  useConfigState.subscribe((s, old) => {
-    if (s.loggedIn === old.loggedIn) return
-    const f = async () => {
-      const {type} = await NetInfo.fetch()
-      useShellState.getState().dispatch.osNetworkStatusChanged(
-        type !== NetInfo.NetInfoStateType.none,
-        type,
-        true
-      )
-    }
-    ignorePromise(f())
-  })
-
-  useShellState.subscribe((s, old) => {
-    if (s.networkStatus === old.networkStatus) return
-    const type = s.networkStatus?.type
-    if (!type) return
-    const f = async () => {
-      try {
-        await T.RPCGen.appStateUpdateMobileNetStateRpcPromise({state: type})
-      } catch (err) {
-        console.warn('Error sending mobileNetStateUpdate', err)
-      }
-    }
-    ignorePromise(f())
-  })
-
-  useShellState.subscribe((s, old) => {
-    if (s.mobileAppState === old.mobileAppState) return
-    if (s.mobileAppState === 'active') {
-      // only reload on foreground
-      useSettingsContactsState.getState().dispatch.loadContactPermissions()
-    }
-  })
-
-  // Location
-  if (isAndroid) {
-    useDarkModeState.subscribe((s, old) => {
-      if (s.darkModePreference === old.darkModePreference) return
-      androidAppColorSchemeChanged(s.darkModePreference)
-    })
-  }
-
-  // we call this when we're logged in.
-  let calledShareListenersRegistered = false
-
-  useRouterState.subscribe((s, old) => {
-    const next = s.navState
-    const prev = old.navState
-    if (next === prev) return
-    persistRoute(false, false, () => useConfigState.getState().startup.loaded)
-
-    if (!calledShareListenersRegistered && logState().loggedIn) {
-      calledShareListenersRegistered = true
-      shareListenersRegistered()
-    }
-  })
-
-  // Default to screen capture prevention on Android (matches native default of secure).
-  // Once daemon is ready, sync with the user's saved preference.
-  if (isAndroid) {
-    ignorePromise(ScreenCapture.preventScreenCaptureAsync('screenprotector'))
-    useDaemonState.subscribe((s, old) => {
-      if (s.handshakeState !== 'done' || old.handshakeState === 'done') return
-      const f = async () => {
-        const secure = await getSecureFlagSetting()
-        if (!secure) {
-          await ScreenCapture.allowScreenCaptureAsync('screenprotector')
-        }
-      }
-      ignorePromise(f())
-    })
-  }
-
-  // Start this immediately instead of waiting so we can do more things in parallel
-  ignorePromise(loadStartupDetails())
-  initPushListener()
-
-  NetInfo.addEventListener(({type}) => {
-    useShellState.getState().dispatch.osNetworkStatusChanged(type !== NetInfo.NetInfoStateType.none, type)
-  })
-
-  const initAudioModes = () => {
-    ignorePromise(setupAudioMode(false))
-  }
-  initAudioModes()
-
-  if (isAndroid) {
-    const daemonState = useDaemonState.getState()
-    if (daemonState.handshakeState === 'done' || daemonState.handshakeVersion > 0) {
-      configureAndroidCacheDir()
-    }
-  }
-
-  if (isAndroid) {
-    afterKbfsDaemonRpcStatusChanged()
-  }
-
-  initSharedSubscriptions()
-}
-
-export {onEngineConnected, onEngineDisconnected} from './shared'
diff --git a/shared/constants/init/index.tsx b/shared/constants/init/index.tsx
new file mode 100644
index 000000000000..c28fb12cf7ef
--- /dev/null
+++ b/shared/constants/init/index.tsx
@@ -0,0 +1,708 @@
+// links all the stores together, stores never import this
+import * as Chat from '@/constants/chat'
+import {ignorePromise, neverThrowPromiseFunc} from '@/constants/utils'
+import {useConfigState} from '@/stores/config'
+import {useDaemonState} from '@/stores/daemon'
+import {useRouterState} from '@/stores/router'
+import {useShellState, type ConnectionType} from '@/stores/shell'
+import {useSettingsContactsState} from '@/stores/settings-contacts'
+import * as T from '@/constants/types'
+import type * as EngineGen from '@/constants/rpc'
+import type * as Tabs from '@/constants/tabs'
+import {NotifyPopup} from '@/util/misc'
+import logger from '@/logger'
+import {getEngine} from '@/engine'
+import {afterKbfsDaemonRpcStatusChanged} from '@/fs/common/lifecycle'
+import {logState, setThreadInputCommandStatus} from '@/constants/router'
+import {initSharedSubscriptions, _onEngineIncoming, onEngineConnected as onSharedEngineConnected} from './shared'
+import {noConversationIDKey} from '../types/chat/common'
+import {noKBFSFailReason} from '@/constants/config'
+import {dumpLogs, persistRoute} from '@/util/storeless-actions'
+
+// ─── Desktop-only imports (runtime-guarded) ──────────────────────────────────
+import type {KB2} from '@/util/electron'
+
+const _getDesktop = () => {
+  const KB2default = (require('@/util/electron') as {default: KB2}).default
+  const InputMonitor = (require('@/util/platform-specific/input-monitor.desktop') as {default: new () => {notifyActive: (userActive: boolean) => void}}).default
+  const {kbfsNotification} = require('@/util/platform-specific/kbfs-notifications') as {kbfsNotification: (notification: unknown, np: (title: string, opts?: {body?: string; sound?: boolean}, onClick?: () => void) => void) => void}
+  const {skipAppFocusActions} = require('@/local-debug') as {skipAppFocusActions: boolean}
+  const {isLinux, isWindows} = require('@/constants/platform') as {isLinux: boolean; isWindows: boolean}
+  return {InputMonitor, KB2: KB2default, isLinux, isWindows, kbfsNotification, skipAppFocusActions}
+}
+
+const _getOpenAtLoginKey = () =>
+  (require('@/stores/shell') as {openAtLoginKey: string}).openAtLoginKey
+
+// ─── Native-only imports (runtime-guarded) ────────────────────────────────────
+
+// Use require() instead of await import() to avoid triggering Metro's importAll,
+// which iterates all lazy getters (including PushNotificationIOS) before native modules are registered.
+const _getNative = () => {
+  const ExpoLocation = require('expo-location') as ExpoLocationModule
+  const ExpoTaskManager = require('expo-task-manager') as ExpoTaskManagerModule
+  const NetInfo = require('@react-native-community/netinfo') as NetInfoModule
+  const {Linking} = require('react-native') as {Linking: {getInitialURL: () => Promise<string | null>}}
+  const {setupAudioMode} = require('@/util/audio.native') as {setupAudioMode: (allowRecord: boolean) => Promise<void>}
+  const {requestLocationPermission} = require('@/util/platform-specific') as {requestLocationPermission: (perm?: unknown) => Promise<void>}
+  const {
+    fsCacheDir,
+    fsDownloadDir,
+    androidAppColorSchemeChanged,
+    guiConfig,
+    shareListenersRegistered,
+  } = require('react-native-kb') as {
+    fsCacheDir: string
+    fsDownloadDir: string
+    androidAppColorSchemeChanged: (mode: string) => void
+    guiConfig: string
+    shareListenersRegistered: () => void
+  }
+  return {ExpoLocation, ExpoTaskManager, Linking, NetInfo, androidAppColorSchemeChanged, fsCacheDir, fsDownloadDir, guiConfig, requestLocationPermission, setupAudioMode, shareListenersRegistered}
+}
+
+const _getNativeSync = () => {
+  const {
+    fsCacheDir,
+    fsDownloadDir,
+    androidAppColorSchemeChanged,
+    guiConfig,
+    shareListenersRegistered,
+  } = require('react-native-kb') as {
+    fsCacheDir: string
+    fsDownloadDir: string
+    androidAppColorSchemeChanged: (mode: string) => void
+    guiConfig: string
+    shareListenersRegistered: () => void
+  }
+  return {androidAppColorSchemeChanged, fsCacheDir, fsDownloadDir, guiConfig, shareListenersRegistered}
+}
+
+// ─── Location tracking (native only) ─────────────────────────────────────────
+
+type ExpoLocationObject = {coords: {accuracy: number | null; latitude: number; longitude: number}}
+type ExpoLocationModule = {
+  startLocationUpdatesAsync: (taskName: string, options: object) => Promise<void>
+  stopLocationUpdatesAsync: (taskName: string) => Promise<void>
+}
+type NetInfoModule = {
+  fetch: () => Promise<{type: ConnectionType}>
+  addEventListener: (cb: (state: {type: ConnectionType}) => void) => () => void
+  NetInfoStateType: {none: ConnectionType}
+}
+type ExpoTaskManagerModule = {
+  defineTask: (taskName: string, cb: (params: {data: unknown; error: unknown}) => Promise<void>) => void
+}
+
+const locationTaskName = 'background-location-task'
+let locationRefs = 0
+let madeBackgroundTask = false
+
+const ensureBackgroundTask = (ExpoTaskManager: ExpoTaskManagerModule) => {
+  if (madeBackgroundTask) return
+  madeBackgroundTask = true
+
+  ExpoTaskManager.defineTask(locationTaskName, async ({data, error}: {data: unknown; error: unknown}) => {
+    if (error) return Promise.resolve()
+    if (!data) return Promise.resolve()
+    const d = data as {locations?: Array<ExpoLocationObject>}
+    const locations = d.locations
+    if (!locations?.length) return Promise.resolve()
+    const pos = locations.at(-1)
+    const coord = {
+      accuracy: Math.floor(pos?.coords.accuracy ?? 0),
+      lat: pos?.coords.latitude ?? 0,
+      lon: pos?.coords.longitude ?? 0,
+    }
+    try {
+      await T.RPCChat.localLocationUpdateRpcPromise({coord})
+    } catch (error) {
+      logger.info('background location update failed: ' + String(error))
+    }
+    return Promise.resolve()
+  })
+}
+
+const setPermissionDeniedCommandStatus = (conversationIDKey: T.Chat.ConversationIDKey, text: string) => {
+  setThreadInputCommandStatus(conversationIDKey, {
+    actions: [T.RPCChat.UICommandStatusActionTyp.appsettings],
+    displayText: text,
+    displayType: T.RPCChat.UICommandStatusDisplayTyp.error,
+  })
+}
+
+const onChatWatchPosition = async (
+  action: EngineGen.EngineAction<'chat.1.chatUi.chatWatchPosition'>
+) => {
+  const {ExpoLocation, ExpoTaskManager, requestLocationPermission} = _getNative()
+  const response = action.payload.response
+  response.result(0)
+  try {
+    await requestLocationPermission(action.payload.params.perm)
+  } catch (_error) {
+    const error = _error as {message?: string}
+    const message = String(error.message)
+    logger.info('failed to get location perms: ' + message)
+    setPermissionDeniedCommandStatus(
+      T.Chat.conversationIDToKey(action.payload.params.convID),
+      `Failed to access location. ${message}`
+    )
+  }
+
+  locationRefs++
+
+  if (locationRefs === 1) {
+    try {
+      logger.info('[location] location watch start due to ', T.Chat.conversationIDToKey(action.payload.params.convID))
+      ensureBackgroundTask(ExpoTaskManager)
+      await ExpoLocation.startLocationUpdatesAsync(locationTaskName, {
+        deferredUpdatesDistance: 65,
+        pausesUpdatesAutomatically: true,
+        showsBackgroundLocationIndicator: true,
+      })
+      logger.info('[location] start success')
+    } catch {
+      logger.info('[location] start failed')
+      locationRefs--
+    }
+  }
+}
+
+const onChatClearWatch = async () => {
+  const {ExpoLocation, ExpoTaskManager} = _getNative()
+  locationRefs--
+  if (locationRefs <= 0) {
+    try {
+      logger.info('[location] end start')
+      ensureBackgroundTask(ExpoTaskManager)
+      await ExpoLocation.stopLocationUpdatesAsync(locationTaskName)
+      logger.info('[location] end success')
+    } catch {
+      logger.info('[location] end failed')
+    }
+  }
+}
+
+// ─── Startup details (native only) ───────────────────────────────────────────
+
+const loadStartupDetails = async () => {
+  logger.info('[Startup] loadStartupDetails: starting')
+  const {guiConfig, Linking} = _getNative()
+  const {getStartupDetailsFromInitialPush} = await import('./push-listener.native')
+
+  const [routeState, initialUrl, push] = await Promise.all([
+    neverThrowPromiseFunc(async () => {
+      try {
+        const config = JSON.parse(guiConfig) as {ui?: {routeState2?: string}} | undefined
+        return Promise.resolve(config?.ui?.routeState2 ?? '')
+      } catch {
+        return Promise.resolve('')
+      }
+    }),
+    neverThrowPromiseFunc(async () => {
+      const linkingStart = Date.now()
+      logger.info('[Startup] loadStartupDetails: calling Linking.getInitialURL')
+      const url = await Linking.getInitialURL()
+      const elapsed = Date.now() - linkingStart
+      if (url === null) {
+        logger.warn(`[Startup] loadStartupDetails: Linking.getInitialURL returned null in ${elapsed}ms`)
+      } else {
+        logger.info(`[Startup] loadStartupDetails: Linking.getInitialURL returned in ${elapsed}ms: ${url}`)
+      }
+      return url
+    }),
+    neverThrowPromiseFunc(getStartupDetailsFromInitialPush),
+  ] as const)
+
+  let conversation: T.Chat.ConversationIDKey | undefined
+  let followUser = ''
+  let link = ''
+  let tab = ''
+
+  // Top priority, push
+  if (push) {
+    logger.info('initialState: push', push.startupConversation, push.startupFollowUser)
+    conversation = push.startupConversation
+    followUser = push.startupFollowUser ?? ''
+  } else if (initialUrl) {
+    // Second priority, deep link
+    link = initialUrl
+  } else if (routeState) {
+    // Last priority, saved from last session
+    try {
+      const item = JSON.parse(routeState) as
+        | undefined
+        | {param?: {selectedConversationIDKey?: unknown}; routeName?: string}
+      if (item) {
+        const _convo = item.param?.selectedConversationIDKey || undefined
+        if (typeof _convo === 'string') {
+          conversation = _convo
+          logger.info('initialState: routeState', conversation)
+        }
+        const _rn = item.routeName || undefined
+        if (typeof _rn === 'string') {
+          tab = _rn as unknown as typeof tab
+        }
+      }
+    } catch {
+      logger.info('initialState: routeState parseFail')
+      conversation = undefined
+      tab = ''
+    }
+  }
+
+  // never allow this case
+  if (tab === 'blank') tab = ''
+
+  useConfigState.getState().dispatch.setStartupDetails({
+    conversation: conversation ?? noConversationIDKey,
+    followUser,
+    link,
+    tab: tab as Tabs.Tab,
+  })
+
+  // Clear last value to be extra safe bad things don't hose us forever (don't block startup)
+  ignorePromise(
+    T.RPCGen.configGuiSetValueRpcPromise({
+      path: 'ui.routeState2',
+      value: {isNull: false, s: ''},
+    }).catch(() => {})
+  )
+}
+
+// ─── onEngineIncoming ─────────────────────────────────────────────────────────
+
+export const onEngineIncoming = (action: EngineGen.Actions) => {
+  _onEngineIncoming(action)
+
+  if (isMobile) {
+    switch (action.type) {
+      case 'chat.1.chatUi.triggerContactSync':
+        useSettingsContactsState.getState().dispatch.manageContactsCache()
+        break
+      case 'keybase.1.logUi.log': {
+        const {params} = action.payload
+        const {level, text} = params
+        logger.info('keybase.1.logUi.log:', params.text.data)
+        if (level >= T.RPCGen.LogLevel.error) {
+          NotifyPopup(text.data)
+        }
+        break
+      }
+      case 'chat.1.chatUi.chatWatchPosition':
+        ignorePromise(onChatWatchPosition(action))
+        break
+      case 'chat.1.chatUi.chatClearWatch':
+        ignorePromise(onChatClearWatch())
+        break
+      default:
+    }
+  } else {
+    const {isWindows, kbfsNotification} = _getDesktop()
+    switch (action.type) {
+      case 'keybase.1.logsend.prepareLogsend': {
+        const f = async () => {
+          const response = action.payload.response
+          try {
+            await dumpLogs()
+          } finally {
+            response.result()
+          }
+        }
+        ignorePromise(f())
+        break
+      }
+      case 'keybase.1.NotifyApp.exit':
+        console.log('App exit requested')
+        _getDesktop().KB2.functions.exitApp?.(0)
+        break
+      case 'keybase.1.NotifyFS.FSActivity':
+        kbfsNotification(action.payload.params.notification, (title, opts, onClick) => { NotifyPopup(title, opts, -1, undefined, onClick) })
+        break
+      case 'keybase.1.NotifyPGP.pgpKeyInSecretStoreFile': {
+        const f = async () => {
+          try {
+            await T.RPCGen.pgpPgpStorageDismissRpcPromise()
+          } catch (err) {
+            console.warn('Error in sending pgpPgpStorageDismissRpc:', err)
+          }
+        }
+        ignorePromise(f())
+        break
+      }
+      case 'keybase.1.NotifyService.shutdown': {
+        const {code} = action.payload.params
+        if (isWindows && code !== (T.RPCGen.ExitCode.restart as number)) {
+          console.log('Quitting due to service shutdown with code: ', code)
+          // Quit just the app, not the service
+          _getDesktop().KB2.functions.quitApp?.()
+        }
+        break
+      }
+      case 'keybase.1.logUi.log': {
+        const {params} = action.payload
+        const {level, text} = params
+        logger.info('keybase.1.logUi.log:', params.text.data)
+        if (level >= T.RPCGen.LogLevel.error) {
+          NotifyPopup(text.data)
+        }
+        break
+      }
+      case 'keybase.1.NotifySession.clientOutOfDate': {
+        const {upgradeTo, upgradeURI, upgradeMsg} = action.payload.params
+        const body = upgradeMsg || `Please update to ${upgradeTo} by going to ${upgradeURI}`
+        NotifyPopup('Client out of date!', {body}, 60 * 60)
+        // This is from the API server. Consider notifications from server always critical.
+        useConfigState
+          .getState()
+          .dispatch.setOutOfDate({critical: true, message: upgradeMsg, outOfDate: true, updating: false})
+        break
+      }
+      case 'keybase.1.NotifySession.loggedOut': {
+        if (useConfigState.getState().userSwitching) {
+          logger.info('Resetting renderer engine for account switch logout')
+          getEngine().reset()
+        }
+        break
+      }
+      case 'keybase.1.NotifySession.loggedIn': {
+        if (useConfigState.getState().userSwitching) {
+          logger.info('Refreshing renderer session registration for account switch login')
+          getEngine().reset()
+          onSharedEngineConnected()
+        }
+        break
+      }
+      default:
+    }
+  }
+}
+
+// ─── initPlatformListener ─────────────────────────────────────────────────────
+
+const _platformUnsubs: Array<() => void> = __DEV__
+  ? (globalThis.__hmr_platformUnsubs ??= [])
+  : []
+
+let _oneTimeInitDone: boolean = __DEV__
+  ? (globalThis.__hmr_oneTimeInitDone ?? false)
+  : false
+
+export const initPlatformListener = () => {
+  if (isMobile) {
+    _initNativePlatformListener()
+  } else {
+    _initDesktopPlatformListener()
+  }
+}
+
+const _initNativePlatformListener = () => {
+  useShellState.subscribe((s, old) => {
+    if (s.mobileAppState === old.mobileAppState) return
+    let appFocused: boolean
+    let logStateVal: T.RPCGen.MobileAppState
+    switch (s.mobileAppState) {
+      case 'active':
+        appFocused = true
+        logStateVal = T.RPCGen.MobileAppState.foreground
+        break
+      case 'background':
+        appFocused = false
+        logStateVal = T.RPCGen.MobileAppState.background
+        persistRoute(false, true, () => useConfigState.getState().startup.loaded)
+        break
+      case 'inactive':
+        appFocused = false
+        logStateVal = T.RPCGen.MobileAppState.inactive
+        break
+      default:
+        appFocused = false
+        logStateVal = T.RPCGen.MobileAppState.foreground
+    }
+
+    logger.info(`setting app state on service to: ${logStateVal}`)
+    s.dispatch.changedFocus(appFocused)
+  })
+
+  const configureAndroidCacheDir = () => {
+    const {fsCacheDir, fsDownloadDir} = _getNativeSync()
+    if (isAndroid && fsCacheDir && fsDownloadDir) {
+      ignorePromise(
+        T.RPCChat.localConfigureFileAttachmentDownloadLocalRpcPromise({
+          // Android's cache dir is (when I tried) [app]/cache but Go side uses
+          // [app]/.cache by default, which can't be used for sharing to other apps.
+          cacheDirOverride: fsCacheDir,
+          downloadDirOverride: fsDownloadDir,
+        })
+          .catch((e: unknown) => {
+            logger.error(`[Android cache override] Failed to configure: ${String(e)}`)
+          })
+      )
+    } else if (isAndroid) {
+      logger.warn(
+        `[Android cache override] Missing dirs - cacheDir: ${fsCacheDir}, downloadDir: ${fsDownloadDir}`
+      )
+    }
+  }
+
+  useDaemonState.subscribe((s, old) => {
+    const versionChanged = s.handshakeVersion !== old.handshakeVersion
+    const stateChanged = s.handshakeState !== old.handshakeState
+    const justBecameReady = stateChanged && s.handshakeState === 'done' && old.handshakeState !== 'done'
+
+    if (versionChanged || justBecameReady) {
+      configureAndroidCacheDir()
+    }
+  })
+
+  useConfigState.subscribe((s, old) => {
+    if (s.loggedIn === old.loggedIn) return
+    const f = async () => {
+      const {NetInfo} = _getNative()
+      const {type} = await NetInfo.fetch()
+      useShellState.getState().dispatch.osNetworkStatusChanged(
+        type !== NetInfo.NetInfoStateType.none,
+        type,
+        true
+      )
+    }
+    ignorePromise(f())
+  })
+
+  useShellState.subscribe((s, old) => {
+    if (s.networkStatus === old.networkStatus) return
+    const type = s.networkStatus?.type
+    if (!type) return
+    const f = async () => {
+      try {
+        await T.RPCGen.appStateUpdateMobileNetStateRpcPromise({state: type})
+      } catch (err) {
+        console.warn('Error sending mobileNetStateUpdate', err)
+      }
+    }
+    ignorePromise(f())
+  })
+
+  useShellState.subscribe((s, old) => {
+    if (s.mobileAppState === old.mobileAppState) return
+    if (s.mobileAppState === 'active') {
+      // only reload on foreground
+      useSettingsContactsState.getState().dispatch.loadContactPermissions()
+    }
+  })
+
+  if (isAndroid) {
+    const {useDarkModeState} = require('@/stores/darkmode') as {useDarkModeState: {subscribe: (cb: (s: {darkModePreference: string}, old: {darkModePreference: string}) => void) => void}}
+    useDarkModeState.subscribe((s, old) => {
+      if (s.darkModePreference === old.darkModePreference) return
+      const {androidAppColorSchemeChanged} = _getNativeSync()
+      androidAppColorSchemeChanged(s.darkModePreference)
+    })
+  }
+
+  // we call this when we're logged in.
+  let calledShareListenersRegistered = false
+  useRouterState.subscribe((s, old) => {
+    const next = s.navState
+    const prev = old.navState
+    if (next === prev) return
+    persistRoute(false, false, () => useConfigState.getState().startup.loaded)
+
+    if (!calledShareListenersRegistered && logState().loggedIn) {
+      calledShareListenersRegistered = true
+      const {shareListenersRegistered} = _getNativeSync()
+      shareListenersRegistered()
+    }
+  })
+
+  // Default to screen capture prevention on Android (matches native default of secure).
+  // Once daemon is ready, sync with the user's saved preference.
+  if (isAndroid) {
+    const ScreenCapture = require('expo-screen-capture') as {preventScreenCaptureAsync: (tag: string) => Promise<void>}
+    ignorePromise(ScreenCapture.preventScreenCaptureAsync('screenprotector'))
+    useDaemonState.subscribe((s, old) => {
+      if (s.handshakeState !== 'done' || old.handshakeState === 'done') return
+      const f = async () => {
+        const {getSecureFlagSetting} = await import('@/constants/platform')
+        const secure = await getSecureFlagSetting()
+        if (!secure) {
+          const SC = await import('expo-screen-capture')
+          await SC.allowScreenCaptureAsync('screenprotector')
+        }
+      }
+      ignorePromise(f())
+    })
+  }
+
+  // Start this immediately instead of waiting so we can do more things in parallel
+  ignorePromise(loadStartupDetails())
+
+  const {initPushListener} = require('./push-listener.native') as {initPushListener: () => void}
+  initPushListener()
+
+  const {NetInfo} = _getNative()
+  NetInfo.addEventListener(({type}) => {
+    useShellState.getState().dispatch.osNetworkStatusChanged(type !== NetInfo.NetInfoStateType.none, type)
+  })
+
+  const {setupAudioMode} = _getNative()
+  ignorePromise(setupAudioMode(false))
+
+  if (isAndroid) {
+    const daemonState = useDaemonState.getState()
+    if (daemonState.handshakeState === 'done' || daemonState.handshakeVersion > 0) {
+      configureAndroidCacheDir()
+    }
+    afterKbfsDaemonRpcStatusChanged()
+  }
+
+  initSharedSubscriptions()
+}
+
+const _initDesktopPlatformListener = () => {
+  // HMR cleanup: unsubscribe old store subscriptions before re-subscribing
+  for (const unsub of _platformUnsubs) unsub()
+  _platformUnsubs.length = 0
+
+  const {isLinux, isWindows} = _getDesktop()
+
+  const {maybePauseVideos, setupWindowEventListeners} = require('./desktop-dom-helpers.desktop') as {
+    maybePauseVideos: () => void
+    setupWindowEventListeners: (onFocus: () => void, onBlur: () => void, onOnline: () => void, onOffline: () => void) => void
+  }
+
+  const openAtLoginKey = _getOpenAtLoginKey()
+  const {KB2, skipAppFocusActions, InputMonitor} = _getDesktop()
+  const {setOpenAtLogin} = KB2.functions
+
+  _platformUnsubs.push(useConfigState.subscribe((s, old) => {
+    if (s.loggedIn !== old.loggedIn) {
+      useShellState.getState().dispatch.osNetworkStatusChanged(navigator.onLine, 'notavailable', true)
+    }
+  }))
+
+  _platformUnsubs.push(useShellState.subscribe((s, old) => {
+    if (s.appFocused !== old.appFocused) {
+      maybePauseVideos()
+    }
+
+    if (s.openAtLogin !== old.openAtLogin) {
+      const {openAtLogin} = s
+      const f = async () => {
+        if (__DEV__) {
+          console.log('onSetOpenAtLogin disabled for dev mode')
+          return
+        } else {
+          await T.RPCGen.configGuiSetValueRpcPromise({
+            path: openAtLoginKey,
+            value: {b: openAtLogin, isNull: false},
+          })
+        }
+        if (isLinux || isWindows) {
+          const enabled =
+            (await T.RPCGen.ctlGetOnLoginStartupRpcPromise()) === T.RPCGen.OnLoginStartupStatus.enabled
+          if (enabled !== openAtLogin) {
+            try {
+              await T.RPCGen.ctlSetOnLoginStartupRpcPromise({enabled: openAtLogin})
+            } catch (error_) {
+              const error = error_ as {message?: string}
+              logger.warn(`Error in sending ctlSetOnLoginStartup: ${error.message}`)
+            }
+          }
+        } else {
+          logger.info(`Login item settings changed! now ${openAtLogin ? 'on' : 'off'}`)
+          await setOpenAtLogin?.(openAtLogin)
+        }
+      }
+      ignorePromise(f())
+    }
+  }))
+
+  if (!_oneTimeInitDone) {
+    _oneTimeInitDone = true
+    if (__DEV__) globalThis.__hmr_oneTimeInitDone = true
+
+    const handle = (appFocused: boolean) => {
+      if (skipAppFocusActions) {
+        console.log('Skipping app focus actions!')
+      } else {
+        useShellState.getState().dispatch.changedFocus(appFocused)
+      }
+    }
+    setupWindowEventListeners(
+      () => handle(true),
+      () => handle(false),
+      () => useShellState.getState().dispatch.osNetworkStatusChanged(true, 'notavailable'),
+      () => useShellState.getState().dispatch.osNetworkStatusChanged(false, 'notavailable')
+    )
+
+    if (isLinux) {
+      useShellState.getState().dispatch.initUseNativeFrame()
+    }
+
+    const initializeInputMonitor = () => {
+      const inputMonitor = new InputMonitor()
+      inputMonitor.notifyActive = (userActive: boolean) => {
+        if (skipAppFocusActions) {
+          console.log('Skipping app focus actions!')
+        } else {
+          useShellState.getState().dispatch.setActive(userActive)
+          KB2.functions.activeChanged?.(Date.now(), userActive)
+        }
+      }
+    }
+    initializeInputMonitor()
+  }
+
+  _platformUnsubs.push(useDaemonState.subscribe((s, old) => {
+    if (s.handshakeVersion !== old.handshakeVersion) {
+      if (!isWindows) return
+
+      const f = async () => {
+        const waitKey = 'pipeCheckFail'
+        const version = s.handshakeVersion
+        const {wait} = s.dispatch
+        wait(waitKey, version, true)
+        try {
+          logger.info('Checking RPC ownership')
+          if (KB2.functions.winCheckRPCOwnership) {
+            await KB2.functions.winCheckRPCOwnership()
+          }
+          wait(waitKey, version, false)
+        } catch (error_) {
+          // error will be logged in bootstrap check
+          getEngine().reset()
+          const error = error_ as {message?: string}
+          wait(waitKey, version, false, error.message || 'windows pipe owner fail', true)
+        }
+      }
+      ignorePromise(f())
+    }
+
+    if (s.handshakeState !== old.handshakeState && s.handshakeState === 'done') {
+      useConfigState.getState().dispatch.setStartupDetails({
+        conversation: Chat.noConversationIDKey,
+        followUser: '',
+        link: '',
+        tab: undefined,
+      })
+    }
+  }))
+
+  useDaemonState.setState(s => {
+    s.dispatch.onRestartHandshakeNative = () => {
+      const {handshakeFailedReason} = useDaemonState.getState()
+      if (isWindows && handshakeFailedReason === noKBFSFailReason) {
+        KB2.functions.requestWindowsStartService?.()
+      }
+    }
+  })
+
+  if (!isLinux) {
+    afterKbfsDaemonRpcStatusChanged()
+  }
+
+  initSharedSubscriptions()
+}
+
+export {onEngineConnected, onEngineDisconnected} from './shared'
diff --git a/shared/constants/platform.desktop.tsx b/shared/constants/platform.desktop.tsx
deleted file mode 100644
index 6bc50cc6585c..000000000000
--- a/shared/constants/platform.desktop.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import capitalize from 'lodash/capitalize'
-import KB2 from '@/util/electron.desktop'
-
-const {env, platform} = KB2.constants
-
-export const isNewArch: boolean = false
-export const androidIsTestDevice: boolean = false
-export const isPhone: boolean = false
-export const isLargeScreen: boolean = true
-export const isTablet: boolean = false
-export const isDebuggingInChrome: boolean = true
-
-export const dokanPath = KB2.constants.dokanPath
-export const windowsBinPath = KB2.constants.windowsBinPath
-export const pathSep = KB2.constants.pathSep
-
-export const isDarwin = platform === 'darwin'
-export const isWindows = platform === 'win32'
-export const isLinux = platform === 'linux'
-export const isMac = isDarwin && !isIOS
-
-export const getModKey = (e: {metaKey: boolean; ctrlKey: boolean}): boolean => {
-  return isMac ? e.metaKey : e.ctrlKey
-}
-
-export const isDeviceSecureAndroid: boolean = false
-export const isAndroidNewerThanN: boolean = false
-export const isAndroidNewerThanM: boolean = false
-export const shortcutSymbol = isDarwin ? '⌘' : 'Ctrl-'
-export const realDeviceName = ''
-
-export const defaultUseNativeFrame = isDarwin || isLinux
-
-// For storyshots, we only want to test macOS
-export const fileUIName = isDarwin ? 'Finder' : isWindows ? 'Explorer' : 'File Explorer'
-
-const runMode = env.KEYBASE_RUN_MODE
-const homeEnv = env.HOME
-
-const join = (...args: Array<string>) => {
-  return [...args].join(pathSep).replace(new RegExp(`${pathSep}+`, 'g'), pathSep)
-}
-const joinAddSep = (...args: Array<string>) => join(...args) + pathSep
-
-if (__DEV__) {
-  console.log(`Run mode: ${runMode}`)
-}
-
-const socketName = 'keybased.sock'
-
-const getLinuxPaths = () => {
-  const useXDG = (runMode !== 'devel' || env.KEYBASE_DEVEL_USE_XDG) && !env.KEYBASE_XDG_OVERRIDE
-
-  // If XDG_RUNTIME_DIR is defined use that, else use $HOME/.config.
-  const homeConfigDir = (useXDG && env.XDG_CONFIG_HOME) || join(homeEnv, '.config')
-  const runtimeDir = (useXDG && env.XDG_RUNTIME_DIR) || ''
-  const socketDir = (useXDG && runtimeDir) || homeConfigDir
-
-  const appName = `keybase${runMode === 'prod' ? '' : `.${runMode}`}`
-
-  if (!runtimeDir && !homeEnv) {
-    console.warn(
-      "You don't have $HOME or $XDG_RUNTIME_DIR defined, so we can't find the Keybase service path."
-    )
-  }
-
-  const logDir = (useXDG && env.XDG_CACHE_HOME) || join(homeEnv, '.cache', appName)
-
-  return {
-    cacheRoot: logDir,
-    dataRoot: (useXDG && env.XDG_DATA_HOME) || join(homeEnv, '.local/share', appName),
-    guiConfigFilename: join(homeConfigDir, appName, 'gui_config.json'),
-    jsonDebugFileName: `${logDir}keybase.app.debug`,
-    logDir,
-    serverConfigFileName: `${logDir}keybase.app.serverConfig`,
-    socketPath: join(socketDir, appName, socketName),
-  }
-}
-
-const getWindowsPaths = () => {
-  const appName = `Keybase${runMode === 'prod' ? '' : capitalize(runMode)}`
-  let appdata = env.LOCALAPPDATA || ''
-  // Remove leading drive letter e.g. C:
-  if (/^[a-zA-Z]:/.test(appdata)) {
-    appdata = appdata.slice(2)
-  }
-  const dir = `\\\\.\\pipe\\kbservice${appdata}\\${appName}`
-  const logDir = joinAddSep(env.LOCALAPPDATA, appName)
-  return {
-    cacheRoot: joinAddSep(env.APPDATA, appName),
-    dataRoot: joinAddSep(env.LOCALAPPDATA, appName),
-    guiConfigFilename: join(env.LOCALAPPDATA, appName, 'gui_config.json'),
-    jsonDebugFileName: `${logDir}keybase.app.debug`,
-    logDir,
-    serverConfigFileName: `${logDir}keybase.app.serverConfig`,
-    socketPath: join(dir, socketName),
-  }
-}
-
-const getDarwinPaths = () => {
-  const appName = `Keybase${runMode === 'prod' ? '' : capitalize(runMode)}`
-  const libraryDir = `${homeEnv}/Library/`
-  const logDir = `${libraryDir}Logs/`
-
-  return {
-    cacheRoot: `${libraryDir}Caches/${appName}/`,
-    dataRoot: `${libraryDir}Application Support/${appName}/`,
-    guiConfigFilename: `${libraryDir}Application Support/${appName}/gui_config.json`,
-    jsonDebugFileName: `${logDir}${appName}.app.debug`,
-    logDir,
-    serverConfigFileName: `${logDir}${appName}.app.serverConfig`,
-    socketPath: join(`${libraryDir}Caches`, appName, socketName),
-  }
-}
-
-const paths =
-  (isLinux ? getLinuxPaths() : undefined) ||
-  (isWindows ? getWindowsPaths() : undefined) ||
-  (isDarwin ? getDarwinPaths() : undefined)
-if (!paths) {
-  throw new Error('Unknown OS')
-}
-
-export const {dataRoot, cacheRoot, socketPath, jsonDebugFileName, serverConfigFileName, guiConfigFilename} =
-  paths
-
-export const downloadFolder = env.XDG_DOWNLOAD_DIR || KB2.constants.downloadFolder
-
-// Empty string means let the service figure out the right directory.
-export const pprofDir = ''
-export const fsCacheDir = ''
-export const version = __VERSION__
-export {runMode}
-
-const getTimeLocale = () => {
-  if (!isLinux) {
-    return Intl.DateTimeFormat().resolvedOptions().locale
-  }
-  const locale = env.LC_ALL || env.LC_TIME || env.LANG
-  if (locale) {
-    return locale.slice(0, 2)
-  }
-  return []
-}
-const uses24HourClockF = () => {
-  try {
-    return new Date('1999 Jan 1 20:00').toLocaleString(getTimeLocale()).includes(' 20:')
-  } catch {
-    // unknown locale
-    return false
-  }
-}
-export const uses24HourClock = uses24HourClockF()
-export const getAssetPath = (...a: Array<string>) => KB2.constants.assetRoot + a.join('/')
-export const getSecureFlagSetting = async (): Promise<boolean> => {
-  await Promise.resolve()
-  return false
-}
-export const setSecureFlagSetting = async (_secure: boolean): Promise<boolean> => {
-  await Promise.resolve()
-  return false
-}
diff --git a/shared/constants/platform.native.tsx b/shared/constants/platform.native.tsx
deleted file mode 100644
index d3f78d197bd7..000000000000
--- a/shared/constants/platform.native.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {Dimensions, Platform} from 'react-native'
-import Constants from 'expo-constants'
-import * as ScreenCapture from 'expo-screen-capture'
-import * as RPCGen from '@/constants/rpc/rpc-gen'
-import {
-  androidIsDeviceSecure,
-  fsCacheDir,
-} from 'react-native-kb'
-
-export {version, androidIsTestDevice, uses24HourClock, fsCacheDir} from 'react-native-kb'
-
-export const isNewArch = !!global.__turboModuleProxy
-
-const screenProtectorConfigKey = 'ui.screenprotector'
-
-export const getSecureFlagSetting = async (): Promise<boolean> => {
-  if (!isAndroid) return false
-  try {
-    const value = await RPCGen.configGuiGetValueRpcPromise({path: screenProtectorConfigKey})
-    // Default to secure (true) if not explicitly set
-    if (!value.isNull && value.b === false) return false
-    return true
-  } catch {
-    return true
-  }
-}
-
-export const setSecureFlagSetting = async (secure: boolean): Promise<boolean> => {
-  if (!isAndroid) return false
-  try {
-    if (secure) {
-      await ScreenCapture.preventScreenCaptureAsync('screenprotector')
-    } else {
-      await ScreenCapture.allowScreenCaptureAsync('screenprotector')
-    }
-    await RPCGen.configGuiSetValueRpcPromise({
-      path: screenProtectorConfigKey,
-      value: {b: secure, isNull: false},
-    })
-    return true
-  } catch {
-    return false
-  }
-}
-// Currently this is given to us as a boolean, but no real documentation on this, so just in case it changes in the future.
-// Android only field that tells us if there is a lock screen.
-export const isDeviceSecureAndroid = androidIsDeviceSecure
-export const runMode: string = 'prod'
-export const pathSep = '/'
-
-export const isTablet = Platform.OS === 'ios' && Platform.isPad
-export const isPhone = !isTablet
-
-export const isDarwin: boolean = false
-export const isLinux: boolean = false
-export const isWindows: boolean = false
-export const isMac: boolean = false
-
-export const getModKey = (_e: {metaKey: boolean; ctrlKey: boolean}): boolean => {
-  return false
-}
-export const isDebuggingInChrome = typeof location !== 'undefined'
-
-export const defaultUseNativeFrame = true
-export const fileUIName = 'File Explorer'
-export const mobileOsVersion = Platform.Version
-const mobileOsVersionNumber = typeof mobileOsVersion === 'string' ? parseInt(mobileOsVersion) : -1
-export const isAndroidNewerThanM = isAndroid && mobileOsVersionNumber > 22
-export const isAndroidNewerThanN = isAndroid && mobileOsVersionNumber >= 26
-export const shortcutSymbol = ''
-export const realDeviceName = Constants.deviceName ?? ''
-
-const windowHeight = Dimensions.get('window').height
-// isLargeScreen means you have at larger screen like iPhone 6,7 or Pixel
-// See https://material.io/devices/
-export const isLargeScreen = windowHeight >= 667
-
-const _dir = `${fsCacheDir}/Keybase`
-export const logFileDir = _dir
-export const pprofDir = _dir
-export const serverConfigFileName = `${_dir}/keybase.app.serverConfig`
-
-export const downloadFolder = ''
diff --git a/shared/constants/platform.tsx b/shared/constants/platform.tsx
new file mode 100644
index 000000000000..b82d6ae1bac6
--- /dev/null
+++ b/shared/constants/platform.tsx
@@ -0,0 +1,272 @@
+import capitalize from 'lodash/capitalize'
+import KB2 from '@/util/electron'
+
+// ─── Mobile runtime imports ────────────────────────────────────────────────
+// These are all guarded with isMobile so they won't execute on desktop.
+
+type RNKBModule = {
+  androidIsDeviceSecure: boolean
+  androidIsTestDevice: boolean
+  fsCacheDir: string
+  uses24HourClock: boolean
+  version: string
+  fsDownloadDir?: string
+}
+
+const _getRNKB = (): RNKBModule =>
+  require('react-native-kb') as RNKBModule
+
+// ─── Platform detection ────────────────────────────────────────────────────
+
+export const isDarwin: boolean = isMobile ? false : KB2.constants.platform === 'darwin'
+export const isWindows: boolean = isMobile ? false : KB2.constants.platform === 'win32'
+export const isLinux: boolean = isMobile ? false : KB2.constants.platform === 'linux'
+export const isMac: boolean = isDarwin && !isIOS
+
+export const getModKey = (e: {metaKey: boolean; ctrlKey: boolean}): boolean => {
+  if (isMobile) return false
+  return isMac ? e.metaKey : e.ctrlKey
+}
+
+export const defaultUseNativeFrame: boolean = isMobile ? true : isDarwin || isLinux
+// For storyshots, we only want to test macOS
+export const fileUIName: string = isMobile
+  ? 'File Explorer'
+  : isDarwin
+    ? 'Finder'
+    : isWindows
+      ? 'Explorer'
+      : 'File Explorer'
+export const shortcutSymbol: string = isMobile ? '' : isDarwin ? '⌘' : 'Ctrl-'
+export const realDeviceName: string = isMobile
+  ? (() => {
+      const Constants = require('expo-constants').default as {deviceName?: string | null}
+      return Constants.deviceName ?? ''
+    })()
+  : ''
+
+// ─── Mobile-only exports ──────────────────────────────────────────────────
+
+export const isTablet: boolean = isMobile
+  ? (() => {
+      const {Platform} = require('react-native') as {Platform: {OS: string; isPad?: boolean}}
+      return Platform.OS === 'ios' && !!Platform.isPad
+    })()
+  : false
+
+export const isPhone: boolean = isMobile ? !isTablet : false
+export const isDebuggingInChrome: boolean = isMobile ? typeof location !== 'undefined' : true
+
+export const mobileOsVersion: string | number = isMobile
+  ? (() => {
+      const {Platform} = require('react-native') as {Platform: {Version: string | number}}
+      return Platform.Version
+    })()
+  : ''
+
+const _mobileOsVersionNumber: number = isMobile
+  ? typeof mobileOsVersion === 'string'
+    ? parseInt(mobileOsVersion)
+    : (mobileOsVersion as number)
+  : 0
+
+export const isAndroidNewerThanM: boolean = isAndroid && _mobileOsVersionNumber > 22
+export const isAndroidNewerThanN: boolean = isAndroid && _mobileOsVersionNumber >= 26
+// Currently this is given to us as a boolean, but no real documentation on this, so just in case it changes in the future.
+// Android only field that tells us if there is a lock screen.
+export const isDeviceSecureAndroid: boolean = isMobile ? _getRNKB().androidIsDeviceSecure : false
+export const androidIsTestDevice: boolean = isMobile ? _getRNKB().androidIsTestDevice : false
+export const isNewArch: boolean = isMobile ? !!global.__turboModuleProxy : false
+
+// isLargeScreen means you have at larger screen like iPhone 6,7 or Pixel
+// See https://material.io/devices/
+export const isLargeScreen: boolean = isMobile
+  ? (() => {
+      const {Dimensions} = require('react-native') as {Dimensions: {get: (name: string) => {height: number; width: number}}}
+      return Dimensions.get('window').height >= 667
+    })()
+  : true
+
+// ─── Desktop-only path helpers ────────────────────────────────────────────
+
+export const dokanPath: string = isMobile ? '' : KB2.constants.dokanPath
+export const windowsBinPath: string = isMobile ? '' : KB2.constants.windowsBinPath
+export const pathSep: string = isMobile ? '/' : KB2.constants.pathSep
+
+const _join = (...args: Array<string>): string =>
+  [...args].join(pathSep).replace(new RegExp(`${pathSep}+`, 'g'), pathSep)
+const _joinAddSep = (...args: Array<string>): string => _join(...args) + pathSep
+
+const socketName = 'keybased.sock'
+
+const _getLinuxPaths = () => {
+  const env = KB2.constants.env
+  const homeEnv = env.HOME
+  const runMode = env.KEYBASE_RUN_MODE
+  const useXDG = (runMode !== 'devel' || env.KEYBASE_DEVEL_USE_XDG) && !env.KEYBASE_XDG_OVERRIDE
+  const homeConfigDir = (useXDG && env.XDG_CONFIG_HOME) || _join(homeEnv, '.config')
+  const runtimeDir = (useXDG && env.XDG_RUNTIME_DIR) || ''
+  const socketDir = (useXDG && runtimeDir) || homeConfigDir
+  const appName = `keybase${runMode === 'prod' ? '' : `.${runMode}`}`
+
+  if (!runtimeDir && !homeEnv) {
+    console.warn("You don't have $HOME or $XDG_RUNTIME_DIR defined, so we can't find the Keybase service path.")
+  }
+
+  const logDir = (useXDG && env.XDG_CACHE_HOME) || _join(homeEnv, '.cache', appName)
+  return {
+    cacheRoot: logDir,
+    dataRoot: (useXDG && env.XDG_DATA_HOME) || _join(homeEnv, '.local/share', appName),
+    guiConfigFilename: _join(homeConfigDir, appName, 'gui_config.json'),
+    jsonDebugFileName: `${logDir}keybase.app.debug`,
+    logDir,
+    serverConfigFileName: `${logDir}keybase.app.serverConfig`,
+    socketPath: _join(socketDir, appName, socketName),
+  }
+}
+
+const _getWindowsPaths = () => {
+  const env = KB2.constants.env
+  const runMode = env.KEYBASE_RUN_MODE
+  const appName = `Keybase${runMode === 'prod' ? '' : capitalize(runMode)}`
+  let appdata = env.LOCALAPPDATA || ''
+  if (/^[a-zA-Z]:/.test(appdata)) {
+    appdata = appdata.slice(2)
+  }
+  const dir = `\\\\.\\pipe\\kbservice${appdata}\\${appName}`
+  const logDir = _joinAddSep(env.LOCALAPPDATA, appName)
+  return {
+    cacheRoot: _joinAddSep(env.APPDATA, appName),
+    dataRoot: _joinAddSep(env.LOCALAPPDATA, appName),
+    guiConfigFilename: _join(env.LOCALAPPDATA, appName, 'gui_config.json'),
+    jsonDebugFileName: `${logDir}keybase.app.debug`,
+    logDir,
+    serverConfigFileName: `${logDir}keybase.app.serverConfig`,
+    socketPath: _join(dir, socketName),
+  }
+}
+
+const _getDarwinPaths = () => {
+  const env = KB2.constants.env
+  const homeEnv = env.HOME
+  const runMode = env.KEYBASE_RUN_MODE
+  const appName = `Keybase${runMode === 'prod' ? '' : capitalize(runMode)}`
+  const libraryDir = `${homeEnv}/Library/`
+  const logDir = `${libraryDir}Logs/`
+  return {
+    cacheRoot: `${libraryDir}Caches/${appName}/`,
+    dataRoot: `${libraryDir}Application Support/${appName}/`,
+    guiConfigFilename: `${libraryDir}Application Support/${appName}/gui_config.json`,
+    jsonDebugFileName: `${logDir}${appName}.app.debug`,
+    logDir,
+    serverConfigFileName: `${logDir}${appName}.app.serverConfig`,
+    socketPath: _join(`${libraryDir}Caches`, appName, socketName),
+  }
+}
+
+// Desktop paths — computed once, undefined on mobile
+const _desktopPaths = isMobile
+  ? undefined
+  : (isLinux ? _getLinuxPaths() : undefined) ||
+    (isWindows ? _getWindowsPaths() : undefined) ||
+    (isDarwin ? _getDarwinPaths() : undefined)
+
+if (!isMobile && !_desktopPaths) {
+  throw new Error('Unknown OS')
+}
+
+if (__DEV__ && !isMobile) {
+  console.log(`Run mode: ${KB2.constants.env.KEYBASE_RUN_MODE}`)
+}
+
+export const runMode: string = isMobile ? 'prod' : KB2.constants.env.KEYBASE_RUN_MODE
+export const dataRoot: string = isMobile ? '' : _desktopPaths!.dataRoot
+export const cacheRoot: string = isMobile ? '' : _desktopPaths!.cacheRoot
+export const socketPath: string = isMobile ? '' : _desktopPaths!.socketPath
+export const jsonDebugFileName: string = isMobile ? '' : _desktopPaths!.jsonDebugFileName
+export const guiConfigFilename: string = isMobile ? '' : _desktopPaths!.guiConfigFilename
+
+// serverConfigFileName: on mobile it lives under fsCacheDir; on desktop from OS paths
+export const serverConfigFileName: string = isMobile
+  ? `${_getRNKB().fsCacheDir}/Keybase/keybase.app.serverConfig`
+  : _desktopPaths!.serverConfigFileName
+
+// Native-specific dir exports
+export const logFileDir: string = isMobile ? `${_getRNKB().fsCacheDir}/Keybase` : ''
+// Empty string means let the service figure out the right directory.
+export const pprofDir: string = isMobile ? `${_getRNKB().fsCacheDir}/Keybase` : ''
+export const fsCacheDir: string = isMobile ? _getRNKB().fsCacheDir : ''
+export const downloadFolder: string = isMobile
+  ? ''
+  : KB2.constants.env.XDG_DOWNLOAD_DIR || KB2.constants.downloadFolder
+
+export const version: string = isMobile ? _getRNKB().version : __VERSION__
+
+export const uses24HourClock: boolean = isMobile
+  ? _getRNKB().uses24HourClock
+  : (() => {
+      const env = KB2.constants.env
+      const getTimeLocale = (): string | string[] => {
+        if (!isLinux) {
+          return Intl.DateTimeFormat().resolvedOptions().locale
+        }
+        const locale = env.LC_ALL || env.LC_TIME || env.LANG
+        if (locale) {
+          return locale.slice(0, 2)
+        }
+        return []
+      }
+      try {
+        return new Date('1999 Jan 1 20:00').toLocaleString(getTimeLocale()).includes(' 20:')
+      } catch {
+        return false
+      }
+    })()
+
+export const getAssetPath = (...a: Array<string>): string => {
+  if (isMobile) return ''
+  return KB2.constants.assetRoot + a.join('/')
+}
+
+export const getSecureFlagSetting = async (): Promise<boolean> => {
+  if (!isMobile) {
+    await Promise.resolve()
+    return false
+  }
+  if (!isAndroid) return false
+  try {
+    const RPCGen = await import('@/constants/rpc/rpc-gen')
+    const screenProtectorConfigKey = 'ui.screenprotector'
+    const value = await RPCGen.configGuiGetValueRpcPromise({path: screenProtectorConfigKey})
+    // Default to secure (true) if not explicitly set
+    if (!value.isNull && value.b === false) return false
+    return true
+  } catch {
+    return true
+  }
+}
+
+export const setSecureFlagSetting = async (secure: boolean): Promise<boolean> => {
+  if (!isMobile) {
+    await Promise.resolve()
+    return false
+  }
+  if (!isAndroid) return false
+  try {
+    const ScreenCapture = await import('expo-screen-capture')
+    const RPCGen = await import('@/constants/rpc/rpc-gen')
+    const screenProtectorConfigKey = 'ui.screenprotector'
+    if (secure) {
+      await ScreenCapture.preventScreenCaptureAsync('screenprotector')
+    } else {
+      await ScreenCapture.allowScreenCaptureAsync('screenprotector')
+    }
+    await RPCGen.configGuiSetValueRpcPromise({
+      path: screenProtectorConfigKey,
+      value: {b: secure, isNull: false},
+    })
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/shared/constants/remote.tsx b/shared/constants/remote.tsx
index 1d6c5e1d56a3..6ce80a47a6ed 100644
--- a/shared/constants/remote.tsx
+++ b/shared/constants/remote.tsx
@@ -1,5 +1,5 @@
 // helper only used in remote windows on electron
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import type * as RemoteGen from './remote-actions'
 const {mainWindowDispatch} = KB2.functions
 
diff --git a/shared/crypto/sub-nav/index.native.tsx b/shared/crypto/sub-nav/index.native.tsx
deleted file mode 100644
index c41261148096..000000000000
--- a/shared/crypto/sub-nav/index.native.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as C from '@/constants'
-import * as Crypto from '@/constants/crypto'
-import * as Kb from '@/common-adapters'
-import NavRow from './nav-row'
-
-const CryptoSubNav = () => {
-  const {navigate} = C.useNav()
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} gap="tiny" style={styles.container}>
-      {Crypto.Tabs.map(t => (
-        <NavRow
-          key={t.tab}
-          tab={t.tab}
-          title={t.title}
-          illustration={t.illustration}
-          description={t.description}
-          onClick={() => navigate(t.tab)}
-        />
-      ))}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        backgroundColor: Kb.Styles.globalColors.blueGrey,
-        paddingLeft: Kb.Styles.globalMargins.small,
-        paddingRight: Kb.Styles.globalMargins.small,
-        paddingTop: Kb.Styles.globalMargins.xsmall,
-      },
-    }) as const
-)
-
-export default CryptoSubNav
diff --git a/shared/crypto/sub-nav/index.desktop.tsx b/shared/crypto/sub-nav/index.tsx
similarity index 69%
rename from shared/crypto/sub-nav/index.desktop.tsx
rename to shared/crypto/sub-nav/index.tsx
index 7ac33e56c347..80c838338a41 100644
--- a/shared/crypto/sub-nav/index.desktop.tsx
+++ b/shared/crypto/sub-nav/index.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
-import * as Kb from '@/common-adapters'
+import * as C from '@/constants'
 import * as Crypto from '@/constants/crypto'
+import * as Kb from '@/common-adapters'
 import * as Common from '@/router-v2/common'
-import LeftNav from './left-nav.desktop'
+import NavRow from './nav-row'
 import {
   useNavigationBuilder,
   TabRouter,
@@ -10,11 +11,11 @@ import {
 } from '@react-navigation/core'
 import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
 import {routeMapToScreenElements} from '@/router-v2/routes'
-import {makeLayout} from '@/router-v2/screen-layout.desktop'
+import {makeLayout} from '@/router-v2/screen-layout'
 import type {RouteDef, GetOptionsParams} from '@/constants/types/router'
 import {defineRouteMap} from '@/constants/types/router'
+import LeftNav from './left-nav.desktop'
 
-/* Desktop SubNav */
 const cryptoSubRoutes = defineRouteMap({
   [Crypto.decryptTab]: {
     screen: React.lazy(async () => {
@@ -34,7 +35,6 @@ const cryptoSubRoutes = defineRouteMap({
       return {default: SignIO}
     }),
   },
-
   [Crypto.verifyTab]: {
     screen: React.lazy(async () => {
       const {VerifyIO} = await import('../verify')
@@ -42,6 +42,7 @@ const cryptoSubRoutes = defineRouteMap({
     }),
   },
 })
+
 function LeftTabNavigator({
   initialRouteName,
   children,
@@ -84,18 +85,13 @@ function LeftTabNavigator({
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  box: {backgroundColor: Kb.Styles.globalColors.white},
-  nav: {width: 180},
-}))
-
 type NavType = NavigatorTypeBagBase & {
   ParamList: {
     [key in keyof typeof cryptoSubRoutes]: {}
   }
 }
 
-export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>
+const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>
 const TabNavigator = createLeftTabNavigator()
 const makeOptions = (rd: RouteDef) => {
   return ({route, navigation}: GetOptionsParams) => {
@@ -104,11 +100,51 @@ const makeOptions = (rd: RouteDef) => {
     return {...opt}
   }
 }
-const cryptoScreens = routeMapToScreenElements(cryptoSubRoutes, TabNavigator.Screen, makeLayout, makeOptions, false, false, false)
-const CryptoSubNavigator = () => (
+const cryptoScreens = routeMapToScreenElements(
+  cryptoSubRoutes,
+  TabNavigator.Screen,
+  makeLayout,
+  makeOptions,
+  false,
+  false,
+  false
+)
+const DesktopCryptoSubNavigator = () => (
   <TabNavigator.Navigator initialRouteName={Crypto.encryptTab} backBehavior="none">
     {cryptoScreens}
   </TabNavigator.Navigator>
 )
 
-export default CryptoSubNavigator
+const NativeCryptoSubNav = () => {
+  const {navigate} = C.useNav()
+  return (
+    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} gap="tiny" style={styles.container}>
+      {Crypto.Tabs.map(t => (
+        <NavRow
+          key={t.tab}
+          tab={t.tab}
+          title={t.title}
+          illustration={t.illustration}
+          description={t.description}
+          onClick={() => navigate(t.tab)}
+        />
+      ))}
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      box: {backgroundColor: Kb.Styles.globalColors.white},
+      container: {
+        backgroundColor: Kb.Styles.globalColors.blueGrey,
+        paddingLeft: Kb.Styles.globalMargins.small,
+        paddingRight: Kb.Styles.globalMargins.small,
+        paddingTop: Kb.Styles.globalMargins.xsmall,
+      },
+      nav: {width: 180},
+    }) as const
+)
+
+export default isMobile ? NativeCryptoSubNav : DesktopCryptoSubNavigator
diff --git a/shared/desktop/app/app-events.desktop.tsx b/shared/desktop/app/app-events.desktop.tsx
index d00b36f5f287..797f9612e748 100644
--- a/shared/desktop/app/app-events.desktop.tsx
+++ b/shared/desktop/app/app-events.desktop.tsx
@@ -3,10 +3,10 @@ import * as R from '@/constants/remote'
 import * as RemoteGen from '@/constants/remote-actions'
 import logger from '@/logger'
 import os from 'os'
-import {isLinux, isWindows, cacheRoot} from '@/constants/platform.desktop'
+import {isLinux, isWindows, cacheRoot} from '@/constants/platform'
 import {ctlQuit} from './ctl.desktop'
 import {allowMultipleInstances} from '@/local-debug'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 const {env} = KB2.constants
 
 const isPathSaltpack = (p: string) =>
diff --git a/shared/desktop/app/dynamic-config.tsx b/shared/desktop/app/dynamic-config.tsx
index a244bc638305..63ac9742b795 100644
--- a/shared/desktop/app/dynamic-config.tsx
+++ b/shared/desktop/app/dynamic-config.tsx
@@ -1,5 +1,5 @@
 import fs from 'fs'
-import {serverConfigFileName, jsonDebugFileName} from '@/constants/platform.desktop'
+import {serverConfigFileName, jsonDebugFileName} from '@/constants/platform'
 const getConfigOverload = () => {
   let config: {[key: string]: unknown} = {}
   // Load overrides from server config
diff --git a/shared/desktop/app/exec.desktop.tsx b/shared/desktop/app/exec.desktop.tsx
index ccea772fbbc6..29be79affe18 100644
--- a/shared/desktop/app/exec.desktop.tsx
+++ b/shared/desktop/app/exec.desktop.tsx
@@ -2,7 +2,7 @@ import {exec as _exec, type ExecException} from 'child_process'
 import fs from 'fs'
 import os from 'os'
 
-import {runMode} from '@/constants/platform.desktop'
+import {runMode} from '@/constants/platform'
 
 // Execute at path with args.
 // If you specify platformOnly or runModeOnly, then callback will be called
diff --git a/shared/desktop/app/ipc-handlers.desktop.tsx b/shared/desktop/app/ipc-handlers.desktop.tsx
index 713527091485..c8099382e204 100644
--- a/shared/desktop/app/ipc-handlers.desktop.tsx
+++ b/shared/desktop/app/ipc-handlers.desktop.tsx
@@ -1,4 +1,4 @@
-import KB2, {type OpenDialogOptions, type SaveDialogOptions} from '@/util/electron.desktop'
+import KB2, {type OpenDialogOptions, type SaveDialogOptions} from '@/util/electron'
 import {showDockIcon, closeWindows, getMainWindow} from './main-window.desktop'
 import * as Electron from 'electron'
 import * as R from '@/constants/remote'
@@ -9,7 +9,7 @@ import path from 'path'
 import fse from 'fs-extra'
 import {spawn, execFile, exec} from 'child_process'
 import startWinService from './start-win-service.desktop'
-import {isDarwin, isLinux, isWindows, socketPath, fileUIName, dokanPath, windowsBinPath} from '@/constants/platform.desktop'
+import {isDarwin, isLinux, isWindows, socketPath, fileUIName, dokanPath, windowsBinPath} from '@/constants/platform'
 import {ctlQuit} from './ctl.desktop'
 import logger from '@/logger'
 import {htmlURL, preloadPath} from './html-root.desktop'
diff --git a/shared/desktop/app/ipctypes.tsx b/shared/desktop/app/ipctypes.tsx
index a15755efedfa..233fa8d77a19 100644
--- a/shared/desktop/app/ipctypes.tsx
+++ b/shared/desktop/app/ipctypes.tsx
@@ -1,4 +1,4 @@
-import type {OpenDialogOptions, SaveDialogOptions} from '@/util/electron.desktop'
+import type {OpenDialogOptions, SaveDialogOptions} from '@/util/electron'
 import type * as RPCTypes from '@/constants/rpc/rpc-gen'
 
 export type Action =
diff --git a/shared/desktop/app/kb2-impl.desktop.tsx b/shared/desktop/app/kb2-impl.desktop.tsx
index 6f902f671b77..f97779002352 100644
--- a/shared/desktop/app/kb2-impl.desktop.tsx
+++ b/shared/desktop/app/kb2-impl.desktop.tsx
@@ -2,7 +2,7 @@
 import {app, nativeTheme} from 'electron'
 import os from 'os'
 import path from 'path'
-import type {KB2} from '@/util/electron.desktop'
+import type {KB2} from '@/util/electron'
 const {env, argv, pid} = process
 
 const platform = process.platform
diff --git a/shared/desktop/app/main-window.desktop.tsx b/shared/desktop/app/main-window.desktop.tsx
index e3592f16e1fa..97555e245ccd 100644
--- a/shared/desktop/app/main-window.desktop.tsx
+++ b/shared/desktop/app/main-window.desktop.tsx
@@ -4,11 +4,11 @@ import * as R from '@/constants/remote'
 import * as fs from 'fs'
 import menuHelper from './menu-helper.desktop'
 import {showDevTools} from '@/local-debug'
-import {guiConfigFilename, isDarwin, isWindows, defaultUseNativeFrame} from '@/constants/platform.desktop'
+import {guiConfigFilename, isDarwin, isWindows, defaultUseNativeFrame} from '@/constants/platform'
 import logger from '@/logger'
 import debounce from 'lodash/debounce'
 import {htmlURL, preloadPath} from './html-root.desktop'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 
 const {env} = KB2.constants
 
diff --git a/shared/desktop/app/menu-bar.desktop.tsx b/shared/desktop/app/menu-bar.desktop.tsx
index 437a39a36e81..008a87057df1 100644
--- a/shared/desktop/app/menu-bar.desktop.tsx
+++ b/shared/desktop/app/menu-bar.desktop.tsx
@@ -3,7 +3,7 @@ import * as RemoteGen from '@/constants/remote-actions'
 import * as R from '@/constants/remote'
 import * as Electron from 'electron'
 import logger from '@/logger'
-import {isDarwin, isWindows, isLinux} from '@/constants/platform.desktop'
+import {isDarwin, isWindows, isLinux} from '@/constants/platform'
 import {menubar} from 'menubar'
 import {showDevTools, skipSecondaryDevtools} from '@/local-debug'
 import {getMainWindow} from './main-window.desktop'
diff --git a/shared/desktop/app/node.desktop.tsx b/shared/desktop/app/node.desktop.tsx
index 31952b1cde3e..f5d8b55adfe8 100644
--- a/shared/desktop/app/node.desktop.tsx
+++ b/shared/desktop/app/node.desktop.tsx
@@ -3,8 +3,8 @@ import '../renderer/preload.desktop'
 import * as Electron from 'electron'
 import * as R from '@/constants/remote'
 import * as RemoteGen from '@/constants/remote-actions'
-import {isDarwin} from '@/constants/platform.desktop'
-import KB2 from '@/util/electron.desktop'
+import {isDarwin} from '@/constants/platform'
+import KB2 from '@/util/electron'
 import {configOverload} from './dynamic-config'
 import MainWindow from './main-window.desktop'
 import devTools from './dev-tools.desktop'
diff --git a/shared/desktop/app/paths.desktop.tsx b/shared/desktop/app/paths.desktop.tsx
index 9043d6d2ea38..24ef65b8aa89 100644
--- a/shared/desktop/app/paths.desktop.tsx
+++ b/shared/desktop/app/paths.desktop.tsx
@@ -1,6 +1,6 @@
 import os from 'os'
 import path from 'path'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import {app} from 'electron'
 const {env} = KB2.constants
 
diff --git a/shared/desktop/remote/component-loader.desktop.tsx b/shared/desktop/remote/component-loader.desktop.tsx
index d9aa41e782b4..262c613893dd 100644
--- a/shared/desktop/remote/component-loader.desktop.tsx
+++ b/shared/desktop/remote/component-loader.desktop.tsx
@@ -6,8 +6,8 @@ import * as Kb from '@/common-adapters'
 import {GlobalKeyEventHandler} from '@/common-adapters/key-event-handler.desktop'
 import {disableDragDrop} from '@/util/drag-drop.desktop'
 import ErrorBoundary from '@/common-adapters/error-boundary'
-import {initDesktopStyles} from '@/styles/index.desktop'
-import KB2 from '@/util/electron.desktop'
+import {initDesktopStyles} from '@/styles'
+import KB2 from '@/util/electron'
 import {setServiceDecoration} from '@/common-adapters/markdown/react'
 import ServiceDecoration from '@/common-adapters/markdown/service-decoration'
 import {type RemoteComponentName, useRemotePropsReceiver} from './remote-component.desktop'
diff --git a/shared/desktop/remote/remote-component.desktop.tsx b/shared/desktop/remote/remote-component.desktop.tsx
index b1395a554c5e..5104fac159af 100644
--- a/shared/desktop/remote/remote-component.desktop.tsx
+++ b/shared/desktop/remote/remote-component.desktop.tsx
@@ -3,7 +3,7 @@ import logger from '@/logger'
 import * as R from '@/constants/remote'
 import * as RemoteGen from '@/constants/remote-actions'
 import {useDarkModeState} from '@/stores/darkmode'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 
 const {ipcRendererOn, showInactive} = KB2.functions
 
@@ -22,7 +22,7 @@ type RemotePropsReceiverState<P> = {
   value: P | null
 }
 
-export const getRemoteComponentParam = () => new URLSearchParams(window.location.search).get('param') ?? ''
+export const getRemoteComponentParam = () => new URLSearchParams(window!.location.search).get('param') ?? ''
 
 export const useRemoteDarkModeSync = (darkMode: boolean) => {
   const setSystemDarkMode = useDarkModeState(s => s.dispatch.setSystemDarkMode)
diff --git a/shared/desktop/remote/use-browser-window.desktop.tsx b/shared/desktop/remote/use-browser-window.desktop.tsx
index 5062af3338ec..c3724814e7ee 100644
--- a/shared/desktop/remote/use-browser-window.desktop.tsx
+++ b/shared/desktop/remote/use-browser-window.desktop.tsx
@@ -1,6 +1,6 @@
 // This hook creates a remote brower window when mounted
 import * as React from 'react'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import type {RemoteComponentName} from './remote-component.desktop'
 
 const {makeRenderer, closeRenderer} = KB2.functions
diff --git a/shared/desktop/remote/use-serialize-props.desktop.tsx b/shared/desktop/remote/use-serialize-props.desktop.tsx
index 7f4b9a393ed5..3670bad2f9a5 100644
--- a/shared/desktop/remote/use-serialize-props.desktop.tsx
+++ b/shared/desktop/remote/use-serialize-props.desktop.tsx
@@ -2,7 +2,7 @@
 // Listens for requests from the main process (which proxies requests from other windows) to kick off an update
 import * as React from 'react'
 import * as C from '@/constants'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import {useConfigState} from '@/stores/config'
 import type {RemoteComponentName} from './remote-component.desktop'
 
diff --git a/shared/desktop/renderer/main.desktop.tsx b/shared/desktop/renderer/main.desktop.tsx
index f216bfdfa816..14041f85fe06 100644
--- a/shared/desktop/renderer/main.desktop.tsx
+++ b/shared/desktop/renderer/main.desktop.tsx
@@ -2,7 +2,7 @@
 import './globals.desktop'
 import {isDarwin, isWindows} from '@/constants/platform'
 import '@/util/why-did-you-render'
-import KB2, {waitOnKB2Loaded} from '@/util/electron.desktop'
+import KB2, {waitOnKB2Loaded} from '@/util/electron'
 import * as DarkMode from '@/stores/darkmode'
 
 waitOnKB2Loaded(() => {
diff --git a/shared/desktop/renderer/main2.desktop.tsx b/shared/desktop/renderer/main2.desktop.tsx
index c32fab788d33..bd15e2855c96 100644
--- a/shared/desktop/renderer/main2.desktop.tsx
+++ b/shared/desktop/renderer/main2.desktop.tsx
@@ -1,6 +1,6 @@
 /// <reference types="webpack-env" />
 // Entry point to the chrome part of the app
-import Main from '@/app/main.desktop'
+import Main from '@/app/main'
 // order of the above must NOT change. needed for patching / hot loading to be correct
 import * as C from '@/constants'
 import * as React from 'react'
@@ -9,17 +9,17 @@ import type * as RemoteGen from '@/constants/remote-actions'
 import {GlobalKeyEventHandler} from '@/common-adapters/key-event-handler.desktop'
 import {makeEngine} from '@/engine'
 import {disableDragDrop} from '@/util/drag-drop.desktop'
-import {initDesktopStyles} from '@/styles/index.desktop'
+import {initDesktopStyles} from '@/styles'
 import {isWindows} from '@/constants/platform'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import {useConfigState} from '@/stores/config'
 import {useShellState} from '@/stores/shell'
 import {setServiceDecoration} from '@/common-adapters/markdown/react'
 import ServiceDecoration from '@/common-adapters/markdown/service-decoration'
 import {useDarkModeState} from '@/stores/darkmode'
-import {initPlatformListener, onEngineIncoming} from '@/constants/init/index.desktop'
+import {initPlatformListener, onEngineIncoming} from '@/constants/init/index'
 import {eventFromRemoteWindows} from './remote-event-handler.desktop'
-import type {default as NewMainType} from '../../app/main.desktop'
+import type {default as NewMainType} from '../../app/main'
 import {dumpLogs} from '@/util/storeless-actions'
 setServiceDecoration(ServiceDecoration)
 
@@ -167,12 +167,12 @@ const setupHMR = () => {
 
   const refreshMain = () => {
     try {
-      const {default: NewMain} = require('../../app/main.desktop') as {default: typeof NewMainType}
+      const {default: NewMain} = require('../../app/main') as {default: typeof NewMainType}
       render(NewMain)
     } catch {}
   }
 
-  module.hot.accept(['../../app/main.desktop'], refreshMain)
+  module.hot.accept(['../../app/main'], refreshMain)
   module.hot.accept(['../../common-adapters/index'], () => {})
 }
 
diff --git a/shared/desktop/renderer/preload.desktop.tsx b/shared/desktop/renderer/preload.desktop.tsx
index ed35dca55ce4..e76e48730c34 100644
--- a/shared/desktop/renderer/preload.desktop.tsx
+++ b/shared/desktop/renderer/preload.desktop.tsx
@@ -6,7 +6,7 @@ import {
   type KB2,
   type OpenDialogOptions,
   type SaveDialogOptions,
-} from '@/util/electron.desktop'
+} from '@/util/electron'
 import type * as RPCTypes from '@/constants/rpc/rpc-gen'
 import type {Action} from '../app/ipctypes'
 
diff --git a/shared/desktop/renderer/remote-event-handler.desktop.tsx b/shared/desktop/renderer/remote-event-handler.desktop.tsx
index be6c16c4fe82..da90aebb720c 100644
--- a/shared/desktop/renderer/remote-event-handler.desktop.tsx
+++ b/shared/desktop/renderer/remote-event-handler.desktop.tsx
@@ -5,7 +5,7 @@ import * as Tabs from '@/constants/tabs'
 import {RPCError} from '@/util/errors'
 import {ignorePromise} from '@/constants/utils'
 import {navigateAppend, navigateToThread, previewConversation, switchTab} from '@/constants/router'
-import {onEngineConnected, onEngineDisconnected} from '@/constants/init/index.desktop'
+import {onEngineConnected, onEngineDisconnected} from '@/constants/init/index'
 import {emitDeepLink} from '@/router-v2/linking'
 import {isPathSaltpackEncrypted, isPathSaltpackSigned} from '@/util/path'
 import type HiddenString from '@/util/hidden-string'
diff --git a/shared/desktop/webpack.config.mts b/shared/desktop/webpack.config.mts
index fbe8bd5d4043..7b2ea6fcf88e 100644
--- a/shared/desktop/webpack.config.mts
+++ b/shared/desktop/webpack.config.mts
@@ -66,7 +66,13 @@ if (debugWebpack) {
 }
 
 const makeAlias = (isDev: boolean): Record<string, string | false> => {
-  const alias = ignoredModules.reduce<Record<string, string | false>>(
+  // Sort longest-first so subpath entries (e.g. 'foo/bar') are inserted into
+  // the alias object before their parent package ('foo'). webpack's enhanced-resolve
+  // checks aliases in insertion order and uses the first match; a shorter prefix
+  // like 'foo' would otherwise intercept 'foo/bar' and append '/bar' to the
+  // null-module path, producing a non-existent path.
+  const sortedModules = [...ignoredModules].sort((a, b) => b.length - a.length)
+  const alias = sortedModules.reduce<Record<string, string | false>>(
     (acc, name: string) => {
       acc[name] = nullModulePath
       return acc
@@ -169,7 +175,14 @@ const makeRules = ({
       }) satisfies RuleSetRule
   ),
   {
-    exclude: /\/dist\//,
+    // Native-only files must never be parsed by webpack on desktop: they use @/ imports
+    // that babel-module-resolver can't transform (babel ignores *.native.* files), so
+    // webpack would see the raw @/ alias and fail to resolve it.
+    test: /\.(native|ios|android)\.(ts|js)x?$/,
+    use: ['null-loader'],
+  },
+  {
+    exclude: [/\/dist\//, /\.(native|ios|android)\.(ts|js)x?$/],
     test: /\.(ts|js)x?$/,
     use: makeBabelLoader(isDev, isHot, nodeThread),
   },
diff --git a/shared/engine/index.platform.native.tsx b/shared/engine/index.platform.native.tsx
deleted file mode 100644
index 8203e3988881..000000000000
--- a/shared/engine/index.platform.native.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {LocalTransport, sharedCreateClient, rpcLog} from './transport-shared'
-import type {IncomingRPCCallbackType, ConnectDisconnectCB, CreateClientType} from './index.platform.shared'
-import type {RPCMessage} from './rpc-transport'
-import logger from '@/logger'
-import {engineReset, getNativeEmitter, notifyJSReady} from 'react-native-kb'
-
-class NativeTransport extends LocalTransport {
-  protected writeMessage(message: RPCMessage) {
-    try {
-      if (!global.rpcOnGo) {
-        logger.error('>>>> rpcOnGo send before rpcOnGo global?')
-      }
-      global.rpcOnGo?.(message)
-    } catch (e) {
-      logger.error('>>>> rpcOnGo JS thrown!', e)
-    }
-  }
-}
-
-function createClient(
-  incomingRPCCallback: IncomingRPCCallbackType,
-  connectCallback: ConnectDisconnectCB,
-  disconnectCallback: ConnectDisconnectCB
-) {
-  const client = sharedCreateClient(
-    new NativeTransport(incomingRPCCallback, connectCallback, disconnectCallback)
-  )
-
-  global.rpcOnJs = (objs: unknown, count: number) => {
-    try {
-      if (count > 1) {
-        const arr = objs as Array<unknown>
-        for (const obj of arr) {
-          client.transport.dispatchDecodedMessage(obj)
-        }
-      } else {
-        client.transport.dispatchDecodedMessage(objs)
-      }
-    } catch (e) {
-      logger.error('>>>> rpcOnJs JS thrown!', e)
-    }
-  }
-
-  const RNEmitter = getNativeEmitter()
-  RNEmitter.addListener('kb-meta-engine-event', (payload: string) => {
-    try {
-      switch (payload) {
-        case 'kb-engine-reset':
-          connectCallback()
-      }
-    } catch (e) {
-      logger.error('>>>> meta engine event JS thrown!', e)
-    }
-  })
-
-  // Signal that JS is ready to send/receive RPCs
-  // This sets up native infrastructure and starts bidirectional communication
-  logger.info('JS engine ready, notifying native side')
-  notifyJSReady()
-
-  return client
-}
-
-function resetClient(client: CreateClientType, _ic?: IncomingRPCCallbackType, _cc?: ConnectDisconnectCB, _dc?: ConnectDisconnectCB) {
-  // Tell the RN bridge to reset itself
-  engineReset()
-  return client
-}
-
-export type {CreateClientType, PayloadType, InvokeType} from './index.platform.shared'
-export {resetClient, createClient, rpcLog}
diff --git a/shared/engine/index.platform.desktop.tsx b/shared/engine/index.platform.tsx
similarity index 70%
rename from shared/engine/index.platform.desktop.tsx
rename to shared/engine/index.platform.tsx
index 65c55d50a0de..59f90da7999b 100644
--- a/shared/engine/index.platform.desktop.tsx
+++ b/shared/engine/index.platform.tsx
@@ -1,16 +1,15 @@
-import type {Socket} from 'net'
 import logger from '@/logger'
 import {TransportShared, LocalTransport, sharedCreateClient, rpcLog} from './transport-shared'
-import {socketPath} from '@/constants/platform.desktop'
-import {printRPCBytes} from '@/local-debug'
 import type {CreateClientType, IncomingRPCCallbackType, ConnectDisconnectCB} from './index.platform.shared'
 import type {RPCMessage} from './rpc-transport'
-import KB2 from '@/util/electron.desktop'
-
-const {engineSend, ipcRendererOn, mainWindowDispatchEngineIncoming} = KB2.functions
-const {isRenderer} = KB2.constants
+import KB2 from '@/util/electron'
+import type {Socket} from 'net'
+import {printRPCBytes} from '@/local-debug'
+import {socketPath} from '@/constants/platform'
+import {getNativeEmitter, notifyJSReady, engineReset} from 'react-native-kb'
 
 // used by node
+// Desktop transport — only instantiated when !isMobile
 class NativeTransport extends TransportShared {
   private _socket?: Socket
   private _reconnectTimer?: ReturnType<typeof setTimeout>
@@ -50,6 +49,7 @@ class NativeTransport extends TransportShared {
   }
 
   override packetizeData(m: Uint8Array) {
+    const {mainWindowDispatchEngineIncoming} = KB2.functions
     if (printRPCBytes) {
       logger.debug('[RPC] Read', m.length)
     }
@@ -135,15 +135,73 @@ class NativeTransport extends TransportShared {
 
 class ProxyNativeTransport extends LocalTransport {
   protected writeMessage(message: RPCMessage) {
+    const {engineSend} = KB2.functions
     engineSend?.(message)
   }
 }
 
+// Mobile transport — only instantiated when isMobile
+class NativeTransportMobile extends LocalTransport {
+  protected writeMessage(message: RPCMessage) {
+    try {
+      if (!global.rpcOnGo) {
+        logger.error('>>>> rpcOnGo send before rpcOnGo global?')
+      }
+      global.rpcOnGo?.(message)
+    } catch (e) {
+      logger.error('>>>> rpcOnGo JS thrown!', e)
+    }
+  }
+}
+
 function createClient(
   incomingRPCCallback: IncomingRPCCallbackType,
   connectCallback: ConnectDisconnectCB,
   disconnectCallback: ConnectDisconnectCB
 ) {
+  if (isMobile) {
+    const client = sharedCreateClient(
+      new NativeTransportMobile(incomingRPCCallback, connectCallback, disconnectCallback)
+    )
+
+    global.rpcOnJs = (objs: unknown, count: number) => {
+      try {
+        if (count > 1) {
+          const arr = objs as Array<unknown>
+          for (const obj of arr) {
+            client.transport.dispatchDecodedMessage(obj)
+          }
+        } else {
+          client.transport.dispatchDecodedMessage(objs)
+        }
+      } catch (e) {
+        logger.error('>>>> rpcOnJs JS thrown!', e)
+      }
+    }
+
+    const RNEmitter = getNativeEmitter()
+    RNEmitter.addListener('kb-meta-engine-event', (payload: string) => {
+      try {
+        switch (payload) {
+          case 'kb-engine-reset':
+            connectCallback()
+        }
+      } catch (e) {
+        logger.error('>>>> meta engine event JS thrown!', e)
+      }
+    })
+
+    // Signal that JS is ready to send/receive RPCs
+    // This sets up native infrastructure and starts bidirectional communication
+    logger.info('JS engine ready, notifying native side')
+    notifyJSReady()
+
+    return client
+  }
+
+  const {ipcRendererOn} = KB2.functions
+  const {isRenderer} = KB2.constants
+
   if (!isRenderer) {
     return sharedCreateClient(new NativeTransport(incomingRPCCallback, connectCallback, disconnectCallback))
   } else {
@@ -170,6 +228,14 @@ function resetClient(
   connectCallback: ConnectDisconnectCB,
   disconnectCallback: ConnectDisconnectCB
 ) {
+  if (isMobile) {
+    // Tell the RN bridge to reset itself
+    engineReset()
+    return client
+  }
+
+  const {isRenderer} = KB2.constants
+
   if (isRenderer) {
     client.transport.reset()
     return client
diff --git a/shared/globals.native.d.ts b/shared/globals.native.d.ts
index 21ee84887305..bb7c3f2c3983 100644
--- a/shared/globals.native.d.ts
+++ b/shared/globals.native.d.ts
@@ -9,9 +9,21 @@ declare var window:
         opts?: {timeout?: number}
       ) => number
       cancelIdleCallback?: (handle: number) => void
+      addEventListener: (event: string, cb: () => void) => void
+      location: {search: string}
     }
   | undefined
 
+// Stub for Web Notification API used in merged util/misc.tsx (desktop-only at runtime)
+declare class Notification {
+  onclick: (() => void) | null
+  onclose: (() => void) | null
+  constructor(title: string, options?: {body?: string; silent?: boolean})
+}
+
+// Stub for navigator.onLine used in merged desktop-only init code (guarded by !isMobile)
+declare var navigator: {onLine: boolean}
+
 // Minimal File/DataTransfer stubs for shared files that use these types
 // (actual drag-and-drop only runs on desktop, but the code is in shared files)
 interface File {
@@ -22,3 +34,98 @@ interface DataTransfer {
   readonly files: ReadonlyArray<File>
   readonly types: ReadonlyArray<string>
 }
+
+// Stubs for DOM observer/element types used in merged platform files.
+// Desktop build excludes this file so declare class is safe (no conflict with lib.dom).
+interface Element {}
+interface HTMLElement extends Element {}
+interface HTMLDivElement extends HTMLElement {
+  clientWidth?: number
+}
+
+interface DOMRectReadOnly {
+  readonly width: number
+  readonly height: number
+  readonly top: number
+  readonly left: number
+  readonly bottom: number
+  readonly right: number
+  readonly x: number
+  readonly y: number
+}
+
+interface ResizeObserverEntry {
+  readonly target: Element
+  readonly contentRect: DOMRectReadOnly
+}
+declare class ResizeObserver {
+  constructor(callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void)
+  disconnect(): void
+  observe(target: Element): void
+  unobserve(target: Element): void
+}
+
+type IntersectionObserverCallback = (
+  entries: IntersectionObserverEntry[],
+  observer: IntersectionObserver
+) => void
+interface IntersectionObserverInit {
+  root?: Element | Document | null
+  rootMargin?: string
+  threshold?: number | number[]
+}
+interface IntersectionObserverEntry {
+  readonly isIntersecting: boolean
+  readonly target: Element
+  readonly time: number
+  readonly intersectionRatio: number
+  readonly rootBounds: DOMRectReadOnly | null
+  readonly boundingClientRect: DOMRectReadOnly
+  readonly intersectionRect: DOMRectReadOnly
+}
+declare class IntersectionObserver {
+  readonly POLL_INTERVAL: number | null | undefined
+  readonly USE_MUTATION_OBSERVER: boolean | undefined
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit)
+  observe(target: Element): void
+  unobserve(target: Element): void
+  disconnect(): void
+}
+
+declare function requestAnimationFrame(callback: FrameRequestCallback): number
+type FrameRequestCallback = (time: number) => void
+
+// Stub for keyboard event key property used in desktop key handler (desktop-only at runtime)
+interface KeyboardEvent {
+  readonly key: string
+}
+
+// Stub for document used in merged initDesktopStyles (desktop-only at runtime, guarded by !isMobile)
+interface DOMNode {
+  firstChild: DOMElement | null
+  appendChild(child: DOMNode): DOMNode
+  removeChild(child: DOMNode): DOMNode
+}
+interface DOMElement extends DOMNode {
+  setAttribute(k: string, v: string): void
+  classList: {add(c: string): void}
+  clientWidth: number
+  appendChild(child: DOMNode): DOMNode
+}
+interface DOMTextNode extends DOMNode {}
+declare var document: {
+  activeElement: unknown
+  addEventListener(type: string, listener: (e: any) => void, useCapture?: boolean): void
+  removeEventListener(type: string, listener: (e: any) => void, useCapture?: boolean): void
+  getElementById(id: string): DOMElement | null
+  head: {appendChild(el: DOMElement): void}
+  body: {
+    appendChild(el: DOMElement): void
+    removeChild(el: DOMElement): void
+    classList: {add(c: string): void}
+    addEventListener(type: string, listener: (e: any) => void, useCapture?: boolean): void
+    removeEventListener(type: string, listener: (e: any) => void, useCapture?: boolean): void
+  }
+  createElement(tag: string): DOMElement
+  createTextNode(text: string): DOMTextNode
+}
diff --git a/shared/local-debug.tsx b/shared/local-debug.tsx
index f4e389a63ed8..eeb8ff7030c5 100644
--- a/shared/local-debug.tsx
+++ b/shared/local-debug.tsx
@@ -48,7 +48,7 @@ if (__DEV__) {
 }
 
 if (!isMobile) {
-  const KB2 = require('./util/electron.desktop').default as {
+  const KB2 = require('./util/electron').default as {
     constants: {configOverload?: Partial<typeof config>}
   }
   config = {...config, ...KB2.constants.configOverload}
diff --git a/shared/login/relogin/index.desktop.tsx b/shared/login/relogin/index.desktop.tsx
deleted file mode 100644
index c9c30bf84373..000000000000
--- a/shared/login/relogin/index.desktop.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import UserCard from '../user-card'
-import {errorBanner, SignupScreen} from '@/signup/common'
-import type {Props} from './index.shared'
-
-const other = 'Someone else...'
-
-const UserRow = ({user, hasStoredSecret}: {user: string; hasStoredSecret: boolean}) => (
-  <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.userRow} gap="xtiny">
-    <Kb.Text type="Header" style={user === other ? styles.other : styles.provisioned}>
-      {user}
-    </Kb.Text>
-    {hasStoredSecret && <Kb.Text type="BodySmall"> • Signed in</Kb.Text>}
-  </Kb.Box2>
-)
-
-const Login = (props: Props) => {
-  const _inputRef = React.useRef<Kb.Input3Ref>(null)
-
-  const _onClickUserIdx = (selected: number) => {
-    const user = props.users.at(selected)
-    if (!user) {
-      props.onSomeoneElse()
-    } else {
-      props.selectedUserChange(user.username)
-      if (_inputRef.current) {
-        _inputRef.current.focus()
-      }
-    }
-  }
-
-  const userRows = props.users
-    .concat({hasStoredSecret: false, uid: '', username: other})
-    .map(u => <UserRow user={u.username} key={u.username} hasStoredSecret={u.hasStoredSecret} />)
-
-  const selectedIdx = props.users.findIndex(u => u.username === props.selectedUser)
-  return (
-    <SignupScreen
-      banners={errorBanner(props.error)}
-      headerStyle={styles.header}
-      onRightAction={props.onSignup}
-      rightActionLabel="Create account"
-      title="Log in"
-    >
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} flex={1} style={styles.contentBox}>
-        <UserCard username={props.selectedUser} outerStyle={styles.container} style={styles.userContainer}>
-          <Kb.Dropdown
-            onChangedIdx={_onClickUserIdx}
-            selected={userRows[selectedIdx]}
-            items={userRows}
-            overlayStyle={styles.userOverlayStyle}
-            position="bottom center"
-            style={styles.userDropdown}
-          />
-          {props.needPassword && (
-            <Kb.Box2 direction="horizontal" fullWidth={true} flex={1} style={styles.inputRow}>
-              <Kb.Input3
-                autoFocus={true}
-                placeholder="Password"
-                onChangeText={props.passwordChange}
-                onEnterKeyDown={props.onSubmit}
-                ref={_inputRef}
-                secureTextEntry={true}
-                value={props.password}
-              />
-            </Kb.Box2>
-          )}
-          <Kb.Box2 direction="horizontal" fullWidth={true} justifyContent="flex-end" flex={1}>
-            <Kb.Text
-              type="BodySmallSecondaryLink"
-              onClick={props.onForgotPassword}
-              style={styles.forgotPassword}
-            >
-              Forgot password?
-            </Kb.Text>
-          </Kb.Box2>
-          <Kb.Box2
-            direction="vertical"
-            fullWidth={true}
-            fullHeight={true}
-            justifyContent="flex-end"
-            flex={1}
-          >
-            <Kb.WaitingButton
-              disabled={props.needPassword && !props.password}
-              fullWidth={true}
-              waitingKey={C.waitingKeyConfigLogin}
-              style={styles.loginSubmitButton}
-              label="Log in"
-              onClick={props.onSubmit}
-            />
-          </Kb.Box2>
-        </UserCard>
-      </Kb.Box2>
-    </SignupScreen>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center',
-      },
-      contentBox: {
-        alignSelf: 'center',
-        maxWidth: 460,
-        padding: Kb.Styles.globalMargins.small,
-      },
-      forgotPassword: {
-        marginTop: Kb.Styles.globalMargins.tiny,
-      },
-      header: {
-        borderBottomWidth: 0,
-      },
-      inputRow: {
-        marginBottom: 0,
-        marginTop: Kb.Styles.globalMargins.tiny,
-        width: '100%',
-      },
-      loginSubmitButton: {
-        marginTop: 0,
-        maxHeight: 32,
-        width: '100%',
-      },
-      other: {color: Kb.Styles.globalColors.black},
-      provisioned: {color: Kb.Styles.globalColors.orange},
-      userContainer: {
-        backgroundColor: Kb.Styles.globalColors.transparent,
-        flex: 1,
-      },
-      userDropdown: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        width: '100%',
-      },
-      userOverlayStyle: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        width: 348,
-      },
-      userRow: {
-        alignItems: 'center',
-        marginLeft: Kb.Styles.globalMargins.xsmall,
-        minHeight: 40,
-        width: '100%',
-      },
-    }) as const
-)
-
-export default Login
diff --git a/shared/login/relogin/index.native.tsx b/shared/login/relogin/index.native.tsx
deleted file mode 100644
index 44cc9ffd1878..000000000000
--- a/shared/login/relogin/index.native.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import * as C from '@/constants'
-import * as Kb from '@/common-adapters'
-import {isAndroidNewerThanM} from '@/constants/platform'
-import * as React from 'react'
-import Dropdown from './dropdown.native'
-import UserCard from '../user-card'
-import type {Input3Props} from '@/common-adapters/input3.shared'
-import type {Props} from './index.shared'
-
-const LoginRender = (props: Props) => {
-  const [scrollViewHeight, setScrollViewHeight] = React.useState<number | undefined>(undefined)
-  const inputProps: Input3Props = {
-    autoFocus: true,
-    error: !!props.error,
-    keyboardType: props.showTyping && isAndroid ? 'visible-password' : 'default',
-    onChangeText: password => props.passwordChange(password),
-    onEnterKeyDown: () => props.onSubmit(),
-    placeholder: 'Password',
-    secureTextEntry: !props.showTyping,
-  }
-
-  return (
-    <Kb.Box2
-      direction="vertical"
-      fullWidth={true}
-      onLayout={evt => setScrollViewHeight(evt.nativeEvent.layout.height)}
-      style={Kb.Styles.globalStyles.flexOne}
-    >
-      <Kb.ScrollView style={styles.scrollView} contentContainerStyle={{minHeight: scrollViewHeight}}>
-        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" flex={1} style={styles.container}>
-          {isAndroid && !C.isDeviceSecureAndroid && !isAndroidNewerThanM && (
-            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.deviceNotSecureContainer}>
-              <Kb.Text center={true} type="Body" negative={true} style={styles.deviceNotSecureText}>
-                {"Since you don't have a lock screen, you'll have to type your password everytime."}
-              </Kb.Text>
-            </Kb.Box2>
-          )}
-          {!!props.error && <Kb.Banner color="red">{props.error}</Kb.Banner>}
-          <UserCard username={props.selectedUser} outerStyle={styles.card} style={styles.cardInner}>
-            <Dropdown
-              type="Username"
-              value={props.selectedUser}
-              onClick={props.selectedUserChange}
-              onOther={props.onSomeoneElse}
-              options={props.users}
-            />
-            {props.needPassword && (
-              <Kb.Box2 direction="vertical" gap="tiny" gapEnd={true} gapStart={true} fullWidth={true}>
-                <Kb.Input3 {...inputProps} />
-                <Kb.Checkbox
-                  checked={props.showTyping}
-                  label="Show typing"
-                  onCheck={check => props.showTypingChange(check)}
-                  style={styles.formElements}
-                />
-              </Kb.Box2>
-            )}
-            <Kb.WaitingButton
-              disabled={props.needPassword && !props.password}
-              waitingKey={C.waitingKeyConfigLogin}
-              style={{
-                marginTop: props.needPassword ? 0 : Kb.Styles.globalMargins.small,
-                width: '100%',
-              }}
-              fullWidth={true}
-              label="Log in"
-              onClick={props.onSubmit}
-            />
-            <Kb.Text
-              type="BodySmallSecondaryLink"
-              center={true}
-              onClick={props.onForgotPassword}
-              style={{
-                marginBottom: Kb.Styles.globalMargins.tiny,
-                marginTop: Kb.Styles.globalMargins.medium,
-              }}
-            >
-              Forgot password?
-            </Kb.Text>
-            <Kb.Text center={true} type="BodySmallSecondaryLink" onClick={props.onFeedback}>
-              Problems logging in?
-            </Kb.Text>
-          </UserCard>
-          <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
-          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.createAccountContainer}>
-            <Kb.Button
-              fullWidth={true}
-              label="Create account"
-              mode="Secondary"
-              onClick={props.onSignup}
-              style={{flexGrow: 0}}
-            />
-          </Kb.Box2>
-        </Kb.Box2>
-      </Kb.ScrollView>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      card: {
-        marginTop: Kb.Styles.globalMargins.medium,
-        width: '100%',
-      },
-      cardInner: Kb.Styles.platformStyles({
-        isTablet: {paddingBottom: 0},
-      }),
-      container: {
-        backgroundColor: Kb.Styles.globalColors.blueGrey,
-      },
-      createAccountContainer: Kb.Styles.platformStyles({
-        common: {padding: Kb.Styles.globalMargins.medium},
-        isTablet: {maxWidth: 410, padding: Kb.Styles.globalMargins.small},
-      }),
-      deviceNotSecureContainer: {
-        alignSelf: 'stretch',
-        backgroundColor: Kb.Styles.globalColors.yellow,
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-        paddingTop: Kb.Styles.globalMargins.tiny,
-      },
-      deviceNotSecureText: {
-        color: Kb.Styles.globalColors.brown_75,
-      },
-      formElements: {
-        marginBottom: Kb.Styles.globalMargins.tiny,
-      },
-      scrollView: {
-        backgroundColor: Kb.Styles.globalColors.blueGrey,
-      },
-    }) as const
-)
-
-export default LoginRender
diff --git a/shared/login/relogin/index.tsx b/shared/login/relogin/index.tsx
new file mode 100644
index 000000000000..42ca89309653
--- /dev/null
+++ b/shared/login/relogin/index.tsx
@@ -0,0 +1,285 @@
+import * as C from '@/constants'
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import UserCard from '../user-card'
+import {errorBanner, SignupScreen} from '@/signup/common'
+import {isAndroidNewerThanM} from '@/constants/platform'
+import Dropdown from './dropdown.native'
+import type {Props} from './index.shared'
+
+// Desktop login
+
+const other = 'Someone else...'
+
+const UserRow = ({user, hasStoredSecret}: {user: string; hasStoredSecret: boolean}) => (
+  <Kb.Box2 direction="horizontal" fullWidth={true} style={desktopStyles.userRow} gap="xtiny">
+    <Kb.Text type="Header" style={user === other ? desktopStyles.other : desktopStyles.provisioned}>
+      {user}
+    </Kb.Text>
+    {hasStoredSecret && <Kb.Text type="BodySmall"> • Signed in</Kb.Text>}
+  </Kb.Box2>
+)
+
+const DesktopLogin = (props: Props) => {
+  const _inputRef = React.useRef<Kb.Input3Ref>(null)
+
+  const _onClickUserIdx = (selected: number) => {
+    const user = props.users.at(selected)
+    if (!user) {
+      props.onSomeoneElse()
+    } else {
+      props.selectedUserChange(user.username)
+      if (_inputRef.current) {
+        _inputRef.current.focus()
+      }
+    }
+  }
+
+  const userRows = props.users
+    .concat({hasStoredSecret: false, uid: '', username: other})
+    .map(u => <UserRow user={u.username} key={u.username} hasStoredSecret={u.hasStoredSecret} />)
+
+  const selectedIdx = props.users.findIndex(u => u.username === props.selectedUser)
+  return (
+    <SignupScreen
+      banners={errorBanner(props.error)}
+      headerStyle={desktopStyles.header}
+      onRightAction={props.onSignup}
+      rightActionLabel="Create account"
+      title="Log in"
+    >
+      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} flex={1} style={desktopStyles.contentBox}>
+        <UserCard username={props.selectedUser} outerStyle={desktopStyles.container} style={desktopStyles.userContainer}>
+          <Kb.Dropdown
+            onChangedIdx={_onClickUserIdx}
+            selected={userRows[selectedIdx]}
+            items={userRows}
+            overlayStyle={desktopStyles.userOverlayStyle}
+            position="bottom center"
+            style={desktopStyles.userDropdown}
+          />
+          {props.needPassword && (
+            <Kb.Box2 direction="horizontal" fullWidth={true} flex={1} style={desktopStyles.inputRow}>
+              <Kb.Input3
+                autoFocus={true}
+                placeholder="Password"
+                onChangeText={props.passwordChange}
+                onEnterKeyDown={props.onSubmit}
+                ref={_inputRef}
+                secureTextEntry={true}
+                value={props.password}
+              />
+            </Kb.Box2>
+          )}
+          <Kb.Box2 direction="horizontal" fullWidth={true} justifyContent="flex-end" flex={1}>
+            <Kb.Text
+              type="BodySmallSecondaryLink"
+              onClick={props.onForgotPassword}
+              style={desktopStyles.forgotPassword}
+            >
+              Forgot password?
+            </Kb.Text>
+          </Kb.Box2>
+          <Kb.Box2
+            direction="vertical"
+            fullWidth={true}
+            fullHeight={true}
+            justifyContent="flex-end"
+            flex={1}
+          >
+            <Kb.WaitingButton
+              disabled={props.needPassword && !props.password}
+              fullWidth={true}
+              waitingKey={C.waitingKeyConfigLogin}
+              style={desktopStyles.loginSubmitButton}
+              label="Log in"
+              onClick={props.onSubmit}
+            />
+          </Kb.Box2>
+        </UserCard>
+      </Kb.Box2>
+    </SignupScreen>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        ...Kb.Styles.globalStyles.flexBoxColumn,
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center',
+      },
+      contentBox: {
+        alignSelf: 'center',
+        maxWidth: 460,
+        padding: Kb.Styles.globalMargins.small,
+      },
+      forgotPassword: {
+        marginTop: Kb.Styles.globalMargins.tiny,
+      },
+      header: {
+        borderBottomWidth: 0,
+      },
+      inputRow: {
+        marginBottom: 0,
+        marginTop: Kb.Styles.globalMargins.tiny,
+        width: '100%',
+      },
+      loginSubmitButton: {
+        marginTop: 0,
+        maxHeight: 32,
+        width: '100%',
+      },
+      other: {color: Kb.Styles.globalColors.black},
+      provisioned: {color: Kb.Styles.globalColors.orange},
+      userContainer: {
+        backgroundColor: Kb.Styles.globalColors.transparent,
+        flex: 1,
+      },
+      userDropdown: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        width: '100%',
+      },
+      userOverlayStyle: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        width: 348,
+      },
+      userRow: {
+        alignItems: 'center',
+        marginLeft: Kb.Styles.globalMargins.xsmall,
+        minHeight: 40,
+        width: '100%',
+      },
+    }) as const
+)
+
+// Native login
+
+const NativeLoginRender = (props: Props) => {
+  const [scrollViewHeight, setScrollViewHeight] = React.useState<number | undefined>(undefined)
+  const inputProps = {
+    autoFocus: true,
+    error: !!props.error,
+    keyboardType: props.showTyping && isAndroid ? 'visible-password' : 'default',
+    onChangeText: (password: string) => props.passwordChange(password),
+    onEnterKeyDown: () => props.onSubmit(),
+    placeholder: 'Password',
+    secureTextEntry: !props.showTyping,
+  } as const
+
+  return (
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      onLayout={evt => setScrollViewHeight(evt.nativeEvent.layout.height)}
+      style={Kb.Styles.globalStyles.flexOne}
+    >
+      <Kb.ScrollView style={nativeStyles.scrollView} contentContainerStyle={{minHeight: scrollViewHeight}}>
+        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" flex={1} style={nativeStyles.container}>
+          {isAndroid && !C.isDeviceSecureAndroid && !isAndroidNewerThanM && (
+            <Kb.Box2 direction="vertical" fullWidth={true} style={nativeStyles.deviceNotSecureContainer}>
+              <Kb.Text center={true} type="Body" negative={true} style={nativeStyles.deviceNotSecureText}>
+                {"Since you don't have a lock screen, you'll have to type your password everytime."}
+              </Kb.Text>
+            </Kb.Box2>
+          )}
+          {!!props.error && <Kb.Banner color="red">{props.error}</Kb.Banner>}
+          <UserCard username={props.selectedUser} outerStyle={nativeStyles.card} style={nativeStyles.cardInner}>
+            <Dropdown
+              type="Username"
+              value={props.selectedUser}
+              onClick={props.selectedUserChange}
+              onOther={props.onSomeoneElse}
+              options={props.users}
+            />
+            {props.needPassword && (
+              <Kb.Box2 direction="vertical" gap="tiny" gapEnd={true} gapStart={true} fullWidth={true}>
+                <Kb.Input3 {...inputProps} />
+                <Kb.Checkbox
+                  checked={props.showTyping}
+                  label="Show typing"
+                  onCheck={check => props.showTypingChange(check)}
+                  style={nativeStyles.formElements}
+                />
+              </Kb.Box2>
+            )}
+            <Kb.WaitingButton
+              disabled={props.needPassword && !props.password}
+              waitingKey={C.waitingKeyConfigLogin}
+              style={{
+                marginTop: props.needPassword ? 0 : Kb.Styles.globalMargins.small,
+                width: '100%',
+              }}
+              fullWidth={true}
+              label="Log in"
+              onClick={props.onSubmit}
+            />
+            <Kb.Text
+              type="BodySmallSecondaryLink"
+              center={true}
+              onClick={props.onForgotPassword}
+              style={{
+                marginBottom: Kb.Styles.globalMargins.tiny,
+                marginTop: Kb.Styles.globalMargins.medium,
+              }}
+            >
+              Forgot password?
+            </Kb.Text>
+            <Kb.Text center={true} type="BodySmallSecondaryLink" onClick={props.onFeedback}>
+              Problems logging in?
+            </Kb.Text>
+          </UserCard>
+          <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
+          <Kb.Box2 direction="vertical" fullWidth={true} style={nativeStyles.createAccountContainer}>
+            <Kb.Button
+              fullWidth={true}
+              label="Create account"
+              mode="Secondary"
+              onClick={props.onSignup}
+              style={{flexGrow: 0}}
+            />
+          </Kb.Box2>
+        </Kb.Box2>
+      </Kb.ScrollView>
+    </Kb.Box2>
+  )
+}
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      card: {
+        marginTop: Kb.Styles.globalMargins.medium,
+        width: '100%',
+      },
+      cardInner: Kb.Styles.platformStyles({
+        isTablet: {paddingBottom: 0},
+      }),
+      container: {
+        backgroundColor: Kb.Styles.globalColors.blueGrey,
+      },
+      createAccountContainer: Kb.Styles.platformStyles({
+        common: {padding: Kb.Styles.globalMargins.medium},
+        isTablet: {maxWidth: 410, padding: Kb.Styles.globalMargins.small},
+      }),
+      deviceNotSecureContainer: {
+        alignSelf: 'stretch',
+        backgroundColor: Kb.Styles.globalColors.yellow,
+        paddingBottom: Kb.Styles.globalMargins.tiny,
+        paddingTop: Kb.Styles.globalMargins.tiny,
+      },
+      deviceNotSecureText: {
+        color: Kb.Styles.globalColors.brown_75,
+      },
+      formElements: {
+        marginBottom: Kb.Styles.globalMargins.tiny,
+      },
+      scrollView: {
+        backgroundColor: Kb.Styles.globalColors.blueGrey,
+      },
+    }) as const
+)
+
+export default isMobile ? NativeLoginRender : DesktopLogin
diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx
index 208f3ad595af..c9a8e143d3d5 100644
--- a/shared/menubar/index.desktop.tsx
+++ b/shared/menubar/index.desktop.tsx
@@ -7,7 +7,7 @@ import * as RemoteGen from '@/constants/remote-actions'
 import * as FsUtil from '@/util/kbfs'
 import * as TimestampUtil from '@/util/timestamp'
 import Filename from '@/fs/common/filename'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import OutOfDate from './out-of-date'
 import Upload from '@/fs/footer/upload'
 import {openURL as openUrl} from '@/util/misc'
diff --git a/shared/menubar/main.desktop.tsx b/shared/menubar/main.desktop.tsx
index 06f1bc3b7d9c..aac114683bf5 100644
--- a/shared/menubar/main.desktop.tsx
+++ b/shared/menubar/main.desktop.tsx
@@ -1,6 +1,6 @@
 // Entry point for the menubar render window
 import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron.desktop'
+import {waitOnKB2Loaded} from '@/util/electron'
 waitOnKB2Loaded(() => {
   import('./main2.desktop').then(() => {}).catch(() => {})
 })
diff --git a/shared/menubar/remote-proxy.desktop.tsx b/shared/menubar/remote-proxy.desktop.tsx
index e9322d5bcca3..93f7d2006d72 100644
--- a/shared/menubar/remote-proxy.desktop.tsx
+++ b/shared/menubar/remote-proxy.desktop.tsx
@@ -5,7 +5,7 @@ import {ensureWidgetMetas, useInboxMetadataState} from '@/chat/inbox/metadata'
 import {useConfigState} from '@/stores/config'
 import * as T from '@/constants/types'
 import * as React from 'react'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import useSerializeProps from '../desktop/remote/use-serialize-props.desktop'
 import type {Props, Conversation, RemoteTlfUpdates} from './index.desktop'
 import {useColorScheme} from 'react-native'
diff --git a/shared/native-only-modules.js b/shared/native-only-modules.js
index 28beb3d716dc..c765646aefaa 100644
--- a/shared/native-only-modules.js
+++ b/shared/native-only-modules.js
@@ -19,4 +19,13 @@ module.exports = [
   'expo-modules-core',
   'react-native-kb',
   '@react-native-picker/picker',
+  'expo-clipboard',
+  'expo-image',
+  'expo-contacts',
+  'expo-localization',
+  'expo-media-library',
+  'expo-file-system',
+  '@callstack/liquid-glass',
+  'react-native-screens/experimental',
+  '@react-navigation/bottom-tabs',
 ]
diff --git a/shared/people/container.tsx b/shared/people/container.tsx
index 22793ad088b3..d1854766d417 100644
--- a/shared/people/container.tsx
+++ b/shared/people/container.tsx
@@ -125,8 +125,8 @@ const descriptionForTodoItem = (todo: T.RPCGen.HomeScreenTodo) => {
     case t.verifyAllEmail:
       return `Your email address *${todo.verifyAllEmail}* is unverified.`
     case t.verifyAllPhoneNumber: {
-      const {e164ToDisplay} = require('@/util/phone-numbers') as {e164ToDisplay: typeof e164ToDisplayType}
       const p = todo.verifyAllPhoneNumber
+      const {e164ToDisplay} = require('@/util/phone-numbers') as {e164ToDisplay: typeof e164ToDisplayType}
       return `Your number *${p ? e164ToDisplay(p) : ''}* is unverified.`
     }
     default: {
diff --git a/shared/pinentry/main.desktop.tsx b/shared/pinentry/main.desktop.tsx
index 6e63c296e84f..946161bd056c 100644
--- a/shared/pinentry/main.desktop.tsx
+++ b/shared/pinentry/main.desktop.tsx
@@ -1,4 +1,4 @@
 // Entry point for the pinentry render window
 import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron.desktop'
+import {waitOnKB2Loaded} from '@/util/electron'
 waitOnKB2Loaded(() => require('./main2.desktop') as () => void)
diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx
index 8a4721130531..02fd265a9580 100644
--- a/shared/profile/edit-avatar/index.tsx
+++ b/shared/profile/edit-avatar/index.tsx
@@ -7,18 +7,11 @@ import {useSafeNavigation} from '@/util/safe-navigation'
 import {ModalTitle} from '@/teams/common'
 import useHooks from './hooks'
 import './edit-avatar.css'
+import KB2 from '@/util/electron'
+import {launchImageLibraryAsync} from '@/util/expo-image-picker'
+import {CropZoom, type CropZoomRefType} from 'react-native-zoom-toolkit'
 
-// Desktop-only helpers loaded conditionally at module level (no runtime error on mobile since
-// these values are only referenced inside the desktop branch)
-const KB2 = !isMobile
-  ? (require('@/util/electron.desktop').default as {
-      functions: {
-        isDirectory?: (path: string) => Promise<boolean>
-        getPathForFile?: (file: {name?: string; size?: number}) => string
-      }
-    })
-  : undefined
-const desktopFns = KB2?.functions ?? {}
+const desktopFns = isMobile ? ({} as typeof KB2.functions) : KB2.functions
 
 const AVATAR_CONTAINER_SIZE = 300
 
@@ -41,7 +34,7 @@ const getFile = async (fileList: FileListLike | undefined): Promise<string> => {
   if (!file) {
     return ''
   }
-  const path = getPathForFile?.(file) ?? ''
+  const path = getPathForFile?.(file as unknown as File) ?? ''
   if (!path) {
     return ''
   }
@@ -233,12 +226,6 @@ const NativeAvatarUploadWrapper = (p: Props) => {
   const onChooseNewAvatar = () => {
     const f = async () => {
       try {
-        const {launchImageLibraryAsync} = require('@/util/expo-image-picker') as {
-          launchImageLibraryAsync: (type: string) => Promise<{
-            canceled: boolean
-            assets?: Array<{uri: string; width: number; height: number; type?: string}>
-          }>
-        }
         const result = await launchImageLibraryAsync('photo')
         const first = result.assets?.reduce<ImageInfo | undefined>((acc, a) => {
           if (!acc && (a.type === 'image' || a.type === 'video')) {
@@ -263,12 +250,6 @@ const NativeAvatarUploadWrapper = (p: Props) => {
     if (!wizard && noImage) {
       const f = async () => {
         try {
-          const {launchImageLibraryAsync} = require('@/util/expo-image-picker') as {
-            launchImageLibraryAsync: (type: string) => Promise<{
-              canceled: boolean
-              assets?: Array<{uri: string; width: number; height: number; type?: string}>
-            }>
-          }
           const result = await launchImageLibraryAsync('photo')
           const first = result.assets?.reduce<ImageInfo | undefined>((acc, a) => {
             if (!acc && (a.type === 'image' || a.type === 'video')) {
@@ -423,19 +404,6 @@ function NativeAvatarZoom(p: {src?: string; width: number; height: number; ref?:
   const {src, width, height, ref} = p
   const resolution = {height, width}
 
-  // Load CropZoom lazily (native only)
-  const {CropZoom, type: _unused} = require('react-native-zoom-toolkit') as {
-    CropZoom: React.ComponentType<{
-      cropSize: {width: number; height: number}
-      resolution: {width: number; height: number}
-      ref?: React.Ref<{crop: (size: number) => {resize?: {width: number}; crop: {originX: number; originY: number; width: number; height: number}}}>
-      panMode?: string
-      minScale?: number
-      children?: React.ReactNode
-    }>
-    type: unknown
-  }
-  type CropZoomRefType = {crop: (size: number) => {resize?: {width: number}; crop: {originX: number; originY: number; width: number; height: number}}}
 
   React.useImperativeHandle(ref, () => {
     return {
diff --git a/shared/provision/code-page/qr-scan/scanner.desktop.tsx b/shared/provision/code-page/qr-scan/scanner.desktop.tsx
deleted file mode 100644
index c94238fbd2e0..000000000000
--- a/shared/provision/code-page/qr-scan/scanner.desktop.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type * as React from 'react'
-import type * as Kb from '@/common-adapters'
-
-type Props = {
-  onBarCodeRead: (code: string) => void
-  notAuthorizedView: React.ReactElement | null
-  style: Kb.Styles.StylesCrossPlatform
-}
-
-const QRScanner = (_p: Props): null => null
-export default QRScanner
diff --git a/shared/provision/code-page/qr-scan/scanner.native.tsx b/shared/provision/code-page/qr-scan/scanner.tsx
similarity index 90%
rename from shared/provision/code-page/qr-scan/scanner.native.tsx
rename to shared/provision/code-page/qr-scan/scanner.tsx
index 2e3eaa821302..e22a9b95f37c 100644
--- a/shared/provision/code-page/qr-scan/scanner.native.tsx
+++ b/shared/provision/code-page/qr-scan/scanner.tsx
@@ -8,7 +8,7 @@ type Props = {
   style: Kb.Styles.StylesCrossPlatform
 }
 
-const QRScanner = (p: Props): React.ReactElement | null => {
+const QRScannerMobile = (p: Props): React.ReactElement | null => {
   const [scanned, setScanned] = React.useState(false)
   const [permission, requestPermission] = useCameraPermissions()
 
@@ -48,4 +48,9 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
 }))
 
+const QRScanner = (p: Props): React.ReactElement | null => {
+  if (!isMobile) return null
+  return <QRScannerMobile {...p} />
+}
+
 export default QRScanner
diff --git a/shared/router-v2/common.tsx b/shared/router-v2/common.tsx
index 59153e191d31..6b331bdc0f00 100644
--- a/shared/router-v2/common.tsx
+++ b/shared/router-v2/common.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {TabActions, type NavigationContainerRef} from '@react-navigation/core'
 import type {ParamListBase} from '@react-navigation/native'
diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx
index 49e68779ab79..9e9303b93a1b 100644
--- a/shared/router-v2/header/index.desktop.tsx
+++ b/shared/router-v2/header/index.desktop.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as Platform from '@/constants/platform'
 import SyncingFolders from './syncing-folders'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import {useConfigState} from '@/stores/config'
 import {useShellState} from '@/stores/shell'
 import type {HeaderBackButtonProps} from '@react-navigation/elements'
diff --git a/shared/router-v2/linking.tsx b/shared/router-v2/linking.tsx
index 5043bb3e6266..e33aab16ff99 100644
--- a/shared/router-v2/linking.tsx
+++ b/shared/router-v2/linking.tsx
@@ -5,6 +5,7 @@ import {useConfigState} from '@/stores/config'
 import type * as UsePushStateType from '@/stores/push'
 import type {LinkingOptions} from '@react-navigation/native'
 import type {RootParamList} from './route-params'
+import {Linking} from 'react-native'
 
 // ---- URL normalization ----
 
@@ -254,9 +255,7 @@ export const createLinkingConfig = (
     let deepLinkUrl: string | null = null
     if (isMobile) {
       try {
-         
-        const RN: {Linking: {getInitialURL: () => Promise<string | null>}} = require('react-native')
-        deepLinkUrl = await RN.Linking.getInitialURL()
+        deepLinkUrl = await Linking.getInitialURL()
       } catch {}
     }
 
@@ -342,27 +341,22 @@ export const createLinkingConfig = (
     // On native, listen for RN Linking 'url' events (warm-start deep links)
     let removeLinkingSub: (() => void) | undefined
     if (isMobile) {
-      try {
-         
-        const RN: {Linking: {addEventListener: (type: string, handler: (e: {url: string}) => void) => {remove: () => void}}} = require('react-native')
-        const {Linking} = RN
-        const sub = Linking.addEventListener('url', ({url}: {url: string}) => {
-          const normalized = normalizeUrl(url)
-          if (!normalized) return
-          // Profile deep links need imperative navigation to properly set up
-          // the back stack. State-based linking may not create intermediate screens.
-          if (normalized.startsWith('keybase://profile/')) {
-            handleAppLink(normalized)
-            return
-          }
-          if (isHandledByLinkingConfig(normalized)) {
-            dedupedListener(normalized)
-          } else {
-            handleAppLink(normalized)
-          }
-        })
-        removeLinkingSub = () => sub.remove()
-      } catch {}
+      const sub = Linking.addEventListener('url', ({url}: {url: string}) => {
+        const normalized = normalizeUrl(url)
+        if (!normalized) return
+        // Profile deep links need imperative navigation to properly set up
+        // the back stack. State-based linking may not create intermediate screens.
+        if (normalized.startsWith('keybase://profile/')) {
+          handleAppLink(normalized)
+          return
+        }
+        if (isHandledByLinkingConfig(normalized)) {
+          dedupedListener(normalized)
+        } else {
+          handleAppLink(normalized)
+        }
+      })
+      removeLinkingSub = () => sub.remove()
     }
 
     return () => {
diff --git a/shared/router-v2/router.desktop.tsx b/shared/router-v2/router.desktop.tsx
deleted file mode 100644
index 47a50b949fd7..000000000000
--- a/shared/router-v2/router.desktop.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import * as Common from './common'
-import * as C from '@/constants'
-import {useConfigState} from '@/stores/config'
-import {useDarkModeState} from '@/stores/darkmode'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import * as Shared from './router.shared'
-import * as Tabs from '@/constants/tabs'
-import logger from '@/logger'
-import Header from './header/index.desktop'
-import {HeaderLeftButton} from '@/common-adapters/header-buttons'
-import {NavigationContainer} from '@react-navigation/native'
-import {createLeftTabNavigator} from './left-tab-navigator.desktop'
-import {createLinkingConfig} from './linking'
-import {handleAppLink} from '@/constants/deeplinks'
-import {modalRoutes, routes, loggedOutRoutes, tabRoots, routeMapToStaticScreens} from './routes'
-import {registerDebugClear} from '@/util/debug'
-import {useDaemonState} from '@/stores/daemon'
-import {useCurrentUserState} from '@/stores/current-user'
-import {createNativeStackNavigator} from '@react-navigation/native-stack'
-import {LoadedTeamsListProvider} from '@/teams/use-teams-list'
-
-import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
-import {makeLayout} from './screen-layout.desktop'
-import './router.css'
-
-const Tab = createLeftTabNavigator()
-
-const appTabsInnerOptions = {
-  ...Common.defaultNavigationOptions,
-  header: undefined,
-  headerShown: false,
-  tabBarActiveBackgroundColor: Kb.Styles.globalColors.blueDarkOrGreyDarkest,
-  tabBarHideOnKeyboard: true,
-  tabBarInactiveBackgroundColor: Kb.Styles.globalColors.blueDarkOrGreyDarkest,
-  tabBarShowLabel: Kb.Styles.isTablet,
-  tabBarStyle: Common.tabBarStyle,
-}
-
-const tabScreensConfig = routeMapToStaticScreens(routes, makeLayout, false, false, true)
-
-const tabComponents: Record<string, React.ComponentType> = {}
-for (const tab of Tabs.desktopTabs) {
-  const nav = createNativeStackNavigator({
-    initialRouteName: tabRoots[tab],
-    screenOptions: Common.defaultNavigationOptions as NativeStackNavigationOptions,
-    screens: tabScreensConfig,
-  })
-  tabComponents[tab] = nav.getComponent()
-}
-
-function AppTabsInner() {
-  return (
-    <Tab.Navigator backBehavior="none" screenOptions={appTabsInnerOptions}>
-      {Tabs.desktopTabs.map(tab => (
-        <Tab.Screen key={tab} name={tab} component={tabComponents[tab]!} />
-      ))}
-    </Tab.Navigator>
-  )
-}
-
-const AppTabs = () => <AppTabsInner />
-
-const loggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
-const loggedOutOptions = {
-  header: p => {
-    const options: React.ComponentProps<typeof Header>['options'] = {
-      ...(p.options as React.ComponentProps<typeof Header>['options']),
-      headerBottomStyle: {height: 0},
-      headerShadowVisible: false,
-    }
-    return <Header {...p} options={options} />
-  },
-} satisfies NativeStackNavigationOptions
-const loggedOutNav = createNativeStackNavigator({
-  initialRouteName: 'login',
-  screenOptions: loggedOutOptions,
-  screens: loggedOutScreensConfig,
-})
-const LoggedOut = loggedOutNav.getComponent()
-
-const documentTitle = {
-  formatter: () => {
-    const t = C.Router2.getTab()
-    const m = t ? C.Tabs.desktopTabMeta[t] : undefined
-    const tabLabel: string = m?.label ?? ''
-    return `Keybase: ${tabLabel}`
-  },
-}
-
-const rootScreenOptions = {
-  headerLeft: () => <HeaderLeftButton mode="cancel" />,
-  headerShown: false, // eventually do this after we pull apart modal2 etc
-  presentation: 'transparentModal' as const,
-  title: '',
-} satisfies NativeStackNavigationOptions
-
-const useConnectNavToState = () => {
-  const setNavOnce = React.useRef(false)
-  React.useEffect(() => {
-    if (!setNavOnce.current) {
-      if (C.Router2.navigationRef.isReady()) {
-        setNavOnce.current = true
-
-        if (__DEV__) {
-          window.DEBUGNavigator = C.Router2.navigationRef.current
-          window.DEBUGRouter2 = C.Router2
-          window.KBCONSTANTS = require('@/constants')
-          window.KBINBOX = require('@/constants/chat')
-          registerDebugClear(() => {
-            window.DEBUGNavigator = undefined
-            window.DEBUGRouter2 = undefined
-            window.KBCONSTANTS = undefined
-            window.KBINBOX = undefined
-          })
-        }
-      }
-    }
-  }, [setNavOnce])
-}
-
-// Set up the fallback handler for emitDeepLink on desktop (no linking prop needed on Electron)
-createLinkingConfig(handleAppLink)
-
-const useIsLoading = () => {
-  const everLoadedRef = React.useRef(false)
-  return !useDaemonState(s => {
-    const loaded = everLoadedRef.current || s.handshakeState === 'done'
-    everLoadedRef.current = loaded
-    return loaded
-  })
-}
-
-const useIsLoggedIn = () => {
-  const everLoadedRef = React.useRef(false)
-  const loggedInLoaded = useDaemonState(s => {
-    const loaded = everLoadedRef.current || s.handshakeState === 'done'
-    everLoadedRef.current = loaded
-    return loaded
-  })
-  const loggedIn = useConfigState(s => s.loggedIn)
-  return loggedInLoaded && loggedIn
-}
-
-const useIsLoggedOut = () => {
-  const everLoadedRef = React.useRef(false)
-  const loggedInLoaded = useDaemonState(s => {
-    const loaded = everLoadedRef.current || s.handshakeState === 'done'
-    everLoadedRef.current = loaded
-    return loaded
-  })
-  const loggedIn = useConfigState(s => s.loggedIn)
-  return loggedInLoaded && !loggedIn
-}
-
-const modalScreensConfig = routeMapToStaticScreens(modalRoutes, makeLayout, true, false, false)
-
-const rootNav = createNativeStackNavigator({
-  groups: {
-    loggedIn: {
-      if: useIsLoggedIn,
-      screens: {
-        loggedIn: {screen: AppTabs},
-        ...modalScreensConfig,
-      },
-    },
-    loggedOut: {
-      if: useIsLoggedOut,
-      screens: {
-        loggedOut: {screen: LoggedOut},
-      },
-    },
-  },
-  screenOptions: rootScreenOptions,
-  screens: {
-    loading: {
-      if: useIsLoading,
-      screen: Shared.SimpleLoading,
-    },
-  },
-})
-const RootComponent = rootNav.getComponent()
-
-function ElectronApp() {
-  useConnectNavToState()
-
-  const onUnhandledAction = (a: Readonly<{type: string}>) => {
-    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
-  }
-
-  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
-  const onStateChange = () => {
-    const ns = C.Router2.getRootState()
-    setNavState(ns)
-  }
-
-  const navRef = (ref: typeof C.Router2.navigationRef.current) => {
-    if (ref) {
-      C.Router2.navigationRef.current = ref
-    }
-  }
-
-  const isDarkMode = useDarkModeState(s => s.isDarkMode())
-  const username = useCurrentUserState(s => s.username)
-  // Only remount the navigator when switching between logged-in users.
-  // Ignore '' → username (initial login) so in-flight unbox requests aren't interrupted.
-  const [navKey, setNavKey] = React.useState('')
-  const prevUsernameRef = React.useRef(username)
-  React.useEffect(() => {
-    const prev = prevUsernameRef.current
-    prevUsernameRef.current = username
-    if (prev && username && prev !== username) {
-      setNavKey(username)
-    }
-  }, [username])
-
-  return (
-    <NavigationContainer
-      key={navKey}
-      documentTitle={documentTitle}
-      onStateChange={onStateChange}
-      onUnhandledAction={onUnhandledAction}
-      ref={navRef}
-      theme={isDarkMode ? Shared.darkTheme : Shared.lightTheme}
-    >
-      <LoadedTeamsListProvider>
-        <RootComponent />
-      </LoadedTeamsListProvider>
-    </NavigationContainer>
-  )
-}
-
-export default ElectronApp
diff --git a/shared/router-v2/router.native.tsx b/shared/router-v2/router.native.tsx
deleted file mode 100644
index 8013d427b742..000000000000
--- a/shared/router-v2/router.native.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-/// <reference types="webpack-env" />
-import * as C from '@/constants'
-import * as Constants from '@/constants/router'
-import {useConfigState} from '@/stores/config'
-import {useDarkModeState} from '@/stores/darkmode'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import * as Shared from './router.shared'
-import * as Tabs from '@/constants/tabs'
-import * as Common from './common'
-import logger from '@/logger'
-import {Platform, StatusBar, View} from 'react-native'
-import {HeaderLeftButton} from '@/common-adapters/header-buttons'
-import {NavigationContainer, type NavigationProp} from '@react-navigation/native'
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
-import {modalRoutes, routes, loggedOutRoutes, tabRoots, routeMapToStaticScreens} from './routes'
-import {createNativeStackNavigator} from '@react-navigation/native-stack'
-import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
-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'
-import type {RootParamList} from './route-params'
-import {handleAppLink} from '@/constants/deeplinks'
-import {useDaemonState} from '@/stores/daemon'
-import {useNotifState} from '@/stores/notifications'
-import {usePushState} from '@/stores/push'
-import {LoadedTeamsListProvider} from '@/teams/use-teams-list'
-import {colors} from '@/styles/colors'
-
-const isLiquidGlassSupported = _isLiquidGlassSupported as boolean
-
-if (module.hot) {
-  module.hot.accept('', () => {})
-}
-
-const tabToLabel = new Map<string, string>([
-  [Tabs.chatTab, 'Chat'],
-  [Tabs.fsTab, 'Files'],
-  [Tabs.teamsTab, 'Teams'],
-  [Tabs.peopleTab, 'People'],
-  [Tabs.settingsTab, 'More'],
-])
-
-// just to get badge rollups
-const tabs = C.isTablet ? Tabs.tabletTabs : Tabs.phoneTabs
-
-const Tab = createBottomTabNavigator()
-const tabRoutes = routes
-const settingsTabChildren = [Tabs.gitTab, Tabs.devicesTab, Tabs.settingsTab] as const
-
-const tabStackOptions = ({
-  navigation,
-}: {
-  navigation: {canGoBack: () => boolean}
-}): NativeStackNavigationOptions => ({
-  ...Common.defaultNavigationOptions,
-  // Use the native back button (liquid glass pill on iOS 26) for non-root screens;
-  // omit headerLeft entirely on root screens so no empty glass circle appears.
-  headerBackVisible: navigation.canGoBack(),
-  headerLeft: undefined,
-})
-
-// On phones, each tab stack only contains its root screen. All other routes live in
-// the root stack (alongside chatConversation) so they render above the tab bar.
-const tabRootNameSet = new Set<string>(Object.values(tabRoots).filter(Boolean))
-const phoneRootRoutes = Object.fromEntries(
-  Object.entries(tabRoutes).filter(([name]) => !tabRootNameSet.has(name))
-) as typeof tabRoutes
-
-const tabScreensConfig = routeMapToStaticScreens(tabRoutes, makeLayout, false, false, true)
-const phoneRootScreensConfig = routeMapToStaticScreens(
-  C.isTablet ? {} : phoneRootRoutes,
-  makeLayout,
-  false,
-  false,
-  false
-)
-
-const tabComponents: Record<string, React.ComponentType> = {}
-for (const tab of tabs) {
-  if (C.isTablet) {
-    const nav = createNativeStackNavigator({
-      initialRouteName: tabRoots[tab],
-      screenOptions: tabStackOptions,
-      screens: tabScreensConfig,
-    })
-    tabComponents[tab] = nav.getComponent()
-  } else {
-    const rootName = tabRoots[tab]
-    const rootScreenConfig = routeMapToStaticScreens(
-      {[rootName]: tabRoutes[rootName as keyof typeof tabRoutes]} as typeof tabRoutes,
-      makeLayout,
-      false,
-      false,
-      true
-    )
-    const nav = createNativeStackNavigator({
-      initialRouteName: rootName,
-      screenOptions: tabStackOptions,
-      screens: rootScreenConfig,
-    })
-    tabComponents[tab] = nav.getComponent()
-  }
-}
-
-const androidTabIcons = new Map<Tabs.Tab, number>([
-  [Tabs.chatTab, require('../images/icons/icon-nav-chat-32.png')],
-  [Tabs.fsTab, require('../images/icons/icon-nav-folders-32.png')],
-  [Tabs.peopleTab, require('../images/icons/icon-nav-people-32.png')],
-  [Tabs.settingsTab, require('../images/icons/icon-nav-settings-32.png')],
-  [Tabs.teamsTab, require('../images/icons/icon-nav-teams-32.png')],
-])
-
-const iosTabIcons = new Map<Tabs.Tab, {active: SFSymbol; inactive: SFSymbol}>([
-  [Tabs.chatTab, {active: 'bubble.fill', inactive: 'bubble'}],
-  [Tabs.fsTab, {active: 'folder.fill', inactive: 'folder'}],
-  [Tabs.peopleTab, {active: 'person.crop.rectangle.fill', inactive: 'person.crop.rectangle'}],
-  [Tabs.settingsTab, {active: 'line.3.horizontal.circle.fill', inactive: 'line.3.horizontal'}],
-  [Tabs.teamsTab, {active: 'person.2.fill', inactive: 'person.2'}],
-])
-
-const getNativeTabIcon = (tab: Tabs.Tab) => {
-  if (Platform.OS === 'ios') {
-    const icon = iosTabIcons.get(tab)
-    return icon
-      ? ({focused}: {focused: boolean}) => ({
-          name: focused ? icon.active : icon.inactive,
-          type: 'sfSymbol' as const,
-        })
-      : undefined
-  }
-  const source = androidTabIcons.get(tab)
-  return source ? {source, type: 'image' as const} : undefined
-}
-
-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
-  )
-  return count || undefined
-}
-
-const appTabsScreenOptions = (
-  routeName: Tabs.Tab,
-  navBadges: ReadonlyMap<Tabs.Tab, number>,
-  hasPermissions: boolean,
-  isDarkMode: boolean
-) => {
-  return {
-    headerShown: false,
-    overrideScrollViewContentInsetAdjustmentBehavior: true,
-    tabBarBadge: getBadgeNumber(routeName, navBadges, hasPermissions),
-    tabBarBadgeStyle: {
-      backgroundColor: isLiquidGlassSupported ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.orange,
-    },
-    ...(isIOS
-      ? {
-          tabBarActiveIndicatorEnabled: false,
-          ...(isLiquidGlassSupported
-            ? {
-                tabBarBlurEffect: Common.tabBarBlurEffect,
-              }
-            : {
-                tabBarActiveTintColor: Kb.Styles.globalColors.whiteOrWhite,
-                tabBarInactiveTintColor: isDarkMode ? colors.black : colors.blueDarker,
-                tabBarMinimizeBehavior: Common.tabBarMinimizeBehavior,
-              }),
-        }
-      : {
-          tabBarActiveIndicatorColor: 'rgba(255,255,255,0.15)',
-          tabBarActiveIndicatorEnabled: true,
-          tabBarActiveTintColor: Kb.Styles.globalColors.white,
-          tabBarInactiveTintColor: Kb.Styles.globalColors.blueLighter,
-        }),
-    tabBarIcon: getNativeTabIcon(routeName),
-    tabBarLabel: tabToLabel.get(routeName) ?? routeName,
-    tabBarLabelVisibilityMode: 'labeled' as const,
-    tabBarMinimizeBehavior: 'none' as const, // until this actually works on all screens, not sure why it only
-    tabBarStyle: {backgroundColor: isDarkMode ? colors.greyDarkest : colors.blueDark},
-    // works on chat inbox now
-    title: tabToLabel.get(routeName) ?? routeName,
-  }
-}
-function AppTabs() {
-  const navBadges = useNotifState(s => s.navBadges)
-  const hasPermissions = usePushState(s => s.hasPermissions)
-  const isDarkMode = useDarkModeState(s => s.isDarkMode())
-
-  return (
-    <Tab.Navigator backBehavior="none">
-      {tabs.map(tab => (
-        <Tab.Screen
-          key={tab}
-          name={tab}
-          component={tabComponents[tab]!}
-          options={appTabsScreenOptions(tab, navBadges, hasPermissions, isDarkMode)}
-        />
-      ))}
-    </Tab.Navigator>
-  )
-}
-
-const loggedOutScreenOptions = {
-  ...Common.defaultNavigationOptions,
-} as const
-const loggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
-const loggedOutNav = createNativeStackNavigator({
-  initialRouteName: 'login',
-  screenOptions: loggedOutScreenOptions as NativeStackNavigationOptions,
-  screens: loggedOutScreensConfig,
-})
-const LoggedOut = loggedOutNav.getComponent()
-
-const rootStackScreenOptions = {headerBackButtonDisplayMode: 'minimal'} satisfies NativeStackNavigationOptions
-const modalScreenOptions = ({
-  navigation,
-}: {
-  navigation: NavigationProp<RootParamList>
-}): NativeStackNavigationOptions => {
-  const cancelItem: NativeStackNavigationOptions =
-    Platform.OS === 'ios'
-      ? {
-          unstable_headerLeftItems: () => [
-            {label: 'Cancel', onPress: () => navigation.goBack(), type: 'button' as const},
-          ],
-        }
-      : {headerLeft: () => <HeaderLeftButton mode="cancel" />}
-  return {
-    ...cancelItem,
-    headerShown: true,
-    presentation: 'modal',
-    title: '',
-  }
-}
-
-const useIsLoggedIn = () => useConfigState(s => s.loggedIn)
-const useIsLoggedOut = () => !useConfigState(s => s.loggedIn)
-
-const modalScreensConfig = routeMapToStaticScreens(modalRoutes, makeLayout, true, false, false)
-
-const rootNav = createNativeStackNavigator({
-  groups: {
-    loggedIn: {
-      if: useIsLoggedIn,
-      screens: {
-        loggedIn: {options: {headerShown: false}, screen: AppTabs},
-        ...phoneRootScreensConfig,
-      },
-    },
-    loggedOut: {
-      if: useIsLoggedOut,
-      screens: {
-        loggedOut: {options: {headerShown: false}, screen: LoggedOut},
-      },
-    },
-    modals: {
-      if: useIsLoggedIn,
-      screenOptions: modalScreenOptions as NativeStackNavigationOptions,
-      screens: modalScreensConfig,
-    },
-  },
-  screenOptions: rootStackScreenOptions,
-})
-const RootComponent = rootNav.getComponent()
-
-// Create once, stable across renders. handleAppLink is used as fallback for
-// URL patterns not yet handled by the linking config.
-const linkingConfig = createLinkingConfig(handleAppLink)
-
-function RNApp() {
-  const everLoadedRef = React.useRef(false)
-  const loggedInLoaded = useDaemonState(s => {
-    const loaded = everLoadedRef.current || s.handshakeState === 'done'
-    everLoadedRef.current = loaded
-    return loaded
-  })
-
-  const {loggedIn, startupLoaded} = useConfigState(
-    C.useShallow(s => ({loggedIn: s.loggedIn, startupLoaded: s.startup.loaded}))
-  )
-  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
-  const onStateChange = () => {
-    const ns = C.Router2.getRootState()
-    setNavState(ns)
-  }
-  // Sync the initial state from the linking config into the router store.
-  // onStateChange doesn't fire for the initial state, so this ensures
-  // onRouteChanged runs and conversation data gets loaded on startup.
-  const onReady = onStateChange
-
-  const onUnhandledAction = (a: Readonly<{type: string}>) => {
-    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
-  }
-
-  const navRef = (ref: typeof Constants.navigationRef.current) => {
-    if (ref) {
-      Constants.navigationRef.current = ref
-    }
-  }
-
-  const {barStyle, isDarkMode} = useDarkModeState(
-    C.useShallow(s => {
-      const isDarkMode = s.isDarkMode()
-      const barStyle =
-        s.darkModePreference === 'system'
-          ? ('default' as const)
-          : isDarkMode
-            ? ('light-content' as const)
-            : ('dark-content' as const)
-      return {barStyle, isDarkMode}
-    })
-  )
-  const bar = barStyle === 'default' ? null : <StatusBar barStyle={barStyle} />
-  const rootKey = useRootKey()
-
-  if (!loggedInLoaded || (loggedIn && !startupLoaded)) {
-    return (
-      <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.fillAbsolute}>
-        <Shared.SimpleLoading />
-      </Kb.Box2>
-    )
-  }
-
-  return (
-    <Kb.Box2 direction="vertical" pointerEvents="box-none" fullWidth={true} fullHeight={true} key={rootKey}>
-      {bar}
-      <NavigationContainer
-        fallback={<View style={{backgroundColor: Kb.Styles.globalColors.white, flex: 1}} />}
-        linking={loggedIn ? linkingConfig : undefined}
-        onReady={onReady}
-        onStateChange={onStateChange}
-        onUnhandledAction={onUnhandledAction}
-        ref={navRef}
-        theme={isDarkMode ? Shared.darkTheme : Shared.lightTheme}
-      >
-        <LoadedTeamsListProvider>
-          <RootComponent />
-        </LoadedTeamsListProvider>
-      </NavigationContainer>
-    </Kb.Box2>
-  )
-}
-
-export default RNApp
diff --git a/shared/router-v2/router.tsx b/shared/router-v2/router.tsx
new file mode 100644
index 000000000000..acaf9e0b3767
--- /dev/null
+++ b/shared/router-v2/router.tsx
@@ -0,0 +1,635 @@
+/// <reference types="webpack-env" />
+import * as C from '@/constants'
+import * as Common from './common'
+import {useConfigState} from '@/stores/config'
+import {useDarkModeState} from '@/stores/darkmode'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import * as Shared from './router.shared'
+import * as Tabs from '@/constants/tabs'
+import logger from '@/logger'
+import {HeaderLeftButton} from '@/common-adapters/header-buttons'
+import {NavigationContainer} from '@react-navigation/native'
+import {createLinkingConfig} from './linking'
+import {handleAppLink} from '@/constants/deeplinks'
+import {modalRoutes, routes, loggedOutRoutes, tabRoots, routeMapToStaticScreens} from './routes'
+import {useDaemonState} from '@/stores/daemon'
+import {LoadedTeamsListProvider} from '@/teams/use-teams-list'
+import {makeLayout} from './screen-layout'
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
+import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+import type {SFSymbol} from 'sf-symbols-typescript'
+import type {NavigationProp} from '@react-navigation/native'
+import type {RootParamList} from './route-params'
+import {useCurrentUserState} from '@/stores/current-user'
+import * as Constants from '@/constants/router'
+import {useNotifState} from '@/stores/notifications'
+import {usePushState} from '@/stores/push'
+import {colors} from '@/styles/colors'
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
+import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
+import {StatusBar, View, useColorScheme} from 'react-native'
+const isLiquidGlassSupported = isMobile ? (_isLiquidGlassSupported as boolean) : false
+
+// ─── Desktop ──────────────────────────────────────────────────────────────────
+
+if (!isMobile) {
+  // Set up the fallback handler for emitDeepLink on desktop (no linking prop needed on Electron)
+  createLinkingConfig(handleAppLink)
+}
+
+// Inline structural type for the left-tab navigator (avoids importing from .desktop.tsx)
+type LeftTabNavigatorType = {
+  Navigator: React.ComponentType<{
+    backBehavior?: string
+    screenOptions?: object
+    children?: React.ReactNode
+  }>
+  Screen: React.ComponentType<{
+    name: string
+    component: React.ComponentType
+    key?: string
+  }>
+}
+
+let desktopTab: LeftTabNavigatorType | undefined
+const desktopTabComponents: Record<string, React.ComponentType> = {}
+let DesktopRootComponent: React.ComponentType
+let LoggedOutDesktop: React.ComponentType
+
+if (!isMobile) {
+  const {createLeftTabNavigator} = require('./left-tab-navigator.desktop') as {
+    createLeftTabNavigator: () => LeftTabNavigatorType
+  }
+  desktopTab = createLeftTabNavigator()
+
+  const desktopTabScreensConfig = routeMapToStaticScreens(routes, makeLayout, false, false, true)
+
+  const appTabsInnerOptions = {
+    ...Common.defaultNavigationOptions,
+    header: undefined,
+    headerShown: false,
+    tabBarActiveBackgroundColor: Kb.Styles.globalColors.blueDarkOrGreyDarkest,
+    tabBarHideOnKeyboard: true,
+    tabBarInactiveBackgroundColor: Kb.Styles.globalColors.blueDarkOrGreyDarkest,
+    tabBarShowLabel: Kb.Styles.isTablet,
+    tabBarStyle: Common.tabBarStyle,
+  }
+
+  for (const tab of Tabs.desktopTabs) {
+    const nav = createNativeStackNavigator({
+      initialRouteName: tabRoots[tab],
+      screenOptions: Common.defaultNavigationOptions as NativeStackNavigationOptions,
+      screens: desktopTabScreensConfig,
+    })
+    desktopTabComponents[tab] = nav.getComponent()
+  }
+
+  // Keep appTabsInnerOptions stable (defined above before the loop)
+  const capturedOptions = appTabsInnerOptions
+  const capturedTab = desktopTab
+
+  function AppTabsInnerDesktop() {
+    return (
+      <capturedTab.Navigator backBehavior="none" screenOptions={capturedOptions}>
+        {Tabs.desktopTabs.map(tab => (
+          <capturedTab.Screen key={tab} name={tab} component={desktopTabComponents[tab]!} />
+        ))}
+      </capturedTab.Navigator>
+    )
+  }
+  const AppTabsDesktop = () => <AppTabsInnerDesktop />
+
+  type DesktopHeaderProps = Record<string, unknown> & {options: Record<string, unknown>}
+  const DesktopHeaderComponent = (
+    require('./header/index.desktop') as {default: React.ComponentType<DesktopHeaderProps>}
+  ).default
+
+  const desktopLoggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
+  const desktopLoggedOutOptions = {
+    header: (p: Record<string, unknown>) => {
+      const options = {
+        ...((p['options'] as Record<string, unknown> | undefined) ?? {}),
+        headerBottomStyle: {height: 0},
+        headerShadowVisible: false,
+      }
+      return <DesktopHeaderComponent {...p} options={options} />
+    },
+  } satisfies NativeStackNavigationOptions
+
+  const loggedOutNav = createNativeStackNavigator({
+    initialRouteName: 'login',
+    screenOptions: desktopLoggedOutOptions,
+    screens: desktopLoggedOutScreensConfig,
+  })
+  LoggedOutDesktop = loggedOutNav.getComponent()
+
+  const desktopRootScreenOptions = {
+    headerLeft: () => <HeaderLeftButton mode="cancel" />,
+    headerShown: false, // eventually do this after we pull apart modal2 etc
+    presentation: 'transparentModal' as const,
+    title: '',
+  } satisfies NativeStackNavigationOptions
+
+  const useIsLoadingDesktop = () => {
+    const everLoadedRef = React.useRef(false)
+    return !useDaemonState(s => {
+      const loaded = everLoadedRef.current || s.handshakeState === 'done'
+      everLoadedRef.current = loaded
+      return loaded
+    })
+  }
+
+  const useIsLoggedInDesktop = () => {
+    const everLoadedRef = React.useRef(false)
+    const loggedInLoaded = useDaemonState(s => {
+      const loaded = everLoadedRef.current || s.handshakeState === 'done'
+      everLoadedRef.current = loaded
+      return loaded
+    })
+    const loggedIn = useConfigState(s => s.loggedIn)
+    return loggedInLoaded && loggedIn
+  }
+
+  const useIsLoggedOutDesktop = () => {
+    const everLoadedRef = React.useRef(false)
+    const loggedInLoaded = useDaemonState(s => {
+      const loaded = everLoadedRef.current || s.handshakeState === 'done'
+      everLoadedRef.current = loaded
+      return loaded
+    })
+    const loggedIn = useConfigState(s => s.loggedIn)
+    return loggedInLoaded && !loggedIn
+  }
+
+  const desktopModalScreensConfig = routeMapToStaticScreens(modalRoutes, makeLayout, true, false, false)
+
+  const desktopRootNav = createNativeStackNavigator({
+    groups: {
+      loggedIn: {
+        if: useIsLoggedInDesktop,
+        screens: {
+          loggedIn: {screen: AppTabsDesktop},
+          ...desktopModalScreensConfig,
+        },
+      },
+      loggedOut: {
+        if: useIsLoggedOutDesktop,
+        screens: {
+          loggedOut: {screen: LoggedOutDesktop},
+        },
+      },
+    },
+    screenOptions: desktopRootScreenOptions,
+    screens: {
+      loading: {
+        if: useIsLoadingDesktop,
+        screen: Shared.SimpleLoading,
+      },
+    },
+  })
+  DesktopRootComponent = desktopRootNav.getComponent()
+}
+
+const useConnectNavToState = () => {
+  const setNavOnce = React.useRef(false)
+  React.useEffect(() => {
+    if (!setNavOnce.current) {
+      if (C.Router2.navigationRef.isReady()) {
+        setNavOnce.current = true
+
+        if (__DEV__) {
+          const w = window as unknown as Record<string, unknown> | undefined
+          if (w) {
+            w['DEBUGNavigator'] = C.Router2.navigationRef.current
+            w['DEBUGRouter2'] = C.Router2
+            w['KBCONSTANTS'] = require('@/constants')
+            w['KBINBOX'] = require('@/constants/chat')
+            const {registerDebugClear} = require('@/util/debug') as {registerDebugClear: (cb: () => void) => void}
+            registerDebugClear(() => {
+              w['DEBUGNavigator'] = undefined
+              w['DEBUGRouter2'] = undefined
+              w['KBCONSTANTS'] = undefined
+              w['KBINBOX'] = undefined
+            })
+          }
+        }
+      }
+    }
+  }, [setNavOnce])
+}
+
+function DesktopRouter() {
+  useConnectNavToState()
+
+  const onUnhandledAction = (a: Readonly<{type: string}>) => {
+    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
+  }
+
+  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
+  const onStateChange = () => {
+    const ns = C.Router2.getRootState()
+    setNavState(ns)
+  }
+
+  const navRef = (ref: typeof C.Router2.navigationRef.current) => {
+    if (ref) {
+      C.Router2.navigationRef.current = ref
+    }
+  }
+
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
+  const username = useCurrentUserState(s => s.username)
+  // Only remount the navigator when switching between logged-in users.
+  // Ignore '' → username (initial login) so in-flight unbox requests aren't interrupted.
+  const [navKey, setNavKey] = React.useState('')
+  const prevUsernameRef = React.useRef(username)
+  React.useEffect(() => {
+    const prev = prevUsernameRef.current
+    prevUsernameRef.current = username
+    if (prev && username && prev !== username) {
+      setNavKey(username)
+    }
+  }, [username])
+
+  const documentTitle = {
+    formatter: () => {
+      const t = C.Router2.getTab()
+      const m = t ? C.Tabs.desktopTabMeta[t] : undefined
+      const tabLabel: string = m?.label ?? ''
+      return `Keybase: ${tabLabel}`
+    },
+  }
+
+  return (
+    <NavigationContainer
+      key={navKey}
+      documentTitle={documentTitle}
+      onStateChange={onStateChange}
+      onUnhandledAction={onUnhandledAction}
+      ref={navRef}
+      theme={isDarkMode ? Shared.darkTheme : Shared.lightTheme}
+    >
+      <LoadedTeamsListProvider>
+        <DesktopRootComponent />
+      </LoadedTeamsListProvider>
+    </NavigationContainer>
+  )
+}
+
+// ─── Native ───────────────────────────────────────────────────────────────────
+
+if (isMobile) {
+  if (module.hot) {
+    module.hot.accept('', () => {})
+  }
+}
+
+const tabToLabel = new Map<string, string>([
+  [Tabs.chatTab, 'Chat'],
+  [Tabs.fsTab, 'Files'],
+  [Tabs.teamsTab, 'Teams'],
+  [Tabs.peopleTab, 'People'],
+  [Tabs.settingsTab, 'More'],
+])
+
+// just to get badge rollups
+const nativeTabs = C.isTablet ? Tabs.tabletTabs : Tabs.phoneTabs
+const settingsTabChildren = [Tabs.gitTab, Tabs.devicesTab, Tabs.settingsTab] as const
+
+const tabStackOptions = ({
+  navigation,
+}: {
+  navigation: {canGoBack: () => boolean}
+}): NativeStackNavigationOptions => ({
+  ...Common.defaultNavigationOptions,
+  // Use the native back button (liquid glass pill on iOS 26) for non-root screens;
+  // omit headerLeft entirely on root screens so no empty glass circle appears.
+  headerBackVisible: navigation.canGoBack(),
+  headerLeft: undefined,
+})
+
+// On phones, each tab stack only contains its root screen. All other routes live in
+// the root stack (alongside chatConversation) so they render above the tab bar.
+const tabRootNameSet = new Set<string>(Object.values(tabRoots).filter(Boolean))
+const phoneRootRoutes = Object.fromEntries(
+  Object.entries(routes).filter(([name]) => !tabRootNameSet.has(name))
+) as typeof routes
+
+const nativeTabComponents: Record<string, React.ComponentType> = {}
+
+if (isMobile) {
+  const nativeTabScreensConfig = routeMapToStaticScreens(routes, makeLayout, false, false, true)
+
+  for (const tab of nativeTabs) {
+    if (C.isTablet) {
+      const nav = createNativeStackNavigator({
+        initialRouteName: tabRoots[tab],
+        screenOptions: tabStackOptions,
+        screens: nativeTabScreensConfig,
+      })
+      nativeTabComponents[tab] = nav.getComponent()
+    } else {
+      const rootName = tabRoots[tab]
+      const rootScreenConfig = routeMapToStaticScreens(
+        {[rootName]: routes[rootName as keyof typeof routes]} as typeof routes,
+        makeLayout,
+        false,
+        false,
+        true
+      )
+      const nav = createNativeStackNavigator({
+        initialRouteName: rootName,
+        screenOptions: tabStackOptions,
+        screens: rootScreenConfig,
+      })
+      nativeTabComponents[tab] = nav.getComponent()
+    }
+  }
+}
+
+const androidTabIcons = new Map<Tabs.Tab, number>(
+  isMobile
+    ? [
+        [Tabs.chatTab, require('../images/icons/icon-nav-chat-32.png')],
+        [Tabs.fsTab, require('../images/icons/icon-nav-folders-32.png')],
+        [Tabs.peopleTab, require('../images/icons/icon-nav-people-32.png')],
+        [Tabs.settingsTab, require('../images/icons/icon-nav-settings-32.png')],
+        [Tabs.teamsTab, require('../images/icons/icon-nav-teams-32.png')],
+      ]
+    : []
+)
+
+const iosTabIcons = new Map<Tabs.Tab, {active: SFSymbol; inactive: SFSymbol}>(
+  isMobile
+    ? [
+        [Tabs.chatTab, {active: 'bubble.fill', inactive: 'bubble'}],
+        [Tabs.fsTab, {active: 'folder.fill', inactive: 'folder'}],
+        [Tabs.peopleTab, {active: 'person.crop.rectangle.fill', inactive: 'person.crop.rectangle'}],
+        [Tabs.settingsTab, {active: 'line.3.horizontal.circle.fill', inactive: 'line.3.horizontal'}],
+        [Tabs.teamsTab, {active: 'person.2.fill', inactive: 'person.2'}],
+      ]
+    : []
+)
+
+const getNativeTabIcon = (tab: Tabs.Tab) => {
+  if (isIOS) {
+    const icon = iosTabIcons.get(tab)
+    return icon
+      ? ({focused}: {focused: boolean}) => ({
+          name: focused ? icon.active : icon.inactive,
+          type: 'sfSymbol' as const,
+        })
+      : undefined
+  }
+  const source = androidTabIcons.get(tab)
+  return source ? {source, type: 'image' as const} : undefined
+}
+
+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
+  )
+  return count || undefined
+}
+
+const appTabsScreenOptions = (
+  routeName: Tabs.Tab,
+  navBadges: ReadonlyMap<Tabs.Tab, number>,
+  hasPermissions: boolean,
+  isDarkMode: boolean
+) => {
+  return {
+    headerShown: false,
+    overrideScrollViewContentInsetAdjustmentBehavior: true,
+    tabBarBadge: getBadgeNumber(routeName, navBadges, hasPermissions),
+    tabBarBadgeStyle: {
+      backgroundColor: isLiquidGlassSupported ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.orange,
+    },
+    ...(isIOS
+      ? {
+          tabBarActiveIndicatorEnabled: false,
+          ...(isLiquidGlassSupported
+            ? {
+                tabBarBlurEffect: Common.tabBarBlurEffect,
+              }
+            : {
+                tabBarActiveTintColor: Kb.Styles.globalColors.whiteOrWhite,
+                tabBarInactiveTintColor: isDarkMode ? colors.black : colors.blueDarker,
+                tabBarMinimizeBehavior: Common.tabBarMinimizeBehavior,
+              }),
+        }
+      : {
+          tabBarActiveIndicatorColor: 'rgba(255,255,255,0.15)',
+          tabBarActiveIndicatorEnabled: true,
+          tabBarActiveTintColor: Kb.Styles.globalColors.white,
+          tabBarInactiveTintColor: Kb.Styles.globalColors.blueLighter,
+        }),
+    tabBarIcon: getNativeTabIcon(routeName),
+    tabBarLabel: tabToLabel.get(routeName) ?? routeName,
+    tabBarLabelVisibilityMode: 'labeled' as const,
+    tabBarMinimizeBehavior: 'none' as const, // until this actually works on all screens, not sure why it only
+    tabBarStyle: {backgroundColor: isDarkMode ? colors.greyDarkest : colors.blueDark},
+    // works on chat inbox now
+    title: tabToLabel.get(routeName) ?? routeName,
+  }
+}
+
+function AppTabsNative() {
+  const Tab = React.useMemo(() => createBottomTabNavigator(), [])
+  const navBadges = useNotifState(s => s.navBadges)
+  const hasPermissions = usePushState(s => s.hasPermissions)
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
+
+  return (
+    <Tab.Navigator backBehavior="none">
+      {nativeTabs.map(tab => (
+        <Tab.Screen
+          key={tab}
+          name={tab}
+          component={nativeTabComponents[tab]!}
+          options={appTabsScreenOptions(tab, navBadges, hasPermissions, isDarkMode)}
+        />
+      ))}
+    </Tab.Navigator>
+  )
+}
+
+let NativeLoggedOut: React.ComponentType
+let NativeRootComponent: React.ComponentType
+
+if (isMobile) {
+  const nativeLoggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
+  const nativeLoggedOutScreenOptions = {
+    ...Common.defaultNavigationOptions,
+  } as NativeStackNavigationOptions
+
+  const loggedOutNav = createNativeStackNavigator({
+    initialRouteName: 'login',
+    screenOptions: nativeLoggedOutScreenOptions,
+    screens: nativeLoggedOutScreensConfig,
+  })
+  NativeLoggedOut = loggedOutNav.getComponent()
+
+  const rootStackScreenOptions = {
+    headerBackButtonDisplayMode: 'minimal',
+  } satisfies NativeStackNavigationOptions
+
+  const modalScreenOptions = ({
+    navigation,
+  }: {
+    navigation: NavigationProp<RootParamList>
+  }): NativeStackNavigationOptions => {
+    const cancelItem: NativeStackNavigationOptions =
+      isIOS
+        ? {
+            unstable_headerLeftItems: () => [
+              {label: 'Cancel', onPress: () => navigation.goBack(), type: 'button' as const},
+            ],
+          }
+        : {headerLeft: () => <HeaderLeftButton mode="cancel" />}
+    return {
+      ...cancelItem,
+      headerShown: true,
+      presentation: 'modal',
+      title: '',
+    }
+  }
+
+  const useIsLoggedInNative = () => useConfigState(s => s.loggedIn)
+  const useIsLoggedOutNative = () => !useConfigState(s => s.loggedIn)
+
+  const nativeModalScreensConfig = routeMapToStaticScreens(modalRoutes, makeLayout, true, false, false)
+  const nativePhoneRootScreensConfig = routeMapToStaticScreens(
+    C.isTablet ? {} : phoneRootRoutes,
+    makeLayout,
+    false,
+    false,
+    false
+  )
+
+  const nativeRootNav = createNativeStackNavigator({
+    groups: {
+      loggedIn: {
+        if: useIsLoggedInNative,
+        screens: {
+          loggedIn: {options: {headerShown: false}, screen: AppTabsNative},
+          ...nativePhoneRootScreensConfig,
+        },
+      },
+      loggedOut: {
+        if: useIsLoggedOutNative,
+        screens: {
+          loggedOut: {options: {headerShown: false}, screen: NativeLoggedOut},
+        },
+      },
+      modals: {
+        if: useIsLoggedInNative,
+        screenOptions: modalScreenOptions as NativeStackNavigationOptions,
+        screens: nativeModalScreensConfig,
+      },
+    },
+    screenOptions: rootStackScreenOptions,
+  })
+  NativeRootComponent = nativeRootNav.getComponent()
+}
+
+// Create once, stable across renders. handleAppLink is used as fallback for
+// URL patterns not yet handled by the linking config.
+const nativeLinkingConfig = isMobile ? createLinkingConfig(handleAppLink) : undefined
+
+function NativeRouter() {
+  const everLoadedRef = React.useRef(false)
+  const loggedInLoaded = useDaemonState(s => {
+    const loaded = everLoadedRef.current || s.handshakeState === 'done'
+    everLoadedRef.current = loaded
+    return loaded
+  })
+
+  const {loggedIn, startupLoaded} = useConfigState(
+    C.useShallow(s => ({loggedIn: s.loggedIn, startupLoaded: s.startup.loaded}))
+  )
+  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
+  const onStateChange = () => {
+    const ns = C.Router2.getRootState()
+    setNavState(ns)
+  }
+  // Sync the initial state from the linking config into the router store.
+  // onStateChange doesn't fire for the initial state, so this ensures
+  // onRouteChanged runs and conversation data gets loaded on startup.
+  const onReady = onStateChange
+
+  const onUnhandledAction = (a: Readonly<{type: string}>) => {
+    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
+  }
+
+  const navRef = (ref: typeof Constants.navigationRef.current) => {
+    if (ref) {
+      Constants.navigationRef.current = ref
+    }
+  }
+
+  const {barStyle, isDarkMode} = useDarkModeState(
+    C.useShallow(s => {
+      const isDarkMode = s.isDarkMode()
+      const barStyle =
+        s.darkModePreference === 'system'
+          ? ('default' as const)
+          : isDarkMode
+            ? ('light-content' as const)
+            : ('dark-content' as const)
+      return {barStyle, isDarkMode}
+    })
+  )
+  const bar = barStyle === 'default' ? null : <StatusBar barStyle={barStyle} />
+  // Inline useRootKey (from hooks.native.tsx — can't require *.native files from shared code)
+  const nativeIsDarkMode = useColorScheme() === 'dark'
+  const nativeUsername = useCurrentUserState(s => s.username)
+  const [nativeNavKey, setNativeNavKey] = React.useState('')
+  const nativePrevUsernameRef = React.useRef(nativeUsername)
+  React.useEffect(() => {
+    const prev = nativePrevUsernameRef.current
+    nativePrevUsernameRef.current = nativeUsername
+    if (prev && nativeUsername && prev !== nativeUsername) {
+      setNativeNavKey(nativeUsername)
+    }
+  }, [nativeUsername])
+  const nativeDarkSuffix = isAndroid ? (nativeIsDarkMode ? '-dark' : '-light') : ''
+  const rootKey = nativeNavKey ? `${nativeNavKey}${nativeDarkSuffix}` : ''
+
+  if (!loggedInLoaded || (loggedIn && !startupLoaded)) {
+    return (
+      <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.fillAbsolute}>
+        <Shared.SimpleLoading />
+      </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2 direction="vertical" pointerEvents="box-none" fullWidth={true} fullHeight={true} key={rootKey}>
+      {bar}
+      <NavigationContainer
+        fallback={<View style={{backgroundColor: Kb.Styles.globalColors.white, flex: 1}} />}
+        linking={loggedIn ? nativeLinkingConfig : undefined}
+        onReady={onReady}
+        onStateChange={onStateChange}
+        onUnhandledAction={onUnhandledAction}
+        ref={navRef}
+        theme={isDarkMode ? Shared.darkTheme : Shared.lightTheme}
+      >
+        <LoadedTeamsListProvider>
+          <NativeRootComponent />
+        </LoadedTeamsListProvider>
+      </NavigationContainer>
+    </Kb.Box2>
+  )
+}
+
+export default isMobile ? NativeRouter : DesktopRouter
diff --git a/shared/router-v2/screen-layout.desktop.tsx b/shared/router-v2/screen-layout-modal.desktop.tsx
similarity index 83%
rename from shared/router-v2/screen-layout.desktop.tsx
rename to shared/router-v2/screen-layout-modal.desktop.tsx
index 973d070408cc..44b11cfe5aa1 100644
--- a/shared/router-v2/screen-layout.desktop.tsx
+++ b/shared/router-v2/screen-layout-modal.desktop.tsx
@@ -1,7 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as C from '@/constants'
-import type {GetOptions, GetOptionsParams, GetOptionsRet} from '@/constants/types/router'
+import type {GetOptionsRet} from '@/constants/types/router'
 import type {ParamListBase} from '@react-navigation/native'
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 
@@ -38,8 +38,6 @@ const mouseDistanceThreshold = 5
 
 const useMouseClick = (navigation: NativeStackNavigationProp<ParamListBase>, noClose?: boolean) => {
   const backgroundRef = React.useRef<HTMLDivElement>(null)
-  // we keep track of mouse down/up to determine if we should call it a 'click'. We don't want dragging the
-  // window around to count
   const [mouseDownX, setMouseDownX] = React.useState(mouseResetValue)
   const [mouseDownY, setMouseDownY] = React.useState(mouseResetValue)
   const onMouseDown = (e: React.MouseEvent) => {
@@ -68,18 +66,17 @@ const useMouseClick = (navigation: NativeStackNavigationProp<ParamListBase>, noC
   return [backgroundRef, onMouseUp, onMouseDown] as const
 }
 
-type ModalWrapperProps = {
+export type ModalWrapperProps = {
   children: React.ReactNode
   navigationOptions?: GetOptionsRet
   navigation: NativeStackNavigationProp<ParamListBase>
 }
 
-const ModalWrapper = (p: ModalWrapperProps) => {
+export const ModalWrapper = (p: ModalWrapperProps) => {
   const {navigationOptions, navigation, children} = p
   const {overlayStyle, overlayAvoidTabs, overlayTransparent, overlayNoClose, modalFooter, modalStyle} =
     navigationOptions ?? {}
 
-  // Build header from standard React Navigation options
   const headerTitle = navigationOptions?.['headerTitle'] ?? navigationOptions?.['title']
   const headerLeft = navigationOptions?.['headerLeft']
   const headerRight = navigationOptions?.['headerRight']
@@ -109,9 +106,14 @@ const ModalWrapper = (p: ModalWrapperProps) => {
     return () => window.removeEventListener('keydown', handler, true)
   }, [topMostModal, overlayNoClose, navigation])
 
-  const titleNode = typeof headerTitle === 'function'
-    ? headerTitle({children: typeof navigationOptions?.['title'] === 'string' ? navigationOptions['title'] : '', tintColor: ''})
-    : headerTitle
+  const titleNode =
+    typeof headerTitle === 'function'
+      ? headerTitle({
+          children:
+            typeof navigationOptions?.['title'] === 'string' ? navigationOptions['title'] : '',
+          tintColor: '',
+        })
+      : headerTitle
   const leftNode = typeof headerLeft === 'function' ? headerLeft({canGoBack: true}) : undefined
   const rightNode = typeof headerRight === 'function' ? headerRight({tintColor: ''}) : undefined
 
@@ -164,42 +166,6 @@ const ModalWrapper = (p: ModalWrapperProps) => {
   )
 }
 
-const wrapInStrict = (_route: string) => {
-  const wrap = true
-  // TODO use this to disable strict if something is broken
-  return wrap
-}
-
-type LayoutProps = {
-  children: React.ReactNode
-  route: GetOptionsParams['route']
-  navigation: GetOptionsParams['navigation']
-}
-
-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
-
-    let body = children
-
-    if (isModal) {
-      body = (
-        <ModalWrapper navigation={navigation} navigationOptions={navigationOptions}>
-          {body}
-        </ModalWrapper>
-      )
-    }
-
-    body = <React.Suspense>{body}</React.Suspense>
-
-    if (wrapInStrict(route.name)) {
-      body = <React.StrictMode>{body}</React.StrictMode>
-    }
-
-    return body
-  }
-}
-
 const styles = Kb.Styles.styleSheetCreate(() => ({
   closeIcon: Kb.Styles.platformStyles({
     isElectron: {
diff --git a/shared/router-v2/screen-layout.native.tsx b/shared/router-v2/screen-layout.tsx
similarity index 53%
rename from shared/router-v2/screen-layout.native.tsx
rename to shared/router-v2/screen-layout.tsx
index c504b319ac23..9b92692be099 100644
--- a/shared/router-v2/screen-layout.native.tsx
+++ b/shared/router-v2/screen-layout.tsx
@@ -1,11 +1,17 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
 import {isTablet} from '@/constants/platform'
+import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
+import type {GetOptions, GetOptionsParams, GetOptionsRet} from '@/constants/types/router'
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import type {ParamListBase} from '@react-navigation/native'
 import {SafeAreaView as RNScreensSafeAreaView} from 'react-native-screens/experimental'
-import type {GetOptions, GetOptionsParams} from '@/constants/types/router'
 
-const modalOffset = isIOS ? 40 : 0
+type ModalWrapperProps = {
+  children: React.ReactNode
+  navigationOptions?: GetOptionsRet
+  navigation: NativeStackNavigationProp<ParamListBase>
+}
 
 type LayoutProps = {
   children: React.ReactNode
@@ -13,6 +19,8 @@ type LayoutProps = {
   navigation: GetOptionsParams['navigation']
 }
 
+// Native-only wrapper components
+
 const TabScreenWrapper = ({children}: {children: React.ReactNode}) => {
   if (isAndroid) {
     return (
@@ -28,20 +36,49 @@ const TabScreenWrapper = ({children}: {children: React.ReactNode}) => {
   )
 }
 
-const StackScreenWrapper = ({children}: {children: React.ReactNode}) => {
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.tabScreen}>
-      {children}
-    </Kb.Box2>
-  )
+const StackScreenWrapper = ({children}: {children: React.ReactNode}) => (
+  <Kb.Box2 direction="vertical" fullWidth={true} style={styles.tabScreen}>
+    {children}
+  </Kb.Box2>
+)
+
+const desktopMakeLayout = (
+  isModal: boolean,
+  _isLoggedOut: boolean,
+  _isTabScreen: boolean,
+  getOptions?: GetOptions
+) => {
+  return ({children, route, navigation}: LayoutProps) => {
+    const {ModalWrapper} = require('./screen-layout-modal.desktop') as {
+      ModalWrapper: React.ComponentType<ModalWrapperProps>
+    }
+    const navigationOptions: GetOptionsRet | undefined =
+      typeof getOptions === 'function' ? getOptions({navigation, route}) : getOptions
+
+    let body = children
+
+    if (isModal) {
+      body = (
+        <ModalWrapper navigation={navigation} navigationOptions={navigationOptions}>
+          {body}
+        </ModalWrapper>
+      )
+    }
+
+    body = <React.Suspense>{body}</React.Suspense>
+    body = <React.StrictMode>{body}</React.StrictMode>
+
+    return body
+  }
 }
 
-export const makeLayout = (
+const nativeMakeLayout = (
   isModal: boolean,
   isLoggedOut: boolean,
   isTabScreen: boolean,
   getOptions?: GetOptions
 ) => {
+  const modalOffset = isIOS ? 40 : 0
   return function Layout({children, route, navigation}: LayoutProps) {
     const navigationOptions = typeof getOptions === 'function' ? getOptions({navigation, route}) : getOptions
     const {modalFooter} = navigationOptions ?? {}
@@ -88,31 +125,30 @@ export const makeLayout = (
   }
 }
 
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      keyboard: {
-        flexGrow: 1,
-        maxHeight: '100%',
-        position: 'relative',
-      },
-      modalFooter: Kb.Styles.platformStyles({
-        common: {
-          ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-          borderStyle: 'solid' as const,
-          borderTopColor: Kb.Styles.globalColors.black_10,
-          borderTopWidth: 1,
-          minHeight: 56,
-        },
-      }),
-      modalFooterNoBorder: Kb.Styles.platformStyles({
-        common: {
-          ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
-          minHeight: 56,
-        },
-      }),
-      tabScreen: {
-        flex: 1,
-      },
-    }) as const
-)
+export const makeLayout = isMobile ? nativeMakeLayout : desktopMakeLayout
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  keyboard: {
+    flexGrow: 1,
+    maxHeight: '100%',
+    position: 'relative',
+  },
+  modalFooter: Kb.Styles.platformStyles({
+    common: {
+      ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
+      borderStyle: 'solid' as const,
+      borderTopColor: Kb.Styles.globalColors.black_10,
+      borderTopWidth: 1,
+      minHeight: 56,
+    },
+  }),
+  modalFooterNoBorder: Kb.Styles.platformStyles({
+    common: {
+      ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
+      minHeight: 56,
+    },
+  }),
+  tabScreen: {
+    flex: 1,
+  },
+}))
diff --git a/shared/router-v2/tab-bar.desktop.tsx b/shared/router-v2/tab-bar.desktop.tsx
index fefb435bbba4..1b932e531734 100644
--- a/shared/router-v2/tab-bar.desktop.tsx
+++ b/shared/router-v2/tab-bar.desktop.tsx
@@ -11,7 +11,7 @@ import AccountSwitcher from './account-switcher'
 import RuntimeStats from '../app/runtime-stats'
 import {openURL} from '@/util/misc'
 import {isLinux} from '@/constants/platform'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 import './tab-bar.css'
 import {settingsLogOutTab} from '@/constants/settings'
 import {useNotifState} from '@/stores/notifications'
diff --git a/shared/settings/feedback/container.tsx b/shared/settings/feedback/container.tsx
index 372d669d6db8..e732ddea195c 100644
--- a/shared/settings/feedback/container.tsx
+++ b/shared/settings/feedback/container.tsx
@@ -10,6 +10,7 @@ import {getExtraChatLogsForLogSend, useSendFeedback} from './shared'
 import {version, pprofDir} from '@/constants/platform'
 import type {Props as OwnProps} from './container.shared'
 import {usePushState} from '@/stores/push'
+import {appVersionName, appVersionCode, logSend} from 'react-native-kb'
 export type {Props} from './container.shared'
 
 const mobileOsVersion = Platform.Version
@@ -39,19 +40,6 @@ const Connected = (ownProps: OwnProps) => {
   if (isMobile) {
     const push = {pushToken: _push}
     const chat = getExtraChatLogsForLogSend()
-    const rnkb = require('react-native-kb') as {
-      appVersionName: string
-      appVersionCode: string
-      logSend: (
-        extra: string,
-        feedback: string,
-        sendLogs: boolean,
-        sendMaxBytes: boolean,
-        traceDir: string,
-        cpuProfileDir: string
-      ) => Promise<string>
-    }
-    const {appVersionName, appVersionCode, logSend} = rnkb
     const _status = {
       appVersionCode,
       appVersionName,
diff --git a/shared/settings/make-icons.page.desktop.tsx b/shared/settings/make-icons.page.desktop.tsx
deleted file mode 100644
index b109dcef4724..000000000000
--- a/shared/settings/make-icons.page.desktop.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as Kb from '@/common-adapters'
-// import * as C from '@/constants'
-// import * as React from 'react'
-// import KB2 from '@/util/electron.desktop'
-
-// const {DEVwriteMenuIcons} = KB2.functions
-// setTimeout(() => {
-//   C.useRouterState.getState().dispatch.navigateAppend('makeIcons')
-// }, 1000)
-//
-// const Icon = (p: {badge: number}) => {
-//   const {badge} = p
-//   const special = badge > 9
-//   return (
-//     <Kb.Box2
-//       direction="vertical"
-//       style={{flexShrink: 0, height: 22, overflow: 'hidden', position: 'relative', width: 22}}
-//     >
-//       <Kb.Icon
-//         fontSize={18}
-//         type="iconfont-keybase"
-//         color="black"
-//         style={{alignSelf: 'center', display: 'flex', marginLeft: 0, marginTop: 6}}
-//       />
-//       <div
-//         style={{
-//           WebkitFontSmoothing: 'antialiased',
-//           color: 'white',
-//           flexShrink: 0,
-//           fontFamily: 'Keybase',
-//           fontSize: 10,
-//           fontWeight: 800,
-//           height: 12,
-//           lineHeight: '10px',
-//           position: 'absolute',
-//           right: 0,
-//           textAlign: 'center',
-//           textRendering: 'optimizeLegibility',
-//           top: 0,
-//           width: 14,
-//         }}
-//       >
-//         <svg width="100%" height="100%">
-//           <rect width="14" height="12" rx="6" fill="black" mask={`url(#knockout-text-${badge})`} />
-//           <mask id={`knockout-text-${badge}`}>
-//             <rect width="100%" height="100%" fill="#fff" x="0" y="0"></rect>
-//             <text
-//               x="50%"
-//               y="80%"
-//               fill="#000"
-//               textAnchor="middle"
-//               stroke={special ? '#000' : undefined}
-//               strokeWidth={special ? 1 : 0}
-//             >
-//               {special ? '+' : String(badge)}
-//             </text>
-//           </mask>
-//         </svg>
-//       </div>
-//     </Kb.Box2>
-//   )
-// }
-const Icon = (_p: {badge: number}) => null
-const DEVwriteMenuIcons = (() => {}) as undefined | (() => void)
-
-const Screen = __DEV__
-  ? () => {
-      const onSave = () => {
-        const oldbg = document.body.style.backgroundColor
-        document.body.style.backgroundColor = 'transparent'
-
-        const dte = document.getElementById('divToExport')
-        if (!dte) return
-        const copy = dte.cloneNode(true) as HTMLElement
-        copy.id = 'iconCopy'
-        document.body.appendChild(copy)
-
-        const root = document.getElementById('root')
-        if (!root) return
-        root.remove()
-        setTimeout(() => {
-          DEVwriteMenuIcons?.()
-          setTimeout(() => {
-            document.body.appendChild(root)
-            document.body.style.backgroundColor = oldbg
-            copy.remove()
-          }, 500)
-        }, 100)
-      }
-
-      const icons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(badge => <Icon key={badge} badge={badge} />)
-
-      return (
-        <Kb.Box2 direction="vertical" style={{backgroundColor: 'purple'}} fullWidth={true} fullHeight={true}>
-          <Kb.Button mode="Primary" onClick={onSave} label="Save" />
-          <div
-            id="divToExport"
-            style={{
-              alignSelf: 'flex-start',
-              display: 'flex',
-              flexDirection: 'row',
-              left: 0,
-              position: 'absolute',
-              top: 0,
-              width: 22,
-            }}
-          >
-            {icons}
-          </div>
-          <Kb.Box2
-            direction="horizontal"
-            style={Kb.Styles.platformStyles({
-              isElectron: {
-                backgroundColor: 'pink',
-                marginTop: 100,
-                position: 'relative',
-                transform: 'scale(5)',
-              },
-            } as const)}
-          >
-            {icons}
-          </Kb.Box2>
-        </Kb.Box2>
-      )
-    }
-  : () => null
-
-export default Screen
diff --git a/shared/settings/make-icons.page.native.tsx b/shared/settings/make-icons.page.native.tsx
deleted file mode 100644
index e83337b261ff..000000000000
--- a/shared/settings/make-icons.page.native.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// Desktop-only page; not available on native
-export default function MakeIconsPage() {
-  return null
-}
diff --git a/shared/settings/make-icons.page.tsx b/shared/settings/make-icons.page.tsx
new file mode 100644
index 000000000000..0d38d332fdc9
--- /dev/null
+++ b/shared/settings/make-icons.page.tsx
@@ -0,0 +1,86 @@
+import * as Kb from '@/common-adapters'
+
+type DOMElement = {
+  id: string
+  style: {backgroundColor: string}
+  cloneNode: (deep: boolean) => DOMElement
+  remove: () => void
+}
+type DOMDoc = {
+  body: {
+    style: {backgroundColor: string}
+    appendChild: (el: DOMElement) => void
+  }
+  getElementById: (id: string) => DOMElement | null
+}
+const doc = (globalThis as unknown as {document?: DOMDoc}).document
+
+const Icon = (_p: {badge: number}) => null
+const DEVwriteMenuIcons = (() => {}) as undefined | (() => void)
+
+const Screen = __DEV__
+  ? () => {
+      if (isMobile) return null
+
+      const onSave = () => {
+        if (!doc) return
+        const oldbg = doc.body.style.backgroundColor
+        doc.body.style.backgroundColor = 'transparent'
+
+        const dte = doc.getElementById('divToExport')
+        if (!dte) return
+        const copy = dte.cloneNode(true)
+        copy.id = 'iconCopy'
+        doc.body.appendChild(copy)
+
+        const root = doc.getElementById('root')
+        if (!root) return
+        root.remove()
+        setTimeout(() => {
+          DEVwriteMenuIcons?.()
+          setTimeout(() => {
+            doc.body.appendChild(root)
+            doc.body.style.backgroundColor = oldbg
+            copy.remove()
+          }, 500)
+        }, 100)
+      }
+
+      const icons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(badge => <Icon key={badge} badge={badge} />)
+
+      return (
+        <Kb.Box2 direction="vertical" style={{backgroundColor: 'purple'}} fullWidth={true} fullHeight={true}>
+          <Kb.Button mode="Primary" onClick={onSave} label="Save" />
+          <div
+            id="divToExport"
+            style={{
+              alignSelf: 'flex-start',
+              display: 'flex',
+              flexDirection: 'row',
+              left: 0,
+              position: 'absolute',
+              top: 0,
+              width: 22,
+            }}
+          >
+            {icons}
+          </div>
+          <Kb.Box2
+            direction="horizontal"
+            style={Kb.Styles.platformStyles({
+              isElectron: {
+                backgroundColor: 'pink',
+                marginTop: 100,
+                position: 'relative',
+                transform: 'scale(5)',
+              },
+            } as const)}
+          >
+            {icons}
+          </Kb.Box2>
+        </Kb.Box2>
+      )
+    }
+  : () => null
+
+export default Screen
diff --git a/shared/stores/darkmode.tsx b/shared/stores/darkmode.tsx
index 7f342b8bad54..558064ba519b 100644
--- a/shared/stores/darkmode.tsx
+++ b/shared/stores/darkmode.tsx
@@ -81,7 +81,7 @@ export const useDarkModeState = Z.createZustand<State>('darkmode', (set, get) =>
         // update Electron's nativeTheme
         const f = async () => {
           try {
-            const {default: KB2} = await import('@/util/electron.desktop')
+            const {default: KB2} = await import('@/util/electron')
             switch (p) {
               case 'system':
                 await KB2.functions.setNativeTheme?.('system')
diff --git a/shared/stores/fs-platform.desktop.tsx b/shared/stores/fs-platform.desktop.tsx
deleted file mode 100644
index 43477f58f27c..000000000000
--- a/shared/stores/fs-platform.desktop.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import * as T from '@/constants/types'
-import * as Constants from '@/constants/fs'
-import KB2 from '@/util/electron.desktop'
-import logger from '@/logger'
-import * as Path from '@/util/path'
-import {isDarwin, isWindows, pathSep} from '@/constants/platform.desktop'
-import {uint8ArrayToHex} from '@/util/uint8array'
-import {ExitCodeFuseKextPermissionError} from '@/constants/values'
-
-const {openPathInFinder, getPathType, selectFilesToUploadDialog} = KB2.functions
-const {darwinCopyToKBFSTempUploadFile, relaunchApp, uninstallKBFSDialog, uninstallDokanDialog} = KB2.functions
-const {windowsCheckMountFromOtherDokanInstall, installCachedDokan, uninstallDokan} = KB2.functions
-const {openURL, exitApp} = KB2.functions
-
-const escapeBackslash = isWindows
-  ? (pathElem: string): string =>
-      pathElem
-        .replace(/‰/g, '‰2030')
-        .replace(/([<>:"/\\|?*])/g, (_, c: Uint8Array) => '‰' + uint8ArrayToHex(c))
-  : (pathElem: string): string => pathElem
-
-const rebaseKbfsPathToMountLocation = (kbfsPath: T.FS.Path, mountLocation: string) =>
-  Path.join(mountLocation, T.FS.getPathElements(kbfsPath).slice(1).map(escapeBackslash).join(pathSep))
-
-const getUninstallExecPath = isWindows
-  ? (status: T.RPCGen.FuseStatus) => {
-      const field = status.status.fields?.find(({key}) => key === 'uninstallString')
-      return field?.value
-    }
-  : () => undefined
-
-const isKextPermissionError = (result: T.RPCGen.InstallResult): boolean =>
-  result.componentResults?.findIndex(
-    c => c.name === 'fuse' && c.exitCode === ExitCodeFuseKextPermissionError
-  ) !== -1
-
-export const fuseStatusToDriverStatus = (status?: T.RPCGen.FuseStatus): T.FS.DriverStatus => {
-  if (!status) {
-    return Constants.defaultDriverStatus
-  }
-  if (status.kextStarted) {
-    return {
-      ...Constants.emptyDriverStatusEnabled,
-      dokanOutdated: status.installAction === T.RPCGen.InstallAction.upgrade,
-      dokanUninstallExecPath: getUninstallExecPath(status),
-    }
-  }
-  return Constants.emptyDriverStatusDisabled
-}
-
-export const openLocalPathInSystemFileManagerDesktop = async (localPath: string) => {
-  if (!getPathType) {
-    return
-  }
-  const pathType = await getPathType(localPath)
-  await openPathInFinder?.(localPath, pathType === 'directory')
-}
-
-export const openPathInSystemFileManagerDesktop = async (
-  path: T.FS.Path,
-  driverStatus: T.FS.DriverStatus,
-  directMountDir: string
-) => {
-  if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
-    throw new Error('FUSE integration is not enabled')
-  }
-  if (!directMountDir) {
-    logger.warn('empty directMountDir')
-    return
-  }
-
-  const parsedPath = Constants.parsePath(path)
-  let selectDirectory = ![T.FS.PathKind.InGroupTlf, T.FS.PathKind.InTeamTlf].includes(parsedPath.kind)
-  if (!selectDirectory) {
-    try {
-      selectDirectory =
-        (
-          await T.RPCGen.SimpleFSSimpleFSStatRpcPromise({
-            path: Constants.pathToRPCPath(path),
-            refreshSubscription: false,
-          })
-        ).direntType === T.RPCGen.DirentType.dir
-    } catch (error) {
-      logger.warn('failed to stat KBFS path before opening system file manager: ', error)
-    }
-  }
-
-  await openPathInFinder?.(
-    rebaseKbfsPathToMountLocation(path, directMountDir),
-    selectDirectory
-  )
-}
-
-export const refreshDriverStatusDesktop = async () => {
-  let status = await T.RPCGen.installFuseStatusRpcPromise({
-    bundleVersion: '',
-  })
-  if (isWindows && status.installStatus !== T.RPCGen.InstallStatus.installed) {
-    const mountDir = await T.RPCGen.kbfsMountGetCurrentMountDirRpcPromise()
-    status = await (windowsCheckMountFromOtherDokanInstall?.(mountDir, status) ?? Promise.resolve(status))
-  }
-  return status
-}
-
-export const refreshMountDirsDesktop = async () => {
-  const directMountDir = await T.RPCGen.kbfsMountGetCurrentMountDirRpcPromise()
-  const preferredMountDirs = await T.RPCGen.kbfsMountGetPreferredMountDirsRpcPromise()
-  return {directMountDir, preferredMountDirs: preferredMountDirs || []}
-}
-
-export const setSfmiBannerDismissedDesktop = async (dismissed: boolean) => {
-  await T.RPCGen.SimpleFSSimpleFSSetSfmiBannerDismissedRpcPromise({dismissed})
-}
-
-export const afterDriverEnabledDesktop = async (isRetry: boolean) => {
-  if (isWindows) {
-    await installCachedDokan?.()
-    return 'refresh'
-  }
-
-  const result = await T.RPCGen.installInstallFuseRpcPromise()
-  if (isKextPermissionError(result)) {
-    return isRetry ? 'kextPermissionErrorRetry' : 'kextPermissionError'
-  }
-  await T.RPCGen.installInstallKBFSRpcPromise()
-  await T.RPCGen.kbfsMountWaitForMountsRpcPromise()
-  return 'refresh'
-}
-
-export const afterDriverDisableDesktop = async (driverStatus: T.FS.DriverStatus) => {
-  if (isWindows) {
-    if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
-      return 'noop'
-    }
-    if (!driverStatus.dokanUninstallExecPath) {
-      await uninstallDokanDialog?.()
-      return 'refresh'
-    }
-    return 'disabling'
-  }
-
-  const remove = await (uninstallKBFSDialog?.() ?? Promise.resolve(false))
-  return remove ? 'disabling' : 'noop'
-}
-
-export const afterDriverDisablingDesktop = async (driverStatus: T.FS.DriverStatus) => {
-  if (isWindows) {
-    if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
-      return
-    }
-    logger.info('Invoking dokan uninstaller', driverStatus.dokanUninstallExecPath || '')
-    try {
-      await uninstallDokan?.(driverStatus.dokanUninstallExecPath || '')
-    } catch {}
-    return
-  }
-
-  await T.RPCGen.installUninstallKBFSRpcPromise()
-  relaunchApp?.()
-  exitApp?.(0)
-}
-
-export const openSecurityPreferencesDesktop = async () => {
-  await openURL?.('x-apple.systempreferences:com.apple.preference.security?General', {activate: true})
-}
-
-export const selectFilesToUploadDesktop = async (type: T.FS.OpenDialogType, parentPath: T.FS.Path) =>
-  await (selectFilesToUploadDialog?.(type, parentPath) ?? Promise.resolve([]))
-
-export const uploadFromDragAndDropDesktop = async (localPaths: Array<string>) => {
-  if (isDarwin && darwinCopyToKBFSTempUploadFile) {
-    const dir = await T.RPCGen.SimpleFSSimpleFSMakeTempDirForUploadRpcPromise()
-    return Promise.all(localPaths.map(async localPath => darwinCopyToKBFSTempUploadFile(dir, localPath)))
-  }
-  return localPaths
-}
-
-export const pickAndUploadMobile = async (
-  _type: T.FS.MobilePickType,
-  _parentPath: T.FS.Path,
-  _upload: (parentPath: T.FS.Path, localPath: string) => void
-) => {}
-
-export const pickDocumentsMobile = async (
-  _parentPath: T.FS.Path,
-  _upload: (parentPath: T.FS.Path, localPath: string) => void
-) => {}
-
-export const finishedDownloadWithIntentMobile = async (
-  _downloadState: T.FS.DownloadState,
-  _downloadIntent: T.FS.DownloadIntent,
-  _mimeType: string
-) => {}
-
-export const afterKbfsDaemonRpcStatusChangedMobile = async () => {}
-
-export const finishedRegularDownloadMobile = async (
-  _downloadID: string,
-  _downloadState: T.FS.DownloadState,
-  _downloadInfo: T.FS.DownloadInfo,
-  _mimeType: string
-) => {}
diff --git a/shared/stores/fs-platform.native.tsx b/shared/stores/fs-platform.native.tsx
deleted file mode 100644
index ef6bc4bd235c..000000000000
--- a/shared/stores/fs-platform.native.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import * as Styles from '@/styles'
-import * as T from '@/constants/types'
-import {launchImageLibraryAsync} from '@/util/expo-image-picker.native'
-import {pickDocumentsAsync} from '@/util/expo-document-picker.native'
-import {androidAddCompleteDownload, fsCacheDir, fsDownloadDir} from 'react-native-kb'
-import logger from '@/logger'
-import {saveAttachmentToCameraRoll, showShareActionSheet} from '@/util/platform-specific'
-import * as Constants from '@/constants/fs'
-
-const finishedRegularDownloadIDs = new Set<string>()
-
-export const pickAndUploadMobile = async (
-  type: T.FS.MobilePickType,
-  parentPath: T.FS.Path,
-  upload: (parentPath: T.FS.Path, localPath: string) => void
-) => {
-  if (type === T.FS.MobilePickType.File) {
-    return
-  }
-  const result = await launchImageLibraryAsync(type, true, true)
-  if (result.canceled) {
-    return
-  }
-  for (const asset of result.assets) {
-    upload(parentPath, Styles.unnormalizePath(asset.uri))
-  }
-}
-
-export const pickDocumentsMobile = async (
-  parentPath: T.FS.Path,
-  upload: (parentPath: T.FS.Path, localPath: string) => void
-) => {
-  const result = await pickDocumentsAsync(true)
-  if (result.canceled) {
-    return
-  }
-  result.assets.forEach(asset => upload(parentPath, Styles.unnormalizePath(asset.uri)))
-}
-
-export const finishedDownloadWithIntentMobile = async (
-  downloadState: T.FS.DownloadState,
-  downloadIntent: T.FS.DownloadIntent,
-  mimeType: string
-) => {
-  switch (downloadIntent) {
-    case T.FS.DownloadIntent.CameraRoll:
-      await saveAttachmentToCameraRoll(downloadState.localPath, mimeType)
-      return
-    case T.FS.DownloadIntent.Share:
-      await showShareActionSheet({filePath: downloadState.localPath, mimeType})
-      return
-    case T.FS.DownloadIntent.None:
-      return
-    default:
-      return
-  }
-}
-
-export const afterKbfsDaemonRpcStatusChangedMobile = async () => {
-  if (!isAndroid) {
-    return
-  }
-  await T.RPCGen.SimpleFSSimpleFSConfigureDownloadRpcPromise({
-    cacheDirOverride: fsCacheDir,
-    downloadDirOverride: fsDownloadDir,
-  })
-}
-
-export const finishedRegularDownloadMobile = async (
-  downloadID: string,
-  downloadState: T.FS.DownloadState,
-  downloadInfo: T.FS.DownloadInfo,
-  mimeType: string
-) => {
-  if (!isAndroid || downloadState.error || !downloadState.localPath || finishedRegularDownloadIDs.has(downloadID)) {
-    return
-  }
-  finishedRegularDownloadIDs.add(downloadID)
-
-  try {
-    await androidAddCompleteDownload({
-      description: `Keybase downloaded ${downloadInfo.filename}`,
-      mime: mimeType,
-      path: downloadState.localPath,
-      showNotification: true,
-      title: downloadInfo.filename,
-    })
-  } catch {
-    logger.warn('Failed to addCompleteDownload')
-  }
-}
-
-export const fuseStatusToDriverStatus = (_status?: T.RPCGen.FuseStatus): T.FS.DriverStatus =>
-  Constants.defaultDriverStatus
-
-export const openLocalPathInSystemFileManagerDesktop = async (_localPath: string) => {}
-
-export const openPathInSystemFileManagerDesktop = async (
-  _path: T.FS.Path,
-  _driverStatus: T.FS.DriverStatus,
-  _directMountDir: string
-) => {}
-
-export const refreshDriverStatusDesktop = async (): Promise<T.RPCGen.FuseStatus | undefined> => {
-  await Promise.resolve()
-  return undefined
-}
-
-export const refreshMountDirsDesktop = async () => {
-  await Promise.resolve()
-  return {directMountDir: '', preferredMountDirs: [] as string[]}
-}
-
-export const setSfmiBannerDismissedDesktop = async (_dismissed: boolean) => {}
-
-export const afterDriverEnabledDesktop = async (
-  _isRetry: boolean
-): Promise<'noop' | 'refresh' | 'kextPermissionError' | 'kextPermissionErrorRetry'> => {
-  await Promise.resolve()
-  return 'noop'
-}
-
-export const afterDriverDisableDesktop = async (
-  _driverStatus: T.FS.DriverStatus
-): Promise<'noop' | 'disabling' | 'refresh'> => {
-  await Promise.resolve()
-  return 'noop'
-}
-
-export const afterDriverDisablingDesktop = async (_driverStatus: T.FS.DriverStatus) => {}
-
-export const openSecurityPreferencesDesktop = async () => {}
-
-export const selectFilesToUploadDesktop = async (_type: T.FS.OpenDialogType, _parentPath: T.FS.Path) => {
-  await Promise.resolve()
-  return [] as string[]
-}
-
-export const uploadFromDragAndDropDesktop = async (localPaths: Array<string>) => {
-  await Promise.resolve()
-  return localPaths
-}
diff --git a/shared/stores/fs-platform.tsx b/shared/stores/fs-platform.tsx
new file mode 100644
index 000000000000..e80c12a8a35d
--- /dev/null
+++ b/shared/stores/fs-platform.tsx
@@ -0,0 +1,334 @@
+import * as T from '@/constants/types'
+import * as Constants from '@/constants/fs'
+import logger from '@/logger'
+import KB2 from '@/util/electron'
+import {isWindows, pathSep, isDarwin} from '@/constants/platform'
+import {uint8ArrayToHex} from '@/util/uint8array'
+import {join} from '@/util/path'
+import {ExitCodeFuseKextPermissionError} from '@/constants/values'
+import {unnormalizePath} from '@/styles'
+import {launchImageLibraryAsync} from '@/util/expo-image-picker'
+import {saveAttachmentToCameraRoll, showShareActionSheet} from '@/util/platform-specific'
+import {fsCacheDir, fsDownloadDir, androidAddCompleteDownload} from 'react-native-kb'
+
+// Desktop-only exports (stubs on mobile)
+export const fuseStatusToDriverStatus = (status?: T.RPCGen.FuseStatus): T.FS.DriverStatus => {
+  if (isMobile || !status) {
+    return Constants.defaultDriverStatus
+  }
+  const getUninstallExecPath = isWindows
+    ? (s: T.RPCGen.FuseStatus) => {
+        const field = s.status.fields?.find(({key}) => key === 'uninstallString')
+        return field?.value
+      }
+    : () => undefined
+
+  if (status.kextStarted) {
+    return {
+      ...Constants.emptyDriverStatusEnabled,
+      dokanOutdated: status.installAction === T.RPCGen.InstallAction.upgrade,
+      dokanUninstallExecPath: getUninstallExecPath(status),
+    }
+  }
+  return Constants.emptyDriverStatusDisabled
+}
+
+export const openLocalPathInSystemFileManagerDesktop = async (localPath: string) => {
+  if (isMobile) {
+    return
+  }
+  const {openPathInFinder, getPathType} = KB2.functions
+  if (!getPathType) {
+    return
+  }
+  const pathType = await getPathType(localPath)
+  await openPathInFinder?.(localPath, pathType === 'directory')
+}
+
+export const openPathInSystemFileManagerDesktop = async (
+  path: T.FS.Path,
+  driverStatus: T.FS.DriverStatus,
+  directMountDir: string
+) => {
+  if (isMobile) {
+    return
+  }
+  if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
+    throw new Error('FUSE integration is not enabled')
+  }
+  if (!directMountDir) {
+    logger.warn('empty directMountDir')
+    return
+  }
+
+  const {openPathInFinder} = KB2.functions
+
+  const escapeBackslash = isWindows
+    ? (pathElem: string): string =>
+        pathElem
+          .replace(/‰/g, '‰2030')
+          .replace(/([<>:"/\\|?*])/g, (_, c: Uint8Array) => '‰' + uint8ArrayToHex(c))
+    : (pathElem: string): string => pathElem
+
+  const rebaseKbfsPathToMountLocation = (kbfsPath: T.FS.Path, mountLocation: string) =>
+    join(mountLocation, T.FS.getPathElements(kbfsPath).slice(1).map(escapeBackslash).join(pathSep))
+
+  const parsedPath = Constants.parsePath(path)
+  let selectDirectory = ![T.FS.PathKind.InGroupTlf, T.FS.PathKind.InTeamTlf].includes(parsedPath.kind)
+  if (!selectDirectory) {
+    try {
+      selectDirectory =
+        (
+          await T.RPCGen.SimpleFSSimpleFSStatRpcPromise({
+            path: Constants.pathToRPCPath(path),
+            refreshSubscription: false,
+          })
+        ).direntType === T.RPCGen.DirentType.dir
+    } catch (error) {
+      logger.warn('failed to stat KBFS path before opening system file manager: ', error)
+    }
+  }
+
+  await openPathInFinder?.(
+    rebaseKbfsPathToMountLocation(path, directMountDir),
+    selectDirectory
+  )
+}
+
+export const refreshDriverStatusDesktop = async (): Promise<T.RPCGen.FuseStatus | undefined> => {
+  if (isMobile) {
+    await Promise.resolve()
+    return undefined
+  }
+  const {windowsCheckMountFromOtherDokanInstall} = KB2.functions
+
+  let status = await T.RPCGen.installFuseStatusRpcPromise({
+    bundleVersion: '',
+  })
+  if (isWindows && status.installStatus !== T.RPCGen.InstallStatus.installed) {
+    const mountDir = await T.RPCGen.kbfsMountGetCurrentMountDirRpcPromise()
+    status = await (windowsCheckMountFromOtherDokanInstall?.(mountDir, status) ?? Promise.resolve(status))
+  }
+  return status
+}
+
+export const refreshMountDirsDesktop = async () => {
+  if (isMobile) {
+    await Promise.resolve()
+    return {directMountDir: '', preferredMountDirs: [] as string[]}
+  }
+  const directMountDir = await T.RPCGen.kbfsMountGetCurrentMountDirRpcPromise()
+  const preferredMountDirs = await T.RPCGen.kbfsMountGetPreferredMountDirsRpcPromise()
+  return {directMountDir, preferredMountDirs: preferredMountDirs || []}
+}
+
+export const setSfmiBannerDismissedDesktop = async (dismissed: boolean) => {
+  if (isMobile) {
+    return
+  }
+  await T.RPCGen.SimpleFSSimpleFSSetSfmiBannerDismissedRpcPromise({dismissed})
+}
+
+export const afterDriverEnabledDesktop = async (
+  isRetry: boolean
+): Promise<'noop' | 'refresh' | 'kextPermissionError' | 'kextPermissionErrorRetry'> => {
+  if (isMobile) {
+    await Promise.resolve()
+    return 'noop'
+  }
+  const {installCachedDokan} = KB2.functions
+
+  const isKextPermissionError = (result: T.RPCGen.InstallResult): boolean =>
+    result.componentResults?.findIndex(
+      c => c.name === 'fuse' && c.exitCode === ExitCodeFuseKextPermissionError
+    ) !== -1
+
+  if (isWindows) {
+    await installCachedDokan?.()
+    return 'refresh'
+  }
+
+  const result = await T.RPCGen.installInstallFuseRpcPromise()
+  if (isKextPermissionError(result)) {
+    return isRetry ? 'kextPermissionErrorRetry' : 'kextPermissionError'
+  }
+  await T.RPCGen.installInstallKBFSRpcPromise()
+  await T.RPCGen.kbfsMountWaitForMountsRpcPromise()
+  return 'refresh'
+}
+
+export const afterDriverDisableDesktop = async (
+  driverStatus: T.FS.DriverStatus
+): Promise<'noop' | 'disabling' | 'refresh'> => {
+  if (isMobile) {
+    await Promise.resolve()
+    return 'noop'
+  }
+  const {uninstallKBFSDialog, uninstallDokanDialog} = KB2.functions
+
+  if (isWindows) {
+    if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
+      return 'noop'
+    }
+    if (!driverStatus.dokanUninstallExecPath) {
+      await uninstallDokanDialog?.()
+      return 'refresh'
+    }
+    return 'disabling'
+  }
+
+  const remove = await (uninstallKBFSDialog?.() ?? Promise.resolve(false))
+  return remove ? 'disabling' : 'noop'
+}
+
+export const afterDriverDisablingDesktop = async (driverStatus: T.FS.DriverStatus) => {
+  if (isMobile) {
+    return
+  }
+  const {relaunchApp, exitApp, uninstallDokan} = KB2.functions
+
+  if (isWindows) {
+    if (driverStatus.type !== T.FS.DriverStatusType.Enabled) {
+      return
+    }
+    logger.info('Invoking dokan uninstaller', driverStatus.dokanUninstallExecPath || '')
+    try {
+      await uninstallDokan?.(driverStatus.dokanUninstallExecPath || '')
+    } catch {}
+    return
+  }
+
+  await T.RPCGen.installUninstallKBFSRpcPromise()
+  relaunchApp?.()
+  exitApp?.(0)
+}
+
+export const openSecurityPreferencesDesktop = async () => {
+  if (isMobile) {
+    return
+  }
+  const {openURL} = KB2.functions
+  await openURL?.('x-apple.systempreferences:com.apple.preference.security?General', {activate: true})
+}
+
+export const selectFilesToUploadDesktop = async (type: T.FS.OpenDialogType, parentPath: T.FS.Path) => {
+  if (isMobile) {
+    await Promise.resolve()
+    return [] as string[]
+  }
+  const {selectFilesToUploadDialog} = KB2.functions
+  return await (selectFilesToUploadDialog?.(type, parentPath) ?? Promise.resolve([]))
+}
+
+export const uploadFromDragAndDropDesktop = async (localPaths: Array<string>) => {
+  if (isMobile) {
+    await Promise.resolve()
+    return localPaths
+  }
+  const {darwinCopyToKBFSTempUploadFile} = KB2.functions
+
+  if (isDarwin && darwinCopyToKBFSTempUploadFile) {
+    const dir = await T.RPCGen.SimpleFSSimpleFSMakeTempDirForUploadRpcPromise()
+    return Promise.all(localPaths.map(async localPath => darwinCopyToKBFSTempUploadFile(dir, localPath)))
+  }
+  return localPaths
+}
+
+// Mobile-only exports (stubs on desktop)
+export const pickAndUploadMobile = async (
+  type: T.FS.MobilePickType,
+  parentPath: T.FS.Path,
+  upload: (parentPath: T.FS.Path, localPath: string) => void
+) => {
+  if (!isMobile || type === T.FS.MobilePickType.File) {
+    return
+  }
+  const result = await launchImageLibraryAsync(type, true, true)
+  if (result.canceled) {
+    return
+  }
+  for (const asset of result.assets) {
+    upload(parentPath, unnormalizePath(asset.uri))
+  }
+}
+
+export const pickDocumentsMobile = async (
+  parentPath: T.FS.Path,
+  upload: (parentPath: T.FS.Path, localPath: string) => void
+) => {
+  if (!isMobile) {
+    return
+  }
+  const {pickDocumentsAsync} = require('@/util/expo-document-picker.native') as {
+    pickDocumentsAsync: (multiple: boolean) => Promise<{canceled: boolean; assets: Array<{uri: string}>}>
+  }
+  const result = await pickDocumentsAsync(true)
+  if (result.canceled) {
+    return
+  }
+  result.assets.forEach(asset => upload(parentPath, unnormalizePath(asset.uri)))
+}
+
+export const finishedDownloadWithIntentMobile = async (
+  downloadState: T.FS.DownloadState,
+  downloadIntent: T.FS.DownloadIntent,
+  mimeType: string
+) => {
+  if (!isMobile) {
+    return
+  }
+  switch (downloadIntent) {
+    case T.FS.DownloadIntent.CameraRoll:
+      await saveAttachmentToCameraRoll(downloadState.localPath, mimeType)
+      return
+    case T.FS.DownloadIntent.Share:
+      await showShareActionSheet({filePath: downloadState.localPath, mimeType})
+      return
+    case T.FS.DownloadIntent.None:
+      return
+    default:
+      return
+  }
+}
+
+export const afterKbfsDaemonRpcStatusChangedMobile = async () => {
+  if (!isMobile || !isAndroid) {
+    return
+  }
+  await T.RPCGen.SimpleFSSimpleFSConfigureDownloadRpcPromise({
+    cacheDirOverride: fsCacheDir,
+    downloadDirOverride: fsDownloadDir,
+  })
+}
+
+const finishedRegularDownloadIDs = new Set<string>()
+
+export const finishedRegularDownloadMobile = async (
+  downloadID: string,
+  downloadState: T.FS.DownloadState,
+  downloadInfo: T.FS.DownloadInfo,
+  mimeType: string
+) => {
+  if (
+    !isMobile ||
+    !isAndroid ||
+    downloadState.error ||
+    !downloadState.localPath ||
+    finishedRegularDownloadIDs.has(downloadID)
+  ) {
+    return
+  }
+  finishedRegularDownloadIDs.add(downloadID)
+
+  try {
+    await androidAddCompleteDownload({
+      description: `Keybase downloaded ${downloadInfo.filename}`,
+      mime: mimeType,
+      path: downloadState.localPath,
+      showNotification: true,
+      title: downloadInfo.filename,
+    })
+  } catch {
+    logger.warn('Failed to addCompleteDownload')
+  }
+}
diff --git a/shared/stores/push.desktop.tsx b/shared/stores/push.desktop.tsx
deleted file mode 100644
index 507bb724952c..000000000000
--- a/shared/stores/push.desktop.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as Z from '@/util/zustand'
-import {type Store, type State} from './push.shared'
-
-export const tokenType = ''
-
-const initialStore: Store = {
-  hasPermissions: false,
-  justSignedUp: false,
-  showPushPrompt: false,
-  token: '',
-}
-
-export const usePushState = Z.createZustand<State>('push', () => {
-  const dispatch: State['dispatch'] = {
-    checkPermissions: async () => {
-      return Promise.resolve(false)
-    },
-    clearPendingPushNotification: () => {},
-    deleteToken: () => {},
-    handlePush: () => {},
-    initialPermissionsCheck: () => {},
-    rejectPermissions: () => {},
-    requestPermissions: () => {},
-    resetState: Z.defaultReset,
-    setPendingPushNotification: () => {},
-    setPushToken: () => {},
-    showPermissionsPrompt: () => {},
-  }
-  return {
-    ...initialStore,
-    dispatch,
-  }
-})
diff --git a/shared/stores/push.native.tsx b/shared/stores/push.tsx
similarity index 90%
rename from shared/stores/push.native.tsx
rename to shared/stores/push.tsx
index a46e494ec425..95c73922baad 100644
--- a/shared/stores/push.native.tsx
+++ b/shared/stores/push.tsx
@@ -1,5 +1,8 @@
 import * as S from '@/constants/strings'
+import * as T from '@/constants/types'
 import * as Tabs from '@/constants/tabs'
+import * as Z from '@/util/zustand'
+import logger from '@/logger'
 import {ignorePromise, neverThrowPromiseFunc, timeoutPromise} from '@/constants/utils'
 import {navUpToScreen, switchTab, getRootState} from '@/constants/router'
 import {emitDeepLink} from '@/router-v2/linking'
@@ -8,23 +11,23 @@ import {useCurrentUserState} from '@/stores/current-user'
 import {useDaemonState} from '@/stores/daemon'
 import {useLogoutState} from '@/stores/logout'
 import {useWaitingState} from '@/stores/waiting'
-import * as Z from '@/util/zustand'
-import logger from '@/logger'
-import * as T from '@/constants/types'
-import {isDevApplePushToken} from '@/local-debug'
-import {
-  checkPushPermissions,
-  getRegistrationToken,
-  iosGetHasShownPushPrompt,
-  requestPushPermissions,
-  removeAllPendingNotificationRequests,
-} from 'react-native-kb'
-import {type Store, type State} from '@/stores/push.shared'
 import {openAppSettings} from '@/util/storeless-actions'
+import {type Store, type State} from './push.shared'
+import {isDevApplePushToken} from '@/local-debug'
+import {checkPushPermissions, getRegistrationToken, iosGetHasShownPushPrompt, requestPushPermissions, removeAllPendingNotificationRequests} from 'react-native-kb'
 
-export const tokenType = isIOS ? (isDevApplePushToken ? 'appledev' : 'apple') : 'androidplay'
+export const tokenType = isMobile
+  ? isIOS ? (isDevApplePushToken ? 'appledev' : 'apple') : 'androidplay'
+  : ''
 
-const initialStore: Store = {
+const desktopInitialStore: Store = {
+  hasPermissions: false,
+  justSignedUp: false,
+  showPushPrompt: false,
+  token: '',
+}
+
+const mobileInitialStore: Store = {
   hasPermissions: true,
   justSignedUp: false,
   pendingPushNotification: undefined,
@@ -32,8 +35,33 @@ const initialStore: Store = {
   token: '',
 }
 
-const monsterStorageKey = 'shownMonsterPushPrompt'
+const initialStore: Store = isMobile ? mobileInitialStore : desktopInitialStore
+
 export const usePushState = Z.createZustand<State>('push', (set, get) => {
+  if (!isMobile) {
+    const dispatch: State['dispatch'] = {
+      checkPermissions: async () => {
+        return Promise.resolve(false)
+      },
+      clearPendingPushNotification: () => {},
+      deleteToken: () => {},
+      handlePush: () => {},
+      initialPermissionsCheck: () => {},
+      rejectPermissions: () => {},
+      requestPermissions: () => {},
+      resetState: Z.defaultReset,
+      setPendingPushNotification: () => {},
+      setPushToken: () => {},
+      showPermissionsPrompt: () => {},
+    }
+    return {
+      ...initialStore,
+      dispatch,
+    }
+  }
+
+  const monsterStorageKey = 'shownMonsterPushPrompt'
+
   const neverShowMonsterAgain = async () => {
     await T.RPCGen.configGuiSetValueRpcPromise({
       path: `ui.${monsterStorageKey}`,
@@ -65,7 +93,6 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
     if (notification.type !== 'chat.newmessage') {
       return
     }
-    // We only care if the user clicked while in session
     if (!notification.userInteraction) {
       logger.warn('[Push] handleLoudMessage: ignore non userInteraction')
       return
@@ -96,7 +123,6 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
   }
 
   const dispatch: State['dispatch'] = {
-    // Call when we foreground and on app start, action is undefined on app start. Returns if you have permissions
     checkPermissions: async () => {
       const permissions = await checkPermissionsFromNative()
       if (permissions.alert || permissions.badge) {
@@ -197,6 +223,7 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
               }
               break
             case 'chat.newmessageSilent_2':
+              // entirely handled by go on ios and in onNotification on Android
               break
             case 'chat.newmessage':
               await handleLoudMessage(notification)
@@ -216,9 +243,6 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
               }
               break
             case 'autoreset':
-              // The ResetModal is always mounted and self-shows when autoreset.active
-              // is true (driven by Gregor/badge state sync). The account switch above
-              // is sufficient; no explicit navigation needed.
               break
             case 'chat.extension':
               {
@@ -364,10 +388,6 @@ export const usePushState = Z.createZustand<State>('push', (set, get) => {
         s.justSignedUp = !!p.justSignedUp
       })
       const monsterPrompt = async () => {
-        // Monster push prompt
-        // We've just started up, we don't have the permissions, we're logged in and we
-        // haven't just signed up. This handles the scenario where the push notifications
-        // permissions checker finishes after the routeToInitialScreen is done.
         if (
           p.show &&
           useConfigState.getState().loggedIn &&
diff --git a/shared/stores/settings-contacts.desktop.tsx b/shared/stores/settings-contacts.desktop.tsx
deleted file mode 100644
index 300958590ce0..000000000000
--- a/shared/stores/settings-contacts.desktop.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as Z from '@/util/zustand'
-import type {Store, State} from './settings-contacts.shared'
-
-const initialStore: Store = {
-  alreadyOnKeybase: [],
-  importError: '',
-  importPromptDismissed: false,
-  importedCount: undefined,
-  permissionStatus: 'unknown',
-  userCountryCode: undefined,
-  waitingToShowJoinedModal: false,
-}
-
-export const useSettingsContactsState = Z.createZustand<State>('settings-contacts', () => {
-  const dispatch: State['dispatch'] = {
-    editContactImportEnabled: () => {},
-    importContactsLater: () => {},
-    loadContactImportEnabled: () => {},
-    loadContactPermissions: () => {},
-    manageContactsCache: () => {},
-    requestPermissions: () => {},
-    resetState: Z.defaultReset,
-  }
-  return {
-    ...initialStore,
-    dispatch,
-  }
-})
diff --git a/shared/stores/settings-contacts.native.tsx b/shared/stores/settings-contacts.tsx
similarity index 74%
rename from shared/stores/settings-contacts.native.tsx
rename to shared/stores/settings-contacts.tsx
index ba356ec89d3c..6da3da973644 100644
--- a/shared/stores/settings-contacts.native.tsx
+++ b/shared/stores/settings-contacts.tsx
@@ -1,21 +1,19 @@
-import * as Contacts from 'expo-contacts'
-import {ignorePromise} from '@/constants/utils'
-import {importContactsWaitingKey} from '@/constants/strings'
 import * as T from '@/constants/types'
 import * as Z from '@/util/zustand'
-import {addNotificationRequest} from 'react-native-kb'
 import logger from '@/logger'
-import type {Store, State} from './settings-contacts.shared'
+import {ignorePromise} from '@/constants/utils'
+import {importContactsWaitingKey} from '@/constants/strings'
 import {RPCError} from '@/util/errors'
-import * as Localization from 'expo-localization'
 import {getE164} from '@/util/phone-numbers'
 import {pluralize} from '@/util/string'
 import {navigateAppend} from '@/constants/router'
 import {useConfigState} from '@/stores/config'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useWaitingState} from '@/stores/waiting'
-
-const importContactsConfigKey = (username: string) => `ui.importContacts.${username}`
+import type {Store, State} from './settings-contacts.shared'
+import * as Contacts from 'expo-contacts'
+import {getLocales} from 'expo-localization'
+import {addNotificationRequest} from 'react-native-kb'
 
 const initialStore: Store = {
   alreadyOnKeybase: [],
@@ -27,53 +25,78 @@ const initialStore: Store = {
   waitingToShowJoinedModal: false,
 }
 
-const nativeContactsToContacts = (contacts: Contacts.ContactResponse, countryCode: string) => {
-  return contacts.data.reduce<Array<T.RPCGen.Contact>>((ret, contact) => {
-    const {name, phoneNumbers = [], emails = []} = contact
-
-    const components = phoneNumbers.reduce<T.RPCGen.ContactComponent[]>((res, pn) => {
-      const formatted = getE164(pn.number || '', pn.countryCode || countryCode)
-      if (formatted) {
-        res.push({
-          label: pn.label,
-          phoneNumber: formatted,
-        })
-      }
-      return res
-    }, [])
-    components.push(...emails.map(e => ({email: e.email, label: e.label})))
-    if (components.length) {
-      ret.push({components, name})
+export const useSettingsContactsState = Z.createZustand<State>('settings-contacts', (set, get) => {
+  if (!isMobile) {
+    const dispatch: State['dispatch'] = {
+      editContactImportEnabled: () => {},
+      importContactsLater: () => {},
+      loadContactImportEnabled: () => {},
+      loadContactPermissions: () => {},
+      manageContactsCache: () => {},
+      requestPermissions: () => {},
+      resetState: Z.defaultReset,
     }
+    return {
+      ...initialStore,
+      dispatch,
+    }
+  }
 
-    return ret
-  }, [])
-}
+  const importContactsConfigKey = (username: string) => `ui.importContacts.${username}`
+
+  const nativeContactsToContacts = (
+    contacts: {
+      data: Array<{
+        name?: string
+        phoneNumbers?: Array<{number?: string; countryCode?: string; label?: string}>
+        emails?: Array<{email?: string; label?: string}>
+      }>
+    },
+    countryCode: string
+  ) => {
+    return contacts.data.reduce<Array<T.RPCGen.Contact>>((ret, contact) => {
+      const {name, phoneNumbers = [], emails = []} = contact
 
-// When the notif is tapped we are only passed the message, use this as a marker
-// so we can handle it correctly.
-const contactNotifMarker = 'Your contact'
-const makeContactsResolvedMessage = (cts: T.Immutable<Array<T.RPCGen.ProcessedContact>>) => {
-  if (cts.length === 0) {
-    return ''
+      const components = phoneNumbers.reduce<T.RPCGen.ContactComponent[]>((res, pn) => {
+        const formatted = getE164(pn.number || '', pn.countryCode || countryCode)
+        if (formatted) {
+          res.push({
+            label: pn.label ?? '',
+            phoneNumber: formatted,
+          })
+        }
+        return res
+      }, [])
+      components.push(...emails.map(e => ({email: e.email ?? '', label: e.label ?? ''})))
+      if (components.length) {
+        ret.push({components, name: name ?? ''})
+      }
+
+      return ret
+    }, [])
   }
-  switch (cts.length) {
-    case 1:
-      return `${contactNotifMarker} ${cts[0]?.contactName ?? ''} joined Keybase!`
-    case 2:
-      return `${contactNotifMarker}s ${cts[0]?.contactName ?? ''} and ${
-        cts[1]?.contactName ?? ''
-      } joined Keybase!`
-    default: {
-      const lenMinusTwo = cts.length - 2
-      return `${contactNotifMarker}s ${cts[0]?.contactName ?? ''}, ${
-        cts[1]?.contactName ?? ''
-      }, and ${lenMinusTwo} ${pluralize('other', lenMinusTwo)} joined Keybase!`
+
+  const contactNotifMarker = 'Your contact'
+  const makeContactsResolvedMessage = (cts: T.Immutable<Array<T.RPCGen.ProcessedContact>>) => {
+    if (cts.length === 0) {
+      return ''
+    }
+    switch (cts.length) {
+      case 1:
+        return `${contactNotifMarker} ${cts[0]?.contactName ?? ''} joined Keybase!`
+      case 2:
+        return `${contactNotifMarker}s ${cts[0]?.contactName ?? ''} and ${
+          cts[1]?.contactName ?? ''
+        } joined Keybase!`
+      default: {
+        const lenMinusTwo = cts.length - 2
+        return `${contactNotifMarker}s ${cts[0]?.contactName ?? ''}, ${
+          cts[1]?.contactName ?? ''
+        }, and ${lenMinusTwo} ${pluralize('other', lenMinusTwo)} joined Keybase!`
+      }
     }
   }
-}
 
-export const useSettingsContactsState = Z.createZustand<State>('settings-contacts', (set, get) => {
   const dispatch: State['dispatch'] = {
     editContactImportEnabled: (enable, fromSettings) => {
       if (fromSettings) {
@@ -156,7 +179,6 @@ export const useSettingsContactsState = Z.createZustand<State>('settings-contact
           return
         }
 
-        // get permissions if we haven't loaded them for some reason
         let {permissionStatus} = get()
         if (permissionStatus === 'unknown') {
           permissionStatus = (await Contacts.getPermissionsAsync()).status
@@ -174,7 +196,6 @@ export const useSettingsContactsState = Z.createZustand<State>('settings-contact
           return
         }
 
-        // feature enabled and permission granted
         let mapped: T.RPCChat.Keybase1.Contact[]
         let defaultCountryCode = ''
         try {
@@ -182,10 +203,8 @@ export const useSettingsContactsState = Z.createZustand<State>('settings-contact
             fields: [Contacts.Fields.Name, Contacts.Fields.PhoneNumbers, Contacts.Fields.Emails],
           })
 
-          defaultCountryCode = Localization.getLocales()[0].regionCode?.toLowerCase() ?? ''
+          defaultCountryCode = (getLocales()[0].regionCode ?? '').toLowerCase()
           if (__DEV__ && !defaultCountryCode) {
-            // behavior of parsing can be unexpectedly different with no country code.
-            // iOS sim + android emu don't supply country codes, so use this one.
             defaultCountryCode = 'us'
           }
           mapped = nativeContactsToContacts(_contacts, defaultCountryCode)
@@ -241,7 +260,7 @@ export const useSettingsContactsState = Z.createZustand<State>('settings-contact
       const f = async () => {
         const {decrement, increment} = useWaitingState.getState().dispatch
         increment(importContactsWaitingKey)
-        const status = (await Contacts.requestPermissionsAsync()).status
+        const {status} = await Contacts.requestPermissionsAsync()
 
         if (status === Contacts.PermissionStatus.GRANTED && thenToggleImportOn) {
           get().dispatch.editContactImportEnabled(true, fromSettings)
diff --git a/shared/stores/tests/darkmode.test.ts b/shared/stores/tests/darkmode.test.ts
index c1baa3f8be3f..c4406fe3bc73 100644
--- a/shared/stores/tests/darkmode.test.ts
+++ b/shared/stores/tests/darkmode.test.ts
@@ -2,7 +2,7 @@
 import {resetAllStores} from '../../util/zustand'
 import {useDarkModeState} from '../darkmode'
 
-jest.mock('@/util/electron.desktop', () => ({
+jest.mock('@/util/electron', () => ({
   __esModule: true,
   default: {
     constants: {
@@ -15,7 +15,7 @@ jest.mock('@/util/electron.desktop', () => ({
   },
 }))
 
-const mockSetNativeTheme = require('@/util/electron.desktop').default.functions.setNativeTheme as jest.Mock
+const mockSetNativeTheme = require('@/util/electron').default.functions.setNativeTheme as jest.Mock
 
 afterEach(() => {
   mockSetNativeTheme.mockClear()
diff --git a/shared/styles/index.desktop.tsx b/shared/styles/index.desktop.tsx
deleted file mode 100644
index ce09b41b0e39..000000000000
--- a/shared/styles/index.desktop.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import * as Shared from './shared'
-import styleSheetCreateProxy from './style-sheet-proxy'
-import type * as CSS from './css'
-import {themed, colors, darkColors} from './colors'
-import {getAssetPath} from '@/constants/platform.desktop'
-
-const fontCommon = {
-  WebkitFontSmoothing: 'antialiased',
-  textRendering: 'optimizeLegibility',
-}
-
-const font = {
-  fontBold: {
-    ...fontCommon,
-    fontFamily: 'Keybase',
-    fontWeight: '700' as const,
-  },
-  fontExtrabold: {
-    ...fontCommon,
-    fontFamily: 'Keybase',
-    fontWeight: '800' as const,
-  },
-  fontRegular: {
-    ...fontCommon,
-    fontFamily: 'Keybase',
-    fontWeight: '500' as const,
-  },
-  fontSemibold: {
-    ...fontCommon,
-    fontFamily: 'Keybase',
-    fontWeight: '600' as const,
-  },
-  fontTerminal: {
-    ...fontCommon,
-    fontFamily: 'Source Code Pro',
-    fontWeight: '500' as const,
-  },
-  fontTerminalSemibold: {
-    ...fontCommon,
-    fontFamily: 'Source Code Pro',
-    fontWeight: '600' as const,
-  },
-  italic: {
-    fontStyle: 'italic' as const,
-  },
-}
-
-const util = {
-  ...Shared.util,
-  largeWidthPercent: '70%' as const,
-  loadingTextStyle: {
-    // this won't really work with dark mode
-    backgroundColor: colors.greyLight,
-    height: 16,
-    marginBottom: Shared.globalMargins.tiny,
-    marginTop: Shared.globalMargins.tiny,
-  },
-  mediumSubNavWidth: 260,
-  mediumWidth: 400,
-  shortSubNavWidth: 160,
-}
-
-export const globalStyles = {
-  ...font,
-  ...util,
-}
-
-export const mobileStyles = {}
-export const desktopStyles = {
-  get boxShadow() {
-    return {boxShadow: `0 2px 5px 0 ${themed.black_20OrBlack}`}
-  },
-  clickable: {cursor: 'pointer' as const},
-  editable: {cursor: 'text' as const},
-  fadeOpacity: {transition: 'opacity .25s ease-in-out' as const},
-  noSelect: {userSelect: 'none' as const},
-  scrollable: {overflowY: 'auto' as const},
-  windowDragging: {
-    // allow frameless window dragging
-    WebkitAppRegion: 'drag' as const,
-  },
-  windowDraggingClickable: {
-    // allow things in frameless regions to be clicked and not dragged
-    WebkitAppRegion: 'no-drag' as const,
-  },
-}
-
-export const transition = (...properties: Array<string>) => ({
-  transition: properties.map(p => `${p} 0.1s ease-out`).join(', '),
-})
-
-export const transitionColor = () => ({
-  transition: 'background 0.2s linear',
-})
-
-const fixScrollbars = () => {
-  // https://www.filamentgroup.com/lab/scrollbars/
-  const parent = document.createElement('div')
-  parent.setAttribute('style', 'width:30px;height:30px;')
-  parent.classList.add('scrollbar-test')
-
-  const child = document.createElement('div')
-  child.setAttribute('style', 'width:100%;height:40px')
-  parent.appendChild(child)
-  document.body.appendChild(parent)
-
-  // Measure the child element, if it is not
-  // 30px wide the scrollbars are obtrusive.
-  const scrollbarWidth = 30 - (parent.firstChild as HTMLDivElement).clientWidth
-  if (scrollbarWidth) {
-    document.body.classList.add('layout-scrollbar-obtrusive')
-  }
-
-  document.body.removeChild(parent)
-}
-
-export const initDesktopStyles = () => {
-  const head = document.head
-  const colorNames = Object.keys(colors).sort() as Array<keyof typeof colors>
-  const colorVars = `
-        :root { ${colorNames
-          .reduce((s, name) => {
-            const light = colors[name] as string
-            const dark = darkColors[name] as string
-            s.push(`--color-${name}: ${light === dark ? light : `light-dark(${light}, ${dark})`};`)
-            return s
-          }, new Array<string>())
-          .join(' ')} }
-`
-  const helpers = colorNames.reduce((s, name) => {
-    return (
-      s +
-      `.color_${name} {color: var(--color-${name});}\n` +
-      `.color_${name}_important {color: var(--color-${name}) !important;}\n` +
-      `.hover_color_${name}:hover:not(.spoiler .hover_color_${name}) {color: var(--color-${name});}\n` +
-      `.hover_container:hover .hover_contained_color_${name}:not(.spoiler .hover_contained_color_${name}) {color: var(--color-${name}) !important;}\n` +
-      `.background_color_${name} {background-color: var(--color-${name});}\n` +
-      `.hover_background_color_${name}:hover:not(.spoiler .hover_background_color_${name}) {background-color: var(--color-${name});}\n`
-    )
-  }, '')
-  const colorStyle = document.createElement('style')
-  colorStyle.appendChild(document.createTextNode(colorVars))
-  head.appendChild(colorStyle)
-
-  const helperStyle = document.createElement('style')
-  helperStyle.appendChild(document.createTextNode(helpers))
-  head.appendChild(helperStyle)
-
-  // Generate background-image CSS classes with dark mode variants
-  const makeImgSet = (dir: string, name: string) => {
-    const url = getAssetPath('images', dir, name)
-    return `-webkit-image-set(url('${url}') 1x)`
-  }
-  const makeMultiResImgSet = (baseName: string) => {
-    const ext = baseName.slice(baseName.lastIndexOf('.'))
-    const base = baseName.slice(0, baseName.lastIndexOf('.'))
-    const images = [1, 2, 3].map(
-      mult => `url('${getAssetPath('images', base)}${mult === 1 ? '' : `@${mult}x`}${ext}') ${mult}x`
-    )
-    return `-webkit-image-set(${images.join(', ')})`
-  }
-  const imageCss =
-    `.ashes-bg { background-image: ${makeImgSet('icons', 'pattern-ashes-desktop-400-68.png')}; }\n` +
-    `@media (prefers-color-scheme: dark) { .ashes-bg { background-image: ${makeImgSet('icons', 'dark-pattern-ashes-desktop-400-68.png')}; } }\n` +
-    `.upload-bg { background-image: ${makeMultiResImgSet('upload-pattern-80.png')}; }\n` +
-    `@media (prefers-color-scheme: dark) { .upload-bg { background-image: ${makeMultiResImgSet('dark-upload-pattern-80.png')}; } }\n`
-  const imageStyle = document.createElement('style')
-  imageStyle.appendChild(document.createTextNode(imageCss))
-  head.appendChild(imageStyle)
-
-  fixScrollbars()
-}
-
-export const hairlineWidth = 1
-
-type NamedStyles = Record<string, CSS._StylesCrossPlatform>
-export function styleSheetCreate<const O extends NamedStyles>(styles: () => O): O
-export function styleSheetCreate(styles: () => NamedStyles): NamedStyles {
-  return styleSheetCreateProxy(styles, o => o) as NamedStyles
-}
-
-export const collapseStyles = (styles: ReadonlyArray<unknown>): object | undefined => {
-  // fast path for a single style that passes. Often we do stuff like
-  // collapseStyle([styles.myStyle, this.props.something && {backgroundColor: 'red'}]), so in the false
-  // case we can just take styles.myStyle and not render thrash
-  const valid = styles.filter(s => {
-    return !!s && Object.keys(s).length
-  })
-  if (valid.length === 0) {
-    return undefined
-  }
-  if (valid.length === 1) {
-    const s = valid[0]
-    if (typeof s === 'object') {
-      return s as object
-    }
-  }
-
-  // jenkins doesn't support flat yet
-  const s = Object.assign({}, ...styles.flat()) as object
-  return Object.keys(s).length ? s : undefined
-}
-
-export const collapseStylesDesktop = collapseStyles
-
-export {isPhone, isTablet, fileUIName} from '@/constants/platform'
-export * from './shared'
-export * from './styles-base'
-
-export {themed as globalColors} from './colors'
-export const borderRadius = 4
-export {default as classNames} from './class-names'
-export type StylesCrossPlatform = CSS.StylesCrossPlatform
-export type {Color, CustomStyles, _StylesCrossPlatform, _StylesDesktop, _StylesMobile} from './css'
-export type CollapsibleStyle = CSS.StylesCrossPlatform | false | '' | 0 | null | undefined
-export type Position =
-  | 'top left'
-  | 'top right'
-  | 'bottom right'
-  | 'bottom left'
-  | 'right center'
-  | 'left center'
-  | 'top center'
-  | 'bottom center'
-  | 'center center'
-export const dimensionWidth = 0
-export const dimensionHeight = 0
-export const headerExtraHeight = 0
-export const undynamicColor = (col: string) => col
-export const normalizePath = (p: string) => p
-export const unnormalizePath = (p: string) => p
diff --git a/shared/styles/index.native.tsx b/shared/styles/index.native.tsx
deleted file mode 100644
index 29665b8d7741..000000000000
--- a/shared/styles/index.native.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import * as Shared from './shared'
-import {colors as lightColors} from './colors'
-import styleSheetCreateProxy, {type MapToStyles} from './style-sheet-proxy'
-import {StyleSheet, Dimensions} from 'react-native'
-import {useDarkModeState} from '@/stores/darkmode'
-import {isTablet} from '@/constants/platform'
-import type * as CSS from './css'
-
-const font = isIOS
-  ? {
-      fontBold: {fontFamily: 'Keybase' as const, fontWeight: '700' as const},
-      fontExtrabold: {fontFamily: 'Keybase' as const, fontWeight: '800' as const},
-      fontRegular: {fontFamily: 'Keybase' as const, fontWeight: '500' as const},
-      fontSemibold: {fontFamily: 'Keybase' as const, fontWeight: '600' as const},
-      fontTerminal: {fontFamily: 'Source Code Pro Medium' as const},
-      fontTerminalSemibold: {fontFamily: 'Source Code Pro Semibold' as const, fontWeight: '600' as const},
-      italic: {fontStyle: 'italic' as const},
-    }
-  : {
-      // The fontFamily name must match the font file's name exactly on Android.
-      fontBold: {fontFamily: 'keybase' as const, fontWeight: '700' as const},
-      fontExtrabold: {fontFamily: 'keybase-extrabold' as const, fontWeight: '800' as const},
-      fontRegular: {fontFamily: 'keybase-medium' as const, fontWeight: '500' as const},
-      fontSemibold: {fontFamily: 'keybase-semibold' as const, fontWeight: '600' as const},
-      fontTerminal: {fontFamily: 'SourceCodePro-Medium' as const},
-      fontTerminalSemibold: {fontFamily: 'SourceCodePro-Semibold' as const, fontWeight: '600' as const},
-      italic: {fontStyle: 'italic' as const},
-    }
-
-const util = {
-  ...Shared.util,
-  largeWidthPercent: '70%' as const,
-  loadingTextStyle: {
-    backgroundColor: lightColors.greyLight,
-    height: 16,
-  },
-  mediumSubNavWidth: (isTablet ? 270 : '100%') as CSS.DimensionValue,
-  mediumWidth: (isTablet ? 460 : '100%') as CSS.DimensionValue,
-  shortSubNavWidth: (isTablet ? 162 : '100%') as CSS.DimensionValue,
-}
-
-export const desktopStyles = {
-  boxShadow: {},
-  clickable: {},
-  editable: {},
-  fadeOpacity: {},
-  noSelect: {},
-  scrollable: {},
-  windowDragging: {},
-  windowDraggingClickable: {},
-}
-
-export const mobileStyles = {}
-
-export const globalStyles = {
-  ...font,
-  ...util,
-}
-
-export const hairlineWidth = StyleSheet.hairlineWidth
-type NamedStyles = {[key: string]: CSS._StylesCrossPlatform}
-export function styleSheetCreate<const O extends NamedStyles>(f: () => O): O
-export function styleSheetCreate(f: () => NamedStyles): NamedStyles {
-  return styleSheetCreateProxy(f, o => StyleSheet.create(o as any) as MapToStyles) as unknown as NamedStyles
-}
-
-export const collapseStyles = (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform => {
-  const nonNull = styles.filter(s => {
-    if (!s) {
-      return false
-    }
-    for (const _ in s as object) {
-      return true
-    }
-    return false
-  })
-  if (!nonNull.length) {
-    return undefined
-  }
-  if (nonNull.length === 1) {
-    const s = nonNull[0]
-    if (s && typeof s === 'object') {
-      return s as CSS.StylesCrossPlatform
-    }
-  }
-  return styles as CSS.StylesCrossPlatform
-}
-export const collapseStylesDesktop = collapseStyles
-
-export const transition = (..._properties: Array<string>) => ({})
-
-export {isPhone, isTablet, fileUIName} from '@/constants/platform'
-export * from './shared'
-export * from './styles-base'
-export {themed as globalColors} from './colors'
-export {default as classNames} from './class-names'
-export type StylesCrossPlatform = CSS.StylesCrossPlatform
-export type {Color, _StylesCrossPlatform, _StylesDesktop, _StylesMobile, CustomStyles} from './css'
-export type CollapsibleStyle = CSS.StylesCrossPlatform | false | '' | 0 | null | undefined
-export type Position =
-  | 'top left'
-  | 'top right'
-  | 'bottom right'
-  | 'bottom left'
-  | 'right center'
-  | 'left center'
-  | 'top center'
-  | 'bottom center'
-  | 'center center'
-export const borderRadius = 6
-export const dimensionWidth = Dimensions.get('window').width
-export const dimensionHeight = Dimensions.get('window').height
-export const headerExtraHeight = isTablet ? 16 : 0
-
-export const undynamicColor = (_col: string): string => {
-  const isDarkMode = useDarkModeState.getState().isDarkMode()
-  const col = _col as string | {dynamic?: {dark: string; light: string}}
-  // try and unwrap, some things (toggle?) don't seems to like mixed dynamic colors
-  if (typeof col !== 'string' && col.dynamic) {
-    return col.dynamic[isDarkMode ? 'dark' : 'light']
-  }
-  return col as string
-}
-
-export const normalizePath = (p: string) => {
-  if (p.startsWith('/')) {
-    return `file://${p}`
-  }
-  return p
-}
-
-export const unnormalizePath = (p: string) => {
-  if (p.startsWith('file://')) {
-    return p.slice('file://'.length)
-  }
-  return p
-}
diff --git a/shared/styles/index.tsx b/shared/styles/index.tsx
new file mode 100644
index 000000000000..54e6e7cc991b
--- /dev/null
+++ b/shared/styles/index.tsx
@@ -0,0 +1,362 @@
+import * as Shared from './shared'
+import styleSheetCreateProxy, {type MapToStyles} from './style-sheet-proxy'
+import {themed, colors, darkColors} from './colors'
+import {StyleSheet, Dimensions} from 'react-native'
+import {useDarkModeState} from '@/stores/darkmode'
+import {isTablet, getAssetPath} from '@/constants/platform'
+import type * as CSS from './css'
+
+// ─── Font definitions ─────────────────────────────────────────────────────────
+
+const fontCommonDesktop = {
+  WebkitFontSmoothing: 'antialiased',
+  textRendering: 'optimizeLegibility',
+}
+
+const fontDesktop = {
+  fontBold: {
+    ...fontCommonDesktop,
+    fontFamily: 'Keybase',
+    fontWeight: '700' as const,
+  },
+  fontExtrabold: {
+    ...fontCommonDesktop,
+    fontFamily: 'Keybase',
+    fontWeight: '800' as const,
+  },
+  fontRegular: {
+    ...fontCommonDesktop,
+    fontFamily: 'Keybase',
+    fontWeight: '500' as const,
+  },
+  fontSemibold: {
+    ...fontCommonDesktop,
+    fontFamily: 'Keybase',
+    fontWeight: '600' as const,
+  },
+  fontTerminal: {
+    ...fontCommonDesktop,
+    fontFamily: 'Source Code Pro',
+    fontWeight: '500' as const,
+  },
+  fontTerminalSemibold: {
+    ...fontCommonDesktop,
+    fontFamily: 'Source Code Pro',
+    fontWeight: '600' as const,
+  },
+  italic: {
+    fontStyle: 'italic' as const,
+  },
+}
+
+const fontNativeIOS = {
+  fontBold: {fontFamily: 'Keybase' as const, fontWeight: '700' as const},
+  fontExtrabold: {fontFamily: 'Keybase' as const, fontWeight: '800' as const},
+  fontRegular: {fontFamily: 'Keybase' as const, fontWeight: '500' as const},
+  fontSemibold: {fontFamily: 'Keybase' as const, fontWeight: '600' as const},
+  fontTerminal: {fontFamily: 'Source Code Pro Medium' as const},
+  fontTerminalSemibold: {fontFamily: 'Source Code Pro Semibold' as const, fontWeight: '600' as const},
+  italic: {fontStyle: 'italic' as const},
+}
+
+const fontNativeAndroid = {
+  // The fontFamily name must match the font file's name exactly on Android.
+  fontBold: {fontFamily: 'keybase' as const, fontWeight: '700' as const},
+  fontExtrabold: {fontFamily: 'keybase-extrabold' as const, fontWeight: '800' as const},
+  fontRegular: {fontFamily: 'keybase-medium' as const, fontWeight: '500' as const},
+  fontSemibold: {fontFamily: 'keybase-semibold' as const, fontWeight: '600' as const},
+  fontTerminal: {fontFamily: 'SourceCodePro-Medium' as const},
+  fontTerminalSemibold: {fontFamily: 'SourceCodePro-Semibold' as const, fontWeight: '600' as const},
+  italic: {fontStyle: 'italic' as const},
+}
+
+const font = isMobile ? (isIOS ? fontNativeIOS : fontNativeAndroid) : fontDesktop
+
+// ─── Utility styles ───────────────────────────────────────────────────────────
+
+const utilDesktop = {
+  ...Shared.util,
+  largeWidthPercent: '70%' as const,
+  loadingTextStyle: {
+    // this won't really work with dark mode
+    backgroundColor: colors.greyLight,
+    height: 16,
+    marginBottom: Shared.globalMargins.tiny,
+    marginTop: Shared.globalMargins.tiny,
+  },
+  mediumSubNavWidth: 260,
+  mediumWidth: 400,
+  shortSubNavWidth: 160,
+}
+
+const utilNative = {
+  ...Shared.util,
+  largeWidthPercent: '70%' as const,
+  loadingTextStyle: {
+    backgroundColor: colors.greyLight,
+    height: 16,
+  },
+  mediumSubNavWidth: (isTablet ? 270 : '100%') as CSS.DimensionValue,
+  mediumWidth: (isTablet ? 460 : '100%') as CSS.DimensionValue,
+  shortSubNavWidth: (isTablet ? 162 : '100%') as CSS.DimensionValue,
+}
+
+const util = isMobile ? utilNative : utilDesktop
+
+export const globalStyles = {
+  ...font,
+  ...util,
+}
+
+// ─── Platform-specific style collections ──────────────────────────────────────
+
+export const mobileStyles = {}
+export const desktopStyles = isMobile
+  ? {
+      boxShadow: {},
+      clickable: {},
+      editable: {},
+      fadeOpacity: {},
+      noSelect: {},
+      scrollable: {},
+      windowDragging: {},
+      windowDraggingClickable: {},
+    }
+  : {
+      get boxShadow() {
+        return {boxShadow: `0 2px 5px 0 ${themed.black_20OrBlack}`}
+      },
+      clickable: {cursor: 'pointer' as const},
+      editable: {cursor: 'text' as const},
+      fadeOpacity: {transition: 'opacity .25s ease-in-out' as const},
+      noSelect: {userSelect: 'none' as const},
+      scrollable: {overflowY: 'auto' as const},
+      windowDragging: {
+        // allow frameless window dragging
+        WebkitAppRegion: 'drag' as const,
+      },
+      windowDraggingClickable: {
+        // allow things in frameless regions to be clicked and not dragged
+        WebkitAppRegion: 'no-drag' as const,
+      },
+    }
+
+// ─── Transition helpers ───────────────────────────────────────────────────────
+
+export const transition = (...properties: Array<string>) =>
+  isMobile ? {} : {transition: properties.map(p => `${p} 0.1s ease-out`).join(', ')}
+
+export const transitionColor = () => (isMobile ? {} : {transition: 'background 0.2s linear'})
+
+// ─── Desktop initializer (DOM manipulation — desktop only) ────────────────────
+
+export const initDesktopStyles = () => {
+  if (isMobile) return
+  const head = document.head
+  const colorNames = Object.keys(colors).sort() as Array<keyof typeof colors>
+  const colorVars = `
+        :root { ${colorNames
+          .reduce((s, name) => {
+            const light = colors[name] as string
+            const dark = darkColors[name] as string
+            s.push(`--color-${name}: ${light === dark ? light : `light-dark(${light}, ${dark})`};`)
+            return s
+          }, new Array<string>())
+          .join(' ')} }
+`
+  const helpers = colorNames.reduce((s, name) => {
+    return (
+      s +
+      `.color_${name} {color: var(--color-${name});}\n` +
+      `.color_${name}_important {color: var(--color-${name}) !important;}\n` +
+      `.hover_color_${name}:hover:not(.spoiler .hover_color_${name}) {color: var(--color-${name});}\n` +
+      `.hover_container:hover .hover_contained_color_${name}:not(.spoiler .hover_contained_color_${name}) {color: var(--color-${name}) !important;}\n` +
+      `.background_color_${name} {background-color: var(--color-${name});}\n` +
+      `.hover_background_color_${name}:hover:not(.spoiler .hover_background_color_${name}) {background-color: var(--color-${name});}\n`
+    )
+  }, '')
+  const colorStyle = document.createElement('style')
+  colorStyle.appendChild(document.createTextNode(colorVars))
+  head.appendChild(colorStyle)
+
+  const helperStyle = document.createElement('style')
+  helperStyle.appendChild(document.createTextNode(helpers))
+  head.appendChild(helperStyle)
+
+  // Generate background-image CSS classes with dark mode variants
+  const makeImgSet = (dir: string, name: string) => {
+    const url = getAssetPath('images', dir, name)
+    return `-webkit-image-set(url('${url}') 1x)`
+  }
+  const makeMultiResImgSet = (baseName: string) => {
+    const ext = baseName.slice(baseName.lastIndexOf('.'))
+    const base = baseName.slice(0, baseName.lastIndexOf('.'))
+    const images = [1, 2, 3].map(
+      mult => `url('${getAssetPath('images', base)}${mult === 1 ? '' : `@${mult}x`}${ext}') ${mult}x`
+    )
+    return `-webkit-image-set(${images.join(', ')})`
+  }
+  const imageCss =
+    `.ashes-bg { background-image: ${makeImgSet('icons', 'pattern-ashes-desktop-400-68.png')}; }\n` +
+    `@media (prefers-color-scheme: dark) { .ashes-bg { background-image: ${makeImgSet('icons', 'dark-pattern-ashes-desktop-400-68.png')}; } }\n` +
+    `.upload-bg { background-image: ${makeMultiResImgSet('upload-pattern-80.png')}; }\n` +
+    `@media (prefers-color-scheme: dark) { .upload-bg { background-image: ${makeMultiResImgSet('dark-upload-pattern-80.png')}; } }\n`
+  const imageStyle = document.createElement('style')
+  imageStyle.appendChild(document.createTextNode(imageCss))
+  head.appendChild(imageStyle)
+
+  // https://www.filamentgroup.com/lab/scrollbars/
+  const parent = document.createElement('div')
+  parent.setAttribute('style', 'width:30px;height:30px;')
+  parent.classList.add('scrollbar-test')
+
+  const child = document.createElement('div')
+  child.setAttribute('style', 'width:100%;height:40px')
+  parent.appendChild(child)
+  document.body.appendChild(parent)
+
+  // Measure the child element, if it is not
+  // 30px wide the scrollbars are obtrusive.
+  const scrollbarWidth = 30 - ((parent.firstChild as unknown as HTMLDivElement).clientWidth ?? 0)
+  if (scrollbarWidth) {
+    document.body.classList.add('layout-scrollbar-obtrusive')
+  }
+
+  document.body.removeChild(parent)
+}
+
+// ─── hairlineWidth ────────────────────────────────────────────────────────────
+
+export const hairlineWidth = isMobile ? StyleSheet.hairlineWidth : 1
+
+// ─── styleSheetCreate ─────────────────────────────────────────────────────────
+
+type NamedStyles = Record<string, CSS._StylesCrossPlatform>
+export function styleSheetCreate<const O extends NamedStyles>(styles: () => O): O
+export function styleSheetCreate(styles: () => NamedStyles): NamedStyles {
+  if (isMobile) {
+    return styleSheetCreateProxy(styles, o => StyleSheet.create(o as unknown as Parameters<typeof StyleSheet.create>[0]) as MapToStyles) as unknown as NamedStyles
+  }
+  return styleSheetCreateProxy(styles, o => o) as NamedStyles
+}
+
+// ─── collapseStyles ───────────────────────────────────────────────────────────
+
+export const collapseStyles = isMobile
+  ? (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform => {
+      const nonNull = styles.filter(s => {
+        if (!s) {
+          return false
+        }
+        for (const _ in s as object) {
+          return true
+        }
+        return false
+      })
+      if (!nonNull.length) {
+        return undefined
+      }
+      if (nonNull.length === 1) {
+        const s = nonNull[0]
+        if (s && typeof s === 'object') {
+          return s as CSS.StylesCrossPlatform
+        }
+      }
+      return styles as CSS.StylesCrossPlatform
+    }
+  : (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform => {
+      // fast path for a single style that passes. Often we do stuff like
+      // collapseStyle([styles.myStyle, this.props.something && {backgroundColor: 'red'}]), so in the false
+      // case we can just take styles.myStyle and not render thrash
+      const valid = styles.filter(s => {
+        return !!s && Object.keys(s).length
+      })
+      if (valid.length === 0) {
+        return undefined
+      }
+      if (valid.length === 1) {
+        const s = valid[0]
+        if (typeof s === 'object') {
+          return s as CSS.StylesCrossPlatform
+        }
+      }
+
+      // jenkins doesn't support flat yet
+      const s = Object.assign({}, ...styles.flat()) as CSS.StylesCrossPlatform
+      return s && Object.keys(s).length ? s : undefined
+    }
+
+// Desktop-specific version that always returns a plain object (for use with DOM style props).
+export const collapseStylesDesktop = (styles: ReadonlyArray<unknown>): object | undefined => {
+  const valid = styles.filter(s => {
+    return !!s && Object.keys(s).length
+  })
+  if (valid.length === 0) {
+    return undefined
+  }
+  if (valid.length === 1) {
+    const s = valid[0]
+    if (typeof s === 'object') {
+      return s as object
+    }
+  }
+  const s = Object.assign({}, ...styles.flat()) as object
+  return Object.keys(s).length ? s : undefined
+}
+
+// ─── Platform constants ───────────────────────────────────────────────────────
+
+export const borderRadius = isMobile ? 6 : 4
+export const dimensionWidth = isMobile ? Dimensions.get('window').width : 0
+export const dimensionHeight = isMobile ? Dimensions.get('window').height : 0
+export const headerExtraHeight = isMobile ? (isTablet ? 16 : 0) : 0
+
+// ─── Path utilities ───────────────────────────────────────────────────────────
+
+export const normalizePath = (p: string) => {
+  if (!isMobile) return p
+  if (p.startsWith('/')) {
+    return `file://${p}`
+  }
+  return p
+}
+
+export const unnormalizePath = (p: string) => {
+  if (!isMobile) return p
+  if (p.startsWith('file://')) {
+    return p.slice('file://'.length)
+  }
+  return p
+}
+
+export const undynamicColor = (col: string): string => {
+  if (!isMobile) return col
+  const isDarkMode = useDarkModeState.getState().isDarkMode()
+  const c = col as string | {dynamic?: {dark: string; light: string}}
+  // try and unwrap, some things (toggle?) don't seem to like mixed dynamic colors
+  if (typeof c !== 'string' && c.dynamic) {
+    return c.dynamic[isDarkMode ? 'dark' : 'light']
+  }
+  return c as string
+}
+
+// ─── Re-exports ───────────────────────────────────────────────────────────────
+
+export {isPhone, isTablet, fileUIName} from '@/constants/platform'
+export * from './shared'
+export * from './styles-base'
+export {themed as globalColors} from './colors'
+export {default as classNames} from './class-names'
+export type StylesCrossPlatform = CSS.StylesCrossPlatform
+export type {Color, CustomStyles, _StylesCrossPlatform, _StylesDesktop, _StylesMobile} from './css'
+export type CollapsibleStyle = CSS.StylesCrossPlatform | false | '' | 0 | null | undefined
+export type Position =
+  | 'top left'
+  | 'top right'
+  | 'bottom right'
+  | 'bottom left'
+  | 'right center'
+  | 'left center'
+  | 'top center'
+  | 'bottom center'
+  | 'center center'
diff --git a/shared/teams/add-members-wizard/add-contacts.desktop.tsx b/shared/teams/add-members-wizard/add-contacts.desktop.tsx
deleted file mode 100644
index 32f52ba3075f..000000000000
--- a/shared/teams/add-members-wizard/add-contacts.desktop.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import type {AddMembersWizard} from './state'
-
-const AddContacts = (_: {wizard: AddMembersWizard}) => null
-export default AddContacts
diff --git a/shared/teams/add-members-wizard/add-contacts.native.tsx b/shared/teams/add-members-wizard/add-contacts.tsx
similarity index 81%
rename from shared/teams/add-members-wizard/add-contacts.native.tsx
rename to shared/teams/add-members-wizard/add-contacts.tsx
index 097cc6b7807b..4d630f1c85e0 100644
--- a/shared/teams/add-members-wizard/add-contacts.native.tsx
+++ b/shared/teams/add-members-wizard/add-contacts.tsx
@@ -3,12 +3,33 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {pluralize} from '@/util/string'
-import ContactsList, {useContacts, EnableContactsPopup} from '../common/contacts-list.native'
 import {useModalHeaderState} from '@/stores/modal-header'
-import type {Contact} from '../common/contacts-list.native'
 import {addMembersToWizard, type AddMembersWizard} from './state'
 
-const AddContacts = ({wizard}: {wizard: AddMembersWizard}) => {
+type Contact = {
+  id: string
+  name: string
+  pictureUri?: string
+  type: 'phone' | 'email'
+  value: string
+  valueFormatted?: string
+}
+
+type ContactsListProps = {
+  onSelect: (contact: Contact, checked: boolean) => void
+  search: string
+  selectedEmails: Set<string>
+  selectedPhones: Set<string>
+}
+
+type ContactsModule = {
+  default: React.ComponentType<ContactsListProps>
+  useContacts: () => {contacts: Array<Contact>; loading: boolean; noAccessPermanent: boolean}
+  EnableContactsPopup: React.ComponentType<{noAccess: boolean; onClose: () => void}>
+}
+
+const AddContactsMobile = ({wizard}: {wizard: AddMembersWizard}) => {
+  const {default: ContactsList, useContacts, EnableContactsPopup} = require('../common/contacts-list.native') as ContactsModule
   const navigateUp = C.Router2.navigateUp
   const navUpToScreen = C.Router2.navUpToScreen
   const onBack = () => navigateUp()
@@ -119,4 +140,9 @@ const AddContacts = ({wizard}: {wizard: AddMembersWizard}) => {
   )
 }
 
+const AddContacts = (props: {wizard: AddMembersWizard}) => {
+  if (!isMobile) return null
+  return <AddContactsMobile {...props} />
+}
+
 export default AddContacts
diff --git a/shared/teams/invite-by-contact/team-invite-by-contacts.desktop.tsx b/shared/teams/invite-by-contact/team-invite-by-contacts.desktop.tsx
deleted file mode 100644
index 0edab6a4786e..000000000000
--- a/shared/teams/invite-by-contact/team-invite-by-contacts.desktop.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-const TeamInviteByContact = (_p: {teamID: string}) => null
-export default TeamInviteByContact
diff --git a/shared/teams/invite-by-contact/team-invite-by-contacts.native.tsx b/shared/teams/invite-by-contact/team-invite-by-contacts.tsx
similarity index 93%
rename from shared/teams/invite-by-contact/team-invite-by-contacts.native.tsx
rename to shared/teams/invite-by-contact/team-invite-by-contacts.tsx
index 38e2f2dda8b0..f5063dcd2bb4 100644
--- a/shared/teams/invite-by-contact/team-invite-by-contacts.native.tsx
+++ b/shared/teams/invite-by-contact/team-invite-by-contacts.tsx
@@ -1,12 +1,29 @@
 import * as C from '@/constants'
 import * as React from 'react'
 import * as T from '@/constants/types'
-import useContacts, {type Contact} from '../common/use-contacts.native'
-import {InviteByContact, type ContactRowProps} from './index.native'
 import {getE164} from '@/util/phone-numbers'
 import {openSMS} from '@/util/misc'
 import logger from '@/logger'
 import {useLoadedTeam} from '../team/use-loaded-team'
+import {InviteByContact} from './index.native'
+import useContacts from '../common/use-contacts.native'
+
+type Contact = {
+  id: string
+  name: string
+  pictureUri?: string
+  type: 'phone' | 'email'
+  value: string
+  valueFormatted?: string
+}
+
+type ContactRowProps = Contact & {
+  id: string
+  alreadyInvited: boolean
+  loading: boolean
+  onClick: () => void
+}
+
 
 // Seitan invite names (labels) look like this: "[name] ([phone number])". Try
 // to derive E164 phone number based on seitan invite name and user's region.
@@ -60,7 +77,7 @@ const generateSMSBody = (teamname: string, seitan: string): string => {
   return `Join the ${team} on Keybase. Copy this message into the "Teams" tab.\n\ntoken: ${seitan.toLowerCase()}\n\ninstall: keybase.io/_/go`
 }
 
-const TeamInviteByContact = (props: Props) => {
+const TeamInviteByContactMobile = (props: Props) => {
   const {teamID} = props
   const {contacts, region, errorMessage} = useContacts()
   const {
@@ -214,4 +231,9 @@ const TeamInviteByContact = (props: Props) => {
   )
 }
 
+const TeamInviteByContact = (props: Props) => {
+  if (!isMobile) return null
+  return <TeamInviteByContactMobile {...props} />
+}
+
 export default TeamInviteByContact
diff --git a/shared/tracker/main.desktop.tsx b/shared/tracker/main.desktop.tsx
index 384c99aa4970..d92ac3514cb7 100644
--- a/shared/tracker/main.desktop.tsx
+++ b/shared/tracker/main.desktop.tsx
@@ -1,6 +1,6 @@
 // Entry point for the tracker render window
 import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron.desktop'
+import {waitOnKB2Loaded} from '@/util/electron'
 waitOnKB2Loaded(() => {
   import('./main2.desktop').then(() => {}).catch(() => {})
 })
diff --git a/shared/tracker/main2.desktop.tsx b/shared/tracker/main2.desktop.tsx
index bb4a7b0ad048..f476f678703b 100644
--- a/shared/tracker/main2.desktop.tsx
+++ b/shared/tracker/main2.desktop.tsx
@@ -6,7 +6,7 @@ import Tracker from './index.desktop'
 import loadRemoteComponent from '../desktop/remote/component-loader.desktop'
 import {getRemoteComponentParam, RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop'
 import type {Props as TrackerProps} from './index.desktop'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 
 const {closeWindow} = KB2.functions
 
diff --git a/shared/tsconfig.desktop.json b/shared/tsconfig.desktop.json
index d8e5a1e392cf..656d2551129f 100644
--- a/shared/tsconfig.desktop.json
+++ b/shared/tsconfig.desktop.json
@@ -21,6 +21,7 @@
     "./common-adapters/icon.constants-gen.desktop.tsx",
     "./common-adapters/icon.constants-gen.native.tsx",
     "./common-adapters/icon.constants-gen.shared.tsx",
-    "./globals.native.d.ts"
+    "./globals.native.d.ts",
+    "./**/*.native.d.ts"
   ]
 }
diff --git a/shared/unlock-folders/main.desktop.tsx b/shared/unlock-folders/main.desktop.tsx
index aa15b58d363b..f32552456c90 100644
--- a/shared/unlock-folders/main.desktop.tsx
+++ b/shared/unlock-folders/main.desktop.tsx
@@ -1,4 +1,4 @@
 // Entry point for the unlock folders render window
 import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron.desktop'
+import {waitOnKB2Loaded} from '@/util/electron'
 waitOnKB2Loaded(() => require('./main2.desktop') as () => void)
diff --git a/shared/util/clipboard.desktop.tsx b/shared/util/clipboard.desktop.tsx
index e9fa8d56bd92..0f5cb1bd74bc 100644
--- a/shared/util/clipboard.desktop.tsx
+++ b/shared/util/clipboard.desktop.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import KB2 from './electron.desktop'
+import KB2 from './electron'
 const {clipboardAvailableFormats} = KB2.functions
 
 export async function readImageFromClipboard(_event: React.SyntheticEvent): Promise<Uint8Array | undefined> {
diff --git a/shared/util/electron.native.tsx b/shared/util/electron.native.tsx
deleted file mode 100644
index 79b97c98a443..000000000000
--- a/shared/util/electron.native.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const None = {
-  functions: {} as {
-    darwinCopyToChatTempUploadFile?: (dst: string, originalFilePath: string) => Promise<void>
-    getPathForFile?: (file: File) => string
-    isDirectory?: (path: string) => Promise<boolean>
-    setNativeTheme?: (theme: 'dark' | 'light' | 'system') => Promise<void>
-  },
-}
-export default None
diff --git a/shared/util/electron.desktop.tsx b/shared/util/electron.tsx
similarity index 85%
rename from shared/util/electron.desktop.tsx
rename to shared/util/electron.tsx
index 653a022bcebb..e7c1eba88282 100644
--- a/shared/util/electron.desktop.tsx
+++ b/shared/util/electron.tsx
@@ -131,20 +131,26 @@ export type KB2 = {
   }
 }
 
+// ─── Desktop implementation ────────────────────────────────────────────────
+
 const kb2Waiters = new Array<() => void>()
 
 export const injectPreload = (kb2: KB2) => {
-  // eslint-disable-next-line
-  if (!kb2?.constants?.assetRoot) {
+  if (!kb2.constants.assetRoot) {
     throw new Error('Invalid kb2 injected')
   }
-
-  while (kb2Waiters.length) {
-    kb2Waiters.shift()?.()
+  if (!isMobile) {
+    while (kb2Waiters.length) {
+      kb2Waiters.shift()?.()
+    }
   }
 }
 
 export const waitOnKB2Loaded = (cb: () => void) => {
+  if (isMobile) {
+    cb()
+    return
+  }
   if (globalThis._fromPreload) {
     cb()
   } else {
@@ -152,12 +158,12 @@ export const waitOnKB2Loaded = (cb: () => void) => {
   }
 }
 
-const getStashed = () => {
+const getStashed = (): KB2 => {
   if (!globalThis._fromPreload) throw new Error('KB2 not injected!')
   return globalThis._fromPreload as KB2
 }
 
-const theKB2: KB2 = {
+const desktopKB2: KB2 = {
   get constants() {
     return getStashed().constants
   },
@@ -166,4 +172,20 @@ const theKB2: KB2 = {
   },
 }
 
+// Native stub — only the subset of functions available on mobile.
+// Typed as KB2 so callers don't need to narrow; they guard with isMobile at runtime.
+const nativeKB2: KB2 = {
+  functions: {
+    darwinCopyToChatTempUploadFile: undefined,
+    getPathForFile: undefined,
+    isDirectory: undefined,
+    setNativeTheme: undefined,
+    mainWindowDispatch: (_action) => {},
+  },
+  get constants(): KB2['constants'] {
+    throw new Error('KB2.constants is not available on mobile')
+  },
+}
+
+const theKB2: KB2 = isMobile ? nativeKB2 : desktopKB2
 export default theKB2
diff --git a/shared/util/expo-image-picker.desktop.tsx b/shared/util/expo-image-picker.desktop.tsx
deleted file mode 100644
index 26dec0a5033c..000000000000
--- a/shared/util/expo-image-picker.desktop.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export type ImagePickerResult = {assets: null; canceled: true}
-export type ImageInfo = {uri: string; width: number; height: number; type?: 'image' | 'video'}
-
-// eslint-disable-next-line @typescript-eslint/require-await
-export const launchCameraAsync = async (): Promise<ImagePickerResult> => ({assets: null, canceled: true})
-// eslint-disable-next-line @typescript-eslint/require-await
-export const launchImageLibraryAsync = async (): Promise<ImagePickerResult> => ({assets: null, canceled: true})
diff --git a/shared/util/expo-image-picker.native.tsx b/shared/util/expo-image-picker.tsx
similarity index 97%
rename from shared/util/expo-image-picker.native.tsx
rename to shared/util/expo-image-picker.tsx
index 8351e0bbe140..1c0805c5c01c 100644
--- a/shared/util/expo-image-picker.native.tsx
+++ b/shared/util/expo-image-picker.tsx
@@ -27,6 +27,7 @@ export const launchCameraAsync = async (
   mediaType: 'photo' | 'video' | 'mixed',
   askPermAndRetry: boolean = true
 ): Promise<ImagePicker.ImagePickerResult> => {
+  if (!isMobile) return canceled
   let res: ImagePicker.ImagePickerResult | undefined
   try {
     res = await ImagePicker.launchCameraAsync({
@@ -53,6 +54,7 @@ export const launchImageLibraryAsync = async (
   askPermAndRetry: boolean = true,
   allowsMultipleSelection: boolean = false
 ): Promise<ImagePicker.ImagePickerResult> => {
+  if (!isMobile) return canceled
   let res: ImagePicker.ImagePickerResult | undefined
   try {
     res = await ImagePicker.launchImageLibraryAsync({
diff --git a/shared/util/misc.desktop.tsx b/shared/util/misc.desktop.tsx
deleted file mode 100644
index cab397e5d17e..000000000000
--- a/shared/util/misc.desktop.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import logger from '@/logger'
-import {navigateAppend} from '@/constants/router'
-import debounce from 'lodash/debounce'
-import KB2, {type OpenDialogOptions, type SaveDialogOptions} from './electron.desktop'
-
-const {openURL: openURLImpl, showOpenDialog, showSaveDialog} = KB2.functions
-
-type NotifyPopupOpts = {body?: string; sound?: boolean}
-
-const rateLimit: {[K in string]: () => void} = {}
-const rateLimitPayloads: {
-  [K in string]:
-    | {
-        title: string
-        opts?: NotifyPopupOpts
-        onClick?: () => void
-      }
-    | undefined
-} = {}
-
-export const openURL = async (url?: string) => {
-  if (!url) {
-    console.log('Skipping null url click')
-    return
-  }
-  return openURLImpl?.(url)
-}
-
-export const openSMS = async (_phonenos: Array<string>, _body?: string): Promise<unknown> => {
-  console.warn('Attempted to open SMS on desktop')
-  return Promise.reject(new Error("Can't open SMS on desktop"))
-}
-
-export const clearLocalLogs = async (): Promise<void> => {
-  // noop on desktop
-}
-
-export const editAvatar = () => {
-  navigateAppend({name: 'profileEditAvatar', params: {image: undefined}})
-}
-
-export const pickImages = async (title: string) => {
-  if (!showOpenDialog) return []
-  const filePaths = await showOpenDialog({
-    allowFiles: true,
-    allowMultiselect: true,
-    filters: [{extensions: ['jpg', 'png', 'gif'], name: 'Images'}],
-    title,
-  })
-  return filePaths
-}
-
-export const pickFiles = async (options: OpenDialogOptions) => {
-  if (!showOpenDialog) return []
-  const filePaths = await showOpenDialog(options)
-  return filePaths
-}
-
-export const pickSave = async (options: SaveDialogOptions): Promise<string> => {
-  if (!showSaveDialog) return [] as unknown as string
-  const res = await showSaveDialog(options)
-  return res
-}
-
-export function NotifyPopup(
-  title: string,
-  opts?: NotifyPopupOpts,
-  rateLimitSeconds: number = -1,
-  rateLimitKey?: string,
-  onClick?: () => void,
-  onClose?: () => void
-): void {
-  const sound = opts?.sound
-  if (rateLimitSeconds > 0) {
-    const key = rateLimitKey || title
-
-    if (rateLimit[key]) {
-      rateLimitPayloads[key] = {onClick, opts, title}
-      rateLimit[key]()
-      return
-    }
-
-    rateLimit[key] = debounce(() => {
-      if (rateLimitPayloads[key]) {
-        const {title, opts, onClick} = rateLimitPayloads[key]
-        rateLimitPayloads[key] = undefined
-        const notification = new Notification(title, {...opts, silent: !sound})
-        notification.onclick = onClick ?? null
-        notification.onclose = onClose ?? null
-      }
-    }, rateLimitSeconds * 1_000)
-  }
-
-  logger.info('NotifyPopup: creating notification')
-  const notification = new Notification(title, {...opts, silent: !sound})
-  notification.onclick = onClick ?? null
-  notification.onclose = onClose ?? null
-}
diff --git a/shared/util/misc.native.tsx b/shared/util/misc.native.tsx
deleted file mode 100644
index e16040691f23..000000000000
--- a/shared/util/misc.native.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import {navigateAppend} from '@/constants/router'
-import {pickDocumentsAsync} from './expo-document-picker.native'
-import {launchImageLibraryAsync, type ImageInfo} from './expo-image-picker.native'
-import type {OpenDialogOptions, SaveDialogOptions} from './electron.desktop'
-import * as SMS from 'expo-sms'
-import {Linking} from 'react-native'
-import {addNotificationRequest, clearLocalLogs as clearLocalLogsNative} from 'react-native-kb'
-import {filePickerError} from '@/util/storeless-actions'
-
-type NotifyPopupOpts = {body?: string; sound?: boolean}
-
-export function openURL(url?: string) {
-  if (url) {
-    Linking.openURL(url).catch((err: unknown) => console.warn('An error occurred', err))
-  } else {
-    console.log('Skipping null url click')
-  }
-}
-
-export const openSMS = async (phonenos: Array<string>, body?: string): Promise<unknown> => {
-  return SMS.isAvailableAsync().then(async isAvailable => {
-    if (!isAvailable) {
-      throw new Error('SMS not available')
-    }
-    return SMS.sendSMSAsync(phonenos, body || '')
-  })
-}
-
-export const clearLocalLogs = async (): Promise<void> => {
-  if (!isIOS) return
-  return clearLocalLogsNative()
-}
-
-export const editAvatar = () => {
-  const f = async () => {
-    try {
-      const result = await launchImageLibraryAsync('photo')
-      const first = result.assets?.reduce<ImageInfo | undefined>((acc, a) => {
-        if (!acc && (a.type === 'image' || a.type === 'video')) {
-          return a as ImageInfo
-        }
-        return acc
-      }, undefined)
-      if (!result.canceled && first) {
-        navigateAppend({name: 'profileEditAvatar', params: {image: first}})
-      }
-    } catch (error) {
-      filePickerError(new Error(String(error)))
-    }
-  }
-  void f()
-}
-
-export const pickImages = async (_: string): Promise<Array<string>> => {
-  const result = await launchImageLibraryAsync('photo')
-  return result.canceled ? [] : result.assets.map(a => a.uri)
-}
-
-export const pickFiles = async (_options: OpenDialogOptions): Promise<Array<string>> => {
-  const result = await pickDocumentsAsync(true)
-  return result.canceled ? [] : result.assets.map(a => a.uri)
-}
-
-export const pickSave = async (_options: SaveDialogOptions): Promise<string> => {
-  return await Promise.reject(new Error('No supported platform'))
-}
-
-export function NotifyPopup(title: string, _opts?: NotifyPopupOpts, _rateLimitSeconds?: number, _rateLimitKey?: string, _onClick?: () => void, _onClose?: () => void): void {
-  console.log('NotifyPopup: ', title)
-  addNotificationRequest({
-    body: title,
-    id: Math.floor(Math.random() * 2 ** 32).toString(),
-  }).catch(() => {})
-}
diff --git a/shared/util/misc.tsx b/shared/util/misc.tsx
new file mode 100644
index 000000000000..29ab5cbf9714
--- /dev/null
+++ b/shared/util/misc.tsx
@@ -0,0 +1,175 @@
+import debounce from 'lodash/debounce'
+import logger from '@/logger'
+import {navigateAppend} from '@/constants/router'
+import KB2Default from './electron'
+import type {OpenDialogOptions, SaveDialogOptions} from './electron'
+import type {ImageInfo} from './expo-image-picker'
+import {Linking} from 'react-native'
+import {clearLocalLogs as clearLocalLogsNative, addNotificationRequest} from 'react-native-kb'
+import {filePickerError} from '@/util/storeless-actions'
+
+// ─── openURL ────────────────────────────────────────────────────────────────
+
+export const openURL = async (url?: string): Promise<void> => {
+  if (!url) {
+    console.log('Skipping null url click')
+    return
+  }
+  if (isMobile) {
+    Linking.openURL(url).catch((err: unknown) => console.warn('An error occurred', err))
+  } else {
+    return KB2Default.functions.openURL?.(url)
+  }
+}
+
+// ─── openSMS ────────────────────────────────────────────────────────────────
+
+export const openSMS = async (phonenos: Array<string>, body?: string): Promise<unknown> => {
+  if (!isMobile) {
+    console.warn('Attempted to open SMS on desktop')
+    return Promise.reject(new Error("Can't open SMS on desktop"))
+  }
+  const SMS = await import('expo-sms')
+  return SMS.isAvailableAsync().then(async isAvailable => {
+    if (!isAvailable) {
+      throw new Error('SMS not available')
+    }
+    return SMS.sendSMSAsync(phonenos, body || '')
+  })
+}
+
+// ─── clearLocalLogs ──────────────────────────────────────────────────────────
+
+export const clearLocalLogs = async (): Promise<void> => {
+  if (!isMobile || !isIOS) return
+  return clearLocalLogsNative()
+}
+
+// ─── editAvatar ──────────────────────────────────────────────────────────────
+
+export const editAvatar = (): void => {
+  if (isMobile) {
+    const f = async () => {
+      try {
+        const imagePickerMod = await import('./expo-image-picker')
+        const result = await imagePickerMod.launchImageLibraryAsync('photo')
+        const first = result.assets?.reduce<ImageInfo | undefined>((acc, a) => {
+          if (!acc && (a.type === 'image' || a.type === 'video')) {
+            return a as ImageInfo
+          }
+          return acc
+        }, undefined)
+        if (!result.canceled && first) {
+          navigateAppend({name: 'profileEditAvatar', params: {image: first}})
+        }
+      } catch (error) {
+        filePickerError(new Error(String(error)))
+      }
+    }
+    void f()
+  } else {
+    navigateAppend({name: 'profileEditAvatar', params: {image: undefined}})
+  }
+}
+
+// ─── pickImages ──────────────────────────────────────────────────────────────
+
+export const pickImages = async (title: string): Promise<Array<string>> => {
+  if (isMobile) {
+    const imagePickerMod = await import('./expo-image-picker')
+    const result = await imagePickerMod.launchImageLibraryAsync('photo')
+    return result.canceled ? [] : result.assets.map(a => a.uri)
+  } else {
+    const {showOpenDialog} = KB2Default.functions
+    if (!showOpenDialog) return []
+    return showOpenDialog({
+      allowFiles: true,
+      allowMultiselect: true,
+      filters: [{extensions: ['jpg', 'png', 'gif'], name: 'Images'}],
+      title,
+    })
+  }
+}
+
+// ─── pickFiles ──────────────────────────────────────────────────────────────
+
+export const pickFiles = async (options: OpenDialogOptions): Promise<Array<string>> => {
+  if (isMobile) {
+    const docPickerMod = require('./expo-document-picker.native') as {pickDocumentsAsync: (multiple: boolean) => Promise<{canceled: boolean; assets: Array<{uri: string}>}>}
+    const result = await docPickerMod.pickDocumentsAsync(true)
+    return result.canceled ? [] : result.assets.map(a => a.uri)
+  } else {
+    const {showOpenDialog} = KB2Default.functions
+    if (!showOpenDialog) return []
+    return showOpenDialog(options)
+  }
+}
+
+// ─── pickSave ────────────────────────────────────────────────────────────────
+
+export const pickSave = async (options: SaveDialogOptions): Promise<string> => {
+  if (isMobile) {
+    return Promise.reject(new Error('No supported platform'))
+  } else {
+    const {showSaveDialog} = KB2Default.functions
+    if (!showSaveDialog) return [] as unknown as string
+    return showSaveDialog(options)
+  }
+}
+
+// ─── NotifyPopup ─────────────────────────────────────────────────────────────
+
+type NotifyPopupOpts = {body?: string; sound?: boolean}
+
+// Desktop rate-limiting state
+const _rateLimit: {[K in string]: () => void} = {}
+const _rateLimitPayloads: {
+  [K in string]:
+    | {title: string; opts?: NotifyPopupOpts; onClick?: () => void}
+    | undefined
+} = {}
+
+export function NotifyPopup(
+  title: string,
+  opts?: NotifyPopupOpts,
+  rateLimitSeconds: number = -1,
+  rateLimitKey?: string,
+  onClick?: () => void,
+  onClose?: () => void
+): void {
+  if (isMobile) {
+    console.log('NotifyPopup: ', title)
+    addNotificationRequest({
+      body: title,
+      id: Math.floor(Math.random() * 2 ** 32).toString(),
+    }).catch(() => {})
+    return
+  }
+
+  // Desktop: use Web Notification API with optional rate-limiting
+  const sound = opts?.sound
+  if (rateLimitSeconds > 0) {
+    const key = rateLimitKey || title
+
+    if (_rateLimit[key]) {
+      _rateLimitPayloads[key] = {onClick, opts, title}
+      _rateLimit[key]()
+      return
+    }
+
+    _rateLimit[key] = debounce(() => {
+      if (_rateLimitPayloads[key]) {
+        const payload = _rateLimitPayloads[key]
+        _rateLimitPayloads[key] = undefined
+        const notification = new Notification(payload.title, {...payload.opts, silent: !payload.opts?.sound})
+        notification.onclick = payload.onClick ?? null
+        notification.onclose = onClose ?? null
+      }
+    }, rateLimitSeconds * 1_000)
+  }
+
+  logger.info('NotifyPopup: creating notification')
+  const notification = new Notification(title, {...opts, silent: !sound})
+  notification.onclick = onClick ?? null
+  notification.onclose = onClose ?? null
+}
diff --git a/shared/util/platform-specific/index.desktop.tsx b/shared/util/platform-specific/index.desktop.tsx
deleted file mode 100644
index 5e956127a19d..000000000000
--- a/shared/util/platform-specific/index.desktop.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export const requestPermissionsToWrite = async () => {
-  return Promise.resolve(true)
-}
-
-export async function showShareActionSheet(_options: {
-  filePath?: string
-  message?: string
-  mimeType: string
-}): Promise<void> {
-  return Promise.reject(new Error('Show Share Action - unsupported on this platform'))
-}
-export async function saveAttachmentToCameraRoll(
-  _filePath: string,
-  _mimeType: string
-): Promise<void> {
-  return Promise.reject(new Error('Save Attachment to camera roll - unsupported on this platform'))
-}
-
-export const requestLocationPermission = async () => Promise.resolve()
-export const watchPositionForMap = async () => Promise.resolve(() => {})
diff --git a/shared/util/platform-specific/index.native.tsx b/shared/util/platform-specific/index.tsx
similarity index 83%
rename from shared/util/platform-specific/index.native.tsx
rename to shared/util/platform-specific/index.tsx
index 83d4ad567219..2ddebb84e151 100644
--- a/shared/util/platform-specific/index.native.tsx
+++ b/shared/util/platform-specific/index.tsx
@@ -1,13 +1,15 @@
 import * as T from '@/constants/types'
-import * as ExpoLocation from 'expo-location'
+import logger from '@/logger'
 import * as MediaLibrary from 'expo-media-library'
+import * as ExpoLocation from 'expo-location'
 import * as FileSystem from 'expo-file-system'
-import {addNotificationRequest} from 'react-native-kb'
-import logger from '@/logger'
+import {addNotificationRequest, androidShare, androidShareText} from 'react-native-kb'
 import {ActionSheetIOS} from 'react-native'
-import {androidShare, androidShareText} from 'react-native-kb'
 
 export const requestPermissionsToWrite = async () => {
+  if (!isMobile) {
+    return Promise.resolve(true)
+  }
   if (isAndroid) {
     const p = await MediaLibrary.requestPermissionsAsync(false)
     return p.granted ? Promise.resolve() : Promise.reject(new Error('Unable to acquire storage permissions'))
@@ -15,7 +17,10 @@ export const requestPermissionsToWrite = async () => {
   return Promise.resolve()
 }
 
-export const requestLocationPermission = async (mode: T.RPCChat.UIWatchPositionPerm) => {
+export const requestLocationPermission = async (mode?: T.RPCChat.UIWatchPositionPerm) => {
+  if (!isMobile) {
+    return Promise.resolve()
+  }
   if (isIOS) {
     logger.info('[location] Requesting location perms', mode)
     switch (mode) {
@@ -36,6 +41,8 @@ export const requestLocationPermission = async (mode: T.RPCChat.UIWatchPositionP
         }
         break
       }
+      default:
+        break
     }
   } else if (isAndroid) {
     const androidBGPerms = await ExpoLocation.requestForegroundPermissionsAsync()
@@ -46,6 +53,9 @@ export const requestLocationPermission = async (mode: T.RPCChat.UIWatchPositionP
 }
 
 export async function saveAttachmentToCameraRoll(filePath: string, mimeType: string): Promise<void> {
+  if (!isMobile) {
+    return Promise.reject(new Error('Save Attachment to camera roll - unsupported on this platform'))
+  }
   const fileURL = 'file://' + filePath
   const saveType: 'video' | 'photo' = mimeType.startsWith('video') ? 'video' : 'photo'
   const logPrefix = '[saveAttachmentToCameraRoll] '
@@ -80,15 +90,18 @@ export const showShareActionSheet = async (options: {
   message?: string
   mimeType: string
 }) => {
+  if (!isMobile) {
+    return Promise.reject(new Error('Show Share Action - unsupported on this platform'))
+  }
   if (isIOS) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       ActionSheetIOS.showShareActionSheetWithOptions(
         {
           message: options.message,
           url: options.filePath,
         },
         reject,
-        resolve
+        () => resolve()
       )
     })
   } else {
@@ -109,3 +122,5 @@ export const showShareActionSheet = async (options: {
     }
   }
 }
+
+export const watchPositionForMap = async () => Promise.resolve(() => {})
diff --git a/shared/util/storeless-actions.desktop.tsx b/shared/util/storeless-actions.desktop.tsx
deleted file mode 100644
index 091ef22b5fed..000000000000
--- a/shared/util/storeless-actions.desktop.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as T from '@/constants/types'
-import {ignorePromise} from '@/constants/utils'
-import KB2 from '@/util/electron.desktop'
-import logger from '@/logger'
-
-const {showMainWindow, ctlQuit, dumpNodeLogger, setOpenAtLogin, copyToClipboard: copyText} = KB2.functions
-
-export const copyToClipboard = (text: string) => {
-  copyText?.(text)
-}
-
-export const dumpLogs = async (reason?: string) => {
-  await logger.dump()
-  await (dumpNodeLogger?.() ?? Promise.resolve([]))
-  if (reason === 'quitting through menu') {
-    ctlQuit?.()
-  }
-}
-
-export const filePickerError = (_error: Error) => {}
-
-export const onEngineConnected = () => {
-  const f = async () => {
-    await T.RPCGen.configHelloIAmRpcPromise({details: KB2.constants.helloDetails})
-  }
-  ignorePromise(f())
-}
-
-export const openAppSettings = () => {}
-
-export const openAppStore = () => {}
-
-export const persistRoute = (_clear: boolean, _immediate: boolean, _isStartupLoaded: () => boolean) => {}
-
-export const setOpenAtLoginInPlatform = async (openAtLogin: boolean) => {
-  await setOpenAtLogin?.(openAtLogin)
-}
-
-export const showMain = () => {
-  showMainWindow?.()
-}
-
-export const showShareActionSheet = (_filePath: string, _message: string, _mimeType: string) => {}
diff --git a/shared/util/storeless-actions.native.tsx b/shared/util/storeless-actions.tsx
similarity index 62%
rename from shared/util/storeless-actions.native.tsx
rename to shared/util/storeless-actions.tsx
index ed37ec8526f9..a02c35af0efb 100644
--- a/shared/util/storeless-actions.native.tsx
+++ b/shared/util/storeless-actions.tsx
@@ -1,30 +1,61 @@
-import * as Clipboard from 'expo-clipboard'
-import {Alert, Linking} from 'react-native'
-import * as Tabs from '@/constants/tabs'
 import * as T from '@/constants/types'
 import {ignorePromise, timeoutPromise} from '@/constants/utils'
-import {getTab, getVisiblePath} from '@/constants/router'
+import logger from '@/logger'
+import KB2 from '@/util/electron'
+import {setStringAsync} from 'expo-clipboard'
+import {Alert, Linking} from 'react-native'
 import {showShareActionSheet as showShareActionSheetImpl} from '@/util/platform-specific'
+import {getTab, getVisiblePath} from '@/constants/router'
+import {peopleTab} from '@/constants/tabs'
 
 export const copyToClipboard = (text: string) => {
-  Clipboard.setStringAsync(text)
-    .then(() => {})
-    .catch(() => {})
+  if (isMobile) {
+    setStringAsync(text)
+      .then(() => {})
+      .catch(() => {})
+  } else {
+    KB2.functions.copyToClipboard?.(text)
+  }
 }
 
-export const dumpLogs = async (_reason?: string) => {}
+export const dumpLogs = async (reason?: string) => {
+  if (isMobile) {
+    return
+  }
+  const {dumpNodeLogger, ctlQuit} = KB2.functions
+  await logger.dump()
+  await (dumpNodeLogger?.() ?? Promise.resolve([]))
+  if (reason === 'quitting through menu') {
+    ctlQuit?.()
+  }
+}
 
 export const filePickerError = (error: Error) => {
-  Alert.alert('Error', String(error))
+  if (isMobile) {
+    Alert.alert('Error', String(error))
+  }
 }
 
-export const onEngineConnected = () => {}
+export const onEngineConnected = () => {
+  if (isMobile) {
+    return
+  }
+  const f = async () => {
+    await T.RPCGen.configHelloIAmRpcPromise({details: KB2.constants.helloDetails})
+  }
+  ignorePromise(f())
+}
 
 export const openAppSettings = () => {
-  ignorePromise(Linking.openSettings())
+  if (isMobile) {
+    ignorePromise(Linking.openSettings())
+  }
 }
 
 export const openAppStore = () => {
+  if (!isMobile) {
+    return
+  }
   ignorePromise(
     Linking.openURL(
       isAndroid
@@ -37,6 +68,10 @@ export const openAppStore = () => {
 let lastPersist = ''
 
 export const persistRoute = (clear: boolean, immediate: boolean, isStartupLoaded: () => boolean) => {
+  if (!isMobile) {
+    return
+  }
+
   const doClear = async () => {
     try {
       await T.RPCGen.configGuiSetValueRpcPromise({
@@ -51,13 +86,13 @@ export const persistRoute = (clear: boolean, immediate: boolean, isStartupLoaded
       return
     }
     let param = {}
-    let routeName = Tabs.peopleTab
+    let routeName = peopleTab
     const cur = getTab()
     if (cur) {
       routeName = cur
     }
     const ap = getVisiblePath()
-    ap.some((r: ReturnType<typeof getVisiblePath>[number]) => {
+    ap.some((r: {name: string; params?: unknown}) => {
       if (r.name === 'chatConversation') {
         const rParams = r.params as undefined | {conversationIDKey?: T.Chat.ConversationIDKey}
         param = {selectedConversationIDKey: rParams?.conversationIDKey}
@@ -91,11 +126,24 @@ export const persistRoute = (clear: boolean, immediate: boolean, isStartupLoaded
   }
 }
 
-export const setOpenAtLoginInPlatform = async (_openAtLogin: boolean) => {}
+export const setOpenAtLoginInPlatform = async (openAtLogin: boolean) => {
+  if (isMobile) {
+    return
+  }
+  await KB2.functions.setOpenAtLogin?.(openAtLogin)
+}
 
-export const showMain = () => {}
+export const showMain = () => {
+  if (isMobile) {
+    return
+  }
+  KB2.functions.showMainWindow?.()
+}
 
 export const showShareActionSheet = (filePath: string, message: string, mimeType: string) => {
+  if (!isMobile) {
+    return
+  }
   const f = async () => {
     await showShareActionSheetImpl({filePath, message, mimeType})
   }
diff --git a/shared/util/use-intersection-observer.native.tsx b/shared/util/use-intersection-observer.native.tsx
deleted file mode 100644
index 4a19cda4a1ee..000000000000
--- a/shared/util/use-intersection-observer.native.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type {MockIntersectionObserverEntry} from './use-intersection-observer.shared'
-function useIntersectionObserver(): MockIntersectionObserverEntry {
-  return {
-    boundingClientRect: null,
-    intersectionRatio: null,
-    intersectionRect: null,
-    isIntersecting: false,
-    rootBounds: null,
-    target: null,
-    time: null,
-  }
-}
-
-export default useIntersectionObserver
diff --git a/shared/util/use-intersection-observer.desktop.tsx b/shared/util/use-intersection-observer.tsx
similarity index 81%
rename from shared/util/use-intersection-observer.desktop.tsx
rename to shared/util/use-intersection-observer.tsx
index 7ccc705ebcaf..7455b63f8174 100644
--- a/shared/util/use-intersection-observer.desktop.tsx
+++ b/shared/util/use-intersection-observer.tsx
@@ -2,9 +2,19 @@
 import * as React from 'react'
 import type {IntersectionObserverOptions, MockIntersectionObserverEntry} from './use-intersection-observer.shared'
 
-function useIntersectionObserver<T extends HTMLElement = HTMLElement>(
-  target: React.RefObject<T> | T | null,
-  options: IntersectionObserverOptions = {}
+const mobileStub: MockIntersectionObserverEntry = {
+  boundingClientRect: null,
+  intersectionRatio: null,
+  intersectionRect: null,
+  isIntersecting: false,
+  rootBounds: null,
+  target: null,
+  time: null,
+}
+
+function useIntersectionObserverDesktop<T extends HTMLElement = HTMLElement>(
+  target: React.RefObject<T> | T | null | undefined,
+  options: IntersectionObserverOptions
 ): MockIntersectionObserverEntry | IntersectionObserverEntry {
   const {
     root = null,
@@ -68,6 +78,22 @@ function useIntersectionObserver<T extends HTMLElement = HTMLElement>(
   return entry
 }
 
+function useIntersectionObserverMobile(): MockIntersectionObserverEntry {
+  return mobileStub
+}
+
+function useIntersectionObserver<T extends HTMLElement = HTMLElement>(
+  target?: React.RefObject<T> | T | null,
+  options: IntersectionObserverOptions = {}
+): MockIntersectionObserverEntry | IntersectionObserverEntry {
+  if (isMobile) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useIntersectionObserverMobile()
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useIntersectionObserverDesktop(target, options)
+}
+
 function createIntersectionObserver({
   root = null,
   pollInterval = null,
diff --git a/shared/util/use-resize-observer.native.tsx b/shared/util/use-resize-observer.native.tsx
deleted file mode 100644
index 7a9b0dbafe39..000000000000
--- a/shared/util/use-resize-observer.native.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-type FakeResizeObserver = {
-  disconnect: () => void
-  observe: () => void
-  unobserve: () => void
-}
-
-function useResizeObserver(_target?: unknown, _callback?: unknown): FakeResizeObserver {
-  return {
-    disconnect: () => {},
-    observe: () => {},
-    unobserve: () => {},
-  }
-}
-
-export default useResizeObserver
diff --git a/shared/util/use-resize-observer.desktop.tsx b/shared/util/use-resize-observer.tsx
similarity index 74%
rename from shared/util/use-resize-observer.desktop.tsx
rename to shared/util/use-resize-observer.tsx
index 0a87789e50b4..9e0685a0807a 100644
--- a/shared/util/use-resize-observer.desktop.tsx
+++ b/shared/util/use-resize-observer.tsx
@@ -3,7 +3,13 @@ import * as React from 'react'
 
 type InternalCallback = (entry: ResizeObserverEntry, observer: ResizeObserver) => unknown
 
-function useResizeObserver<T extends Element>(
+type FakeResizeObserver = {
+  disconnect: () => void
+  observe: () => void
+  unobserve: () => void
+}
+
+function useResizeObserverDesktop<T extends Element>(
   target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
   callback: InternalCallback
 ): ResizeObserver {
@@ -33,16 +39,38 @@ function useResizeObserver<T extends Element>(
   return resizeObserver.observer
 }
 
+const fakeResizeObserver: FakeResizeObserver = {
+  disconnect: () => {},
+  observe: () => {},
+  unobserve: () => {},
+}
+
+function useResizeObserverMobile(_target?: unknown, _callback?: unknown): FakeResizeObserver {
+  return fakeResizeObserver
+}
+
+function useResizeObserver<T extends Element>(
+  target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
+  callback: InternalCallback
+): ResizeObserver | FakeResizeObserver {
+  if (isMobile) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useResizeObserverMobile(target, callback)
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useResizeObserverDesktop(target, callback)
+}
+
 function createResizeObserver() {
   let ticking = false
   let allEntries: ResizeObserverEntry[] = []
 
   const callbacks: Map<unknown, Array<InternalCallback>> = new Map()
 
-  const observer = new window.ResizeObserver((entries: ResizeObserverEntry[], obs: ResizeObserver) => {
+  const observer = new ResizeObserver((entries: ResizeObserverEntry[], obs: ResizeObserver) => {
     allEntries = allEntries.concat(entries)
     if (!ticking) {
-      window.requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
         const triggered = new Set<Element>()
         // eslint-disable-next-line
         for (let i = 0; i < allEntries.length; i++) {
@@ -53,7 +81,7 @@ function createResizeObserver() {
           if (triggered.has(entry.target)) continue
           triggered.add(entry.target)
           const cbs = callbacks.get(entry.target)
-           
+
           cbs?.forEach(cb => cb(entry, obs))
         }
         allEntries = []