diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx
index b768ef909740..4f5757efd0aa 100644
--- a/shared/app/global-errors.tsx
+++ b/shared/app/global-errors.tsx
@@ -61,7 +61,7 @@ const useData = () => {
     if (error) {
       setExpandedError(error)
     }
-    if (!C.isMobile) {
+    if (!isMobile) {
       clearCountdown()
     }
   }
@@ -74,14 +74,14 @@ const useData = () => {
     const id = setTimeout(
       () => {
         setDetails(detailsForError(error))
-        if (!C.isMobile) {
+        if (!isMobile) {
           setSummary(summaryForError(error))
         }
       },
       error ? 0 : 7000
     ) // if it's set, do it immediately, if it's cleared set it in a bit
     const newError = !!error
-    if (!C.isMobile) {
+    if (!isMobile) {
       if (countdownTimerRef.current) clearTimeout(countdownTimerRef.current)
       countdownTimerRef.current = undefined
       if (newError) {
@@ -121,7 +121,7 @@ const GlobalError = () => {
   }
 
   if (daemonError) {
-    if (C.isMobile) {
+    if (isMobile) {
       return null
     }
     if (ignoreDisconnectOverlay) {
@@ -144,7 +144,7 @@ const GlobalError = () => {
     )
   }
 
-  if (C.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2
         direction="vertical"
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/app/out-of-date.tsx b/shared/app/out-of-date.tsx
index 4f1fa0ec0e42..c0c143554e0c 100644
--- a/shared/app/out-of-date.tsx
+++ b/shared/app/out-of-date.tsx
@@ -27,7 +27,7 @@ const OutOfDate = () => {
   const [mobileCritical, setMobileCritical] = React.useState(false)
 
   React.useEffect(() => {
-    if (!C.isMobile) {
+    if (!isMobile) {
       return
     }
 
@@ -58,8 +58,8 @@ const OutOfDate = () => {
     }
   }, [])
 
-  const critical = C.isMobile ? mobileCritical : outOfDate.critical
-  const message = C.isMobile ? mobileMessage : outOfDate.message
+  const critical = isMobile ? mobileCritical : outOfDate.critical
+  const message = isMobile ? mobileMessage : outOfDate.message
 
   return !critical ? null : (
     <Kb.Box2 direction="vertical" fullWidth={true} gap="small" style={styles.container}>
@@ -69,7 +69,7 @@ const OutOfDate = () => {
       <Kb.Box2 direction="vertical" style={styles.messageContainer} fullWidth={true}>
         <Kb.Markdown>{message}</Kb.Markdown>
       </Kb.Box2>
-      {Kb.Styles.isMobile && <Kb.Button label="Update" onClick={openAppStore} />}
+      {isMobile && <Kb.Button label="Update" onClick={openAppStore} />}
     </Kb.Box2>
   )
 }
diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx
index 2ea975b665cc..bad8651248a6 100644
--- a/shared/app/runtime-stats.tsx
+++ b/shared/app/runtime-stats.tsx
@@ -182,11 +182,11 @@ const LogStats = (props: {num?: number}) => {
       direction="vertical"
       style={{
         backgroundColor: 'rgba(0,0,0, 0.3)',
-        minHeight: (Kb.Styles.isMobile ? 12 : 20) * maxBuckets,
+        minHeight: (isMobile ? 12 : 20) * maxBuckets,
       }}
       fullWidth={true}
     >
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Text type="BodyTinyBold" style={styles.stat}>
           Logs
         </Kb.Text>
@@ -399,7 +399,7 @@ const RuntimeStatsMobile = ({stats}: Props) => {
 const RuntimeStats = () => {
   const stats = useConfigState(s => s.runtimeStats)
   return stats ? (
-    Kb.Styles.isMobile ? (
+    isMobile ? (
       <RuntimeStatsMobile stats={stats} />
     ) : (
       <RuntimeStatsDesktop stats={stats} />
diff --git a/shared/babel.config.js b/shared/babel.config.js
index 54400cda8130..4426ce983535 100644
--- a/shared/babel.config.js
+++ b/shared/babel.config.js
@@ -1,7 +1,25 @@
 const reactCompilerPlugin = 'babel-plugin-react-compiler'
 const moduleResolverPlugin = ['module-resolver', {alias: {'@': './'}}]
 
-const makeElectronConfig = isTest => ({
+// Replaces platform globals (isMobile, isElectron, isAndroid, isIOS) with boolean
+// literals at Babel transform time. This lets Metro's constant-folding-plugin DCE
+// dead platform branches in production bundles.
+const makePlatformPlugin = defines => babel => {
+  const {types: t} = babel
+  return {
+    name: 'inline-platform-globals',
+    visitor: {
+      Identifier(path) {
+        const {name} = path.node
+        if (!(name in defines) || !path.isReferencedIdentifier()) return
+        if (path.scope.getBinding(name)) return
+        path.replaceWith(t.booleanLiteral(defines[name]))
+      },
+    },
+  }
+}
+
+const makeElectronConfig = (isTest, platformPlugin) => ({
   presets: [
     ['@babel/preset-env', {targets: {node: 'current'}}],
     ...(isTest ? [['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-flow'] : []),
@@ -9,13 +27,15 @@ const makeElectronConfig = isTest => ({
   ],
   plugins: [
     reactCompilerPlugin, // must run first!
+    platformPlugin,
   ],
 })
 
-const makeReactNativeConfig = () => ({
+const makeReactNativeConfig = platformPlugin => ({
   plugins: [
     reactCompilerPlugin, // must run first!
     moduleResolverPlugin,
+    platformPlugin,
   ],
   presets: [['babel-preset-expo', {unstable_transformImportMeta: true, jsxRuntime: 'automatic'}]],
   sourceMaps: true,
@@ -34,20 +54,29 @@ const detectPlatform = (apiEnv, callerName) => {
 module.exports = function (api /*: any */) {
   const apiEnv = api.env()
   const callerName = api.caller(c => c?.name ?? null)
+  const metroPlatform = api.caller(c => c?.platform ?? null) // 'ios' | 'android' | null
   const platform = detectPlatform(apiEnv, callerName)
   const isTest = apiEnv === 'test' || apiEnv === 'test-rn'
 
-  api.cache.using(() => `${apiEnv}:${callerName ?? 'unknown'}:${platform}`)
+  api.cache.using(() => `${apiEnv}:${callerName ?? 'unknown'}:${platform}:${metroPlatform ?? 'none'}`)
+
+  const isRN = platform === 'react-native'
+  const platformPlugin = makePlatformPlugin({
+    isMobile: isRN,
+    isElectron: !isRN,
+    isAndroid: metroPlatform === 'android',
+    isIOS: metroPlatform === 'ios',
+  })
 
-  // console.error('KB babel.config.js ', {apiEnv, callerName, platform})
+  // console.error('KB babel.config.js ', {apiEnv, callerName, platform, metroPlatform})
 
   if (platform === 'electron') {
     // console.error('KB babel.config.js for Electron')
-    return makeElectronConfig(isTest)
+    return makeElectronConfig(isTest, platformPlugin)
   }
   if (platform === 'react-native') {
     // console.error('KB babel.config.js for ReactNative')
-    return makeReactNativeConfig()
+    return makeReactNativeConfig(platformPlugin)
   }
 
   throw new Error(`Unable to determine Babel platform from env/caller: ${apiEnv}/${callerName ?? 'unknown'}`)
diff --git a/shared/chat/audio/audio-player.tsx b/shared/chat/audio/audio-player.tsx
index ccd8fac2c810..6127f19e7dac 100644
--- a/shared/chat/audio/audio-player.tsx
+++ b/shared/chat/audio/audio-player.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import * as C from '@/constants'
 import AudioVideo from './audio-video'
 import {formatAudioRecordDuration} from '@/util/timestamp'
 
@@ -34,13 +33,13 @@ const AudioVis = (props: VisProps) => {
         style={{
           backgroundColor: index < threshold ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.black,
           height,
-          marginRight: C.isMobile ? 4 * Kb.Styles.hairlineWidth : 2,
-          width: C.isMobile ? 3 * Kb.Styles.hairlineWidth : 1,
+          marginRight: isMobile ? 4 * Kb.Styles.hairlineWidth : 2,
+          width: isMobile ? 3 * Kb.Styles.hairlineWidth : 1,
         }}
       />
     )
   })
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.ScrollView
       horizontal={true}
       style={{height: maxHeight, maxWidth: maxWidth}}
diff --git a/shared/chat/audio/audio-video.desktop.tsx b/shared/chat/audio/audio-video.desktop.tsx
deleted file mode 100644
index d6b08a693cb0..000000000000
--- a/shared/chat/audio/audio-video.desktop.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react'
-import type {Props} from './audio-video.shared'
-
-const AudioVideo = (props: Props) => {
-  const {url, paused, onPositionUpdated, onEnded} = props
-  const vidRef = React.useRef<HTMLVideoElement | null>(null)
-
-  const onTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
-    const ct = e.currentTarget.currentTime
-    const dur = e.currentTarget.duration
-    if (dur === 0) {
-      return
-    }
-    onPositionUpdated(ct / dur)
-  }
-
-  const onEndedRaw = () => {
-    onEnded()
-  }
-
-  const lastPausedRef = React.useRef(paused)
-  React.useEffect(() => {
-    if (lastPausedRef.current === paused) {
-      return
-    }
-    lastPausedRef.current = paused
-    if (paused) {
-      vidRef.current?.pause()
-    } else {
-      vidRef.current
-        ?.play()
-        .then(() => {})
-        .catch(() => {})
-    }
-  }, [paused])
-
-  return (
-    <video
-      ref={vidRef}
-      src={url}
-      style={{height: 0, width: 0}}
-      onTimeUpdate={onTimeUpdate}
-      onEnded={onEndedRaw}
-    />
-  )
-}
-
-export default AudioVideo
diff --git a/shared/chat/audio/audio-video.native.tsx b/shared/chat/audio/audio-video.native.tsx
deleted file mode 100644
index c4e77882c30e..000000000000
--- a/shared/chat/audio/audio-video.native.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react'
-import {useAudioPlayer} from 'expo-audio'
-import {useEventListener} from 'expo'
-import type {Props} from './audio-video.shared'
-
-const AudioVideo = (props: Props) => {
-  const {url, paused, onPositionUpdated, onEnded} = props
-  const player = useAudioPlayer(url)
-
-  useEventListener(player, 'playbackStatusUpdate', status => {
-    if (status.playing && status.duration > 0) {
-      onPositionUpdated(status.currentTime / status.duration)
-    }
-    if (status.didJustFinish) {
-      onEnded()
-      void player.seekTo(0)
-    }
-  })
-
-  const [lastPaused, setLastPaused] = React.useState(paused)
-
-  if (lastPaused !== paused) {
-    setLastPaused(paused)
-    if (paused) {
-      player.pause()
-    } else {
-      player.play()
-    }
-  }
-
-  return null
-}
-
-export default AudioVideo
diff --git a/shared/chat/audio/audio-video.tsx b/shared/chat/audio/audio-video.tsx
new file mode 100644
index 000000000000..14dca8d7b226
--- /dev/null
+++ b/shared/chat/audio/audio-video.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react'
+import {useAudioPlayer} from 'expo-audio'
+import {useEventListener} from 'expo'
+import type {Props} from './audio-video.shared'
+
+const MobileAudioVideo = (props: Props) => {
+  const {url, paused, onPositionUpdated, onEnded} = props
+  const player = useAudioPlayer(url)
+
+  useEventListener(player, 'playbackStatusUpdate', (status: {playing: boolean; duration: number; currentTime: number; didJustFinish: boolean}) => {
+    if (status.playing && status.duration > 0) {
+      onPositionUpdated(status.currentTime / status.duration)
+    }
+    if (status.didJustFinish) {
+      onEnded()
+      void player.seekTo(0)
+    }
+  })
+
+  const [lastPaused, setLastPaused] = React.useState(paused)
+  if (lastPaused !== paused) {
+    setLastPaused(paused)
+    if (paused) {
+      player.pause()
+    } else {
+      player.play()
+    }
+  }
+
+  return null
+}
+
+type VideoEl = {pause: () => void; play: () => Promise<void>; currentTime: number; duration: number}
+
+const DesktopAudioVideo = (props: Props) => {
+  const {url, paused, onPositionUpdated, onEnded} = props
+  const vidRef = React.useRef<VideoEl | null>(null)
+  const lastPausedRef = React.useRef(paused)
+
+  React.useEffect(() => {
+    if (lastPausedRef.current === paused) return
+    lastPausedRef.current = paused
+    if (paused) {
+      vidRef.current?.pause()
+    } else {
+      vidRef.current
+        ?.play()
+        .then(() => {})
+        .catch(() => {})
+    }
+  }, [paused])
+
+  const onTimeUpdate = () => {
+    const ct = vidRef.current?.currentTime ?? 0
+    const dur = vidRef.current?.duration ?? 0
+    if (dur === 0) return
+    onPositionUpdated(ct / dur)
+  }
+
+  return (
+    <video
+      ref={vidRef as React.Ref<HTMLVideoElement>}
+      src={url}
+      style={{height: 0, width: 0}}
+      onTimeUpdate={onTimeUpdate}
+      onEnded={onEnded}
+    />
+  )
+}
+
+const AudioVideo = isMobile ? MobileAudioVideo : DesktopAudioVideo
+export default AudioVideo
diff --git a/shared/chat/avatars.tsx b/shared/chat/avatars.tsx
index c5df5d24b178..3289bb3dd442 100644
--- a/shared/chat/avatars.tsx
+++ b/shared/chat/avatars.tsx
@@ -9,7 +9,7 @@ const OverlayIcon = function OverlayIcon(p: {
 }) {
   const {isHovered, isMuted, isSelected, isLocked} = p
 
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     const type = isMuted
       ? isSelected
         ? 'icon-shh-active-26-21'
@@ -74,7 +74,7 @@ const Avatars = function Avatars(p: Props) {
   const leftStyle = {left: 0, position: 'absolute', top: 0} as const
   const rightStyle = Kb.Styles.collapseStyles([
     {bottom: 0, position: 'absolute', right: 0} as const,
-    !Kb.Styles.isMobile && backgroundColor && {borderRadius: '50%', boxShadow: `0px 0px 0px 2px ${backgroundColor}`},
+    !isMobile && backgroundColor && {borderRadius: '50%', boxShadow: `0px 0px 0px 2px ${backgroundColor}`},
   ])
 
   const containerStyle = Kb.Styles.collapseStyles([styles.container, {height: singleSize, width: singleSize}])
diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx
index 36ee0f75b8ba..baa887fd6387 100644
--- a/shared/chat/blocking/block-modal.tsx
+++ b/shared/chat/blocking/block-modal.tsx
@@ -61,7 +61,7 @@ const CheckboxRow = (props: CheckboxRowProps) => (
       <Kb.WithTooltip
         tooltip={props.info}
         showOnPressMobile={true}
-        position={Kb.Styles.isMobile ? 'bottom center' : 'top center'}
+        position={isMobile ? 'bottom center' : 'top center'}
         multiline={true}
       >
         <Kb.Icon type="iconfont-question-mark" color="grey" />
@@ -476,7 +476,7 @@ const Container = function BlockModal(ownProps: OwnProps) {
         extraData={newBlocks}
         itemHeight={itemHeight}
         style={
-          Kb.Styles.isMobile
+          isMobile
             ? styles.grow
             : getListHeightStyle(
                 otherUsernames?.length ?? 0,
@@ -486,7 +486,7 @@ const Container = function BlockModal(ownProps: OwnProps) {
       />
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
           <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-            {!Kb.Styles.isMobile && (
+            {!isMobile && (
               <Kb.Button fullWidth={true} label="Cancel" onClick={navigateUp} type="Dim" />
             )}
             <Kb.WaitingButton label="Finish" onClick={onClickFinish} fullWidth={true} type="Danger" />
diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx
index f77ba3fb25c9..155028481a0e 100644
--- a/shared/chat/blocking/invitation-to-block.tsx
+++ b/shared/chat/blocking/invitation-to-block.tsx
@@ -77,8 +77,8 @@ const BlockButtons = () => {
 
   const buttonRow = (
     <Kb.ButtonBar
-      fullWidth={Kb.Styles.isMobile}
-      direction={Kb.Styles.isMobile ? 'column' : 'row'}
+      fullWidth={isMobile}
+      direction={isMobile ? 'column' : 'row'}
       style={styles.button}
     >
       <Kb.WaveButton
@@ -116,7 +116,7 @@ const BlockButtons = () => {
       />
     </Kb.ButtonBar>
   )
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2
       direction="vertical"
       centerChildren={true}
diff --git a/shared/chat/conversation/attachment-actions.tsx b/shared/chat/conversation/attachment-actions.tsx
index 79b60511a362..4b7eabdc8af1 100644
--- a/shared/chat/conversation/attachment-actions.tsx
+++ b/shared/chat/conversation/attachment-actions.tsx
@@ -7,7 +7,7 @@ import KB2 from '@/util/electron'
 import logger from '@/logger'
 import {navigateAppend} from '@/constants/router'
 import {ignorePromise} from '@/constants/utils'
-import {isDarwin, isIOS, isMobile} from '@/constants/platform'
+import {isDarwin} from '@/constants/platform'
 import * as PlatformSpecific from '@/util/platform-specific'
 import {RPCError} from '@/util/errors'
 import {useCurrentUserState} from '@/stores/current-user'
diff --git a/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx b/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
deleted file mode 100644
index 5d4353a21d05..000000000000
--- a/shared/chat/conversation/attachment-fullscreen/index.desktop.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {useMessagePopup} from '../messages/message-popup'
-import type {Props} from './index.shared'
-import {useData, usePreviewFallback} from './hooks'
-import type {StyleOverride} from '@/common-adapters/markdown'
-
-type ArrowProps = {
-  left: boolean
-  onClick?: () => void
-}
-
-const Arrow = (props: ArrowProps) => {
-  const {left, onClick} = props
-  return (
-    <Kb.ClickableBox
-      className="hover_background_color_black background_color_black_50 fade-background-color"
-      onClick={
-        onClick
-          ? e => {
-              e.stopPropagation()
-              onClick()
-            }
-          : undefined
-      }
-      style={Kb.Styles.collapseStyles([styles.circle, !onClick && styles.disabled])}
-    >
-      <Kb.Icon
-        type={left ? 'iconfont-arrow-left' : 'iconfont-arrow-right'}
-        color={Kb.Styles.globalColors.white}
-        style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
-      />
-    </Kb.ClickableBox>
-  )
-}
-
-const Fullscreen = function Fullscreen(p: Props) {
-  const data = useData(p.conversationIDKey, p.messageID, p.initialMessage)
-  const {message, path, title, progress, previewPath} = data
-  const {progressLabel, onNextAttachment, onPreviousAttachment} = data
-  const {onDownloadAttachment, onShowInFinder, isPlayableMedia} = data
-  const {fullWidth, fullHeight} = data
-  const {hasMessageID} = data
-
-  const [isZoomed, setIsZoomed] = React.useState(false)
-  const onIsZoomed = (zoomed: boolean) => {
-    setIsZoomed(zoomed)
-  }
-
-  const preload = (path: string, onLoad: () => void, onError: () => void) => {
-    const img = new Image()
-    img.src = path
-    img.onload = onLoad
-    img.onerror = onError
-  }
-
-  const imgSrc = usePreviewFallback(path, previewPath, isPlayableMedia, data.showPreview, preload)
-
-  const forceDims = fullHeight && fullWidth ? {height: fullHeight, width: fullWidth} : undefined
-
-  const vidRef = React.useRef<HTMLVideoElement>(null)
-  const onHotKey = (cmd: string) => {
-    if (cmd === 'left') {
-      onPreviousAttachment?.()
-    }
-    if (cmd === 'right') {
-      onNextAttachment?.()
-    }
-  }
-  Kb.useHotKey(['left', 'right'], onHotKey)
-  const isDownloadError = !!message.transferErrMsg
-
-  const {showPopup, popup, popupAnchor} = useMessagePopup({conversationIDKey: p.conversationIDKey, message})
-
-  const titleOverride = {
-    paragraph: Kb.Styles.platformStyles({
-      isElectron: {whiteSpace: 'nowrap'},
-    }),
-  } as StyleOverride
-
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
-      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
-        <Kb.Markdown lineClamp={2} style={Kb.Styles.globalStyles.flexOne} styleOverride={titleOverride}>
-          {title}
-        </Kb.Markdown>
-        <Kb.Box2 direction="vertical" ref={popupAnchor} style={styles.ellipsisContainer}>
-          <Kb.Icon
-            type="iconfont-ellipsis"
-            color={Kb.Styles.globalColors.black_50}
-            onClick={hasMessageID ? showPopup : undefined}
-            padding="small"
-            style={!hasMessageID ? styles.disabled : undefined}
-          />
-        </Kb.Box2>
-        {popup}
-      </Kb.Box2>
-      {path && (
-        <Kb.BoxGrow>
-          <Kb.ClickableBox style={styles.contentsFit} key={path}>
-            {!isZoomed ? <Arrow left={true} onClick={onPreviousAttachment} /> : undefined}
-            <Kb.Box2
-              direction="vertical"
-              fullWidth={true}
-              fullHeight={true}
-              style={Kb.Styles.globalStyles.flexGrow}
-              key={path}
-            >
-              {isPlayableMedia ? (
-                <video
-                  autoPlay={true}
-                  style={Kb.Styles.castStyleDesktop(styles.videoFit)}
-                  controlsList="nodownload nofullscreen noremoteplayback"
-                  controls={true}
-                  ref={vidRef}
-                >
-                  <source src={path} />
-                </video>
-              ) : (
-                <Kb.ZoomableImage src={imgSrc} onIsZoomed={onIsZoomed} forceDims={forceDims} />
-              )}
-            </Kb.Box2>
-            {!isZoomed && <Arrow left={false} onClick={onNextAttachment} />}
-          </Kb.ClickableBox>
-        </Kb.BoxGrow>
-      )}
-      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
-        {!!progressLabel && (
-          <Kb.Text
-            type="BodySmall"
-            style={{color: Kb.Styles.globalColors.black_50, marginRight: Kb.Styles.globalMargins.tiny}}
-          >
-            {progressLabel}
-          </Kb.Text>
-        )}
-        {!!progressLabel && <Kb.ProgressBar ratio={progress} />}
-        {!progressLabel && onDownloadAttachment && !isDownloadError && (
-          <Kb.Text type="BodySmall" style={styles.link} onClick={onDownloadAttachment}>
-            Download
-          </Kb.Text>
-        )}
-        {!progressLabel && onDownloadAttachment && isDownloadError && (
-          <Kb.Text type="BodySmall" style={styles.error} onClick={onDownloadAttachment}>
-            Failed to download.{' '}
-            <Kb.Text type="BodySmall" style={styles.retry} onClick={onDownloadAttachment}>
-              Retry
-            </Kb.Text>
-          </Kb.Text>
-        )}
-        {onShowInFinder && (
-          <Kb.Text type="BodySmall" style={styles.link} onClick={onShowInFinder}>
-            Show in {Kb.Styles.fileUIName}
-          </Kb.Text>
-        )}
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      arrow: {
-        position: 'relative',
-        top: 1,
-      },
-      arrowLeft: {right: 1},
-      arrowRight: {left: 1},
-      circle: Kb.Styles.platformStyles({
-        isElectron: {
-          ...Kb.Styles.globalStyles.flexBoxColumn,
-          alignItems: 'center',
-          alignSelf: 'center',
-          borderRadius: 36,
-          cursor: 'pointer',
-          flexShrink: 0,
-          height: 36,
-          justifyContent: 'center',
-          margin: Kb.Styles.globalMargins.small,
-          width: 36,
-        },
-      }),
-      contentsFit: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        flex: 1,
-        height: '100%',
-        width: '100%',
-      },
-      disabled: {opacity: 0.3},
-      // Opt out of the Electron titlebar drag region so the icon gets cursor/click events
-      ellipsisContainer: Kb.Styles.platformStyles({
-        isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,
-      }),
-      error: {color: Kb.Styles.globalColors.redDark},
-      headerFooter: {
-        height: 32,
-        paddingLeft: Kb.Styles.globalMargins.tiny,
-        paddingRight: Kb.Styles.globalMargins.tiny,
-      },
-      link: Kb.Styles.platformStyles({
-        isElectron: {color: Kb.Styles.globalColors.black_50, cursor: 'pointer'},
-      }),
-      retry: {
-        color: Kb.Styles.globalColors.redDark,
-        textDecorationLine: 'underline',
-      },
-      videoFit: Kb.Styles.platformStyles({
-        isElectron: {
-          cursor: 'normal',
-          display: 'block',
-          height: '100%',
-          objectFit: 'scale-down' as const,
-          width: '100%',
-        },
-      }),
-    }) as const
-)
-
-export default Fullscreen
diff --git a/shared/chat/conversation/attachment-fullscreen/index.native.tsx b/shared/chat/conversation/attachment-fullscreen/index.native.tsx
deleted file mode 100644
index abe627bc5142..000000000000
--- a/shared/chat/conversation/attachment-fullscreen/index.native.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {useMessagePopup} from '../messages/message-popup'
-import {useVideoPlayer, VideoView} from 'expo-video'
-import logger from '@/logger'
-import {ShowToastAfterSaving} from '../messages/attachment/shared'
-import type {Props} from './index.shared'
-import {useData, usePreviewFallback} from './hooks'
-import {type GestureResponderEvent, Animated, View} from 'react-native'
-import {useSafeAreaFrame} from 'react-native-safe-area-context'
-import {Image} from 'expo-image'
-
-const FullscreenVideo = (p: {
-  path: string
-  previewHeight: number
-  onTouchStart: (e: GestureResponderEvent) => void
-  onTouchEnd: (e: GestureResponderEvent) => void
-  onLoaded: () => void
-}) => {
-  const {path, previewHeight, onTouchStart, onTouchEnd, onLoaded} = p
-  const sourceUri = `${path}&contentforce=true`
-  const player = useVideoPlayer(sourceUri)
-
-  React.useEffect(() => {
-    const sub = player.addListener('statusChange', ({status, error}) => {
-      if (status === 'readyToPlay') {
-        onLoaded()
-      }
-      if (status === 'error' && error) {
-        logger.error(`Error loading vid: ${JSON.stringify(error)}`)
-      }
-    })
-    return () => sub.remove()
-  }, [player, onLoaded])
-
-  return (
-    <View style={styles.videoWrapper} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
-      <VideoView
-        player={player}
-        nativeControls={true}
-        contentFit="contain"
-        style={{
-          height: Math.max(previewHeight, 100),
-          width: '100%',
-        }}
-      />
-    </View>
-  )
-}
-
-const Fullscreen = function Fullscreen(p: Props) {
-  const {showHeader: _showHeader = true} = p
-  const data = useData(p.conversationIDKey, p.messageID, p.initialMessage)
-  const {isPlayableMedia, onClose, message, path, previewHeight, onAllMedia, previewPath} = data
-  const {onNextAttachment, onPreviousAttachment} = data
-  const {hasMessageID} = data
-  const [loaded, setLoaded] = React.useState(false)
-  const [showHeader, setShowHeader] = React.useState(_showHeader)
-  const toggleHeader = () => {
-    setShowHeader(s => !s)
-  }
-
-  const preload = (path: string, onLoad: () => void, onError: () => void) => {
-    const f = async () => {
-      try {
-        await Image.prefetch(path)
-        onLoad()
-      } catch {
-        onError()
-      }
-    }
-    f()
-      .then(() => {})
-      .catch(() => {})
-  }
-
-  const imgSrc = usePreviewFallback(path, previewPath, isPlayableMedia, data.showPreview, preload)
-  const srcDims = imgSrc === path
-    ? {height: data.fullHeight, width: data.fullWidth}
-    : {height: data.previewHeight, width: data.previewWidth}
-
-  const {showPopup, popup} = useMessagePopup({conversationIDKey: p.conversationIDKey, message})
-
-  const onSwipe = (left: boolean) => {
-    if (left) {
-      onNextAttachment?.()
-    } else {
-      onPreviousAttachment?.()
-    }
-  }
-
-  let content: React.ReactNode = null
-  let spinner: React.ReactNode = null
-
-  const {width: windowWidth} = useSafeAreaFrame()
-  const needDiff = windowWidth / 3
-  const initialTouch = React.useRef(-1)
-  const maxTouchesRef = React.useRef(0)
-  const onTouchStart = (e: GestureResponderEvent) => {
-    // we get calls when the touches increase
-    maxTouchesRef.current = Math.max(maxTouchesRef.current, e.nativeEvent.touches.length)
-    if (e.nativeEvent.touches.length === 1) {
-      initialTouch.current = e.nativeEvent.pageX
-    } else {
-      initialTouch.current = -1
-    }
-  }
-  const onTouchEnd = (e: GestureResponderEvent) => {
-    const maxTouches = maxTouchesRef.current
-    maxTouchesRef.current = 0
-    const diff = e.nativeEvent.pageX - initialTouch.current
-    initialTouch.current = -1
-    // we only do swipes on single touch
-    if (maxTouches !== 1) {
-      return
-    }
-    if (diff > needDiff) {
-      onSwipe(false)
-    } else if (diff < -needDiff) {
-      onSwipe(true)
-    }
-  }
-
-  if (isPlayableMedia) {
-    if (path) {
-      content = (
-        <FullscreenVideo
-          key={path}
-          path={path}
-          previewHeight={previewHeight}
-          onTouchStart={onTouchStart}
-          onTouchEnd={onTouchEnd}
-          onLoaded={() => setLoaded(true)}
-        />
-      )
-    }
-  } else if (imgSrc) {
-    content = (
-      <Kb.ZoomableImage
-        src={imgSrc}
-        style={styles.zoomableBox}
-        onSwipe={hasMessageID ? onSwipe : undefined}
-        onTap={toggleHeader}
-        srcDims={srcDims}
-        boxCacheKey="chat-attach"
-      />
-    )
-  }
-
-  if (!loaded && isPlayableMedia) {
-    spinner = (
-      <Kb.Box2
-        direction="vertical"
-        style={styles.progressWrapper}
-        centerChildren={true}
-        fullHeight={true}
-        fullWidth={true}
-      >
-        <Kb.ProgressIndicator style={styles.progressIndicator} white={true} />
-      </Kb.Box2>
-    )
-  }
-
-  const fadeAnimRef = React.useRef(new Animated.Value(1))
-  const [fadeAnim, setFadeAnim] = React.useState<null | Animated.Value>(null)
-
-  React.useEffect(() => {
-    setFadeAnim(fadeAnimRef.current)
-  }, [])
-
-  React.useEffect(() => {
-    if (fadeAnim) {
-      Animated.timing(fadeAnim, {
-        duration: 240,
-        toValue: showHeader ? 1 : 0,
-        useNativeDriver: true,
-      }).start()
-    }
-  }, [showHeader, fadeAnim])
-
-  return (
-    <Kb.Box2
-      direction="vertical"
-      relative={true}
-      style={{backgroundColor: Kb.Styles.globalColors.blackOrBlack}}
-      fullWidth={true}
-      fullHeight={true}
-    >
-      {spinner}
-      <ShowToastAfterSaving transferState={message.transferState} />
-      <Kb.BoxGrow>{content}</Kb.BoxGrow>
-      <Animated.View style={[styles.animated, {opacity: fadeAnim ?? 1}]}>
-        <Kb.Box2 direction="horizontal" fullWidth={true} fullHeight={true} style={styles.headerWrapper}>
-          <Kb.Text type="Body" onClick={onClose} style={styles.close}>
-            Close
-          </Kb.Text>
-          <Kb.Text type="Body" onClick={onAllMedia} style={styles.allMedia}>
-            All media
-          </Kb.Text>
-        </Kb.Box2>
-      </Animated.View>
-      <Kb.IconButton
-        disabled={!hasMessageID}
-        icon="iconfont-ellipsis"
-        style={styles.headerFooter}
-        onClick={hasMessageID ? showPopup : undefined}
-      />
-      {popup}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      allMedia: {
-        color: Kb.Styles.globalColors.blueDark,
-        marginLeft: 'auto',
-        padding: Kb.Styles.globalMargins.small,
-      },
-      animated: {
-        height: 50,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0,
-      },
-      close: {
-        color: Kb.Styles.globalColors.blueDark,
-        padding: Kb.Styles.globalMargins.small,
-      },
-      headerFooter: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
-        backgroundColor: Kb.Styles.globalColors.blackOrBlack,
-        bottom: Kb.Styles.globalMargins.small,
-        flexShrink: 0,
-        height: 34,
-        left: Kb.Styles.globalMargins.small,
-        position: 'absolute',
-        width: 34,
-        zIndex: 3,
-      },
-      headerWrapper: {backgroundColor: Kb.Styles.globalColors.blackOrBlack},
-      progressIndicator: {width: 48},
-      progressWrapper: {position: 'absolute'},
-      videoWrapper: {
-        alignItems: 'center',
-        height: '100%',
-        justifyContent: 'center',
-        position: 'relative',
-        width: '100%',
-      },
-      zoomableBox: {
-        backgroundColor: Kb.Styles.globalColors.blackOrBlack,
-        height: '100%',
-        position: 'relative',
-        width: '100%',
-      },
-    }) as const
-)
-
-export default Fullscreen
diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx
new file mode 100644
index 000000000000..98e842d3cfd6
--- /dev/null
+++ b/shared/chat/conversation/attachment-fullscreen/index.tsx
@@ -0,0 +1,500 @@
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import {useMessagePopup} from '../messages/message-popup'
+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}
+
+// Desktop-only: arrow navigation button
+type ArrowProps = {
+  left: boolean
+  onClick?: () => void
+}
+
+const Arrow = (props: ArrowProps) => {
+  const {left, onClick} = props
+  return (
+    <Kb.ClickableBox
+      className="hover_background_color_black background_color_black_50 fade-background-color"
+      onClick={
+        onClick
+          ? e => {
+              e.stopPropagation()
+              onClick()
+            }
+          : undefined
+      }
+      style={Kb.Styles.collapseStyles([styles.circle, !onClick && styles.disabled])}
+    >
+      <Kb.Icon
+        type={left ? 'iconfont-arrow-left' : 'iconfont-arrow-right'}
+        color={Kb.Styles.globalColors.white}
+        style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])}
+      />
+    </Kb.ClickableBox>
+  )
+}
+
+const DesktopFullscreen = (p: Props) => {
+  const data = useData(p.conversationIDKey, p.messageID, p.initialMessage)
+  const {message, path, title, progress, previewPath} = data
+  const {progressLabel, onNextAttachment, onPreviousAttachment} = data
+  const {onDownloadAttachment, onShowInFinder, isPlayableMedia} = data
+  const {fullWidth, fullHeight} = data
+  const {hasMessageID} = data
+
+  const [isZoomed, setIsZoomed] = React.useState(false)
+
+  const preload = (src: string, onLoad: () => void, onError: () => void) => {
+    // Use dynamic require to avoid DOM type dependency
+    const ctor = (globalThis as unknown as {Image?: new () => {src: string; onload: () => void; onerror: () => void}}).Image
+    if (!ctor) return
+    const img = new ctor()
+    img.src = src
+    img.onload = onLoad
+    img.onerror = onError
+  }
+
+  const imgSrc = usePreviewFallback(path, previewPath, isPlayableMedia, data.showPreview, preload)
+  const forceDims = fullHeight && fullWidth ? {height: fullHeight, width: fullWidth} : undefined
+
+  const vidRef = React.useRef<VideoRef>(null)
+  const onHotKey = (cmd: string) => {
+    if (cmd === 'left') {
+      onPreviousAttachment?.()
+    }
+    if (cmd === 'right') {
+      onNextAttachment?.()
+    }
+  }
+  Kb.useHotKey(['left', 'right'], onHotKey)
+  const isDownloadError = !!message.transferErrMsg
+
+  const {showPopup, popup, popupAnchor} = useMessagePopup({conversationIDKey: p.conversationIDKey, message})
+
+  const titleOverride = {
+    paragraph: Kb.Styles.platformStyles({
+      isElectron: {whiteSpace: 'nowrap'},
+    }),
+  } as StyleOverride
+
+  return (
+    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
+        <Kb.Markdown lineClamp={2} style={Kb.Styles.globalStyles.flexOne} styleOverride={titleOverride}>
+          {title}
+        </Kb.Markdown>
+        <Kb.Box2 direction="vertical" ref={popupAnchor} style={styles.ellipsisContainer}>
+          <Kb.Icon
+            type="iconfont-ellipsis"
+            color={Kb.Styles.globalColors.black_50}
+            onClick={hasMessageID ? showPopup : undefined}
+            padding="small"
+            style={!hasMessageID ? styles.disabled : undefined}
+          />
+        </Kb.Box2>
+        {popup}
+      </Kb.Box2>
+      {path && (
+        <Kb.BoxGrow>
+          <Kb.ClickableBox style={styles.contentsFit} key={path}>
+            {!isZoomed ? <Arrow left={true} onClick={onPreviousAttachment} /> : undefined}
+            <Kb.Box2
+              direction="vertical"
+              fullWidth={true}
+              fullHeight={true}
+              style={Kb.Styles.globalStyles.flexGrow}
+              key={path}
+            >
+              {isPlayableMedia ? (
+                <video
+                  autoPlay={true}
+                  style={Kb.Styles.castStyleDesktop(styles.videoFit)}
+                  controlsList="nodownload nofullscreen noremoteplayback"
+                  controls={true}
+                  ref={vidRef as React.RefObject<HTMLVideoElement>}
+                >
+                  <source src={path} />
+                </video>
+              ) : (
+                <Kb.ZoomableImage
+                  src={imgSrc}
+                  onIsZoomed={zoomed => setIsZoomed(zoomed)}
+                  forceDims={forceDims}
+                />
+              )}
+            </Kb.Box2>
+            {!isZoomed && <Arrow left={false} onClick={onNextAttachment} />}
+          </Kb.ClickableBox>
+        </Kb.BoxGrow>
+      )}
+      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
+        {!!progressLabel && (
+          <Kb.Text
+            type="BodySmall"
+            style={{color: Kb.Styles.globalColors.black_50, marginRight: Kb.Styles.globalMargins.tiny}}
+          >
+            {progressLabel}
+          </Kb.Text>
+        )}
+        {!!progressLabel && <Kb.ProgressBar ratio={progress} />}
+        {!progressLabel && onDownloadAttachment && !isDownloadError && (
+          <Kb.Text type="BodySmall" style={styles.link} onClick={onDownloadAttachment}>
+            Download
+          </Kb.Text>
+        )}
+        {!progressLabel && onDownloadAttachment && isDownloadError && (
+          <Kb.Text type="BodySmall" style={styles.error} onClick={onDownloadAttachment}>
+            Failed to download.{' '}
+            <Kb.Text type="BodySmall" style={styles.retry} onClick={onDownloadAttachment}>
+              Retry
+            </Kb.Text>
+          </Kb.Text>
+        )}
+        {onShowInFinder && (
+          <Kb.Text type="BodySmall" style={styles.link} onClick={onShowInFinder}>
+            Show in {Kb.Styles.fileUIName}
+          </Kb.Text>
+        )}
+      </Kb.Box2>
+    </Kb.Box2>
+  )
+}
+
+type GestureEvent = {
+  nativeEvent: {touches: Array<unknown>; pageX: number}
+}
+
+const NativeFullscreenVideo = (p: {
+  path: string
+  previewHeight: number
+  onTouchStart: (e: GestureEvent) => void
+  onTouchEnd: (e: GestureEvent) => void
+  onLoaded: () => void
+}) => {
+  const {path, previewHeight, onTouchStart, onTouchEnd, onLoaded} = p
+
+  const sourceUri = `${path}&contentforce=true`
+  const player = useVideoPlayer(sourceUri)
+
+  React.useEffect(() => {
+    const sub = player.addListener('statusChange', ({status, error}) => {
+      if (status === 'readyToPlay') {
+        onLoaded()
+      }
+      if (status === 'error' && error) {
+        logger.error(`Error loading vid: ${JSON.stringify(error)}`)
+      }
+    })
+    return () => sub.remove()
+  }, [player, onLoaded])
+
+  return (
+    <View style={styles.videoWrapper} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+      <VideoView
+        player={player}
+        nativeControls={true}
+        contentFit="contain"
+        style={{
+          height: Math.max(previewHeight, 100),
+          width: '100%',
+        }}
+      />
+    </View>
+  )
+}
+
+const NativeFullscreen = (p: Props) => {
+  const {showHeader: _showHeader = true} = p
+  const data = useData(p.conversationIDKey, p.messageID, p.initialMessage)
+  const {isPlayableMedia, onClose, message, path, previewHeight, onAllMedia, previewPath} = data
+  const {onNextAttachment, onPreviousAttachment} = data
+  const {hasMessageID} = data
+  const [loaded, setLoaded] = React.useState(false)
+  const [showHeader, setShowHeader] = React.useState(_showHeader)
+  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)
+  }, [])
+
+  React.useEffect(() => {
+    if (fadeAnim) {
+      Animated.timing(fadeAnim, {
+        duration: 240,
+        toValue: showHeader ? 1 : 0,
+        useNativeDriver: true,
+      }).start()
+    }
+  }, [showHeader, fadeAnim])
+
+  const preload = (src: string, onLoad: () => void, onError: () => void) => {
+    const f = async () => {
+      try {
+        await Image.prefetch(src)
+        onLoad()
+      } catch {
+        onError()
+      }
+    }
+    f()
+      .then(() => {})
+      .catch(() => {})
+  }
+
+  const imgSrc = usePreviewFallback(path, previewPath, isPlayableMedia, data.showPreview, preload)
+  const srcDims =
+    imgSrc === path
+      ? {height: data.fullHeight, width: data.fullWidth}
+      : {height: data.previewHeight, width: data.previewWidth}
+
+  const {showPopup, popup} = useMessagePopup({conversationIDKey: p.conversationIDKey, message})
+
+  const onSwipe = (left: boolean) => {
+    if (left) {
+      onNextAttachment?.()
+    } else {
+      onPreviousAttachment?.()
+    }
+  }
+
+  const toggleHeader = () => {
+    setShowHeader(s => !s)
+  }
+
+  const {width: windowWidth} = useSafeAreaFrame()
+  const needDiff = windowWidth / 3
+  const initialTouch = React.useRef(-1)
+  const maxTouchesRef = React.useRef(0)
+  const onTouchStart = (e: GestureEvent) => {
+    maxTouchesRef.current = Math.max(maxTouchesRef.current, e.nativeEvent.touches.length)
+    if (e.nativeEvent.touches.length === 1) {
+      initialTouch.current = e.nativeEvent.pageX
+    } else {
+      initialTouch.current = -1
+    }
+  }
+  const onTouchEnd = (e: GestureEvent) => {
+    const maxTouches = maxTouchesRef.current
+    maxTouchesRef.current = 0
+    const diff = e.nativeEvent.pageX - initialTouch.current
+    initialTouch.current = -1
+    if (maxTouches !== 1) return
+    if (diff > needDiff) {
+      onSwipe(false)
+    } else if (diff < -needDiff) {
+      onSwipe(true)
+    }
+  }
+
+  let content: React.ReactNode = null
+  let spinner: React.ReactNode = null
+
+  if (isPlayableMedia) {
+    if (path) {
+      content = (
+        <NativeFullscreenVideo
+          key={path}
+          path={path}
+          previewHeight={previewHeight}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onLoaded={() => setLoaded(true)}
+        />
+      )
+    }
+  } else if (imgSrc) {
+    content = (
+      <Kb.ZoomableImage
+        src={imgSrc}
+        style={styles.zoomableBox}
+        onSwipe={hasMessageID ? onSwipe : undefined}
+        onTap={toggleHeader}
+        srcDims={srcDims}
+        boxCacheKey="chat-attach"
+      />
+    )
+  }
+
+  if (!loaded && isPlayableMedia) {
+    spinner = (
+      <Kb.Box2
+        direction="vertical"
+        style={styles.progressWrapper}
+        centerChildren={true}
+        fullHeight={true}
+        fullWidth={true}
+      >
+        <Kb.ProgressIndicator style={styles.progressIndicator} white={true} />
+      </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2
+      direction="vertical"
+      relative={true}
+      style={{backgroundColor: Kb.Styles.globalColors.blackOrBlack}}
+      fullWidth={true}
+      fullHeight={true}
+    >
+      {spinner}
+      <ShowToastAfterSaving transferState={message.transferState} />
+      <Kb.BoxGrow>{content}</Kb.BoxGrow>
+      <Animated.View style={[styles.animated, {opacity: fadeAnim ?? 1}]}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} fullHeight={true} style={styles.headerWrapper}>
+          <Kb.Text type="Body" onClick={onClose} style={styles.close}>
+            Close
+          </Kb.Text>
+          <Kb.Text type="Body" onClick={onAllMedia} style={styles.allMedia}>
+            All media
+          </Kb.Text>
+        </Kb.Box2>
+      </Animated.View>
+      <Kb.IconButton
+        disabled={!hasMessageID}
+        icon="iconfont-ellipsis"
+        style={styles.headerFooter}
+        onClick={hasMessageID ? showPopup : undefined}
+      />
+      {popup}
+    </Kb.Box2>
+  )
+}
+
+const Fullscreen = (p: Props) => {
+  if (!isMobile) return <DesktopFullscreen {...p} />
+  return <NativeFullscreen {...p} />
+}
+
+const styles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      allMedia: Kb.Styles.platformStyles({
+        isMobile: {
+          color: Kb.Styles.globalColors.blueDark,
+          marginLeft: 'auto',
+          padding: Kb.Styles.globalMargins.small,
+        },
+      }),
+      animated: Kb.Styles.platformStyles({
+        isMobile: {
+          height: 50,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        },
+      }),
+      arrow: {
+        position: 'relative',
+        top: 1,
+      },
+      arrowLeft: {right: 1},
+      arrowRight: {left: 1},
+      circle: Kb.Styles.platformStyles({
+        isElectron: {
+          ...Kb.Styles.globalStyles.flexBoxColumn,
+          alignItems: 'center',
+          alignSelf: 'center',
+          borderRadius: 36,
+          cursor: 'pointer',
+          flexShrink: 0,
+          height: 36,
+          justifyContent: 'center',
+          margin: Kb.Styles.globalMargins.small,
+          width: 36,
+        },
+      }),
+      close: Kb.Styles.platformStyles({
+        isMobile: {
+          color: Kb.Styles.globalColors.blueDark,
+          padding: Kb.Styles.globalMargins.small,
+        },
+      }),
+      contentsFit: {
+        ...Kb.Styles.globalStyles.flexBoxRow,
+        flex: 1,
+        height: '100%',
+        width: '100%',
+      },
+      disabled: {opacity: 0.3},
+      ellipsisContainer: Kb.Styles.platformStyles({
+        isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,
+      }),
+      error: {color: Kb.Styles.globalColors.redDark},
+      headerFooter: Kb.Styles.platformStyles({
+        common: {
+          paddingLeft: Kb.Styles.globalMargins.tiny,
+          paddingRight: Kb.Styles.globalMargins.tiny,
+        },
+        isElectron: {
+          alignItems: 'center',
+          height: 32,
+        },
+        isMobile: {
+          ...Kb.Styles.globalStyles.flexBoxRow,
+          alignItems: 'center',
+          backgroundColor: Kb.Styles.globalColors.blackOrBlack,
+          bottom: Kb.Styles.globalMargins.small,
+          flexShrink: 0,
+          height: 34,
+          left: Kb.Styles.globalMargins.small,
+          position: 'absolute',
+          width: 34,
+          zIndex: 3,
+        },
+      }),
+      headerWrapper: Kb.Styles.platformStyles({
+        isMobile: {backgroundColor: Kb.Styles.globalColors.blackOrBlack},
+      }),
+      link: Kb.Styles.platformStyles({
+        isElectron: {color: Kb.Styles.globalColors.black_50, cursor: 'pointer'},
+      }),
+      progressIndicator: Kb.Styles.platformStyles({isMobile: {width: 48}}),
+      progressWrapper: Kb.Styles.platformStyles({isMobile: {position: 'absolute'}}),
+      retry: {
+        color: Kb.Styles.globalColors.redDark,
+        textDecorationLine: 'underline',
+      },
+      videoFit: Kb.Styles.platformStyles({
+        isElectron: {
+          cursor: 'normal',
+          display: 'block',
+          height: '100%',
+          objectFit: 'scale-down' as const,
+          width: '100%',
+        },
+      }),
+      videoWrapper: Kb.Styles.platformStyles({
+        isMobile: {
+          alignItems: 'center',
+          height: '100%',
+          justifyContent: 'center',
+          position: 'relative',
+          width: '100%',
+        },
+      }),
+      zoomableBox: Kb.Styles.platformStyles({
+        isMobile: {
+          backgroundColor: Kb.Styles.globalColors.blackOrBlack,
+          height: '100%',
+          position: 'relative',
+          width: '100%',
+        },
+      }),
+    }) as const
+)
+
+export default Fullscreen
diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx
index d9ef81b04225..5a2900c5e167 100644
--- a/shared/chat/conversation/attachment-get-titles.tsx
+++ b/shared/chat/conversation/attachment-get-titles.tsx
@@ -179,7 +179,7 @@ const ContainerInner = (ownProps: OwnProps) => {
       preview = path ? <Kb.Video autoPlay={false} allowFile={true} muted={true} url={path} /> : null
       break
     default: {
-      if (C.isIOS && path && Chat.isPathHEIC(path)) {
+      if (isIOS && path && Chat.isPathHEIC(path)) {
         preview = <Kb.ZoomableImage src={path} style={styles.image} boxCacheKey="getTitlesHeicImg" />
       } else {
         preview = (
@@ -201,7 +201,7 @@ const ContainerInner = (ownProps: OwnProps) => {
         <Kb.ClickableBox2 style={styles.container2} onClick={() => inputRef.current?.blur()}>
           <Kb.Box2 direction="vertical" style={styles.containerOuter} fullWidth={true}>
             <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
-            {pathAndInfos.length > 0 && !Kb.Styles.isMobile && (
+            {pathAndInfos.length > 0 && !isMobile && (
               <Kb.Box2 direction="vertical" style={styles.filename}>
                 <Kb.Text type="BodySmallSemibold">Filename</Kb.Text>
                 <Kb.Text type="BodySmall" center={true}>
@@ -212,7 +212,7 @@ const ContainerInner = (ownProps: OwnProps) => {
             <Kb.Box2 direction="vertical" fullWidth={true} style={styles.inputContainer}>
               <Kb.Input3
                 ref={inputRef}
-                autoFocus={!Kb.Styles.isMobile}
+                autoFocus={!isMobile}
                 onClick={(e: React.BaseSyntheticEvent) => {
                   e.stopPropagation()
                 }}
@@ -231,7 +231,7 @@ const ContainerInner = (ownProps: OwnProps) => {
           </Kb.Box2>
         </Kb.ClickableBox2>
         <Kb.ButtonBar fullWidth={true} small={true} style={styles.buttonContainer}>
-          {!Kb.Styles.isMobile && <Kb.Button fullWidth={true} type="Dim" onClick={onCancel} label="Cancel" />}
+          {!isMobile && <Kb.Button fullWidth={true} type="Dim" onClick={onCancel} label="Cancel" />}
           {isLast ? (
             <Kb.WaitingButton fullWidth={!multiUpload} onClick={onSubmit} label="Send" />
           ) : (
@@ -249,7 +249,7 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       boxGrow: {
         flexShrink: 1,
-        marginBottom: Kb.Styles.isMobile ? Kb.Styles.globalMargins.small : 0,
+        marginBottom: isMobile ? Kb.Styles.globalMargins.small : 0,
         width: '100%',
       },
       buttonContainer: Kb.Styles.platformStyles({
diff --git a/shared/chat/conversation/bot/install.tsx b/shared/chat/conversation/bot/install.tsx
index 049502cce287..c1eb6ac9de91 100644
--- a/shared/chat/conversation/bot/install.tsx
+++ b/shared/chat/conversation/bot/install.tsx
@@ -248,7 +248,7 @@ const InstallBotPopup = (props: Props) => {
   const navigateUp = C.Router2.navigateUp
   const [pendingMutation, setPendingMutation] = React.useState<'add' | 'edit' | undefined>()
   const onLearn = () => {
-    openURL('https://book.keybase.io/docs/chat/restricted-bots')
+    void openURL('https://book.keybase.io/docs/chat/restricted-bots')
   }
   const onInstall = () => {
     if (!conversationIDKey) {
@@ -620,7 +620,7 @@ const InstallBotPopup = (props: Props) => {
       } else if (installScreen) {
         setInstallScreen(false)
       } else {
-        if (Kb.Styles.isMobile) {
+        if (isMobile) {
           navigateUp()
         } else {
           clearModals()
diff --git a/shared/chat/conversation/bottom-banner.tsx b/shared/chat/conversation/bottom-banner.tsx
index debd869cc688..b657e4fc7011 100644
--- a/shared/chat/conversation/bottom-banner.tsx
+++ b/shared/chat/conversation/bottom-banner.tsx
@@ -48,7 +48,7 @@ const Invite = (props: {onDismiss: () => void}) => {
       : openShareSheet
   const caption = `Last step: summon ${theirName}!`
 
-  if (C.isMobile) {
+  if (isMobile) {
     return (
       <BannerBox color={Kb.Styles.globalColors.blue} gap="xtiny">
         <Kb.Text center={true} type="BodySmallSemibold" negative={true}>
diff --git a/shared/chat/conversation/fwd-msg.tsx b/shared/chat/conversation/fwd-msg.tsx
index 9d6d6b393434..2b72430f3a60 100644
--- a/shared/chat/conversation/fwd-msg.tsx
+++ b/shared/chat/conversation/fwd-msg.tsx
@@ -226,7 +226,7 @@ const TeamPickerInner = (props: Props) => {
           />
         </Kb.Box2>
         <Kb.ButtonBar fullWidth={true} small={true} style={styles.buttonContainer}>
-          {Kb.Styles.isMobile ? null : (
+          {isMobile ? null : (
             <Kb.Button fullWidth={true} type="Dim" onClick={onClose} label="Cancel" />
           )}
           <Kb.Button fullWidth={true} onClick={onSubmit} label="Send" />
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/header-area/index.desktop.tsx b/shared/chat/conversation/header-area/index.desktop.tsx
deleted file mode 100644
index ef58c37e4933..000000000000
--- a/shared/chat/conversation/header-area/index.desktop.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const headerNavigationOptions = (_route: unknown) => ({})
diff --git a/shared/chat/conversation/header-area/index.native.tsx b/shared/chat/conversation/header-area/index.tsx
similarity index 91%
rename from shared/chat/conversation/header-area/index.native.tsx
rename to shared/chat/conversation/header-area/index.tsx
index b06b6a58b40a..ed534a86793b 100644
--- a/shared/chat/conversation/header-area/index.native.tsx
+++ b/shared/chat/conversation/header-area/index.tsx
@@ -5,10 +5,10 @@ import * as T from '@/constants/types'
 import type {HeaderBackButtonProps} from '@react-navigation/elements'
 import {HeaderLeftButton} from '@/common-adapters/header-buttons'
 import {Keyboard} from 'react-native'
+import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import type {SFSymbol} from 'sf-symbols-typescript'
 // import {DebugChatDumpContext} from '@/constants/chat/debug'
 import {assertionToDisplay} from '@/common-adapters/usernames'
-import {useSafeAreaFrame} from 'react-native-safe-area-context'
 import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useConfigState} from '@/stores/config'
@@ -19,31 +19,12 @@ import {muteConversation} from '../status-actions'
 
 type HeaderConversationProps = {conversationIDKey: T.Chat.ConversationIDKey}
 
-export const HeaderAreaRight = (props: HeaderConversationProps) => {
+const HeaderAreaRightImpl = (props: HeaderConversationProps) => {
   const {conversationIDKey} = props
   const pendingWaiting =
     conversationIDKey === Chat.pendingWaitingConversationIDKey ||
     conversationIDKey === Chat.pendingErrorConversationIDKey
 
-  // const {chatDebugDump} = React.useContext(DebugChatDumpContext)
-  // const [showToast, setShowToast] = React.useState(false)
-  // const dumpIcon = chatDebugDump ? (
-  //   <>
-  //     <Kb.SimpleToast iconType="iconfont-check" text="Logged, send feedback next" visible={showToast} />
-  //     <Kb.Icon
-  //       type="iconfont-keybase"
-  //       onClick={() => {
-  //         chatDebugDump(conversationIDKey)
-  //         setShowToast(true)
-  //         setTimeout(() => {
-  //           setShowToast(false)
-  //         }, 2000)
-  //       }}
-  //       style={{zIndex: 999}}
-  //     />
-  //   </>
-  // ) : null
-
   const onShowInfoPanel = () => {
     Keyboard.dismiss()
     setTimeout(() => {
@@ -51,7 +32,6 @@ export const HeaderAreaRight = (props: HeaderConversationProps) => {
     }, 100)
   }
   const onToggleThreadSearch = () => {
-    // fix a race with the keyboard going away and coming back quickly
     Keyboard.dismiss()
     setTimeout(() => {
       toggleConversationThreadSearch(conversationIDKey)
@@ -69,6 +49,7 @@ export const HeaderAreaRight = (props: HeaderConversationProps) => {
     </Kb.Box2>
   )
 }
+export const HeaderAreaRight = isMobile ? HeaderAreaRightImpl : () => null
 
 enum HeaderType {
   Team,
@@ -76,9 +57,9 @@ enum HeaderType {
   User,
 }
 
-const HeaderBranchContainer = function HeaderBranchContainer() {
-  return <HeaderBranchContainerInner conversationIDKey={Chat.noConversationIDKey} />
-}
+const HeaderBranchContainer = isMobile
+  ? () => <HeaderBranchContainerInner conversationIDKey={Chat.noConversationIDKey} />
+  : () => null
 
 const HeaderBranchContainerInner = function HeaderBranchContainerInner(props: HeaderConversationProps) {
   const {conversationIDKey} = props
@@ -115,11 +96,12 @@ const BadgeHeaderLeftArray = (p: HeaderBackButtonProps & HeaderConversationProps
 const sfIcon = (name: SFSymbol) => ({name, type: 'sfSymbol' as const})
 
 export const headerNavigationOptions = (route: {params?: {conversationIDKey?: T.Chat.ConversationIDKey}}) => {
+  if (!isMobile) return {}
   const conversationIDKey = route.params?.conversationIDKey ?? Chat.noConversationIDKey
   return {
     // iOS 26: headerLeft omitted — native back button comes from tabStackOptions (headerBackVisible: true).
     // BadgeHeaderUpdater in container.tsx drives unstable_headerLeftItems for the badge count.
-    ...(!Kb.Styles.isIOS
+    ...(!isIOS
       ? {
           headerLeft: (props: HeaderBackButtonProps) => {
             const {labelStyle, ...rest} = props
@@ -128,7 +110,7 @@ export const headerNavigationOptions = (route: {params?: {conversationIDKey?: T.
         }
       : {}),
     // iOS 26: two separate native buttons (each gets its own glass pill).
-    ...(Kb.Styles.isIOS
+    ...(isIOS
       ? {
           unstable_headerRightItems: () => [
             {
@@ -204,7 +186,7 @@ const ChannelHeader = (props: HeaderConversationProps) => {
   const {conversationIDKey} = props
   const {channelname, teamname, teamType, teamID} = useConversationMetadata(conversationIDKey).meta
   const smallTeam = teamType !== 'big'
-  const textType = smallTeam ? 'BodyBig' : Kb.Styles.isMobile ? 'BodyTinySemibold' : 'BodySemibold'
+  const textType = smallTeam ? 'BodyBig' : isMobile ? 'BodyTinySemibold' : 'BodySemibold'
   const navigateAppend = C.Router2.navigateAppend
   const onClick = () => {
     navigateAppend({name: 'team', params: {teamID}})
diff --git a/shared/chat/conversation/info-panel/add-to-channel.tsx b/shared/chat/conversation/info-panel/add-to-channel.tsx
index 4906ec69a889..7b20b8a06808 100644
--- a/shared/chat/conversation/info-panel/add-to-channel.tsx
+++ b/shared/chat/conversation/info-panel/add-to-channel.tsx
@@ -113,7 +113,7 @@ const AddToChannelInner = (props: Props & {conversationIDKey: T.Chat.Conversatio
             }
             return (
               <Kb.ListItem
-                firstItem={!Kb.Styles.isMobile || idx === 0}
+                firstItem={!isMobile || idx === 0}
                 icon={<Kb.Avatar size={32} username={item.username} />}
                 type="Small"
                 onClick={alreadyIn ? undefined : onCheck}
@@ -148,7 +148,7 @@ const AddToChannelInner = (props: Props & {conversationIDKey: T.Chat.Conversatio
           style={styles.list}
         />
       </Kb.Box2>
-      {Kb.Styles.isMobile ? null : (
+      {isMobile ? null : (
         <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
           <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
             <Kb.Button type="Dim" label="Cancel" onClick={onClose} style={Kb.Styles.globalStyles.flexOne} />
@@ -168,7 +168,7 @@ const AddToChannelInner = (props: Props & {conversationIDKey: T.Chat.Conversatio
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   checkCircle: {
-    paddingRight: Kb.Styles.isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.tiny,
+    paddingRight: isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.tiny,
   },
   filterInput: Kb.Styles.platformStyles({
     isElectron: {
diff --git a/shared/chat/conversation/info-panel/attachments.tsx b/shared/chat/conversation/info-panel/attachments.tsx
index 71e31204339c..0485bf977245 100644
--- a/shared/chat/conversation/info-panel/attachments.tsx
+++ b/shared/chat/conversation/info-panel/attachments.tsx
@@ -256,7 +256,7 @@ const DocViewRow = (props: DocViewRowProps) => {
           </Kb.Text>
         </Kb.Box2>
       )}
-      {Kb.Styles.isMobile && item.message && popup}
+      {isMobile && item.message && popup}
     </Kb.Box2>
   )
 }
@@ -668,7 +668,7 @@ export const useAttachmentSections = (
   const clearModals = C.Router2.clearModals
 
   const jumpToAttachment = (messageID: T.Chat.MessageID) => {
-    if (C.isMobile) {
+    if (isMobile) {
       clearModals()
     }
     C.Router2.navigateToThread(conversationIDKey, 'misc', messageID)
@@ -715,7 +715,7 @@ export const useAttachmentSections = (
   const onMediaClick = (message: T.Chat.MessageAttachment) => showAttachmentPreview(conversationIDKey, message)
 
   const onDocDownload = (message: T.Chat.MessageAttachment) => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       messageAttachmentNativeShareMessage(conversationIDKey, message)
     } else if (!message.downloadPath) {
       attachmentDownloadMessage(conversationIDKey, message)
@@ -855,7 +855,7 @@ export const useAttachmentSections = (
               jumpToAttachment(m.id)
             },
             onDownload: () => onDocDownload(m),
-            onShowInFinder: !C.isMobile && m.downloadPath ? () => onShowInFinder(m) : undefined,
+            onShowInFinder: !isMobile && m.downloadPath ? () => onShowInFinder(m) : undefined,
             progress: m.transferProgress,
             type: 'doc',
           }))
diff --git a/shared/chat/conversation/info-panel/bot.tsx b/shared/chat/conversation/info-panel/bot.tsx
index ba6910eff2d8..7df47b82be3d 100644
--- a/shared/chat/conversation/info-panel/bot.tsx
+++ b/shared/chat/conversation/info-panel/bot.tsx
@@ -158,7 +158,7 @@ export const Bot = (props: BotProps) => {
       onClick={() => onClick(botUsername)}
       type="Large"
       firstItem={!!firstItem}
-      icon={<Kb.Avatar size={Kb.Styles.isMobile ? 48 : 32} username={botUsername} />}
+      icon={<Kb.Avatar size={isMobile ? 48 : 32} username={botUsername} />}
       hideHover={!!props.hideHover}
       style={{backgroundColor: isSelected ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.white}}
       action={
diff --git a/shared/chat/conversation/info-panel/common.tsx b/shared/chat/conversation/info-panel/common.tsx
index 5599c4c91069..22a9480571d8 100644
--- a/shared/chat/conversation/info-panel/common.tsx
+++ b/shared/chat/conversation/info-panel/common.tsx
@@ -9,7 +9,7 @@ export const infoPanelWidthTablet = 350
 export function infoPanelWidth() {
   if (Styles.isTablet) {
     return infoPanelWidthTablet
-  } else if (Styles.isMobile) {
+  } else if (isMobile) {
     return infoPanelWidthPhone
   } else {
     return infoPanelWidthElectron
diff --git a/shared/chat/conversation/info-panel/header.tsx b/shared/chat/conversation/info-panel/header.tsx
index 4e127ad99dd9..6f7fb6b0f21d 100644
--- a/shared/chat/conversation/info-panel/header.tsx
+++ b/shared/chat/conversation/info-panel/header.tsx
@@ -8,7 +8,7 @@ import {useChatTeam} from '../team-hooks'
 import {joinConversation} from '../status-actions'
 import {useConversationMetadata} from '../data-hooks'
 
-const gearIconSize = Kb.Styles.isMobile ? 24 : 16
+const gearIconSize = isMobile ? 24 : 16
 
 const TeamHeader = (props: {conversationIDKey: T.Chat.ConversationIDKey}) => {
   const {conversationIDKey} = props
diff --git a/shared/chat/conversation/info-panel/index.tsx b/shared/chat/conversation/info-panel/index.tsx
index 5b66f9910285..d84cb066169a 100644
--- a/shared/chat/conversation/info-panel/index.tsx
+++ b/shared/chat/conversation/info-panel/index.tsx
@@ -45,7 +45,7 @@ const InfoPanelConnectorInner = (ownProps: Props & {conversationIDKey: T.Chat.Co
       // Only call showInfoPanel(false) on mobile where the panel is a separate route.
       // On desktop the panel is inline and this cleanup fires during StrictMode
       // double-effect, which immediately hides the panel.
-      if (Kb.Styles.isMobile) {
+      if (isMobile) {
         hideInfoPanel()
       }
     }
diff --git a/shared/chat/conversation/info-panel/menu.tsx b/shared/chat/conversation/info-panel/menu.tsx
index 4ed7d0537739..84854ac92051 100644
--- a/shared/chat/conversation/info-panel/menu.tsx
+++ b/shared/chat/conversation/info-panel/menu.tsx
@@ -421,7 +421,7 @@ const AdhocHeader = (props: AdhocHeaderProps) => {
         isMuted={props.isMuted}
         participantOne={channelHumans[0]}
         participantTwo={channelHumans[1]}
-        singleSize={Kb.Styles.isMobile ? 48 : 32}
+        singleSize={isMobile ? 48 : 32}
       />
       <Kb.Box2 alignItems="flex-start" direction="vertical">
         <Kb.ConnectedUsernames
diff --git a/shared/chat/conversation/info-panel/participant.tsx b/shared/chat/conversation/info-panel/participant.tsx
index 5708ae5d8757..5ceced34e8b4 100644
--- a/shared/chat/conversation/info-panel/participant.tsx
+++ b/shared/chat/conversation/info-panel/participant.tsx
@@ -32,7 +32,7 @@ const Participant = ({firstItem, fullname, isAdmin, isOwner, username, onShowPro
       onClick={() => onShowProfile(username)}
       firstItem={firstItem}
       type="Large"
-      icon={<Kb.Avatar size={Kb.Styles.isMobile ? 48 : 32} username={username} />}
+      icon={<Kb.Avatar size={isMobile ? 48 : 32} username={username} />}
       body={
         <Kb.Box2 direction="vertical">
           <Kb.ConnectedUsernames usernames={username} colorFollowing={true} type="BodyBold" />
diff --git a/shared/chat/conversation/info-panel/settings/min-writer-role.tsx b/shared/chat/conversation/info-panel/settings/min-writer-role.tsx
index f09c14bc4b58..53a068b1b6f6 100644
--- a/shared/chat/conversation/info-panel/settings/min-writer-role.tsx
+++ b/shared/chat/conversation/info-panel/settings/min-writer-role.tsx
@@ -143,7 +143,7 @@ const Dropdown = (p: DropdownProps) => {
     <>
       <Kb.ClickableBox
         style={styles.dropdown}
-        ref={Style.isMobile ? null : popupAnchor}
+        ref={isMobile ? null : popupAnchor}
         onClick={showPopup}
         underlayColor={Style.globalColors.white_40}
       >
@@ -187,7 +187,7 @@ const styles = Style.styleSheetCreate(
       hidden: {display: 'none'},
       label: {
         alignItems: 'center',
-        minHeight: Style.isMobile ? 40 : 32,
+        minHeight: isMobile ? 40 : 32,
         paddingLeft: Style.globalMargins.xsmall,
         width: '100%',
       },
diff --git a/shared/chat/conversation/input-area/container.tsx b/shared/chat/conversation/input-area/container.tsx
index 29576534cb1b..d6323fc991e4 100644
--- a/shared/chat/conversation/input-area/container.tsx
+++ b/shared/chat/conversation/input-area/container.tsx
@@ -34,7 +34,7 @@ const InputAreaContainer = () => {
   if (isPreview) {
     return <Preview />
   }
-  if (showThreadSearch && C.isMobile) {
+  if (showThreadSearch && isMobile) {
     return <ThreadSearch />
   }
   return <PerfProfiler id="ChatInput"><Normal /></PerfProfiler>
diff --git a/shared/chat/conversation/input-area/filepicker-popup/index.desktop.tsx b/shared/chat/conversation/input-area/filepicker-popup/index.desktop.tsx
deleted file mode 100644
index 080941ff8981..000000000000
--- a/shared/chat/conversation/input-area/filepicker-popup/index.desktop.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-const FilePickerPopup = () => null
-
-export default FilePickerPopup
diff --git a/shared/chat/conversation/input-area/filepicker-popup/index.native.tsx b/shared/chat/conversation/input-area/filepicker-popup/index.tsx
similarity index 94%
rename from shared/chat/conversation/input-area/filepicker-popup/index.native.tsx
rename to shared/chat/conversation/input-area/filepicker-popup/index.tsx
index 2580773c07e5..e15712385ec1 100644
--- a/shared/chat/conversation/input-area/filepicker-popup/index.native.tsx
+++ b/shared/chat/conversation/input-area/filepicker-popup/index.tsx
@@ -18,8 +18,8 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const FilePickerPopup = (p: Props) => {
-  const items = Kb.Styles.isIOS
+const FilePickerPopupImpl = (p: Props) => {
+  const items = isIOS
     ? ([
         {
           icon: 'iconfont-camera',
@@ -80,4 +80,5 @@ const FilePickerPopup = (p: Props) => {
   )
 }
 
+const FilePickerPopup = isMobile ? FilePickerPopupImpl : () => null
 export default FilePickerPopup
diff --git a/shared/chat/conversation/input-area/location-popup.desktop.tsx b/shared/chat/conversation/input-area/location-popup.desktop.tsx
deleted file mode 100644
index c07558b9f77f..000000000000
--- a/shared/chat/conversation/input-area/location-popup.desktop.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-const LocationPopup = () => null
-export default LocationPopup
diff --git a/shared/chat/conversation/input-area/location-popup.native.tsx b/shared/chat/conversation/input-area/location-popup.tsx
similarity index 96%
rename from shared/chat/conversation/input-area/location-popup.native.tsx
rename to shared/chat/conversation/input-area/location-popup.tsx
index 3c1e7ff4800c..a5d25b63dabd 100644
--- a/shared/chat/conversation/input-area/location-popup.native.tsx
+++ b/shared/chat/conversation/input-area/location-popup.tsx
@@ -63,7 +63,9 @@ const useWatchPosition = (
     logger.info('[location] perms check due to map')
     const f = async () => {
       try {
-        await requestLocationPermission(T.RPCChat.UIWatchPositionPerm.base)
+        await (requestLocationPermission as (mode?: T.RPCChat.UIWatchPositionPerm) => Promise<void>)(
+          T.RPCChat.UIWatchPositionPerm.base
+        )
         const sub = await ExpoLocation.watchPositionAsync(
           {accuracy: ExpoLocation.LocationAccuracy.Highest},
           (location: ExpoLocation.LocationObject) => {
@@ -181,10 +183,11 @@ const LocationPopupInner = (props: {conversationIDKey: T.Chat.ConversationIDKey}
 
 type LocationPopupProps = {conversationIDKey?: T.Chat.ConversationIDKey}
 
-const LocationPopup = (props: LocationPopupProps) => {
+const LocationPopupMobile = (props: LocationPopupProps) => {
   const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey
   return <LocationPopupInner conversationIDKey={conversationIDKey} />
 }
+const LocationPopup = isMobile ? LocationPopupMobile : () => null
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
diff --git a/shared/chat/conversation/input-area/normal/index.tsx b/shared/chat/conversation/input-area/normal/index.tsx
index 3756b7121bc3..02fc2bee559b 100644
--- a/shared/chat/conversation/input-area/normal/index.tsx
+++ b/shared/chat/conversation/input-area/normal/index.tsx
@@ -43,7 +43,7 @@ const useHintText = (p: {
       teamname: s.meta.teamname,
     }))
   )
-  if (Kb.Styles.isMobile && isExploding) {
+  if (isMobile && isExploding) {
     return C.isLargeScreen ? `Write an exploding message` : 'Exploding message'
   }
   if (cannotWrite) {
@@ -59,7 +59,7 @@ const useHintText = (p: {
   switch (teamType) {
     case 'big':
       if (channelname) {
-        return `Write in ${C.isMobile ? '' : `@${teamname}`}#${channelname}`
+        return `Write in ${isMobile ? '' : `@${teamname}`}#${channelname}`
       }
       break
     case 'small':
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 1b52ca088c31..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 (Kb.Styles.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/input-area/normal/set-explode-popup/index.desktop.tsx b/shared/chat/conversation/input-area/normal/set-explode-popup/index.desktop.tsx
deleted file mode 100644
index bd575535b2c3..000000000000
--- a/shared/chat/conversation/input-area/normal/set-explode-popup/index.desktop.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-import useHooks from './hooks'
-import type {MessageExplodeDescription} from './hooks'
-
-const quantityTextStyle = Kb.Styles.platformStyles({
-  common: {
-    textAlign: 'right',
-    // NOTE if times are added that have three digits, this will need to be increased.
-    width: 15,
-  },
-  isElectron: {display: 'inline-block'},
-})
-
-type ItemProps = {
-  desc: MessageExplodeDescription
-  selected: boolean
-}
-
-const Item = (props: ItemProps) => {
-  let content: React.ReactNode
-  const words = props.desc.text.split(' ')
-  if (props.desc.seconds === 0) {
-    // never item
-    content = props.desc.text
-  } else {
-    content = (
-      <>
-        <Kb.Text type="Body" style={quantityTextStyle}>
-          {words[0]}
-        </Kb.Text>
-        {' ' + words.slice(1).join(' ')}
-      </>
-    )
-  }
-  return (
-    <Kb.Box2 direction="horizontal" fullWidth={true}>
-      <Kb.Text type="Body" style={{flex: 1}}>
-        {content}
-      </Kb.Text>
-      {props.selected && <Kb.Icon type="iconfont-check" color={Kb.Styles.globalColors.blue} />}
-    </Kb.Box2>
-  )
-}
-
-const SetExplodePopup = (p: Props) => {
-  const props = useHooks(p)
-  const listItems: Kb.MenuItems = props.items.map(it => ({
-    disabled: false,
-    onClick: () => props.onSelect(it.seconds),
-    title: it.text,
-    view: <Item desc={it} selected={props.selected === it.seconds} />,
-  }))
-  listItems.unshift({
-    disabled: true,
-    onClick: undefined,
-    title: 'Explode message after:',
-    view: <Kb.Text type="BodySmallSemibold">Explode messages after:</Kb.Text>,
-  })
-  return (
-    <Kb.FloatingMenu
-      attachTo={props.attachTo}
-      position="top left"
-      visible={props.visible}
-      closeOnSelect={true}
-      onHidden={props.onHidden}
-      items={listItems}
-      containerStyle={{
-        bottom: 3,
-        position: 'relative',
-      }}
-    />
-  )
-}
-
-export default SetExplodePopup
diff --git a/shared/chat/conversation/input-area/normal/set-explode-popup/index.native.tsx b/shared/chat/conversation/input-area/normal/set-explode-popup/index.native.tsx
deleted file mode 100644
index e1d50248f819..000000000000
--- a/shared/chat/conversation/input-area/normal/set-explode-popup/index.native.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-import useHooks from './hooks'
-
-const Prompt = () => (
-  <Kb.Box2 direction="horizontal" fullWidth={true} gap="xtiny" style={promptContainerStyle} justifyContent="center">
-    <Kb.Text type="BodySmallSemibold">Explode messages after:</Kb.Text>
-  </Kb.Box2>
-)
-
-const promptContainerStyle = {
-  alignItems: 'center',
-} as const
-
-const SetExplodePopup = (p: Props) => {
-  const props = useHooks(p)
-  const items = props.items.map(item => ({
-    onClick: () => {
-      props.onSelect(item.seconds)
-    },
-    title: item.text,
-    value: item.seconds,
-  }))
-
-  return (
-    <Kb.FloatingMenu
-      header={<Prompt />}
-      closeOnSelect={true}
-      items={items}
-      mode="bottomsheet"
-      onHidden={props.onHidden}
-      visible={props.visible}
-    />
-  )
-}
-
-export default SetExplodePopup
diff --git a/shared/chat/conversation/input-area/normal/set-explode-popup/index.tsx b/shared/chat/conversation/input-area/normal/set-explode-popup/index.tsx
new file mode 100644
index 000000000000..e594fd7964ed
--- /dev/null
+++ b/shared/chat/conversation/input-area/normal/set-explode-popup/index.tsx
@@ -0,0 +1,107 @@
+import * as Kb from '@/common-adapters'
+import type {Props} from './index.shared'
+import useHooks from './hooks'
+import type {MessageExplodeDescription} from './hooks'
+
+const quantityTextStyle = Kb.Styles.platformStyles({
+  common: {
+    textAlign: 'right',
+    width: 15,
+  },
+  isElectron: {display: 'inline-block'},
+})
+
+type ItemProps = {
+  desc: MessageExplodeDescription
+  selected: boolean
+}
+
+const Item = (props: ItemProps) => {
+  let content: React.ReactNode
+  const words = props.desc.text.split(' ')
+  if (props.desc.seconds === 0) {
+    content = props.desc.text
+  } else {
+    content = (
+      <>
+        <Kb.Text type="Body" style={quantityTextStyle}>
+          {words[0]}
+        </Kb.Text>
+        {' ' + words.slice(1).join(' ')}
+      </>
+    )
+  }
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true}>
+      <Kb.Text type="Body" style={{flex: 1}}>
+        {content}
+      </Kb.Text>
+      {props.selected && <Kb.Icon type="iconfont-check" color={Kb.Styles.globalColors.blue} />}
+    </Kb.Box2>
+  )
+}
+
+const PromptNative = () => (
+  <Kb.Box2
+    direction="horizontal"
+    fullWidth={true}
+    gap="xtiny"
+    style={promptContainerStyle}
+    justifyContent="center"
+  >
+    <Kb.Text type="BodySmallSemibold">Explode messages after:</Kb.Text>
+  </Kb.Box2>
+)
+
+const promptContainerStyle = {alignItems: 'center'} as const
+
+const SetExplodePopup = (p: Props) => {
+  const props = useHooks(p)
+
+  if (!isMobile) {
+    const listItems: Kb.MenuItems = props.items.map(it => ({
+      disabled: false,
+      onClick: () => props.onSelect(it.seconds),
+      title: it.text,
+      view: <Item desc={it} selected={props.selected === it.seconds} />,
+    }))
+    listItems.unshift({
+      disabled: true,
+      onClick: undefined,
+      title: 'Explode message after:',
+      view: <Kb.Text type="BodySmallSemibold">Explode messages after:</Kb.Text>,
+    })
+    return (
+      <Kb.FloatingMenu
+        attachTo={props.attachTo}
+        position="top left"
+        visible={props.visible}
+        closeOnSelect={true}
+        onHidden={props.onHidden}
+        items={listItems}
+        containerStyle={{bottom: 3, position: 'relative'}}
+      />
+    )
+  }
+
+  const items = props.items.map(item => ({
+    onClick: () => {
+      props.onSelect(item.seconds)
+    },
+    title: item.text,
+    value: item.seconds,
+  }))
+
+  return (
+    <Kb.FloatingMenu
+      header={<PromptNative />}
+      closeOnSelect={true}
+      items={items}
+      mode="bottomsheet"
+      onHidden={props.onHidden}
+      visible={props.visible}
+    />
+  )
+}
+
+export default SetExplodePopup
diff --git a/shared/chat/conversation/input-area/normal/typing.tsx b/shared/chat/conversation/input-area/normal/typing.tsx
index 34ec2f1e4ec7..dbac12300f66 100644
--- a/shared/chat/conversation/input-area/normal/typing.tsx
+++ b/shared/chat/conversation/input-area/normal/typing.tsx
@@ -52,7 +52,7 @@ const Typing = function Typing() {
       showGiphySearch: s.giphyWindow,
     }))
   )
-  const showTypingStatus = !C.isMobile || (!showGiphySearch && !showCommandMarkdown)
+  const showTypingStatus = !isMobile || (!showGiphySearch && !showCommandMarkdown)
   const names = showTypingStatus ? threadTyping : emptySet
   return (
     <Kb.Box2 direction="horizontal" style={styles.isTypingContainer}>
diff --git a/shared/chat/conversation/input-area/suggestors/common.tsx b/shared/chat/conversation/input-area/suggestors/common.tsx
index 794146589564..0b9c6a1f6787 100644
--- a/shared/chat/conversation/input-area/suggestors/common.tsx
+++ b/shared/chat/conversation/input-area/suggestors/common.tsx
@@ -109,7 +109,7 @@ export function List<T>(p: ListProps<T>) {
         suggestBotCommandsUpdateStatus={suggestBotCommandsUpdateStatus}
       />
       {loading && (
-        <Kb.ProgressIndicator type={Kb.Styles.isMobile ? undefined : 'Large'} style={spinnerStyle} />
+        <Kb.ProgressIndicator type={isMobile ? undefined : 'Large'} style={spinnerStyle} />
       )}
     </>
   )
diff --git a/shared/chat/conversation/input-area/suggestors/index.tsx b/shared/chat/conversation/input-area/suggestors/index.tsx
index 1d1783527edc..57a9b3fe2cf7 100644
--- a/shared/chat/conversation/input-area/suggestors/index.tsx
+++ b/shared/chat/conversation/input-area/suggestors/index.tsx
@@ -450,7 +450,7 @@ const Popup = (p: PopupProps) => {
       containerStyle={suggestionOverlayStyle}
       style={suggestionOverlayStyle}
     >
-      {Kb.Styles.isMobile ? <Kb.KeyboardAvoidingView2>{children}</Kb.KeyboardAvoidingView2> : children}
+      {isMobile ? <Kb.KeyboardAvoidingView2>{children}</Kb.KeyboardAvoidingView2> : children}
     </Kb.Popup>
   )
 }
diff --git a/shared/chat/conversation/input-area/suggestors/suggestion-list.desktop.tsx b/shared/chat/conversation/input-area/suggestors/suggestion-list.desktop.tsx
deleted file mode 100644
index 40c1752c0bb1..000000000000
--- a/shared/chat/conversation/input-area/suggestors/suggestion-list.desktop.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import * as T from '@/constants/types'
-import type {Props} from './suggestion-list.shared'
-import {BotCommandUpdateStatus} from './shared'
-import type {LegendListRef} from '@/common-adapters'
-
-const SuggestionList = <I,>(props: Props<I>) => {
-  const listRef = React.useRef<LegendListRef>(null)
-  const {selectedIndex} = props
-
-  const lastIndexRef = React.useRef(selectedIndex)
-  React.useEffect(() => {
-    if (lastIndexRef.current !== selectedIndex) {
-      void listRef.current?.scrollToIndex({index: selectedIndex})
-    }
-    lastIndexRef.current = selectedIndex
-  }, [selectedIndex, listRef])
-
-  const itemRenderer = (index: number) => {
-    const i = props.items[index]
-    return i ? (props.renderItem(index, i) as React.JSX.Element) : <></>
-  }
-
-  const itemHeight = {type: 'trueVariable' as const}
-
-  if (
-    !props.items.length &&
-    (!props.suggestBotCommandsUpdateStatus ||
-      props.suggestBotCommandsUpdateStatus === T.RPCChat.UIBotCommandsUpdateStatusTyp.blank)
-  ) {
-    return null
-  }
-
-  const maxHeight = 224
-  const estimatedItemHeight = 24
-  const listHeight = Math.min(props.items.length * estimatedItemHeight, maxHeight)
-
-  return (
-    <Kb.Box2
-      direction="vertical"
-      fullWidth={true}
-      style={Kb.Styles.collapseStyles([styles.listContainer, {height: listHeight}, props.style])}
-    >
-      <Kb.List ref={listRef} renderItem={itemRenderer} items={props.items} itemHeight={itemHeight} estimatedItemHeight={estimatedItemHeight} extraData={selectedIndex} />
-      {props.suggestBotCommandsUpdateStatus &&
-      props.suggestBotCommandsUpdateStatus !== T.RPCChat.UIBotCommandsUpdateStatusTyp.blank ? (
-        <Kb.Box2 style={styles.commandStatusContainer} fullWidth={true} direction="vertical" justifyContent="center">
-          <BotCommandUpdateStatus status={props.suggestBotCommandsUpdateStatus} />
-        </Kb.Box2>
-      ) : null}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      commandStatusContainer: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        ...Kb.Styles.padding(Kb.Styles.globalMargins.xxtiny, 0),
-      },
-      listContainer: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        borderRadius: 4,
-      },
-    }) as const
-)
-
-export default SuggestionList
diff --git a/shared/chat/conversation/input-area/suggestors/suggestion-list.native.tsx b/shared/chat/conversation/input-area/suggestors/suggestion-list.native.tsx
deleted file mode 100644
index 128e3999053b..000000000000
--- a/shared/chat/conversation/input-area/suggestors/suggestion-list.native.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as Kb from '@/common-adapters'
-import * as T from '@/constants/types'
-import noop from 'lodash/noop'
-import type {Props} from './suggestion-list.shared'
-import {BotCommandUpdateStatus} from './shared'
-import {FlatList} from 'react-native'
-
-function SuggestionList<I>(props: Props<I>) {
-  if (
-    !props.items.length &&
-    (!props.suggestBotCommandsUpdateStatus ||
-      props.suggestBotCommandsUpdateStatus === T.RPCChat.UIBotCommandsUpdateStatusTyp.blank)
-  ) {
-    return null
-  }
-  return (
-    <Kb.Box2
-      direction="vertical"
-      fullWidth={true}
-      style={Kb.Styles.collapseStyles([styles.listContainer, props.style])}
-    >
-      <FlatList
-        alwaysBounceVertical={false}
-        renderItem={({index, item}) => props.renderItem(index, item)}
-        style={styles.noGrow}
-        data={props.items}
-        keyExtractor={props.keyExtractor || (item => String(item))}
-        keyboardShouldPersistTaps="always"
-        windowSize={10}
-        onScrollToIndexFailed={noop}
-      />
-      {props.suggestBotCommandsUpdateStatus &&
-      props.suggestBotCommandsUpdateStatus !== T.RPCChat.UIBotCommandsUpdateStatusTyp.blank ? (
-        <Kb.Box2 style={styles.commandStatusContainer} fullWidth={true} direction="vertical" justifyContent="center">
-          <BotCommandUpdateStatus status={props.suggestBotCommandsUpdateStatus} />
-        </Kb.Box2>
-      ) : null}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      commandStatusContainer: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, 0),
-      },
-      listContainer: {flexGrow: 0, marginTop: 'auto'},
-      noGrow: {flexGrow: 0},
-    }) as const
-)
-
-export default SuggestionList
diff --git a/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx b/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx
new file mode 100644
index 000000000000..bb92a03ba07d
--- /dev/null
+++ b/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import * as T from '@/constants/types'
+import noop from 'lodash/noop'
+import type {Props} from './suggestion-list.shared'
+import {BotCommandUpdateStatus} from './shared'
+import type {LegendListRef} from '@/common-adapters'
+import {FlatList} from 'react-native'
+
+const SuggestionList = <I,>(props: Props<I>) => {
+  const listRef = React.useRef<LegendListRef>(null)
+  const {selectedIndex} = props
+
+  const lastIndexRef = React.useRef(selectedIndex)
+  React.useEffect(() => {
+    if (!isMobile && lastIndexRef.current !== selectedIndex) {
+      void listRef.current?.scrollToIndex({index: selectedIndex})
+    }
+    lastIndexRef.current = selectedIndex
+  }, [selectedIndex, listRef])
+
+  if (
+    !props.items.length &&
+    (!props.suggestBotCommandsUpdateStatus ||
+      props.suggestBotCommandsUpdateStatus === T.RPCChat.UIBotCommandsUpdateStatusTyp.blank)
+  ) {
+    return null
+  }
+
+  if (!isMobile) {
+    const itemRenderer = (index: number) => {
+      const i = props.items[index]
+      return i ? (props.renderItem(index, i) as React.JSX.Element) : <></>
+    }
+    const itemHeight = {type: 'trueVariable' as const}
+    const maxHeight = 224
+    const estimatedItemHeight = 24
+    const listHeight = Math.min(props.items.length * estimatedItemHeight, maxHeight)
+
+    return (
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        style={Kb.Styles.collapseStyles([desktopStyles.listContainer, {height: listHeight}, props.style])}
+      >
+        <Kb.List
+          ref={listRef}
+          renderItem={itemRenderer}
+          items={props.items}
+          itemHeight={itemHeight}
+          estimatedItemHeight={estimatedItemHeight}
+          extraData={selectedIndex}
+        />
+        {props.suggestBotCommandsUpdateStatus &&
+        props.suggestBotCommandsUpdateStatus !== T.RPCChat.UIBotCommandsUpdateStatusTyp.blank ? (
+          <Kb.Box2
+            style={desktopStyles.commandStatusContainer}
+            fullWidth={true}
+            direction="vertical"
+            justifyContent="center"
+          >
+            <BotCommandUpdateStatus status={props.suggestBotCommandsUpdateStatus} />
+          </Kb.Box2>
+        ) : null}
+      </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      style={Kb.Styles.collapseStyles([nativeStyles.listContainer, props.style])}
+    >
+      <FlatList
+        alwaysBounceVertical={false}
+        renderItem={({index, item}) => props.renderItem(index, item)}
+        style={nativeStyles.noGrow}
+        data={props.items}
+        keyExtractor={props.keyExtractor || (item => String(item))}
+        keyboardShouldPersistTaps="always"
+        windowSize={10}
+        onScrollToIndexFailed={noop}
+      />
+      {props.suggestBotCommandsUpdateStatus &&
+      props.suggestBotCommandsUpdateStatus !== T.RPCChat.UIBotCommandsUpdateStatusTyp.blank ? (
+        <Kb.Box2
+          style={nativeStyles.commandStatusContainer}
+          fullWidth={true}
+          direction="vertical"
+          justifyContent="center"
+        >
+          <BotCommandUpdateStatus status={props.suggestBotCommandsUpdateStatus} />
+        </Kb.Box2>
+      ) : null}
+    </Kb.Box2>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      commandStatusContainer: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        ...Kb.Styles.padding(Kb.Styles.globalMargins.xxtiny, 0),
+      },
+      listContainer: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        borderRadius: 4,
+      },
+    }) as const
+)
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      commandStatusContainer: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, 0),
+      },
+      listContainer: {flexGrow: 0, marginTop: 'auto'},
+      noGrow: {flexGrow: 0},
+    }) as const
+)
+
+export default SuggestionList
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/account-payment/container.tsx b/shared/chat/conversation/messages/account-payment/container.tsx
index 8df6df3c5774..aeb7a990e103 100644
--- a/shared/chat/conversation/messages/account-payment/container.tsx
+++ b/shared/chat/conversation/messages/account-payment/container.tsx
@@ -134,9 +134,9 @@ const ConnectedAccountPayment = (ownProps: OwnProps) => {
   const balanceChangeBox = (
     <Kb.Box2
       direction="horizontal"
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
       style={styles.amountContainer}
-      gap={Kb.Styles.isMobile ? 'tiny' : 'small'}
+      gap={isMobile ? 'tiny' : 'small'}
     >
       {!!balanceChange && (
         <Kb.Text type="BodyExtrabold" selectable={true} style={{color: balanceChangeColor}}>
@@ -208,10 +208,10 @@ const ConnectedAccountPayment = (ownProps: OwnProps) => {
           </Kb.Text>
         </Kb.Box2>
         {canceled && <Kb.Text type="BodySmall">CANCELED</Kb.Text>}
-        {!Kb.Styles.isMobile && balanceChangeBox}
+        {!isMobile && balanceChangeBox}
       </Kb.Box2>
       <MarkdownMemo memo={memo} style={styles.memo} />
-      {Kb.Styles.isMobile && balanceChangeBox}
+      {isMobile && balanceChangeBox}
     </>
   )
   return (
diff --git a/shared/chat/conversation/messages/attachment/audio.tsx b/shared/chat/conversation/messages/attachment/audio.tsx
index ab63cdda4d5a..c47ce49ec393 100644
--- a/shared/chat/conversation/messages/attachment/audio.tsx
+++ b/shared/chat/conversation/messages/attachment/audio.tsx
@@ -20,14 +20,14 @@ const AudioAttachment = ({message, ordinal}: {message: T.Chat.MessageAttachment;
         direction="horizontal"
         alignSelf="flex-start"
         alignItems="center"
-        gap={Kb.Styles.isMobile ? undefined : 'small'}
+        gap={isMobile ? undefined : 'small'}
         ref={toastTargetRef}
       >
         <AudioPlayer big={true} duration={message.audioDuration} url={url} visAmps={message.audioAmps} />
         <TransferIcon
           message={message}
           ordinal={ordinal}
-          style={Kb.Styles.isMobile ? styles.transferIcon : undefined}
+          style={isMobile ? styles.transferIcon : undefined}
         />
       </Kb.Box2>
       {showTitle ? <Title message={message} /> : null}
diff --git a/shared/chat/conversation/messages/attachment/file.tsx b/shared/chat/conversation/messages/attachment/file.tsx
index f594816d85c5..e59b95640a4c 100644
--- a/shared/chat/conversation/messages/attachment/file.tsx
+++ b/shared/chat/conversation/messages/attachment/file.tsx
@@ -62,7 +62,7 @@ function FileContainer(p: OwnProps) {
     if (!hasMessageID) {
       return
     }
-    if (C.isMobile) {
+    if (isMobile) {
       messageAttachmentNativeShare(ordinal, true)
     } else if (!downloadPath) {
       if (fileType === 'application/pdf') {
@@ -80,7 +80,7 @@ function FileContainer(p: OwnProps) {
     }
   }
 
-  const arrowColor = C.isMobile
+  const arrowColor = isMobile
     ? ''
     : downloadPath
       ? Kb.Styles.globalColors.green
@@ -92,7 +92,7 @@ function FileContainer(p: OwnProps) {
   const errorMsg = transferErrMsg || ''
   const fileName = _fileName
   const isSaltpackFile = !!fileName && isPathSaltpack(fileName)
-  const onShowInFinder = !C.isMobile && downloadPath ? _onShowInFinder : undefined
+  const onShowInFinder = !isMobile && downloadPath ? _onShowInFinder : undefined
   const showMessageMenu = hasMessageID ? p.showPopup : undefined
 
   const progressLabel = Chat.messageAttachmentTransferStateToProgressLabel(transferState)
@@ -104,7 +104,7 @@ function FileContainer(p: OwnProps) {
       : undefined
   const actionTitle = captialize(cryptoRoute?.replace('Tab', ''))
 
-  const styleOverride = Kb.Styles.isMobile
+  const styleOverride = isMobile
     ? ({paragraph: getEditStyle(isEditing)} as StyleOverride)
     : undefined
 
@@ -157,7 +157,7 @@ function FileContainer(p: OwnProps) {
             )}
           </Kb.Box2>
         </Kb.Box2>
-        {!Kb.Styles.isMobile && isSaltpackFile && cryptoRoute && (
+        {!isMobile && isSaltpackFile && cryptoRoute && (
           <Kb.Box2 direction="vertical" fullWidth={true} style={styles.saltpackOperationContainer}>
             <Kb.Button
               mode="Secondary"
diff --git a/shared/chat/conversation/messages/attachment/image/imageimpl.desktop.tsx b/shared/chat/conversation/messages/attachment/image/imageimpl.desktop.tsx
deleted file mode 100644
index c2afda0ba109..000000000000
--- a/shared/chat/conversation/messages/attachment/image/imageimpl.desktop.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type * as T from '@/constants/types'
-import {getAttachmentPreviewSize} from '../shared'
-
-// its important we use explicit height/width so we never CLS while loading
-const ImageImpl = ({message}: {message: T.Chat.MessageAttachment}) => {
-  const {previewURL, height, width} = getAttachmentPreviewSize(message, true)
-  return (
-    <img
-      loading="lazy"
-      draggable={false}
-      src={previewURL}
-      height={height}
-      width={width}
-      style={Kb.Styles.castStyleDesktop(styles.image)}
-    />
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      image: Kb.Styles.platformStyles({
-        isElectron: {
-          ...Kb.Styles.globalStyles.rounded,
-          maxHeight: 320,
-          maxWidth: 320,
-          objectFit: 'contain',
-        },
-      }),
-    }) as const
-)
-
-export default ImageImpl
diff --git a/shared/chat/conversation/messages/attachment/image/imageimpl.native.tsx b/shared/chat/conversation/messages/attachment/image/imageimpl.native.tsx
deleted file mode 100644
index 6a89e9fb0722..000000000000
--- a/shared/chat/conversation/messages/attachment/image/imageimpl.native.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type * as T from '@/constants/types'
-import {getAttachmentPreviewSize} from '../shared'
-
-const ImageImpl = ({message}: {message: T.Chat.MessageAttachment}) => {
-  const {previewURL, height, width} = getAttachmentPreviewSize(message, true)
-  return <Kb.Image src={previewURL} style={Kb.Styles.collapseStyles([styles.image, {height, width}])} />
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  image: {
-    backgroundColor: Kb.Styles.isIOS ? Kb.Styles.globalColors.black_05_on_white : undefined,
-    maxHeight: 320,
-    maxWidth: '100%',
-  },
-}))
-
-export default ImageImpl
diff --git a/shared/chat/conversation/messages/attachment/image/imageimpl.tsx b/shared/chat/conversation/messages/attachment/image/imageimpl.tsx
new file mode 100644
index 000000000000..bcd30f2c65cb
--- /dev/null
+++ b/shared/chat/conversation/messages/attachment/image/imageimpl.tsx
@@ -0,0 +1,41 @@
+import * as Kb from '@/common-adapters'
+import type * as T from '@/constants/types'
+import {getAttachmentPreviewSize} from '../shared'
+
+const ImageImpl = ({message}: {message: T.Chat.MessageAttachment}) => {
+  const {previewURL, height, width} = getAttachmentPreviewSize(message, true)
+  if (!isMobile) {
+    // explicit height/width so we never CLS while loading
+    return (
+      <img
+        loading="lazy"
+        draggable={false}
+        src={previewURL}
+        height={height}
+        width={width}
+        style={Kb.Styles.castStyleDesktop(styles.image)}
+      />
+    )
+  }
+  return <Kb.Image src={previewURL} style={Kb.Styles.collapseStyles([styles.image, {height, width}])} />
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  image: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.globalStyles.rounded,
+      maxHeight: 320,
+      maxWidth: 320,
+      objectFit: 'contain',
+    },
+    isMobile: {
+      maxHeight: 320,
+      maxWidth: '100%',
+    },
+    isIOS: {
+      backgroundColor: Kb.Styles.globalColors.black_05_on_white,
+    },
+  }),
+}))
+
+export default ImageImpl
diff --git a/shared/chat/conversation/messages/attachment/image/index.tsx b/shared/chat/conversation/messages/attachment/image/index.tsx
index 23ce242322d9..c372a8c0c6a4 100644
--- a/shared/chat/conversation/messages/attachment/image/index.tsx
+++ b/shared/chat/conversation/messages/attachment/image/index.tsx
@@ -38,7 +38,7 @@ function Image(p: Props) {
   const collapseIcon = useCollapseIcon(ordinal, isCollapsed, false)
 
   const filename =
-    Kb.Styles.isMobile || !fileName ? null : (
+    isMobile || !fileName ? null : (
       <Kb.Box2 direction="horizontal" alignSelf="flex-start" gap="xtiny">
         <Kb.Text type="BodySmall">{fileName}</Kb.Text>
         {collapseIcon}
@@ -53,7 +53,7 @@ function Image(p: Props) {
       <Kb.Box2
         direction="horizontal"
         alignSelf="flex-start"
-        gap={Kb.Styles.isMobile ? undefined : 'small'}
+        gap={isMobile ? undefined : 'small'}
         alignItems="center"
       >
         <Kb.Box2
@@ -79,7 +79,7 @@ function Image(p: Props) {
         <TransferIcon
           message={message}
           ordinal={ordinal}
-          style={Kb.Styles.isMobile ? styles.transferIcon : undefined}
+          style={isMobile ? styles.transferIcon : undefined}
         />
       </Kb.Box2>
     </>
@@ -98,7 +98,7 @@ const styles = Kb.Styles.styleSheetCreate(() => {
     contentContainer: {
       backgroundColor: Kb.Styles.globalColors.black_05_on_white,
       borderRadius: Kb.Styles.borderRadius,
-      maxWidth: Kb.Styles.isMobile ? '100%' : 330,
+      maxWidth: isMobile ? '100%' : 330,
       padding: 3,
     },
     imageContainer: {alignSelf: 'center'},
diff --git a/shared/chat/conversation/messages/attachment/shared.tsx b/shared/chat/conversation/messages/attachment/shared.tsx
index dd8fd4e62464..efc34f666651 100644
--- a/shared/chat/conversation/messages/attachment/shared.tsx
+++ b/shared/chat/conversation/messages/attachment/shared.tsx
@@ -14,7 +14,7 @@ type Props = {
 }
 
 // this is a function of how much space is taken up by the rest of the elements
-export const maxWidth = Kb.Styles.isMobile ? Math.min(356, Kb.Styles.dimensionWidth - 70) : 356
+export const maxWidth = isMobile ? Math.min(356, Kb.Styles.dimensionWidth - 70) : 356
 export const maxHeight = 320
 
 export const messageAttachmentHasProgress = (transferState: T.Chat.MessageAttachmentTransferState) => {
@@ -31,7 +31,7 @@ export const ShowToastAfterSaving = ({transferState, toastTargetRef}: Props) =>
       // was downloading and now not
       if (
         (lastTransferStateRef.current === 'mobileSaving' ||
-          (!C.isMobile && lastTransferStateRef.current === 'downloading')) &&
+          (!isMobile && lastTransferStateRef.current === 'downloading')) &&
         !transferState
       ) {
         setShowingToast(true)
@@ -89,12 +89,12 @@ export const TransferIcon = (p: {
   }
   const {attachmentDownload, messageAttachmentNativeSave, messageAttachmentNativeShare} =
     useConversationAttachmentActions()
-  const isMobileAudio = C.isMobile && message.attachmentType === 'audio'
+  const isMobileAudio = isMobile && message.attachmentType === 'audio'
   const onDownload = () => {
     if (!hasMessageID) {
       return
     }
-    if (C.isMobile) {
+    if (isMobile) {
       if (isMobileAudio) {
         messageAttachmentNativeShare(ordinal)
       } else {
@@ -128,7 +128,7 @@ export const TransferIcon = (p: {
           />
         )
       }
-      return Kb.Styles.isMobile ? null : (
+      return isMobile ? null : (
         <Kb.Icon
           className="hover-opacity-full"
           type="iconfont-finder"
@@ -160,8 +160,8 @@ export const TransferIcon = (p: {
           color={Kb.Styles.globalColors.blue}
           fontSize={20}
           onClick={onDownload}
-          style={Kb.Styles.isMobile ? mobileStyle : undefined}
-          padding={Kb.Styles.isMobile ? 'small' : undefined}
+          style={isMobile ? mobileStyle : undefined}
+          padding={isMobile ? 'small' : undefined}
         />
       ) : null
   }
@@ -223,7 +223,7 @@ export const getAttachmentPreviewSize = (
 export const Title = ({message}: {message: T.Chat.MessageAttachment}) => {
   const title = message.decoratedText?.stringValue() ?? message.title
 
-  const styleOverride = Kb.Styles.isMobile
+  const styleOverride = isMobile
     ? {paragraph: {backgroundColor: Kb.Styles.globalColors.black_05_on_white}}
     : undefined
 
@@ -288,7 +288,7 @@ const useCollapseIconDesktop = (ordinal: T.Chat.Ordinal, isCollapsed: boolean, i
 }
 const useCollapseIconMobile = (_ordinal: T.Chat.Ordinal, _isCollapsed: boolean, _isWhite: boolean) => null
 
-export const useCollapseIcon = C.isMobile ? useCollapseIconMobile : useCollapseIconDesktop
+export const useCollapseIcon = isMobile ? useCollapseIconMobile : useCollapseIconDesktop
 
 export const Collapsed = ({isCollapsed, ordinal}: {isCollapsed: boolean; ordinal: T.Chat.Ordinal}) => {
   const onCollapse = useCollapseAction(ordinal)
diff --git a/shared/chat/conversation/messages/attachment/video/index.tsx b/shared/chat/conversation/messages/attachment/video/index.tsx
index 4673045eb19b..4757b8b5bbc0 100644
--- a/shared/chat/conversation/messages/attachment/video/index.tsx
+++ b/shared/chat/conversation/messages/attachment/video/index.tsx
@@ -38,7 +38,7 @@ function Video(p: Props) {
   const collapseIcon = useCollapseIcon(ordinal, isCollapsed, false)
 
   const filename =
-    Kb.Styles.isMobile || !fileName ? null : (
+    isMobile || !fileName ? null : (
       <Kb.Box2 direction="horizontal" alignSelf="flex-start" gap="xtiny">
         <Kb.Text type="BodySmall">{fileName}</Kb.Text>
         {collapseIcon}
@@ -53,7 +53,7 @@ function Video(p: Props) {
       <Kb.Box2
         direction="horizontal"
         alignSelf="flex-start"
-        gap={Kb.Styles.isMobile ? undefined : 'small'}
+        gap={isMobile ? undefined : 'small'}
         alignItems="center"
         ref={toastTargetRef}
       >
@@ -78,7 +78,7 @@ function Video(p: Props) {
         <TransferIcon
           message={message}
           ordinal={ordinal}
-          style={Kb.Styles.isMobile ? styles.transferIcon : undefined}
+          style={isMobile ? styles.transferIcon : undefined}
         />
       </Kb.Box2>
     </>
@@ -102,12 +102,12 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       container: {
         alignSelf: 'center',
-        paddingRight: Kb.Styles.isMobile ? 0 : Kb.Styles.globalMargins.tiny,
+        paddingRight: isMobile ? 0 : Kb.Styles.globalMargins.tiny,
       },
       contentContainer: {
         backgroundColor: Kb.Styles.globalColors.black_05_on_white,
         borderRadius: Kb.Styles.borderRadius,
-        maxWidth: Kb.Styles.isMobile ? '100%' : 356 + 3 * 2,
+        maxWidth: isMobile ? '100%' : 356 + 3 * 2,
         padding: 3,
       },
       transferIcon: {left: -32, position: 'absolute'},
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/cards/hello-bot.tsx b/shared/chat/conversation/messages/cards/hello-bot.tsx
index a776dd79b8a7..5f99d22720b3 100644
--- a/shared/chat/conversation/messages/cards/hello-bot.tsx
+++ b/shared/chat/conversation/messages/cards/hello-bot.tsx
@@ -35,7 +35,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       header: {
-        maxWidth: Kb.Styles.isMobile ? 126 : undefined,
+        maxWidth: isMobile ? 126 : undefined,
       },
       image: Kb.Styles.platformStyles({
         common: {
diff --git a/shared/chat/conversation/messages/cards/make-team.tsx b/shared/chat/conversation/messages/cards/make-team.tsx
index 7cb91f3f5868..12cc468f7ee7 100644
--- a/shared/chat/conversation/messages/cards/make-team.tsx
+++ b/shared/chat/conversation/messages/cards/make-team.tsx
@@ -63,7 +63,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       header: {
-        maxWidth: Kb.Styles.isMobile ? 126 : undefined,
+        maxWidth: isMobile ? 126 : undefined,
       },
       icon: Kb.Styles.platformStyles({
         isElectron: {
@@ -75,7 +75,7 @@ const styles = Kb.Styles.styleSheetCreate(
         alignSelf: 'center',
         paddingRight: Kb.Styles.globalMargins.small,
       },
-      link: {color: Kb.Styles.isMobile ? Kb.Styles.globalColors.greenLight : undefined},
+      link: {color: isMobile ? Kb.Styles.globalColors.greenLight : undefined},
       textContainer: {padding: Kb.Styles.globalMargins.medium},
     }) as const
 )
diff --git a/shared/chat/conversation/messages/cards/new-chat.tsx b/shared/chat/conversation/messages/cards/new-chat.tsx
index 6a5649705217..f98960f3cdee 100644
--- a/shared/chat/conversation/messages/cards/new-chat.tsx
+++ b/shared/chat/conversation/messages/cards/new-chat.tsx
@@ -28,7 +28,7 @@ function NewCard(outerProps: Props) {
         text: 'Use this chat to store secure notes such as credit card numbers, passwords, or secret keys.',
       }
     : {
-        action: () => openUrl('https://book.keybase.io/docs/chat/crypto'),
+        action: () => { void openUrl('https://book.keybase.io/docs/chat/crypto') },
         icon: iconEncrypted,
         label: 'Read more',
         text: 'This conversation is end-to-end encrypted.',
@@ -102,7 +102,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       header: {
-        maxWidth: Kb.Styles.isMobile ? 126 : undefined,
+        maxWidth: isMobile ? 126 : undefined,
       },
       icon: Kb.Styles.platformStyles({
         isElectron: {
@@ -111,15 +111,15 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       image: {
-        alignSelf: Kb.Styles.isMobile ? 'center' : undefined,
-        marginTop: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : -Kb.Styles.globalMargins.xsmall,
+        alignSelf: isMobile ? 'center' : undefined,
+        marginTop: isMobile ? Kb.Styles.globalMargins.tiny : -Kb.Styles.globalMargins.xsmall,
         paddingRight: Kb.Styles.globalMargins.medium,
       },
       imageLower: {
-        marginLeft: Kb.Styles.isMobile ? -65 : undefined,
-        marginTop: Kb.Styles.isMobile ? -20 : 39,
+        marginLeft: isMobile ? -65 : undefined,
+        marginTop: isMobile ? -20 : 39,
       },
-      link: {color: Kb.Styles.isMobile ? Kb.Styles.globalColors.blueLighter : undefined},
+      link: {color: isMobile ? Kb.Styles.globalColors.blueLighter : undefined},
       textContainer: {padding: Kb.Styles.globalMargins.medium},
     }) as const
 )
diff --git a/shared/chat/conversation/messages/cards/team-journey/container.tsx b/shared/chat/conversation/messages/cards/team-journey/container.tsx
index b509dea21788..b1be2729fd1a 100644
--- a/shared/chat/conversation/messages/cards/team-journey/container.tsx
+++ b/shared/chat/conversation/messages/cards/team-journey/container.tsx
@@ -91,7 +91,7 @@ const TeamJourneyConnected = (ownProps: OwnProps) => {
       {
         const otherChannelsForPopular = otherChannelsBase
           .filter(({membershipType}) => joinableStatuses.has(membershipType))
-          .slice(0, C.isMobile ? 2 : 3)
+          .slice(0, isMobile ? 2 : 3)
           .map(info => info.channelname)
         actions = otherChannelsForPopular.map(chan => ({
           label: `#${chan}`,
@@ -221,7 +221,7 @@ const TeamJourneyHeader = (props: HeaderProps) => {
         </Kb.Text>
         <Kb.Text type="BodyTiny">• System message</Kb.Text>
       </Kb.Box2>
-      {!Kb.Styles.isMobile && !deactivateButtons && (
+      {!isMobile && !deactivateButtons && (
         <Kb.Icon type="iconfont-close" color={Kb.Styles.globalColors.black_20} onClick={onDismiss} fontSize={12} />
       )}
     </Kb.Box2>
@@ -283,7 +283,7 @@ const styles = Kb.Styles.styleSheetCreate(
         isElectron: {marginTop: -33},
       }),
       teamnameText: {color: Kb.Styles.globalColors.black},
-      text: {maxWidth: Kb.Styles.isMobile ? '70%' : 320},
+      text: {maxWidth: isMobile ? '70%' : 320},
     }) as const
 )
 
diff --git a/shared/chat/conversation/messages/message-popup/attachment.tsx b/shared/chat/conversation/messages/message-popup/attachment.tsx
index d59db9734a27..2116b4d178f3 100644
--- a/shared/chat/conversation/messages/message-popup/attachment.tsx
+++ b/shared/chat/conversation/messages/message-popup/attachment.tsx
@@ -70,17 +70,17 @@ const PopAttachLoaded = (ownProps: OwnProps & {
     clearModals()
     showConversationInfoPanel(conversationIDKey, true, 'attachments')
   }
-  const onDownload = !C.isMobile && !message.downloadPath ? actions.download : undefined
+  const onDownload = !isMobile && !message.downloadPath ? actions.download : undefined
   const onSaveAttachment =
-    C.isMobile && (attachmentType === 'image' || Chat.isImageViewable(message)) ? actions.save : undefined
-  const onShareAttachment = C.isMobile ? actions.share : undefined
+    isMobile && (attachmentType === 'image' || Chat.isImageViewable(message)) ? actions.save : undefined
+  const onShareAttachment = isMobile ? actions.share : undefined
 
   const _onShowInFinder = () => {
     if (downloadPath) {
       openLocalPathInSystemFileManagerDesktop(downloadPath)
     }
   }
-  const onShowInFinder = !C.isMobile && message.downloadPath ? _onShowInFinder : undefined
+  const onShowInFinder = !isMobile && message.downloadPath ? _onShowInFinder : undefined
 
   const {itemBot, itemReaction, itemCopyLink, itemReply, itemEdit, itemForward, itemPin, itemUnread} = i
   const {itemExplode, itemDelete, itemKick, itemProfile} = i
diff --git a/shared/chat/conversation/messages/message-popup/exploding-header.tsx b/shared/chat/conversation/messages/message-popup/exploding-header.tsx
index d14c28d6e823..18de6c44b644 100644
--- a/shared/chat/conversation/messages/message-popup/exploding-header.tsx
+++ b/shared/chat/conversation/messages/message-popup/exploding-header.tsx
@@ -115,7 +115,7 @@ const ExplodingPopupHeader = (props: Props) => {
         <Kb.Box2 direction="horizontal" gap="tiny" gapStart={true} gapEnd={true}>
           <Kb.Icon
             type="iconfont-timer"
-            fontSize={Kb.Styles.isMobile ? 20 : 16}
+            fontSize={isMobile ? 20 : 16}
             color={Kb.Styles.globalColors.white}
           />
           <Kb.Text style={{alignSelf: 'center', color: Kb.Styles.globalColors.white}} type="BodySemibold">
@@ -125,7 +125,7 @@ const ExplodingPopupHeader = (props: Props) => {
       )}
     </Kb.Box2>
   )
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2 direction="vertical" fullWidth={true} style={styles.popupContainer}>
       {banner}
       {info}
@@ -141,8 +141,8 @@ const ExplodingPopupHeader = (props: Props) => {
   )
 }
 
-const headerIconType = Kb.Styles.isMobile ? 'icon-fancy-bomb-mobile-226-96' : 'icon-fancy-bomb-desktop-150-72'
-const headerIconHeight = Kb.Styles.isMobile ? 48 : 48
+const headerIconType = isMobile ? 'icon-fancy-bomb-mobile-226-96' : 'icon-fancy-bomb-desktop-150-72'
+const headerIconHeight = isMobile ? 48 : 48
 const oneMinuteInS = 60
 
 const styles = Kb.Styles.styleSheetCreate(
diff --git a/shared/chat/conversation/messages/message-popup/header.tsx b/shared/chat/conversation/messages/message-popup/header.tsx
index 33c3a8d821e4..d3ccd56772db 100644
--- a/shared/chat/conversation/messages/message-popup/header.tsx
+++ b/shared/chat/conversation/messages/message-popup/header.tsx
@@ -3,7 +3,7 @@ import {formatTimeForPopup, formatTimeForRevoked} from '@/util/timestamp'
 import type * as T from '@/constants/types'
 import {navToProfile} from '@/constants/router'
 
-const iconNameForDeviceType = Kb.Styles.isMobile
+const iconNameForDeviceType = isMobile
   ? (deviceType: string, isRevoked: boolean, isLocation: boolean): Kb.IconType => {
       switch (deviceType) {
         case 'mobile':
@@ -33,7 +33,7 @@ const iconNameForDeviceType = Kb.Styles.isMobile
       }
     }
 
-const headerIconHeight = Kb.Styles.isMobile ? 96 : 48
+const headerIconHeight = isMobile ? 96 : 48
 
 type Props = {
   author: string
@@ -60,8 +60,8 @@ const MessagePopupHeader = (props: Props) => {
 
   return (
     <Kb.Box2 direction="vertical" alignItems="center" style={styles.headerContainer}>
-      {Kb.Styles.isMobile ? null : <Kb.ImageIcon type={iconName} style={styles.headerIcon} />}
-      {Kb.Styles.isMobile ? null : (
+      {isMobile ? null : <Kb.ImageIcon type={iconName} style={styles.headerIcon} />}
+      {isMobile ? null : (
         <Kb.Box2 direction="horizontal">
           <Kb.Text
             type="BodySmall"
@@ -121,7 +121,7 @@ const MessagePopupHeader = (props: Props) => {
       )}
       <Kb.Divider
         style={{
-          marginBottom: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : 0,
+          marginBottom: isMobile ? Kb.Styles.globalMargins.tiny : 0,
           marginTop: Kb.Styles.globalMargins.tiny,
           width: '100%',
         }}
diff --git a/shared/chat/conversation/messages/message-popup/hooks.tsx b/shared/chat/conversation/messages/message-popup/hooks.tsx
index ee44cd2fe70a..bbc5aacf3024 100644
--- a/shared/chat/conversation/messages/message-popup/hooks.tsx
+++ b/shared/chat/conversation/messages/message-popup/hooks.tsx
@@ -79,7 +79,7 @@ const useItemsForMessage = (p: {
       },
     })
   }
-  const onAddReaction = C.isMobile ? _onAddReaction : undefined
+  const onAddReaction = isMobile ? _onAddReaction : undefined
 
   const {members: teamMembers} = useChatTeamMembers(teamID)
   const {yourOperations} = useChatTeam(teamID, teamname)
@@ -253,7 +253,7 @@ const useItemsForMessage = (p: {
         {
           icon: 'iconfont-person',
           onClick: onViewProfile,
-          subTitle: C.isMobile ? profileSubtitle : undefined,
+          subTitle: isMobile ? profileSubtitle : undefined,
           title: `View ${author}'s profile`,
         },
       ] as const)
@@ -305,10 +305,10 @@ export const useModeration = (
   )
 
   const onUserBlock = canModerate ? () => openBlockingModal() : undefined
-  const onUserFilter = C.isIOS && canModerate ? () => openBlockingModal({filterUserByDefault: true}) : undefined
-  const onUserReport = C.isIOS && canModerate ? () => openBlockingModal({reportsUserByDefault: true}) : undefined
+  const onUserFilter = isIOS && canModerate ? () => openBlockingModal({filterUserByDefault: true}) : undefined
+  const onUserReport = isIOS && canModerate ? () => openBlockingModal({reportsUserByDefault: true}) : undefined
   const onUserFlag =
-    C.isIOS && canModerate
+    isIOS && canModerate
       ? () => openBlockingModal({flagUserByDefault: true, reportsUserByDefault: true})
       : undefined
 
diff --git a/shared/chat/conversation/messages/placeholder/wrapper.tsx b/shared/chat/conversation/messages/placeholder/wrapper.tsx
index 27a3010c2d49..627084e7e7ee 100644
--- a/shared/chat/conversation/messages/placeholder/wrapper.tsx
+++ b/shared/chat/conversation/messages/placeholder/wrapper.tsx
@@ -2,8 +2,8 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {WrapperMessage, useWrapperMessage, type Props} from '../wrapper/wrapper'
 
-const baseWidth = Kb.Styles.isMobile ? 100 : 150
-const mult = Kb.Styles.isMobile ? 5 : 10
+const baseWidth = isMobile ? 100 : 150
+const mult = isMobile ? 5 : 10
 
 function WrapperPlaceholder(p: Props) {
   const {ordinal, isCenteredHighlight} = p
@@ -26,7 +26,7 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       container: {
         alignItems: 'center',
-        height: Kb.Styles.isMobile ? 22 : 17, // to match a line of text
+        height: isMobile ? 22 : 17, // to match a line of text
         width: '100%',
       },
     }) as const
diff --git a/shared/chat/conversation/messages/react-button.tsx b/shared/chat/conversation/messages/react-button.tsx
index 8be3f6160b5e..a7afc81e8663 100644
--- a/shared/chat/conversation/messages/react-button.tsx
+++ b/shared/chat/conversation/messages/react-button.tsx
@@ -144,7 +144,7 @@ export function NewReactionButton(p: NewReactionButtonProps) {
   )
 }
 
-const markdownOverride: StyleOverride = Kb.Styles.isMobile
+const markdownOverride: StyleOverride = isMobile
   ? {
       customEmoji: {
         height: 20,
@@ -155,7 +155,7 @@ const markdownOverride: StyleOverride = Kb.Styles.isMobile
         fontSize: 15,
       },
       emojiSize: {size: 24},
-      paragraph: C.isAndroid ? ({height: 28, textAlignVertical: 'center'} as StyleOverride['paragraph']) : {},
+      paragraph: isAndroid ? ({height: 28, textAlignVertical: 'center'} as StyleOverride['paragraph']) : {},
     }
   : {
       customEmoji: {height: 18, width: 18},
@@ -182,7 +182,7 @@ const styles = Kb.Styles.styleSheetCreate(
           alignItems: 'center',
           backgroundColor: Kb.Styles.globalColors.white,
           borderWidth: 1,
-          height: Kb.Styles.isMobile ? 30 : 26,
+          height: isMobile ? 30 : 26,
           justifyContent: 'center',
           minWidth: 40,
           paddingLeft: 6,
diff --git a/shared/chat/conversation/messages/reaction-tooltip.tsx b/shared/chat/conversation/messages/reaction-tooltip.tsx
index ede4cb292e36..a395190725b7 100644
--- a/shared/chat/conversation/messages/reaction-tooltip.tsx
+++ b/shared/chat/conversation/messages/reaction-tooltip.tsx
@@ -69,7 +69,7 @@ const ReactionTooltip = (p: OwnProps) => {
     .filter((r): r is {earliestTimestamp: number; emoji: string; reaction: T.Chat.ReactionDesc; users: Array<ListItem>} => !!r.reaction)
     .sort((a, b) => a.earliestTimestamp - b.earliestTimestamp)
     .map(({emoji, reaction, users}) => ({emoji, reaction, users}))
-  if (!C.isMobile && emoji) {
+  if (!isMobile && emoji) {
     reactionsToShow = reactionsToShow.filter(r => r.emoji === emoji)
   }
   const insets = Kb.useSafeAreaInsets()
@@ -123,7 +123,7 @@ const ReactionTooltip = (p: OwnProps) => {
           gap="tiny"
           style={Kb.Styles.collapseStyles([styles.listContainer, {paddingBottom: insets.bottom}])}
         >
-          {Kb.Styles.isMobile && (
+          {isMobile && (
             <Kb.Box2 direction="horizontal">
               <Kb.Text type="BodySemiboldLink" onClick={onHidden} style={styles.closeButton}>
                 Close
@@ -140,7 +140,7 @@ const ReactionTooltip = (p: OwnProps) => {
             renderItem={renderItem}
             renderSectionHeader={renderSectionHeader}
           />
-          {Kb.Styles.isMobile && (
+          {isMobile && (
             <Kb.ButtonBar style={styles.addReactionButtonBar}>
               <Kb.Button
                 disabled={!hasMessageID}
diff --git a/shared/chat/conversation/messages/reactions-rows.tsx b/shared/chat/conversation/messages/reactions-rows.tsx
index d4f64c3014bf..da5df1ae7c3f 100644
--- a/shared/chat/conversation/messages/reactions-rows.tsx
+++ b/shared/chat/conversation/messages/reactions-rows.tsx
@@ -33,7 +33,7 @@ function ReactionsRowContainer(p: OwnProps) {
           <RowItem key={emoji || String(idx)} emoji={emoji} onReact={onReact} reaction={reaction} />
         ) : null
       })}
-      {Kb.Styles.isMobile ? (
+      {isMobile ? (
         <NewReactionButton style={styles.button} />
       ) : (
         <EmojiRow
@@ -65,7 +65,7 @@ function RowItem(p: IProps) {
   const [showingPopup, setShowingPopup] = React.useState(false)
 
   const showPopup = () => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       Keyboard.dismiss()
     }
     setShowingPopup(true)
@@ -89,7 +89,7 @@ function RowItem(p: IProps) {
       <ReactButton
         className={btnClassName}
         emoji={emoji}
-        onLongPress={Kb.Styles.isMobile ? showPopup : undefined}
+        onLongPress={isMobile ? showPopup : undefined}
         reaction={reaction}
         style={styles.button}
         toggleReaction={onReact}
diff --git a/shared/chat/conversation/messages/reset-user.tsx b/shared/chat/conversation/messages/reset-user.tsx
index 43d0f41b16dd..848638149f8a 100644
--- a/shared/chat/conversation/messages/reset-user.tsx
+++ b/shared/chat/conversation/messages/reset-user.tsx
@@ -35,7 +35,7 @@ const ResetUser = () => {
 
   return (
     <Kb.Box2 direction="vertical" style={styles.container}>
-      <Kb.ImageIcon type={Kb.Styles.isMobile ? 'icon-skull-64' : 'icon-skull-48'} style={styles.skullIcon} />
+      <Kb.ImageIcon type={isMobile ? 'icon-skull-64' : 'icon-skull-48'} style={styles.skullIcon} />
       <Kb.Box2 direction="vertical" style={styles.textContainer}>
         <Kb.Text center={true} type="BodySemibold" negative={true}>
           <Kb.Text type="BodySemiboldLink" negative={true} onClick={viewProfile}>
diff --git a/shared/chat/conversation/messages/separator.tsx b/shared/chat/conversation/messages/separator.tsx
index a6774c84d616..96b45b21422c 100644
--- a/shared/chat/conversation/messages/separator.tsx
+++ b/shared/chat/conversation/messages/separator.tsx
@@ -14,7 +14,7 @@ const noOrdinal = T.Chat.numberToOrdinal(0)
 
 // Single merged selector replacing useStateFast + useState
 const useSeparatorData = (trailingItem: T.Chat.Ordinal, leadingItem: T.Chat.Ordinal) => {
-  const ordinal = Kb.Styles.isMobile ? leadingItem : trailingItem
+  const ordinal = isMobile ? leadingItem : trailingItem
   const orangeOrdinal = React.useContext(OrangeLineContext)
   const you = useCurrentUserState(s => s.username)
 
@@ -39,7 +39,7 @@ const useSeparatorData = (trailingItem: T.Chat.Ordinal, leadingItem: T.Chat.Ordi
         (orangeOrdinal === ordinal || (orangeOrdinal < ordinal && orangeOrdinal > previous))
       const isJoinLeave = m.type === 'systemJoined'
       const orangeTime =
-        !C.isMobile && !showUsername && !tooSoon && !isJoinLeave
+        !isMobile && !showUsername && !tooSoon && !isJoinLeave
           ? formatTimeForConversationList(m.timestamp)
           : ''
 
diff --git a/shared/chat/conversation/messages/special-top-message.tsx b/shared/chat/conversation/messages/special-top-message.tsx
index 2f624b9b6dde..0a5d086f375e 100644
--- a/shared/chat/conversation/messages/special-top-message.tsx
+++ b/shared/chat/conversation/messages/special-top-message.tsx
@@ -27,7 +27,7 @@ const ErrorMessage = () => {
   const _onBack = () => {
     navigateToInbox()
   }
-  const onBack = Kb.Styles.isMobile ? _onBack : undefined
+  const onBack = isMobile ? _onBack : undefined
 
   let createConversationDisallowedUsers: ReadonlyArray<string> = []
   let createConversationErrorDescription = ''
@@ -74,8 +74,8 @@ const ErrorMessage = () => {
           {createConversationDisallowedUsers.map((username, idx) => (
             <Kb.ListItem
               key={username}
-              type={Kb.Styles.isMobile ? 'Large' : 'Small'}
-              icon={<Kb.Avatar size={Kb.Styles.isMobile ? 48 : 32} username={username} />}
+              type={isMobile ? 'Large' : 'Small'}
+              icon={<Kb.Avatar size={isMobile ? 48 : 32} username={username} />}
               firstItem={idx === 0}
               body={
                 <Kb.Box2 direction="vertical" fullWidth={true}>
@@ -90,7 +90,7 @@ const ErrorMessage = () => {
         {createConversationErrorDescription}
       </Kb.Text>
       <Kb.ButtonBar
-        direction={Kb.Styles.isMobile ? 'column' : 'row'}
+        direction={isMobile ? 'column' : 'row'}
         fullWidth={true}
         style={styles.buttonBar}
       >
@@ -178,7 +178,7 @@ function SpecialTopMessage() {
           <Kb.Text type="BodySmallSemibold">Digging ancient messages...</Kb.Text>
         </Kb.Box2>
       )}
-      {!Kb.Styles.isMobile || usingFlashList ? null : (
+      {!isMobile || usingFlashList ? null : (
         // special case here with the sep. The flatlist and flashlist invert the leading-trailing, see useStateFast
         <Separator trailingItem={T.Chat.numberToOrdinal(0)} leadingItem={firstOrdinal} />
       )}
diff --git a/shared/chat/conversation/messages/system-git-push/container.tsx b/shared/chat/conversation/messages/system-git-push/container.tsx
index 32874579e745..68639a5fbcb0 100644
--- a/shared/chat/conversation/messages/system-git-push/container.tsx
+++ b/shared/chat/conversation/messages/system-git-push/container.tsx
@@ -186,7 +186,7 @@ const styles = Kb.Styles.styleSheetCreate(
       marker: {
         flexShrink: 0,
         marginRight: Kb.Styles.globalMargins.xtiny,
-        ...(Kb.Styles.isMobile ? {marginTop: -3} : null),
+        ...(isMobile ? {marginTop: -3} : null),
         minWidth: 0,
       },
       repoText: {color: Kb.Styles.globalColors.black_50},
diff --git a/shared/chat/conversation/messages/system-joined/container.tsx b/shared/chat/conversation/messages/system-joined/container.tsx
index ad3d9db77fb7..1986d5ea8400 100644
--- a/shared/chat/conversation/messages/system-joined/container.tsx
+++ b/shared/chat/conversation/messages/system-joined/container.tsx
@@ -33,7 +33,7 @@ const MultiUserJoinedNotice = (p: {
 }) => {
   const {who, join, isBigTeam, channelname, teamname, timestamp} = p
 
-  const shorten = Kb.Styles.isMobile && who.length > 1
+  const shorten = isMobile && who.length > 1
   const joinStr = ` ${join ? 'joined' : 'left'}${shorten ? '' : isBigTeam ? ` #${channelname}` : ` ${teamname}`}`
 
   const ts = timestamp ? (
diff --git a/shared/chat/conversation/messages/system-new-channel/container.tsx b/shared/chat/conversation/messages/system-new-channel/container.tsx
index d3f8ecd2c2f1..e3c39edf65ed 100644
--- a/shared/chat/conversation/messages/system-new-channel/container.tsx
+++ b/shared/chat/conversation/messages/system-new-channel/container.tsx
@@ -13,10 +13,10 @@ function SystemNewChannelContainer(p: OwnProps) {
   const onManageChannels = () => navigateAppend({name: 'teamAddToChannels', params: {teamID}})
 
   const descStyleOverride = {
-    link: {fontSize: Kb.Styles.isMobile ? 15 : 13, fontWeight: '600'},
+    link: {fontSize: isMobile ? 15 : 13, fontWeight: '600'},
     paragraph: {
-      color: Kb.Styles.isMobile ? Kb.Styles.globalColors.black_50 : Kb.Styles.globalColors.black_50OrWhite_40,
-      fontSize: Kb.Styles.isMobile ? 15 : 13,
+      color: isMobile ? Kb.Styles.globalColors.black_50 : Kb.Styles.globalColors.black_50OrWhite_40,
+      fontSize: isMobile ? 15 : 13,
     },
   } as const
   return (
diff --git a/shared/chat/conversation/messages/text/coinflip/index.tsx b/shared/chat/conversation/messages/text/coinflip/index.tsx
index a0b12b4fd199..81ab69be18b0 100644
--- a/shared/chat/conversation/messages/text/coinflip/index.tsx
+++ b/shared/chat/conversation/messages/text/coinflip/index.tsx
@@ -51,7 +51,7 @@ function CoinFlipContainer() {
 
   const statusText = showParticipants ? (
     <Kb.Box2 direction="vertical" onMouseOver={showPopup} onMouseLeave={hidePopup} ref={popupAnchor}>
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Text selectable={true} type="BodySmall">
           Secured by{' '}
         </Kb.Text>
@@ -65,7 +65,7 @@ function CoinFlipContainer() {
     <Kb.Box2 direction="vertical">
       <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny">
         <Kb.Text selectable={true} type="BodySmallSemibold">
-          {!Kb.Styles.isMobile && 'Collecting '}commitments: {numParticipants}
+          {!isMobile && 'Collecting '}commitments: {numParticipants}
         </Kb.Text>
         {phase === T.RPCChat.UICoinFlipPhase.reveals && (
           <Kb.Icon type="iconfont-check" color={Kb.Styles.globalColors.green} sizeType="Small" />
@@ -74,7 +74,7 @@ function CoinFlipContainer() {
       {phase === T.RPCChat.UICoinFlipPhase.reveals && (
         <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny">
           <Kb.Text selectable={true} type="BodySmallSemibold">
-            {!Kb.Styles.isMobile && 'Collecting '}secrets: {revealSummary}
+            {!isMobile && 'Collecting '}secrets: {revealSummary}
           </Kb.Text>
         </Kb.Box2>
       )}
diff --git a/shared/chat/conversation/messages/text/coinflip/results.tsx b/shared/chat/conversation/messages/text/coinflip/results.tsx
index 654a2f8c5c52..e9b10382504d 100644
--- a/shared/chat/conversation/messages/text/coinflip/results.tsx
+++ b/shared/chat/conversation/messages/text/coinflip/results.tsx
@@ -152,7 +152,7 @@ const Card = (props: CardType) => (
     <Kb.Box2 direction="horizontal">
       <Kb.Text
         selectable={true}
-        type={Kb.Styles.isMobile ? 'BodySmall' : 'Body'}
+        type={isMobile ? 'BodySmall' : 'Body'}
         style={{color: suits[cards[props.card].suit].color}}
       >
         {cards[props.card].value}
@@ -160,7 +160,7 @@ const Card = (props: CardType) => (
     </Kb.Box2>
     <Kb.Box2 direction="horizontal">
       <Kb.Icon
-        fontSize={Kb.Styles.isMobile ? 10 : 12}
+        fontSize={isMobile ? 10 : 12}
         type={suits[cards[props.card].suit].icon}
         color={suits[cards[props.card].suit].color}
         style={styles.cardSuit}
@@ -301,9 +301,9 @@ const CoinFlipResultShuffleItem = (props: {index: number; item: string}) => (
 const paragraphOverrides = {
   paragraph: {
     // These are Header's styles.
-    fontSize: Kb.Styles.isMobile ? 20 : 18,
+    fontSize: isMobile ? 20 : 18,
     fontWeight: '700',
-    lineHeight: Kb.Styles.isMobile ? 24 : undefined,
+    lineHeight: isMobile ? 24 : undefined,
   } as const,
 }
 
diff --git a/shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx b/shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx
index 37f3c0fb1111..c1f36ffd0667 100644
--- a/shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx
@@ -9,7 +9,7 @@ export type Props = {
   onNever: () => void
 }
 
-const promptIcon = Kb.Styles.isMobile
+const promptIcon = isMobile
   ? 'icon-fancy-unfurl-preview-mobile-128-128'
   : 'icon-fancy-unfurl-preview-desktop-96-96'
 
@@ -17,7 +17,7 @@ const UnfurlPrompt = (p: Props) => {
   const {onAlways, onAccept, onOnetime, domain, onNotnow, onNever} = p
   return (
     <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true}>
-      {!Kb.Styles.isMobile && <Kb.ImageIcon type={promptIcon} style={styles.icon} />}
+      {!isMobile && <Kb.ImageIcon type={promptIcon} style={styles.icon} />}
       <Kb.Box2 direction="vertical" style={styles.choiceContainer} gap="xtiny">
         <Kb.Box2 direction="vertical" fullWidth={true}>
           <Kb.Text type="BodySemibold">Would you like to post a preview?</Kb.Text>
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx
index 3c7850a47e78..864857d59d1f 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx
@@ -26,7 +26,7 @@ function UnfurlGeneric(p: {
   const {description, publishTime, favicon, media, siteName, title, url} = generic
   const {height, width, isVideo, url: mediaUrl} = media || {height: 0, isVideo: false, url: '', width: 0}
   const showImageOnSide =
-    !Kb.Styles.isMobile && height >= width && !isVideo && (title.length > 0 || !!description)
+    !isMobile && height >= width && !isVideo && (title.length > 0 || !!description)
   const imageLocation = isCollapsed ? 'collapsed' : showImageOnSide ? 'side' : width > 0 && height > 0 ? 'bottom' : 'none'
 
   const publisher = (
@@ -79,7 +79,7 @@ function UnfurlGeneric(p: {
           linkURL={url}
           height={height}
           width={width}
-          widthPadding={Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : undefined}
+          widthPadding={isMobile ? Kb.Styles.globalMargins.tiny : undefined}
           style={styles.bottomImage}
           isVideo={isVideo}
           autoplayVideo={false}
@@ -96,7 +96,7 @@ function UnfurlGeneric(p: {
 
   return (
     <Kb.Box2 style={styles.container} gap="tiny" direction="horizontal">
-      {!Kb.Styles.isMobile && <Kb.Box2 direction="horizontal" style={styles.quoteContainer} />}
+      {!isMobile && <Kb.Box2 direction="horizontal" style={styles.quoteContainer} />}
       <Kb.Box2 style={styles.innerContainer} gap="xxtiny" direction="vertical" fullWidth={true}>
         {publisher}
         <Kb.Text type="BodyPrimaryLink" style={styles.url} {...titleUrlProps}>
diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/giphy.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/giphy.tsx
index 05d35522cb29..21a5cd12f784 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/giphy.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/giphy.tsx
@@ -26,7 +26,7 @@ function UnfurlGiphy(p: {
 
   return (
     <Kb.Box2 style={styles.container} gap="tiny" direction="horizontal">
-      {!Kb.Styles.isMobile && <Kb.Box2 direction="horizontal" style={styles.quoteContainer} />}
+      {!isMobile && <Kb.Box2 direction="horizontal" style={styles.quoteContainer} />}
       <Kb.Box2 style={styles.innerContainer} gap="xtiny" direction="vertical">
         <Kb.Box2 style={styles.siteNameContainer} gap="tiny" fullWidth={true} direction="horizontal" justifyContent="space-between">
           <Kb.Box2 direction="horizontal" gap="tiny">
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/messages/text/unfurl/unfurl-list/map-popup.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/map-popup.tsx
index 6f3930859b28..500528d75cef 100644
--- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/map-popup.tsx
+++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/map-popup.tsx
@@ -28,7 +28,7 @@ const UnfurlMapPopupInner = (props: Props) => {
   }
   const onViewURL = () => {
     onClose()
-    openURL(url)
+    void openURL(url)
   }
   const onStopSharing = () => {
     onClose()
@@ -37,8 +37,8 @@ const UnfurlMapPopupInner = (props: Props) => {
     }
   }
 
-  const width = Kb.Styles.isMobile ? Math.ceil(Kb.Styles.dimensionWidth) : 300
-  const height = Kb.Styles.isMobile ? Math.ceil(Kb.Styles.dimensionHeight) : 300
+  const width = isMobile ? Math.ceil(Kb.Styles.dimensionWidth) : 300
+  const height = isMobile ? Math.ceil(Kb.Styles.dimensionHeight) : 300
   const mapSrc = `http://${httpSrv.address}/map?lat=${coord.lat}&lon=${coord.lon}&width=${width}&height=${height}&token=${httpSrv.token}&username=${author}`
   return (
     <>
diff --git a/shared/chat/conversation/messages/text/wrapper.tsx b/shared/chat/conversation/messages/text/wrapper.tsx
index 15cabd7d63fb..7b80ffcd25db 100644
--- a/shared/chat/conversation/messages/text/wrapper.tsx
+++ b/shared/chat/conversation/messages/text/wrapper.tsx
@@ -29,7 +29,7 @@ const getStyle = (
 
 function MessageMarkdown({style, text}: {style: Kb.Styles.StylesCrossPlatform; text: string}) {
   const ordinal = useOrdinal()
-  const styleOverride = Kb.Styles.isMobile ? {paragraph: style} : undefined
+  const styleOverride = isMobile ? {paragraph: style} : undefined
 
   return (
     <Kb.Markdown
diff --git a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx
deleted file mode 100644
index 4a5c5616de83..000000000000
--- a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.desktop.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-import {useColorScheme} from 'react-native'
-
-export const animationDuration = 2000
-
-const ExplodingHeightRetainer = (p: Props) => {
-  const {retainHeight, explodedBy, style, children, messageKey} = p
-  const [animationState, setAnimationState] = React.useState(() => ({
-    animationKey: undefined as string | undefined,
-    doneKey: retainHeight ? messageKey : undefined,
-    retainHeight,
-  }))
-  const [height, setHeight] = React.useState(17)
-
-  let currentAnimationState = animationState
-  if (animationState.retainHeight !== retainHeight) {
-    currentAnimationState = {
-      animationKey: retainHeight ? messageKey : undefined,
-      doneKey: retainHeight ? undefined : animationState.doneKey,
-      retainHeight,
-    }
-    setAnimationState(currentAnimationState)
-  }
-  const animating =
-    retainHeight &&
-    currentAnimationState.animationKey === messageKey &&
-    currentAnimationState.doneKey !== messageKey
-
-  React.useEffect(() => {
-    if (!animating) {
-      return undefined
-    }
-    const timerID = setTimeout(() => {
-      setAnimationState(state =>
-        state.animationKey === messageKey ? {...state, doneKey: messageKey} : state
-      )
-    }, animationDuration)
-    return () => {
-      clearTimeout(timerID)
-    }
-  }, [animating, messageKey])
-
-  const setBoxRef = React.useCallback((ref: Kb.MeasureRef | null) => {
-    const measuredHeight = ref?.getBoundingClientRect().height
-    if (measuredHeight) {
-      setHeight(lastHeight => (lastHeight === measuredHeight ? lastHeight : measuredHeight))
-    }
-  }, [])
-
-  return (
-    <Kb.Box2
-      direction="vertical"
-      style={Kb.Styles.collapseStyles([
-        styles.container,
-        style,
-        // paddingRight is to compensate for the message menu
-        // to make sure we don't rewrap text when showing the animation
-        retainHeight && {
-          height,
-          paddingRight: 28,
-          position: 'relative',
-        },
-      ])}
-      ref={setBoxRef}
-    >
-      {retainHeight ? null : children}
-      <Ashes doneExploding={!animating} exploded={retainHeight} explodedBy={explodedBy} height={height} />
-    </Kb.Box2>
-  )
-}
-
-const Ashes = (props: {doneExploding: boolean; exploded: boolean; explodedBy?: string; height: number}) => {
-  const {doneExploding, explodedBy, exploded, height} = props
-  let explodedTag: React.ReactNode = null
-  if (doneExploding) {
-    explodedTag = explodedBy ? (
-      <Kb.Text type="BodyTiny" style={styles.exploded}>
-        <Kb.Text type="BodyTiny" virtualText={true}>
-          {'EXPLODED BY '}
-        </Kb.Text>
-        <Kb.ConnectedUsernames
-          type="BodySmallBold"
-          onUsernameClicked="profile"
-          usernames={explodedBy}
-          inline={true}
-          colorFollowing={true}
-          colorYou={true}
-          underline={true}
-          virtualText={true}
-        />
-      </Kb.Text>
-    ) : (
-      <Kb.Text type="BodyTiny" style={styles.exploded} virtualText={true}>
-        EXPLODED
-      </Kb.Text>
-    )
-  }
-
-  return (
-    <div
-      className={Kb.Styles.classNames('ashbox', 'ashes-bg', {'full-width': exploded})}
-      style={Kb.Styles.castStyleDesktop(Kb.Styles.collapseStyles([styles.ashBox]))}
-    >
-      {exploded && explodedTag}
-      <FlameFront height={height} stop={doneExploding} />
-    </div>
-  )
-}
-
-function FlameFront(props: {height: number; stop: boolean}) {
-  const isDarkMode = useColorScheme() === 'dark'
-  if (props.stop) {
-    return null
-  }
-  const numBoxes = Math.max(Math.ceil(props.height / 17) - 1, 1)
-  const children: Array<React.ReactNode> = []
-  for (let i = 0; i < numBoxes; i++) {
-    children.push(
-      <Kb.Box2 direction="vertical" key={String(i)} style={styles.flame}>
-        <Kb.Animation animationType={isDarkMode ? 'darkExploding' : 'exploding'} width={64} height={64} />
-      </Kb.Box2>
-    )
-  }
-  return (
-    <Kb.Box2 direction="vertical" className="flame-container" style={styles.flameContainer}>
-      {children}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      ashBox: Kb.Styles.platformStyles({
-        isElectron: {
-          backgroundColor: Kb.Styles.globalColors.white, // exploded messages don't have hover effects and we need to cover the message
-          backgroundRepeat: 'repeat',
-          backgroundSize: '400px 68px',
-          bottom: 0,
-          left: 0,
-          position: 'absolute',
-          top: 0,
-        },
-      }),
-      container: {flex: 1},
-      exploded: Kb.Styles.platformStyles({
-        isElectron: {
-          backgroundColor: Kb.Styles.globalColors.white,
-          bottom: 0,
-          color: Kb.Styles.globalColors.black_20_on_white,
-          padding: 2,
-          paddingLeft: Kb.Styles.globalMargins.tiny,
-          paddingTop: 0,
-          position: 'absolute',
-          right: 0,
-          whiteSpace: 'nowrap',
-        },
-      }),
-      flame: {
-        height: 17,
-      },
-      flameContainer: {
-        position: 'absolute',
-        right: -32,
-        top: -22,
-        width: 64,
-      },
-    }) as const
-)
-
-export default ExplodingHeightRetainer
diff --git a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.tsx
similarity index 54%
rename from shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx
rename to shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.tsx
index 84677ee57f53..6e82afd3a154 100644
--- a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx
+++ b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.tsx
@@ -2,21 +2,156 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
-// ios must animated plain colors not the dynamic ones
 import colors, {darkColors} from '@/styles/colors'
 import type {Props} from './index.shared'
 import {useColorScheme} from 'react-native'
 
-// If this image changes, some hard coded dimensions
-// in this file also need to change.
+export const animationDuration = isMobile ? 1500 : 2000
+
+// Mobile: static ash tile images
 const explodedIllustrationURL =
   require('../../../../../images/icons/pattern-ashes-mobile-400-80.png') as number
 const explodedIllustrationDarkURL =
   require('../../../../../images/icons/dark-pattern-ashes-mobile-400-80.png') as number
 
-export const animationDuration = 1500
+// Desktop implementation
+const DesktopExplodingHeightRetainer = (p: Props) => {
+  const {retainHeight, explodedBy, style, children, messageKey} = p
+  const [animationState, setAnimationState] = React.useState(() => ({
+    animationKey: undefined as string | undefined,
+    doneKey: retainHeight ? messageKey : undefined,
+    retainHeight,
+  }))
+  const [height, setHeight] = React.useState(17)
 
-const ExplodingHeightRetainer = (p: Props) => {
+  let currentAnimationState = animationState
+  if (animationState.retainHeight !== retainHeight) {
+    currentAnimationState = {
+      animationKey: retainHeight ? messageKey : undefined,
+      doneKey: retainHeight ? undefined : animationState.doneKey,
+      retainHeight,
+    }
+    setAnimationState(currentAnimationState)
+  }
+  const animating =
+    retainHeight &&
+    currentAnimationState.animationKey === messageKey &&
+    currentAnimationState.doneKey !== messageKey
+
+  React.useEffect(() => {
+    if (!animating) {
+      return undefined
+    }
+    const timerID = setTimeout(() => {
+      setAnimationState(state =>
+        state.animationKey === messageKey ? {...state, doneKey: messageKey} : state
+      )
+    }, animationDuration)
+    return () => {
+      clearTimeout(timerID)
+    }
+  }, [animating, messageKey])
+
+  const setBoxRef = React.useCallback((ref: Kb.MeasureRef | null) => {
+    const measuredHeight = ref?.getBoundingClientRect().height
+    if (measuredHeight) {
+      setHeight(lastHeight => (lastHeight === measuredHeight ? lastHeight : measuredHeight))
+    }
+  }, [])
+
+  return (
+    <Kb.Box2
+      direction="vertical"
+      style={Kb.Styles.collapseStyles([
+        styles.container,
+        style,
+        // paddingRight is to compensate for the message menu
+        // to make sure we don't rewrap text when showing the animation
+        retainHeight && {
+          height,
+          paddingRight: 28,
+          position: 'relative',
+        },
+      ])}
+      ref={setBoxRef}
+    >
+      {retainHeight ? null : children}
+      <DesktopAshes
+        doneExploding={!animating}
+        exploded={retainHeight}
+        explodedBy={explodedBy}
+        height={height}
+      />
+    </Kb.Box2>
+  )
+}
+
+const DesktopAshes = (props: {
+  doneExploding: boolean
+  exploded: boolean
+  explodedBy?: string
+  height: number
+}) => {
+  const {doneExploding, explodedBy, exploded, height} = props
+  let explodedTag: React.ReactNode = null
+  if (doneExploding) {
+    explodedTag = explodedBy ? (
+      <Kb.Text type="BodyTiny" style={styles.explodedDesktop}>
+        <Kb.Text type="BodyTiny" virtualText={true}>
+          {'EXPLODED BY '}
+        </Kb.Text>
+        <Kb.ConnectedUsernames
+          type="BodySmallBold"
+          onUsernameClicked="profile"
+          usernames={explodedBy}
+          inline={true}
+          colorFollowing={true}
+          colorYou={true}
+          underline={true}
+          virtualText={true}
+        />
+      </Kb.Text>
+    ) : (
+      <Kb.Text type="BodyTiny" style={styles.explodedDesktop} virtualText={true}>
+        EXPLODED
+      </Kb.Text>
+    )
+  }
+
+  return (
+    <div
+      className={Kb.Styles.classNames('ashbox', 'ashes-bg', {'full-width': exploded})}
+      style={Kb.Styles.castStyleDesktop(Kb.Styles.collapseStyles([styles.ashBox]))}
+    >
+      {exploded && explodedTag}
+      <FlameFront height={height} stop={doneExploding} />
+    </div>
+  )
+}
+
+function FlameFront(props: {height: number; stop: boolean}) {
+  const isDarkMode = useColorScheme() === 'dark'
+  if (props.stop) {
+    return null
+  }
+  const numBoxes = Math.max(Math.ceil(props.height / 17) - 1, 1)
+  const children: Array<React.ReactNode> = []
+  for (let i = 0; i < numBoxes; i++) {
+    children.push(
+      <Kb.Box2 direction="vertical" key={String(i)} style={styles.flame}>
+        <Kb.Animation animationType={isDarkMode ? 'darkExploding' : 'exploding'} width={64} height={64} />
+      </Kb.Box2>
+    )
+  }
+  return (
+    <Kb.Box2 direction="vertical" className="flame-container" style={styles.flameContainer}>
+      {children}
+    </Kb.Box2>
+  )
+}
+
+// Native implementation
+const NativeExplodingHeightRetainer = (p: Props) => {
   const {retainHeight, explodedBy, messageKey, style, children} = p
   const [height, setHeight] = React.useState(20)
   const onLayout = (evt: Kb.LayoutEvent) => {
@@ -64,14 +199,12 @@ const AnimatedAshTower = (p: AshTowerProps) => {
     if (lastExplodedRef.current === exploded) return
     lastExplodedRef.current = exploded
     if (exploded) {
-      // just exploded! animate
       NativeAnimated.timing(widthAV, {
         duration: animationDuration,
         easing: NativeEasing.inOut(NativeEasing.ease),
         toValue: 100,
         useNativeDriver: false,
       }).start()
-      // insert 'EXPLODED' in sync with 'boom!' disappearing
       const id = setTimeout(() => {
         setShowExploded(true)
       }, animationDuration)
@@ -107,7 +240,7 @@ const makeEmojiTowerChildren = (numImages: number) => {
   for (let i = 0; i < numImages * 4; i++) {
     const r = Math.random()
     let emoji: string
-    if (Kb.Styles.isAndroid) {
+    if (isAndroid) {
       emoji = r < 0.5 ? '💥' : '💣'
     } else {
       if (r < 0.33) {
@@ -175,11 +308,11 @@ const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: bool
 
   if (showExploded) {
     exploded = !explodedBy ? (
-      <Kb.Text type="BodyTiny" style={styles.exploded}>
+      <Kb.Text type="BodyTiny" style={styles.explodedNative}>
         EXPLODED
       </Kb.Text>
     ) : (
-      <Kb.Text lineClamp={1} type="BodyTiny" style={styles.exploded}>
+      <Kb.Text lineClamp={1} type="BodyTiny" style={styles.explodedNative}>
         EXPLODED BY{' '}
         <Kb.ConnectedUsernames
           type="BodySmallBold"
@@ -200,9 +333,26 @@ const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: bool
     </>
   )
 }
+
+const ExplodingHeightRetainer = (p: Props) => {
+  if (!isMobile) return <DesktopExplodingHeightRetainer {...p} />
+  return <NativeExplodingHeightRetainer {...p} />
+}
+
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
+      ashBox: Kb.Styles.platformStyles({
+        isElectron: {
+          backgroundColor: Kb.Styles.globalColors.white,
+          backgroundRepeat: 'repeat',
+          backgroundSize: '400px 68px',
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          top: 0,
+        },
+      }),
       ashes: {
         height: 80,
         width: 400,
@@ -215,11 +365,33 @@ const styles = Kb.Styles.styleSheetCreate(
         top: 0,
         width: 20,
       },
-      exploded: {
+      explodedDesktop: Kb.Styles.platformStyles({
+        isElectron: {
+          backgroundColor: Kb.Styles.globalColors.white,
+          bottom: 0,
+          color: Kb.Styles.globalColors.black_20_on_white,
+          padding: 2,
+          paddingLeft: Kb.Styles.globalMargins.tiny,
+          paddingTop: 0,
+          position: 'absolute',
+          right: 0,
+          whiteSpace: 'nowrap',
+        },
+      }),
+      explodedNative: {
         backgroundColor: Kb.Styles.globalColors.white,
         color: Kb.Styles.globalColors.black_20_on_white,
         paddingLeft: Kb.Styles.globalMargins.tiny,
       },
+      flame: {
+        height: 17,
+      },
+      flameContainer: {
+        position: 'absolute',
+        right: -32,
+        top: -22,
+        width: 64,
+      },
       retaining: {
         overflow: 'hidden',
       },
@@ -239,4 +411,5 @@ const styles = Kb.Styles.styleSheetCreate(
       },
     }) as const
 )
+
 export default ExplodingHeightRetainer
diff --git a/shared/chat/conversation/messages/wrapper/long-pressable/index.desktop.tsx b/shared/chat/conversation/messages/wrapper/long-pressable/index.desktop.tsx
deleted file mode 100644
index 059374b8994d..000000000000
--- a/shared/chat/conversation/messages/wrapper/long-pressable/index.desktop.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-
-function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
-  return <Kb.Box2 direction="horizontal" fullWidth={true} {...props} />
-}
-export default LongPressable
diff --git a/shared/chat/conversation/messages/wrapper/long-pressable/index.native.tsx b/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
similarity index 92%
rename from shared/chat/conversation/messages/wrapper/long-pressable/index.native.tsx
rename to shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
index 358c04a84cc4..5f13faf70ec6 100644
--- a/shared/chat/conversation/messages/wrapper/long-pressable/index.native.tsx
+++ b/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
@@ -1,13 +1,13 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as InputState from '../../../input-area/input-state'
+import * as Reanimated from 'react-native-reanimated'
+import {Pressable, Keyboard} from 'react-native'
 import type {Props} from './index.shared'
 import {useOrdinal} from '../../ids-context'
 import {useConversationThreadToggleSearch} from '../../../thread-context'
-import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row.native'
-import {Pressable, Keyboard} from 'react-native'
+import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row'
 import {FocusContext} from '@/chat/conversation/normal/context'
-import * as Reanimated from 'react-native-reanimated'
 
 function ReplyIcon({progress}: {progress: Reanimated.SharedValue<number>}) {
   const as = Reanimated.useAnimatedStyle(() => {
@@ -21,7 +21,17 @@ function ReplyIcon({progress}: {progress: Reanimated.SharedValue<number>}) {
   )
 }
 
-function LongPressable(props: Props) {
+function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
+  const toggleThreadSearch = useConversationThreadToggleSearch()
+  const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
+  const ordinal = useOrdinal()
+  const {focusInput} = React.useContext(FocusContext)
+  const swipeRef = React.useRef<SwipeableMethods | null>(null)
+
+  if (!isMobile) {
+    return <Kb.Box2 direction="horizontal" fullWidth={true} {...props} />
+  }
+
   const {children, onLongPress, style} = props
 
   const onPress = () => Keyboard.dismiss()
@@ -37,17 +47,12 @@ function LongPressable(props: Props) {
     translation: Reanimated.SharedValue<number>
   ) => <ReplyIcon progress={translation} />
 
-  const toggleThreadSearch = useConversationThreadToggleSearch()
-  const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
-  const ordinal = useOrdinal()
-  const {focusInput} = React.useContext(FocusContext)
   const onSwipeLeft = () => {
     setReplyTo(ordinal)
     toggleThreadSearch(true)
     focusInput()
   }
 
-  const swipeRef = React.useRef<SwipeableMethods | null>(null)
   const onSwipeableWillOpen = () => {
     swipeRef.current?.close()
     onSwipeLeft()
diff --git a/shared/chat/conversation/messages/wrapper/wrapper.tsx b/shared/chat/conversation/messages/wrapper/wrapper.tsx
index 767720548e2e..5c27daf92209 100644
--- a/shared/chat/conversation/messages/wrapper/wrapper.tsx
+++ b/shared/chat/conversation/messages/wrapper/wrapper.tsx
@@ -541,7 +541,7 @@ const NormalWrapper = ({
   style: Kb.Styles.StylesCrossPlatform
 }) => {
   return (
-    <Kb.Box2 direction="vertical" flex={1} relative={true} style={style} fullWidth={!Kb.Styles.isMobile}>
+    <Kb.Box2 direction="vertical" flex={1} relative={true} style={style} fullWidth={!isMobile}>
       {children}
     </Kb.Box2>
   )
@@ -562,7 +562,7 @@ function TextAndSiblings(p: TSProps) {
   const {hasReactions, popupAnchor, reactions, sendIndicatorFailed, sendIndicatorID} = p
   const {sendIndicatorSent, type, setShowingPicker, showCoinsIcon, shouldShowPopup} = p
   const {showPopup, showExplodingCountdown, showRevoked, showSendIndicator, showingPicker, submitState} = p
-  const pressableProps = Kb.Styles.isMobile
+  const pressableProps = isMobile
     ? {
         onLongPress: decorate && shouldShowPopup ? showPopup : undefined,
         style: isHighlighted ? {backgroundColor: Kb.Styles.globalColors.yellowOrYellowAlt} : undefined,
@@ -599,7 +599,7 @@ function TextAndSiblings(p: TSProps) {
         flex={1}
         relative={true}
         style={styles.middle}
-        fullWidth={!Kb.Styles.isMobile}
+        fullWidth={!isMobile}
       >
         <NormalWrapper style={styles.background}>
           {content}
@@ -766,7 +766,7 @@ function BottomSide(p: BProps) {
     />
   ) : null
 
-  const canShowDesktopReactionsPopup = !C.isMobile && !hasReactions && canShowReactionsPopup
+  const canShowDesktopReactionsPopup = !isMobile && !hasReactions && canShowReactionsPopup
   const desktopReactionsPopup =
     canShowDesktopReactionsPopup && !showingPopup ? (
       <EmojiRow
@@ -868,7 +868,7 @@ function RightSide(p: RProps) {
   // is fine
 
   const menu =
-    C.isMobile || !shouldShowPopup ? null : (
+    isMobile || !shouldShowPopup ? null : (
       <Kb.Box2
         direction="vertical"
         tooltip="More actions..."
@@ -999,7 +999,7 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           alignItems: 'flex-start',
           alignSelf: 'flex-start',
-          marginLeft: Kb.Styles.isMobile ? 48 : 56,
+          marginLeft: isMobile ? 48 : 56,
         },
         isElectron: {
           marginBottom: 0,
@@ -1049,7 +1049,7 @@ const styles = Kb.Styles.styleSheetCreate(
       messagePopupContainer: {marginRight: Kb.Styles.globalMargins.small},
       middle: {
         flexShrink: 1,
-        paddingLeft: Kb.Styles.isMobile ? 48 : 56,
+        paddingLeft: isMobile ? 48 : 56,
         paddingRight: 4,
       },
       rightSide: Kb.Styles.platformStyles({
diff --git a/shared/chat/conversation/normal/index.native.tsx b/shared/chat/conversation/normal/index.native.tsx
deleted file mode 100644
index ac985b812909..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 = Kb.Styles.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">
-      {Kb.Styles.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/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx
index fde183b1271a..5bd4dd894e5c 100644
--- a/shared/chat/conversation/pinned-message.tsx
+++ b/shared/chat/conversation/pinned-message.tsx
@@ -129,7 +129,7 @@ const PinnedMessage = function PinnedMessage() {
   )
   const popup = (
     <UnpinPrompt
-      attachTo={Kb.Styles.isMobile ? undefined : closeref}
+      attachTo={isMobile ? undefined : closeref}
       onHidden={() => setShowPopup(false)}
       onUnpin={onDismiss}
       visible={showPopup}
diff --git a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx b/shared/chat/conversation/rekey/participant-rekey.desktop.tsx
deleted file mode 100644
index 19b90ab8d5f5..000000000000
--- a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './participant-rekey.types'
-
-const Row = (props: {username: string; onUsernameClicked: (s: string) => void}) => (
-  <Kb.ClickableBox onClick={() => props.onUsernameClicked(props.username)}>
-    <Kb.Box2 direction="horizontal" style={styles.row}>
-      <Kb.Avatar
-        username={props.username}
-        size={48}
-        style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
-      />
-      <Kb.Box2 direction="vertical" style={styles.innerRow}>
-        <Kb.ConnectedUsernames inline={true} type="BodyBold" usernames={props.username} />
-        <Kb.Text type="BodySmall" style={Kb.Styles.platformStyles({isElectron: {lineHeight: '17px'}})}>
-          Can rekey this chat by opening the Keybase app.
-        </Kb.Text>
-      </Kb.Box2>
-    </Kb.Box2>
-  </Kb.ClickableBox>
-)
-
-const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => {
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
-      <Kb.Box2
-        direction="horizontal"
-        fullWidth={true}
-        justifyContent="center"
-        style={{
-          backgroundColor: Kb.Styles.globalColors.red,
-        }}
-      >
-        <Kb.Text
-          negative={true}
-          style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
-          type="BodySemibold"
-        >
-          This conversation is waiting for a participant to open their Keybase app.
-        </Kb.Text>
-      </Kb.Box2>
-      <Kb.Box2
-        direction="vertical"
-        fullWidth={true}
-        style={Kb.Styles.platformStyles({
-          isElectron: {
-            flex: 1,
-            justifyContent: 'center',
-            marginLeft: 8,
-            overflow: 'auto',
-          },
-        })}
-      >
-        <Kb.Box2 direction="vertical" fullWidth={true}>
-          {rekeyers.map(username => (
-            <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
-          ))}
-        </Kb.Box2>
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: Kb.Styles.platformStyles({
-        isElectron: {
-          backgroundColor: Kb.Styles.globalColors.white,
-          borderLeft: `1px solid ${Kb.Styles.globalColors.black_20}`,
-          flex: 1,
-          justifyContent: 'flex-start',
-        },
-      }),
-      innerRow: Kb.Styles.platformStyles({
-        isElectron: {
-          borderBottom: `1px solid ${Kb.Styles.globalColors.black_10}`,
-          flex: 1,
-          justifyContent: 'center',
-        },
-      }),
-      row: Kb.Styles.platformStyles({
-        isElectron: {
-          minHeight: 48,
-        },
-      }),
-    }) as const
-)
-
-export default ParticipantRekey
diff --git a/shared/chat/conversation/rekey/participant-rekey.native.tsx b/shared/chat/conversation/rekey/participant-rekey.native.tsx
deleted file mode 100644
index da565e28a648..000000000000
--- a/shared/chat/conversation/rekey/participant-rekey.native.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as Kb from '@/common-adapters'
-import NativeScrollView from '@/common-adapters/scroll-view.native'
-import type {Props} from './participant-rekey.types'
-
-const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked: (s: string) => void}) => (
-  <Kb.ClickableBox onClick={() => onUsernameClicked(username)}>
-    <Kb.Box2 direction="horizontal" alignItems="center" style={styles.row}>
-      <Kb.Avatar
-        username={username}
-        size={48}
-        style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
-      />
-      <Kb.Box2 direction="vertical" justifyContent="center" flex={1} style={styles.innerRow}>
-        <Kb.ConnectedUsernames inline={true} backgroundMode="Terminal" type="BodyBold" usernames={username} />
-        <Kb.Text
-          type="BodySmall"
-          negative={true}
-          style={{color: Kb.Styles.globalColors.blueLighter_40, lineHeight: 17}}
-        >
-          Can rekey this chat by opening the Keybase app.
-        </Kb.Text>
-      </Kb.Box2>
-    </Kb.Box2>
-  </Kb.ClickableBox>
-)
-
-const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => (
-  <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="flex-start" flex={1} style={styles.container}>
-    <Kb.Box2
-      direction="horizontal"
-      fullWidth={true}
-      justifyContent="center"
-      style={{
-        backgroundColor: Kb.Styles.globalColors.red,
-      }}
-    >
-      <Kb.Text
-        center={true}
-        negative={true}
-        style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
-        type="BodySemibold"
-      >
-        This conversation is waiting for a participant to open their Keybase app.
-      </Kb.Text>
-    </Kb.Box2>
-    <NativeScrollView style={{flex: 1, paddingTop: 8}}>
-      <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="center" style={{marginLeft: 8}}>
-        <Kb.Box2 direction="vertical" fullWidth={true}>
-          {rekeyers.map(username => (
-            <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
-          ))}
-        </Kb.Box2>
-      </Kb.Box2>
-    </NativeScrollView>
-  </Kb.Box2>
-)
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        backgroundColor: Kb.Styles.globalColors.blueDarker2,
-      },
-      innerRow: {
-        borderBottomColor: Kb.Styles.globalColors.black_10,
-        borderBottomWidth: 1,
-        minHeight: 56,
-      },
-      row: Kb.Styles.platformStyles({
-        common: {
-          minHeight: 56,
-        },
-        isElectron: {
-          ...Kb.Styles.desktopStyles.clickable,
-        },
-      }),
-    }) as const
-)
-
-export default ParticipantRekey
diff --git a/shared/chat/conversation/rekey/participant-rekey.tsx b/shared/chat/conversation/rekey/participant-rekey.tsx
new file mode 100644
index 000000000000..6430cd7901f7
--- /dev/null
+++ b/shared/chat/conversation/rekey/participant-rekey.tsx
@@ -0,0 +1,123 @@
+import * as Kb from '@/common-adapters'
+import type {Props} from './participant-rekey.types'
+
+const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked: (s: string) => void}) => (
+  <Kb.ClickableBox onClick={() => onUsernameClicked(username)}>
+    <Kb.Box2
+      direction="horizontal"
+      alignItems={isMobile ? 'center' : undefined}
+      style={styles.row}
+    >
+      <Kb.Avatar
+        username={username}
+        size={48}
+        style={{marginRight: Kb.Styles.globalMargins.small, padding: 4}}
+      />
+      <Kb.Box2
+        direction="vertical"
+        justifyContent={isMobile ? 'center' : undefined}
+        flex={isMobile ? 1 : undefined}
+        style={styles.innerRow}
+      >
+        <Kb.ConnectedUsernames
+          inline={true}
+          backgroundMode={isMobile ? 'Terminal' : undefined}
+          type="BodyBold"
+          usernames={username}
+        />
+        <Kb.Text
+          type="BodySmall"
+          negative={isMobile}
+          style={Kb.Styles.platformStyles({
+            isElectron: {lineHeight: '17px'},
+            isMobile: {color: Kb.Styles.globalColors.blueLighter_40, lineHeight: 17},
+          })}
+        >
+          Can rekey this chat by opening the Keybase app.
+        </Kb.Text>
+      </Kb.Box2>
+    </Kb.Box2>
+  </Kb.ClickableBox>
+)
+
+const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => (
+  <Kb.Box2
+    direction="vertical"
+    fullWidth={true}
+    justifyContent={isMobile ? 'flex-start' : undefined}
+    flex={isMobile ? 1 : undefined}
+    style={styles.container}
+  >
+    <Kb.Box2
+      direction="horizontal"
+      fullWidth={true}
+      justifyContent="center"
+      style={{backgroundColor: Kb.Styles.globalColors.red}}
+    >
+      <Kb.Text
+        center={isMobile}
+        negative={true}
+        style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
+        type="BodySemibold"
+      >
+        This conversation is waiting for a participant to open their Keybase app.
+      </Kb.Text>
+    </Kb.Box2>
+    <Kb.ScrollView style={styles.scroll}>
+      <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="center" style={styles.scrollInner}>
+        <Kb.Box2 direction="vertical" fullWidth={true}>
+          {rekeyers.map(username => (
+            <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
+          ))}
+        </Kb.Box2>
+      </Kb.Box2>
+    </Kb.ScrollView>
+  </Kb.Box2>
+)
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  container: Kb.Styles.platformStyles({
+    isElectron: {
+      backgroundColor: Kb.Styles.globalColors.white,
+      borderLeft: `1px solid ${Kb.Styles.globalColors.black_20}`,
+      flex: 1,
+      justifyContent: 'flex-start',
+    },
+    isMobile: {
+      backgroundColor: Kb.Styles.globalColors.blueDarker2,
+    },
+  }),
+  innerRow: Kb.Styles.platformStyles({
+    isElectron: {
+      borderBottom: `1px solid ${Kb.Styles.globalColors.black_10}`,
+      flex: 1,
+      justifyContent: 'center',
+    },
+    isMobile: {
+      borderBottomColor: Kb.Styles.globalColors.black_10,
+      borderBottomWidth: 1,
+      minHeight: 56,
+    },
+  }),
+  row: Kb.Styles.platformStyles({
+    common: {
+      minHeight: 48,
+    },
+    isElectron: {
+      ...Kb.Styles.desktopStyles.clickable,
+    },
+    isMobile: {
+      minHeight: 56,
+    },
+  }),
+  scroll: Kb.Styles.platformStyles({
+    isElectron: {overflow: 'auto' as const},
+    isMobile: {flex: 1, paddingTop: 8},
+  }),
+  scrollInner: Kb.Styles.platformStyles({
+    isElectron: {flex: 1, marginLeft: 8},
+    isMobile: {marginLeft: 8},
+  }),
+}))
+
+export default ParticipantRekey
diff --git a/shared/chat/conversation/rekey/you-rekey.desktop.tsx b/shared/chat/conversation/rekey/you-rekey.desktop.tsx
deleted file mode 100644
index d4db5ba7beaf..000000000000
--- a/shared/chat/conversation/rekey/you-rekey.desktop.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './you-rekey.shared'
-
-const YouRekey = ({onRekey}: Props) => {
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="flex-start" flex={1} style={styles.container}>
-      <Kb.Box2
-        direction="horizontal"
-        fullWidth={true}
-        justifyContent="center"
-        style={{
-          backgroundColor: Kb.Styles.globalColors.red,
-        }}
-      >
-        <Kb.Text
-          negative={true}
-          style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
-          type="BodySemibold"
-        >
-          This conversation needs to be rekeyed.
-        </Kb.Text>
-      </Kb.Box2>
-      <Kb.ButtonBar>
-        <Kb.Button onClick={onRekey} label="Rekey" style={styles.primaryOnBlue} labelStyle={styles.primaryOnBlueLabel} />
-      </Kb.ButtonBar>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        backgroundColor: Kb.Styles.globalColors.blueDarker2,
-      },
-      primaryOnBlue: {backgroundColor: Kb.Styles.globalColors.white},
-      primaryOnBlueLabel: {color: Kb.Styles.globalColors.blueDark},
-    }) as const
-)
-
-export default YouRekey
diff --git a/shared/chat/conversation/rekey/you-rekey.native.tsx b/shared/chat/conversation/rekey/you-rekey.native.tsx
deleted file mode 100644
index 8bb0260369c6..000000000000
--- a/shared/chat/conversation/rekey/you-rekey.native.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './you-rekey.shared'
-
-const YouRekey = ({onEnterPaperkey}: Props) => (
-  <Kb.Box2 direction="vertical">
-    <Kb.Banner color="red">
-      <Kb.BannerParagraph bannerColor="red" content="This conversation needs to be rekeyed." />
-    </Kb.Banner>
-    <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="flex-start" flex={1} style={styles.container}>
-      <Kb.Box2
-        direction="vertical"
-        fullWidth={true}
-        justifyContent="center"
-        flex={1}
-      >
-        <Kb.Text center={true} type="BodySmall" style={styles.text} negative={true}>
-          To unlock this conversation, open one of your other devices or enter a paperkey.
-        </Kb.Text>
-        <Kb.Button onClick={onEnterPaperkey} label="Enter a paper key" />
-      </Kb.Box2>
-    </Kb.Box2>
-  </Kb.Box2>
-)
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        padding: Kb.Styles.globalMargins.small,
-      },
-      text: {
-        marginBottom: Kb.Styles.globalMargins.large,
-        marginTop: Kb.Styles.globalMargins.large,
-      },
-    }) as const
-)
-
-export default YouRekey
diff --git a/shared/chat/conversation/rekey/you-rekey.tsx b/shared/chat/conversation/rekey/you-rekey.tsx
new file mode 100644
index 000000000000..cbd05a0b13a0
--- /dev/null
+++ b/shared/chat/conversation/rekey/you-rekey.tsx
@@ -0,0 +1,78 @@
+import * as Kb from '@/common-adapters'
+import type {Props} from './you-rekey.shared'
+
+const YouRekey = (p: Props) => {
+  if (!isMobile) {
+    return (
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        justifyContent="flex-start"
+        flex={1}
+        style={styles.container}
+      >
+        <Kb.Box2
+          direction="horizontal"
+          fullWidth={true}
+          justifyContent="center"
+          style={{backgroundColor: Kb.Styles.globalColors.red}}
+        >
+          <Kb.Text
+            negative={true}
+            style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
+            type="BodySemibold"
+          >
+            This conversation needs to be rekeyed.
+          </Kb.Text>
+        </Kb.Box2>
+        <Kb.ButtonBar>
+          <Kb.Button
+            onClick={p.onRekey}
+            label="Rekey"
+            style={styles.primaryOnBlue}
+            labelStyle={styles.primaryOnBlueLabel}
+          />
+        </Kb.ButtonBar>
+      </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2 direction="vertical">
+      <Kb.Banner color="red">
+        <Kb.BannerParagraph bannerColor="red" content="This conversation needs to be rekeyed." />
+      </Kb.Banner>
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        justifyContent="flex-start"
+        flex={1}
+        style={styles.mobileContainer}
+      >
+        <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="center" flex={1}>
+          <Kb.Text center={true} type="BodySmall" style={styles.text} negative={true}>
+            To unlock this conversation, open one of your other devices or enter a paperkey.
+          </Kb.Text>
+          <Kb.Button onClick={p.onEnterPaperkey} label="Enter a paper key" />
+        </Kb.Box2>
+      </Kb.Box2>
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  container: {
+    backgroundColor: Kb.Styles.globalColors.blueDarker2,
+  },
+  mobileContainer: {
+    padding: Kb.Styles.globalMargins.small,
+  },
+  primaryOnBlue: {backgroundColor: Kb.Styles.globalColors.white},
+  primaryOnBlueLabel: {color: Kb.Styles.globalColors.blueDark},
+  text: {
+    marginBottom: Kb.Styles.globalMargins.large,
+    marginTop: Kb.Styles.globalMargins.large,
+  },
+}))
+
+export default YouRekey
diff --git a/shared/chat/conversation/search.tsx b/shared/chat/conversation/search.tsx
index 6f1843cd893d..2fb661369eb3 100644
--- a/shared/chat/conversation/search.tsx
+++ b/shared/chat/conversation/search.tsx
@@ -568,4 +568,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default Kb.Styles.isMobile ? ThreadSearchMobile : ThreadSearchDesktop
+export default isMobile ? ThreadSearchMobile : ThreadSearchDesktop
diff --git a/shared/chat/conversation/thread-context.tsx b/shared/chat/conversation/thread-context.tsx
index 5f446145c29c..f8603d526b4e 100644
--- a/shared/chat/conversation/thread-context.tsx
+++ b/shared/chat/conversation/thread-context.tsx
@@ -13,7 +13,7 @@ import {
   navigateUp,
   setChatRootParams,
 } from '@/constants/router'
-import {isMobile, isPhone} from '@/constants/platform'
+import {isPhone} from '@/constants/platform'
 import logger from '@/logger'
 import throttle from 'lodash/throttle'
 import type {DebouncedFunc} from 'lodash'
diff --git a/shared/chat/conversation/you-are-reset.tsx b/shared/chat/conversation/you-are-reset.tsx
index 2e9cb11711f1..87f5d7d62054 100644
--- a/shared/chat/conversation/you-are-reset.tsx
+++ b/shared/chat/conversation/you-are-reset.tsx
@@ -8,7 +8,7 @@ const YouAreReset = () => (
       fullWidth={true}
       flex={1}
     >
-      <Kb.ImageIcon type={Kb.Styles.isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
+      <Kb.ImageIcon type={isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
     </Kb.Box2>
     <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.box}>
       <Kb.Text type="BodySemibold" negative={true} style={{textAlign: 'center' as const}}>
diff --git a/shared/chat/create-channel/index.desktop.tsx b/shared/chat/create-channel/index.desktop.tsx
deleted file mode 100644
index afe7bc4d9429..000000000000
--- a/shared/chat/create-channel/index.desktop.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as Kb from '@/common-adapters'
-import * as C from '@/constants'
-import type {Props} from './index.shared'
-import useHook from './hooks'
-
-const CreateChannel = (p: Props) => {
-  const props = useHook(p)
-  return (
-    <>
-      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.boxTop}>
-        <Kb.Avatar isTeam={true} teamname={props.teamname} size={32} />
-        <Kb.Text type="BodySmallSemibold" style={{marginTop: Kb.Styles.globalMargins.xtiny}}>
-          {props.teamname}
-        </Kb.Text>
-        <Kb.Text
-          type="Header"
-          style={{marginBottom: Kb.Styles.globalMargins.tiny, marginTop: Kb.Styles.globalMargins.tiny}}
-        >
-          New chat channel
-        </Kb.Text>
-      </Kb.Box2>
-      {!!props.errorText && (
-        <Kb.Banner color="red">
-          <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
-        </Kb.Banner>
-      )}
-      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.box}>
-        <Kb.ClickableBox style={styles.back} onClick={props.onBack}>
-          <Kb.Icon style={styles.backIcon} type="iconfont-arrow-left" />
-          <Kb.Text type="BodyPrimaryLink">Back</Kb.Text>
-        </Kb.ClickableBox>
-        <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny" gapEnd={true} gapStart={true}>
-          <Kb.Input3
-            autoFocus={true}
-            placeholder="Channel name"
-            value={props.channelname}
-            onEnterKeyDown={props.onSubmit}
-            onChangeText={channelname => props.onChannelnameChange(channelname)}
-          />
-          <Kb.Input3
-            autoFocus={false}
-            autoCorrect={true}
-            autoCapitalize="sentences"
-            multiline={true}
-            rowsMin={1}
-            rowsMax={10}
-            // From go/chat/msgchecker/constants.go#HeadlineMaxLength
-            maxLength={280}
-            placeholder="Add a description or topic..."
-            value={props.description}
-            onEnterKeyDown={props.onSubmit}
-            onChangeText={description => props.onDescriptionChange(description)}
-          />
-        </Kb.Box2>
-        <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          <Kb.Button type="Dim" onClick={props.onBack} label="Cancel" />
-          <Kb.WaitingButton
-            waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
-            onClick={props.onSubmit}
-            label="Save"
-          />
-        </Kb.ButtonBar>
-      </Kb.Box2>
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      back: {
-        ...Kb.Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
-        left: 32,
-        position: 'absolute',
-        top: 32,
-      },
-      backIcon: {
-        marginRight: Kb.Styles.globalMargins.xtiny,
-      },
-      box: {
-        paddingLeft: Kb.Styles.globalMargins.large,
-        paddingRight: Kb.Styles.globalMargins.large,
-      },
-      boxTop: {
-        paddingLeft: Kb.Styles.globalMargins.large,
-        paddingRight: Kb.Styles.globalMargins.large,
-        paddingTop: Kb.Styles.globalMargins.medium,
-      },
-      buttonBar: {alignItems: 'center'},
-    }) as const
-)
-
-export default CreateChannel
diff --git a/shared/chat/create-channel/index.native.tsx b/shared/chat/create-channel/index.native.tsx
deleted file mode 100644
index 261672e09d15..000000000000
--- a/shared/chat/create-channel/index.native.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as Kb from '@/common-adapters'
-import * as C from '@/constants'
-import type {Props} from './index.shared'
-import useHook from './hooks'
-
-const CreateChannel = (p: Props) => {
-  const props = useHook(p)
-  return (
-    <>
-      {!!props.errorText && (
-        <Kb.Banner color="red">
-          <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
-        </Kb.Banner>
-      )}
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.box}>
-        <Kb.Box2 direction="vertical" fullWidth={true} gap="small">
-          <Kb.Input3
-            autoFocus={true}
-            placeholder="Channel name"
-            value={props.channelname}
-            onChangeText={channelname => props.onChannelnameChange(channelname)}
-          />
-          <Kb.Input3
-            autoCorrect={true}
-            autoFocus={false}
-            autoCapitalize="sentences"
-            multiline={true}
-            rowsMin={1}
-            rowsMax={2}
-            // From go/chat/msgchecker/constants.go#HeadlineMaxLength
-            maxLength={280}
-            placeholder="Add a description or topic..."
-            value={props.description}
-            onChangeText={description => props.onDescriptionChange(description)}
-          />
-        </Kb.Box2>
-        <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          <Kb.WaitingButton
-            waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
-            onClick={props.onSubmit}
-            label="Save"
-          />
-        </Kb.ButtonBar>
-      </Kb.Box2>
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      box: {padding: 16},
-      buttonBar: {alignItems: 'center'},
-    }) as const
-)
-
-export default CreateChannel
diff --git a/shared/chat/create-channel/index.tsx b/shared/chat/create-channel/index.tsx
new file mode 100644
index 000000000000..5df77ec19f9b
--- /dev/null
+++ b/shared/chat/create-channel/index.tsx
@@ -0,0 +1,144 @@
+import * as Kb from '@/common-adapters'
+import * as C from '@/constants'
+import type {Props} from './index.shared'
+import useHook from './hooks'
+
+const CreateChannel = (p: Props) => {
+  const props = useHook(p)
+
+  if (!isMobile) {
+    return (
+      <>
+        <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={desktopStyles.boxTop}>
+          <Kb.Avatar isTeam={true} teamname={props.teamname} size={32} />
+          <Kb.Text type="BodySmallSemibold" style={{marginTop: Kb.Styles.globalMargins.xtiny}}>
+            {props.teamname}
+          </Kb.Text>
+          <Kb.Text
+            type="Header"
+            style={{
+              marginBottom: Kb.Styles.globalMargins.tiny,
+              marginTop: Kb.Styles.globalMargins.tiny,
+            }}
+          >
+            New chat channel
+          </Kb.Text>
+        </Kb.Box2>
+        {!!props.errorText && (
+          <Kb.Banner color="red">
+            <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
+          </Kb.Banner>
+        )}
+        <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={desktopStyles.box}>
+          <Kb.ClickableBox style={desktopStyles.back} onClick={props.onBack}>
+            <Kb.Icon style={desktopStyles.backIcon} type="iconfont-arrow-left" />
+            <Kb.Text type="BodyPrimaryLink">Back</Kb.Text>
+          </Kb.ClickableBox>
+          <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny" gapEnd={true} gapStart={true}>
+            <Kb.Input3
+              autoFocus={true}
+              placeholder="Channel name"
+              value={props.channelname}
+              onEnterKeyDown={props.onSubmit}
+              onChangeText={channelname => props.onChannelnameChange(channelname)}
+            />
+            <Kb.Input3
+              autoFocus={false}
+              autoCorrect={true}
+              autoCapitalize="sentences"
+              multiline={true}
+              rowsMin={1}
+              rowsMax={10}
+              maxLength={280}
+              placeholder="Add a description or topic..."
+              value={props.description}
+              onEnterKeyDown={props.onSubmit}
+              onChangeText={description => props.onDescriptionChange(description)}
+            />
+          </Kb.Box2>
+          <Kb.ButtonBar fullWidth={true} style={desktopStyles.buttonBar}>
+            <Kb.Button type="Dim" onClick={props.onBack} label="Cancel" />
+            <Kb.WaitingButton
+              waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
+              onClick={props.onSubmit}
+              label="Save"
+            />
+          </Kb.ButtonBar>
+        </Kb.Box2>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {!!props.errorText && (
+        <Kb.Banner color="red">
+          <Kb.BannerParagraph bannerColor="red" content={props.errorText} />
+        </Kb.Banner>
+      )}
+      <Kb.Box2 direction="vertical" fullWidth={true} style={nativeStyles.box}>
+        <Kb.Box2 direction="vertical" fullWidth={true} gap="small">
+          <Kb.Input3
+            autoFocus={true}
+            placeholder="Channel name"
+            value={props.channelname}
+            onChangeText={channelname => props.onChannelnameChange(channelname)}
+          />
+          <Kb.Input3
+            autoCorrect={true}
+            autoFocus={false}
+            autoCapitalize="sentences"
+            multiline={true}
+            rowsMin={1}
+            rowsMax={2}
+            maxLength={280}
+            placeholder="Add a description or topic..."
+            value={props.description}
+            onChangeText={description => props.onDescriptionChange(description)}
+          />
+        </Kb.Box2>
+        <Kb.ButtonBar fullWidth={true} style={nativeStyles.buttonBar}>
+          <Kb.WaitingButton
+            waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
+            onClick={props.onSubmit}
+            label="Save"
+          />
+        </Kb.ButtonBar>
+      </Kb.Box2>
+    </>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      back: {
+        ...Kb.Styles.globalStyles.flexBoxRow,
+        alignItems: 'center',
+        left: 32,
+        position: 'absolute',
+        top: 32,
+      },
+      backIcon: {marginRight: Kb.Styles.globalMargins.xtiny},
+      box: {
+        paddingLeft: Kb.Styles.globalMargins.large,
+        paddingRight: Kb.Styles.globalMargins.large,
+      },
+      boxTop: {
+        paddingLeft: Kb.Styles.globalMargins.large,
+        paddingRight: Kb.Styles.globalMargins.large,
+        paddingTop: Kb.Styles.globalMargins.medium,
+      },
+      buttonBar: {alignItems: 'center'},
+    }) as const
+)
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      box: {padding: 16},
+      buttonBar: {alignItems: 'center'},
+    }) as const
+)
+
+export default CreateChannel
diff --git a/shared/chat/delete-history-warning.tsx b/shared/chat/delete-history-warning.tsx
index bf1f76a7275a..8d2df225f473 100644
--- a/shared/chat/delete-history-warning.tsx
+++ b/shared/chat/delete-history-warning.tsx
@@ -43,27 +43,27 @@ const DeleteHistoryWarning = (props: Props) => {
           styles.box,
         ])}
       >
-        <Kb.ImageIcon type={Kb.Styles.isMobile ? 'icon-message-deletion-64' : 'icon-message-deletion-48'} />
+        <Kb.ImageIcon type={isMobile ? 'icon-message-deletion-64' : 'icon-message-deletion-48'} />
         <Kb.Text style={{padding: Kb.Styles.globalMargins.small}} type="Header">
           Delete conversation history?
         </Kb.Text>
-        <Kb.Text center={Kb.Styles.isMobile} style={styles.text} type="Body">
+        <Kb.Text center={isMobile} style={styles.text} type="Body">
           You are about to delete all the messages in this conversation. For everyone.
         </Kb.Text>
-        <Kb.Box2 direction={Kb.Styles.isMobile ? 'verticalReverse' : 'horizontal'} style={styles.buttonBox}>
+        <Kb.Box2 direction={isMobile ? 'verticalReverse' : 'horizontal'} style={styles.buttonBox}>
           <Kb.Button
             type="Dim"
             style={styles.button}
             onClick={onCancel}
             label="Cancel"
-            fullWidth={Kb.Styles.isMobile}
+            fullWidth={isMobile}
           />
           <Kb.Button
             type="Danger"
             style={styles.button}
             onClick={onDeleteHistory}
             label="Yes, clear for everyone"
-            fullWidth={Kb.Styles.isMobile}
+            fullWidth={isMobile}
           />
         </Kb.Box2>
       </Kb.Box2>
diff --git a/shared/chat/emoji-picker/index.tsx b/shared/chat/emoji-picker/index.tsx
index 325e3460a034..ab4c54b8dcfc 100644
--- a/shared/chat/emoji-picker/index.tsx
+++ b/shared/chat/emoji-picker/index.tsx
@@ -54,7 +54,7 @@ const getFrequentSection = (
   }
 }
 
-const singleEmojiWidth = C.isMobile ? 32 : 26
+const singleEmojiWidth = isMobile ? 32 : 26
 const emojiPadding = 5
 const emojiWidthWithPadding = singleEmojiWidth + 2 * emojiPadding
 const maxEmojiSearchResults = 50
@@ -289,7 +289,7 @@ function EmojiPicker(props: Props) {
         })}
       </Kb.Box2>
     )
-    return Kb.Styles.isMobile ? (
+    return isMobile ? (
       <Kb.ScrollView key="bookmark" horizontal={true} style={styles.bookmarkScrollView}>
         {content}
       </Kb.ScrollView>
diff --git a/shared/chat/emoji-picker/skin-tone-picker.tsx b/shared/chat/emoji-picker/skin-tone-picker.tsx
index 446ea0fc6716..4c3e92c55bdd 100644
--- a/shared/chat/emoji-picker/skin-tone-picker.tsx
+++ b/shared/chat/emoji-picker/skin-tone-picker.tsx
@@ -26,7 +26,7 @@ type Props = {
 }
 
 const reorderedSkinTones = (currentSkinTone: Props['currentSkinTone']) => {
-  if (Kb.Styles.isMobile || !currentSkinTone) return emojiData.skinTones
+  if (isMobile || !currentSkinTone) return emojiData.skinTones
   const idx = emojiData.skinTones.indexOf(currentSkinTone)
   if (idx === -1) return emojiData.skinTones
   const rest = [...emojiData.skinTones]
@@ -49,11 +49,11 @@ function SkinTonePicker(props: Props) {
         setExpanded(false)
       }}
     >
-      {circle(skinTone, true, Kb.Styles.isMobile && skinTone === props.currentSkinTone)}
+      {circle(skinTone, true, isMobile && skinTone === props.currentSkinTone)}
     </Kb.ClickableBox>
   ))
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     expanded ? (
       <Kb.Box2
         direction="horizontal"
diff --git a/shared/chat/inbox-and-conversation-header.tsx b/shared/chat/inbox-and-conversation-header.tsx
index 70a4d8c801c7..dd3153c4d54b 100644
--- a/shared/chat/inbox-and-conversation-header.tsx
+++ b/shared/chat/inbox-and-conversation-header.tsx
@@ -181,7 +181,7 @@ const Header2 = () => {
     <Kb.Box2 direction="horizontal" style={styles.left}>
       {C.isTablet ? (
         <Kb.BoxGrow2>{headerPortalContent}</Kb.BoxGrow2>
-      ) : !Kb.Styles.isMobile ? (
+      ) : !isMobile ? (
         <Kb.BoxGrow2>
           <div
             style={Kb.Styles.castStyleDesktop(styles.searchPortal)}
@@ -189,7 +189,7 @@ const Header2 = () => {
           />
         </Kb.BoxGrow2>
       ) : null}
-      {!C.isElectron && !C.isTablet && <NewChatButton />}
+      {!isElectron && !C.isTablet && <NewChatButton />}
     </Kb.Box2>
   )
 
diff --git a/shared/chat/inbox-and-conversation.desktop.tsx b/shared/chat/inbox-and-conversation.desktop.tsx
deleted file mode 100644
index 27ea4bc224bd..000000000000
--- a/shared/chat/inbox-and-conversation.desktop.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as Kb from '@/common-adapters'
-import Inbox from '@/chat/inbox'
-import {InboxAndConversationShell, type InboxAndConversationProps} from '@/chat/inbox-and-conversation-shared'
-import {inboxWidth} from '@/chat/inbox/row/sizes'
-import useInboxHeaderPortal from '@/chat/inbox/use-header-portal'
-import {useInboxSearch} from '@/chat/inbox/use-inbox-search'
-
-export default function InboxAndConversationDesktop(props: InboxAndConversationProps) {
-  const search = useInboxSearch()
-  const headerPortal = useInboxHeaderPortal(search)
-  const leftPane = (
-    <Kb.Box2 direction="vertical" fullHeight={true} style={styles.inboxPane}>
-      <Inbox conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={search} />
-    </Kb.Box2>
-  )
-
-  return (
-    <>
-      {headerPortal}
-      <InboxAndConversationShell {...props} leftPane={leftPane} />
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      inboxPane: {
-        backgroundColor: Kb.Styles.globalColors.blueGrey,
-        maxWidth: inboxWidth,
-        minWidth: inboxWidth,
-      },
-    }) as const
-)
-
-export type {ChatRootRouteParams} from '@/chat/inbox-and-conversation-shared'
diff --git a/shared/chat/inbox-and-conversation.native.tsx b/shared/chat/inbox-and-conversation.native.tsx
deleted file mode 100644
index 1c188f61681a..000000000000
--- a/shared/chat/inbox-and-conversation.native.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Inbox from '@/chat/inbox'
-import {InboxAndConversationShell, type InboxAndConversationProps} from '@/chat/inbox-and-conversation-shared'
-import useInboxHeaderPortal from '@/chat/inbox/use-header-portal'
-import {useInboxSearch} from '@/chat/inbox/use-inbox-search'
-
-export default function InboxAndConversationNative(props: InboxAndConversationProps) {
-  const search = useInboxSearch()
-  const headerPortal = useInboxHeaderPortal(search)
-
-  return (
-    <>
-      {headerPortal}
-      <InboxAndConversationShell
-        {...props}
-        leftPane={
-          <Inbox conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={search} />
-        }
-      />
-    </>
-  )
-}
-
-export type {ChatRootRouteParams} from '@/chat/inbox-and-conversation-shared'
diff --git a/shared/chat/inbox-and-conversation.tsx b/shared/chat/inbox-and-conversation.tsx
index 1fb986a7c22f..b85f76def9b6 100644
--- a/shared/chat/inbox-and-conversation.tsx
+++ b/shared/chat/inbox-and-conversation.tsx
@@ -1,11 +1,42 @@
-import * as C from '@/constants'
-import Desktop from '@/chat/inbox-and-conversation.desktop'
-import Native from '@/chat/inbox-and-conversation.native'
-import type {InboxAndConversationProps} from '@/chat/inbox-and-conversation-shared'
+import * as Kb from '@/common-adapters'
+import Inbox from '@/chat/inbox'
+import {InboxAndConversationShell, type InboxAndConversationProps} from '@/chat/inbox-and-conversation-shared'
+import {inboxWidth} from '@/chat/inbox/row/sizes'
+import useInboxHeaderPortal from '@/chat/inbox/use-header-portal'
+import {useInboxSearch} from '@/chat/inbox/use-inbox-search'
 
-function InboxAndConversation(props: InboxAndConversationProps) {
-  return C.isMobile ? <Native {...props} /> : <Desktop {...props} />
+export default function InboxAndConversation(props: InboxAndConversationProps) {
+  const search = useInboxSearch()
+  const headerPortal = useInboxHeaderPortal(search)
+  const inbox = (
+    <Inbox
+      conversationIDKey={props.conversationIDKey}
+      refreshInbox={props.refreshInbox}
+      search={search}
+    />
+  )
+  const leftPane = isMobile ? (
+    inbox
+  ) : (
+    <Kb.Box2 direction="vertical" fullHeight={true} style={styles.inboxPane}>
+      {inbox}
+    </Kb.Box2>
+  )
+
+  return (
+    <>
+      {headerPortal}
+      <InboxAndConversationShell {...props} leftPane={leftPane} />
+    </>
+  )
 }
 
-export default InboxAndConversation
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  inboxPane: {
+    backgroundColor: Kb.Styles.globalColors.blueGrey,
+    maxWidth: inboxWidth,
+    minWidth: inboxWidth,
+  },
+}))
+
 export type {ChatRootRouteParams, InboxAndConversationProps} from '@/chat/inbox-and-conversation-shared'
diff --git a/shared/chat/inbox-search/background.desktop.tsx b/shared/chat/inbox-search/background.desktop.tsx
deleted file mode 100644
index 1eddc8d34734..000000000000
--- a/shared/chat/inbox-search/background.desktop.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// parallax animated rover while waiting for a search
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-
-const widthX = window.innerWidth
-const heightY = window.innerHeight
-
-const calcx = (x: number) => (x - widthX / 2) / widthX
-const calcy = (y: number) => (y - heightY / 2) / heightY
-const transBackgroundX = (x: number) => -100 + x * 3
-const transBackgroundY = (y: number) => y
-const transForegroundX = (x: number) => -100 + x * 30
-const transForegroundY = (y: number) => y
-const transRoverX = (x: number) => 160 + x * 20
-const transRoverY = (x: number, y: number) => 70 + x * 2 + 3 * y
-
-const Rover = () => {
-  const [x, setX] = React.useState(0)
-  const [y, setY] = React.useState(0)
-
-  React.useEffect(() => {
-    const onMouseMove = (e: {clientX: number; clientY: number}) => {
-      const {clientX, clientY} = e
-      setX(calcx(clientX))
-      setY(calcy(clientY))
-    }
-    window.addEventListener('mousemove', onMouseMove, {passive: true})
-    return () => {
-      window.removeEventListener('mousemove', onMouseMove)
-    }
-  }, [])
-  return (
-    <div style={styles.container}>
-      <div
-        style={{
-          ...styles.foreground,
-          bottom: transBackgroundY(y),
-          left: transBackgroundX(x),
-        }}
-      >
-        <Kb.ImageIcon style={styles.background} type="icon-illustration-mars-rover-background" />
-      </div>
-      <div
-        style={{
-          ...styles.rover,
-          bottom: transRoverY(x, y),
-          left: transRoverX(x),
-        }}
-      >
-        <Kb.ImageIcon type="icon-illustration-mars-rover" />
-      </div>
-      <div
-        style={{
-          ...styles.foreground,
-          bottom: transForegroundY(y),
-          left: transForegroundX(x),
-        }}
-      >
-        <Kb.ImageIcon style={styles.foreground} type="icon-illustration-mars-rover-foreground" />
-      </div>
-    </div>
-  )
-}
-
-const common = {
-  bottom: 0,
-  left: 0,
-  position: 'absolute',
-} as const
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      background: {...common, bottom: 10},
-      container: common,
-      foreground: common,
-      rover: {
-        ...common,
-        bottom: 70,
-      },
-    }) as const
-)
-
-export default Rover
diff --git a/shared/chat/inbox-search/background.native.tsx b/shared/chat/inbox-search/background.native.tsx
deleted file mode 100644
index c6ccfa108f50..000000000000
--- a/shared/chat/inbox-search/background.native.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as Kb from '@/common-adapters'
-
-const Rover = () => (
-  <Kb.Box2 direction="vertical" style={styles.container}>
-    <Kb.ImageIcon style={styles.background} type="icon-illustration-mars-rover-background" />
-    <Kb.ImageIcon style={styles.rover} type="icon-illustration-mars-rover" />
-    <Kb.ImageIcon style={styles.foreground} type="icon-illustration-mars-rover-foreground" />
-  </Kb.Box2>
-)
-
-const shared = Kb.Styles.isTablet
-  ? ({
-      bottom: 0,
-      position: 'absolute',
-      right: 0,
-    } as const)
-  : ({
-      bottom: 0,
-      left: 0,
-      position: 'absolute',
-    } as const)
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  background: {...shared, bottom: 10},
-  container: shared,
-  foreground: shared,
-  rover: Kb.Styles.platformStyles({
-    common: {
-      ...shared,
-      bottom: 80,
-    },
-    isPhone: {
-      left: Kb.Styles.dimensionWidth - 50,
-    },
-    isTablet: {
-      right: 50,
-    },
-  }),
-}))
-
-export default Rover
diff --git a/shared/chat/inbox-search/background.tsx b/shared/chat/inbox-search/background.tsx
new file mode 100644
index 000000000000..b68d1f45893e
--- /dev/null
+++ b/shared/chat/inbox-search/background.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+
+type WinGlobal = {
+  innerWidth: number
+  innerHeight: number
+  addEventListener: (type: string, handler: (e: {clientX: number; clientY: number}) => void, opts?: {passive?: boolean}) => void
+  removeEventListener: (type: string, handler: (e: {clientX: number; clientY: number}) => void) => void
+}
+
+const RoverDesktop = () => {
+  const win = globalThis as unknown as WinGlobal
+  const widthX = win.innerWidth
+  const heightY = win.innerHeight
+
+  const transBackgroundX = (x: number) => -100 + x * 3
+  const transBackgroundY = (y: number) => y
+  const transForegroundX = (x: number) => -100 + x * 30
+  const transForegroundY = (y: number) => y
+  const transRoverX = (x: number) => 160 + x * 20
+  const transRoverY = (x: number, y: number) => 70 + x * 2 + 3 * y
+
+  const [x, setX] = React.useState(0)
+  const [y, setY] = React.useState(0)
+
+  React.useEffect(() => {
+    const calcx = (cx: number) => (cx - widthX / 2) / widthX
+    const calcy = (cy: number) => (cy - heightY / 2) / heightY
+    const onMouseMove = (e: {clientX: number; clientY: number}) => {
+      setX(calcx(e.clientX))
+      setY(calcy(e.clientY))
+    }
+    win.addEventListener('mousemove', onMouseMove, {passive: true})
+    return () => win.removeEventListener('mousemove', onMouseMove)
+  }, [widthX, heightY, win])
+
+  return (
+    <div style={desktopStyles.container}>
+      <div style={{...desktopStyles.foreground, bottom: transBackgroundY(y), left: transBackgroundX(x)}}>
+        <Kb.ImageIcon style={desktopStyles.background} type="icon-illustration-mars-rover-background" />
+      </div>
+      <div style={{...desktopStyles.rover, bottom: transRoverY(x, y), left: transRoverX(x)}}>
+        <Kb.ImageIcon type="icon-illustration-mars-rover" />
+      </div>
+      <div style={{...desktopStyles.foreground, bottom: transForegroundY(y), left: transForegroundX(x)}}>
+        <Kb.ImageIcon style={desktopStyles.foreground} type="icon-illustration-mars-rover-foreground" />
+      </div>
+    </div>
+  )
+}
+
+const RoverNative = () => (
+  <Kb.Box2 direction="vertical" style={nativeStyles.container}>
+    <Kb.ImageIcon style={nativeStyles.background} type="icon-illustration-mars-rover-background" />
+    <Kb.ImageIcon style={nativeStyles.rover} type="icon-illustration-mars-rover" />
+    <Kb.ImageIcon style={nativeStyles.foreground} type="icon-illustration-mars-rover-foreground" />
+  </Kb.Box2>
+)
+
+const Rover = isMobile ? RoverNative : RoverDesktop
+
+const desktopCommon = {bottom: 0, left: 0, position: 'absolute'} as const
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      background: {...desktopCommon, bottom: 10},
+      container: desktopCommon,
+      foreground: desktopCommon,
+      rover: {...desktopCommon, bottom: 70},
+    }) as const
+)
+
+const nativeShared = Kb.Styles.isTablet
+  ? ({bottom: 0, position: 'absolute', right: 0} as const)
+  : ({bottom: 0, left: 0, position: 'absolute'} as const)
+
+const nativeStyles = Kb.Styles.styleSheetCreate(() => ({
+  background: {...nativeShared, bottom: 10},
+  container: nativeShared,
+  foreground: nativeShared,
+  rover: Kb.Styles.platformStyles({
+    common: {...nativeShared, bottom: 80},
+    isPhone: {left: Kb.Styles.dimensionWidth - 50},
+    isTablet: {right: 50},
+  }),
+}))
+
+export default Rover
diff --git a/shared/chat/inbox-search/index.tsx b/shared/chat/inbox-search/index.tsx
index bcb4a5c8c5a4..9c7d5ca9e99f 100644
--- a/shared/chat/inbox-search/index.tsx
+++ b/shared/chat/inbox-search/index.tsx
@@ -96,7 +96,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
         memberCount={hit.memberCount}
         inTeam={hit.inTeam}
         publicAdmins={hit.publicAdmins}
-        isSelected={!Kb.Styles.isMobile && selectedIndex === realIndex}
+        isSelected={!isMobile && selectedIndex === realIndex}
       />
     )
   }
@@ -111,7 +111,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
         onClick={onInstallBot}
         firstItem={index === 0}
         hideHover={true}
-        isSelected={!Kb.Styles.isMobile && selectedIndex === realIndex}
+        isSelected={!isMobile && selectedIndex === realIndex}
       />
     )
   }
@@ -197,7 +197,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
         ) : indexPercent > 0 && indexPercent < 100 ? (
           <Kb.Box2 direction="horizontal" gap="xtiny" style={styles.percentContainer} fullWidth={true}>
             <Kb.Text type="BodyTiny">Indexing...</Kb.Text>
-            {Kb.Styles.isMobile ? (
+            {isMobile ? (
               <Kb.ProgressBar style={styles.progressBar} ratio={ratio} />
             ) : (
               <Kb.WithTooltip
@@ -231,7 +231,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
     return item.sizeType === 'big' ? (
       <SelectableBigTeamChannel
         conversationIDKey={item.conversationIDKey}
-        isSelected={!Kb.Styles.isMobile && selectedIndex === realIndex}
+        isSelected={!isMobile && selectedIndex === realIndex}
         name={item.name}
         numSearchHits={numHits}
         maxSearchHits={inboxSearchMaxTextMessages}
@@ -240,7 +240,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
     ) : (
       <SelectableSmallTeam
         conversationIDKey={item.conversationIDKey}
-        isSelected={!Kb.Styles.isMobile && selectedIndex === realIndex}
+        isSelected={!isMobile && selectedIndex === realIndex}
         name={item.name}
         numSearchHits={numHits}
         maxSearchHits={inboxSearchMaxTextMessages}
@@ -371,7 +371,7 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
       <Rover />
       <Kb.SectionList
         ListHeaderComponent={header}
-        contentInsetAdjustmentBehavior={Kb.Styles.isMobile ? 'automatic' : undefined}
+        contentInsetAdjustmentBehavior={isMobile ? 'automatic' : undefined}
         stickySectionHeadersEnabled={true}
         renderSectionHeader={({section}: {section: Section}) => section.renderHeader(section)}
         keyboardShouldPersistTaps="handled"
@@ -400,7 +400,7 @@ const emptyUnreadPlaceholder = {
   type: 'name',
 } as const
 
-const rowHeight = Kb.Styles.isMobile ? 64 : 56
+const rowHeight = isMobile ? 64 : 56
 type OpenTeamProps = T.Chat.InboxSearchOpenTeamHit & {isSelected: boolean}
 const OpenTeamRow = (p: OpenTeamProps) => {
   const [hovering, setHovering] = React.useState(false)
@@ -468,7 +468,7 @@ const OpenTeamRow = (p: OpenTeamProps) => {
             type="BodySemibold"
             style={{color: isSelected ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.black}}
             title={name}
-            lineClamp={Kb.Styles.isMobile ? 1 : undefined}
+            lineClamp={isMobile ? 1 : undefined}
             ellipsizeMode="tail"
           >
             {name}
diff --git a/shared/chat/inbox/engine.tsx b/shared/chat/inbox/engine.tsx
index b8911f5a129e..faa8f2806e78 100644
--- a/shared/chat/inbox/engine.tsx
+++ b/shared/chat/inbox/engine.tsx
@@ -5,7 +5,6 @@ import * as T from '@/constants/types'
 import type * as EngineGen from '@/constants/rpc'
 import {navigateToInbox, navigateToThread as routerNavigateToThread} from '@/constants/router'
 import logger from '@/logger'
-import {isMobile} from '@/constants/platform'
 import {NotifyPopup} from '@/util/misc'
 import {showMain} from '@/util/storeless-actions'
 import {useShellState} from '@/stores/shell'
diff --git a/shared/chat/inbox/filter-row.tsx b/shared/chat/inbox/filter-row.tsx
index 4d693383eb52..805ae81e3d38 100644
--- a/shared/chat/inbox/filter-row.tsx
+++ b/shared/chat/inbox/filter-row.tsx
@@ -38,7 +38,7 @@ function ConversationFilterInput(ownProps: OwnProps) {
   }
 
   const onEnterKeyDown = (e?: React.BaseSyntheticEvent) => {
-    if (!Kb.Styles.isMobile) {
+    if (!isMobile) {
       if (e) {
         e.preventDefault()
         e.stopPropagation()
@@ -76,7 +76,7 @@ function ConversationFilterInput(ownProps: OwnProps) {
       showXOverride={true}
       value={filter}
       valueControlled={true}
-      focusOnMount={Kb.Styles.isMobile}
+      focusOnMount={isMobile}
       onChange={onChange}
       onCancel={onCancelSearch}
       onKeyDown={onKeyDown}
@@ -87,12 +87,12 @@ function ConversationFilterInput(ownProps: OwnProps) {
       <Kb.ClickableBox2 onClick={startSearch} style={styles.searchPlaceholder}>
         <Kb.Icon
           type="iconfont-search"
-          sizeType={Kb.Styles.isMobile ? 'Small' : 'Default'}
+          sizeType={isMobile ? 'Small' : 'Default'}
           color={Kb.Styles.globalColors.black_50}
           style={styles.searchPlaceholderIcon}
         />
         <Kb.Text type="BodySemibold" style={styles.searchPlaceholderText}>
-          {Kb.Styles.isMobile ? 'Search' : 'Search (\u2318K)'}
+          {isMobile ? 'Search' : 'Search (\u2318K)'}
         </Kb.Text>
       </Kb.ClickableBox2>
     </Kb.Box2>
@@ -101,7 +101,7 @@ function ConversationFilterInput(ownProps: OwnProps) {
     <Kb.Box2
       direction="horizontal"
       centerChildren={!Kb.Styles.isTablet}
-      gap={Kb.Styles.isMobile ? 'small' : showSearch ? 'xtiny' : undefined}
+      gap={isMobile ? 'small' : showSearch ? 'xtiny' : undefined}
       style={Kb.Styles.collapseStyles([
         styles.containerNotFiltering,
         !Kb.Styles.isPhone && styles.whiteBg,
diff --git a/shared/chat/inbox/get-options.tsx b/shared/chat/inbox/get-options.tsx
index 70d2bddc2484..ea363e9985b4 100644
--- a/shared/chat/inbox/get-options.tsx
+++ b/shared/chat/inbox/get-options.tsx
@@ -4,7 +4,7 @@ import {HeaderNewChatButton} from './new-chat-button'
 
 const buttonWidth = 132
 
-const mobileOptions = Kb.Styles.isIOS
+const mobileOptions = isIOS
   ? {
       // iOS 26: hidesSharedBackground prevents the glass circle around the custom button
       unstable_headerRightItems: () => [
@@ -39,7 +39,7 @@ const desktopOptions = {
 
 export default {
   inactiveBehavior: 'none' as const,
-  ...(Kb.Styles.isMobile ? mobileOptions : desktopOptions),
+  ...(isMobile ? mobileOptions : desktopOptions),
   headerTitle: () => (
     <Kb.Text type="BodyBig" center={true}>
       Chats
diff --git a/shared/chat/inbox/index.native.tsx b/shared/chat/inbox/index.native.tsx
deleted file mode 100644
index 18d1605a79de..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={C.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 (C.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={C.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/chat/inbox/metadata.tsx b/shared/chat/inbox/metadata.tsx
index efd8fa557f21..0663591af00d 100644
--- a/shared/chat/inbox/metadata.tsx
+++ b/shared/chat/inbox/metadata.tsx
@@ -10,7 +10,6 @@ import {
 } from '@/constants/router'
 import type * as Router2 from '@/constants/router'
 import logger from '@/logger'
-import {isMobile} from '@/constants/platform'
 import {ignorePromise, timeoutPromise} from '@/constants/utils'
 import {RPCError} from '@/util/errors'
 import * as Z from '@/util/zustand'
diff --git a/shared/chat/inbox/new-chat-button.tsx b/shared/chat/inbox/new-chat-button.tsx
index 146a7d52c448..a478caa38d74 100644
--- a/shared/chat/inbox/new-chat-button.tsx
+++ b/shared/chat/inbox/new-chat-button.tsx
@@ -3,8 +3,8 @@ import * as Kb from '@/common-adapters'
 import {LiquidGlassView, isLiquidGlassSupported} from '@callstack/liquid-glass'
 import {isEmptyInboxLayout, useInboxLayoutState} from './layout-state'
 
-const rainbowHeight = C.isElectron ? 32 : 36
-const rainbowWidth = C.isElectron ? 80 : 96
+const rainbowHeight = isElectron ? 32 : 36
+const rainbowWidth = isElectron ? 80 : 96
 const colorBarCommon = {
   height: rainbowHeight / 4,
   position: 'absolute',
@@ -43,7 +43,7 @@ const HeaderNewChatButton = () => {
   )
 
   // eslint-disable-next-line
-  if (C.isIOS && isLiquidGlassSupported) {
+  if (isIOS && isLiquidGlassSupported) {
     return (
       <LiquidGlassView
         interactive={true}
diff --git a/shared/chat/inbox/row/big-team-channel.tsx b/shared/chat/inbox/row/big-team-channel.tsx
index aad2e5893a91..556d2f78f48c 100644
--- a/shared/chat/inbox/row/big-team-channel.tsx
+++ b/shared/chat/inbox/row/big-team-channel.tsx
@@ -95,7 +95,7 @@ const BigTeamChannel = (props: Props) => {
         <Kb.Box2
           className="hover_background_color_blueGreyDark"
           direction="horizontal"
-          fullWidth={!Kb.Styles.isMobile}
+          fullWidth={!isMobile}
           style={Kb.Styles.collapseStyles([
             styles.channelBackground,
             selected && styles.selectedChannelBackground,
diff --git a/shared/chat/inbox/row/big-team-header.tsx b/shared/chat/inbox/row/big-team-header.tsx
index 400710cddc8d..93c69ac43d2a 100644
--- a/shared/chat/inbox/row/big-team-header.tsx
+++ b/shared/chat/inbox/row/big-team-header.tsx
@@ -71,8 +71,8 @@ const styles = Kb.Styles.styleSheetCreate(
       badge: {
         height: 10,
         position: 'absolute',
-        right: Kb.Styles.isMobile ? 4 : -4,
-        top: Kb.Styles.isMobile ? 7 : -2,
+        right: isMobile ? 4 : -4,
+        top: isMobile ? 7 : -2,
         width: 10,
       },
       badgeVisible: {
diff --git a/shared/chat/inbox/row/big-teams-divider.tsx b/shared/chat/inbox/row/big-teams-divider.tsx
index e685c83727fa..e51437c99c00 100644
--- a/shared/chat/inbox/row/big-teams-divider.tsx
+++ b/shared/chat/inbox/row/big-teams-divider.tsx
@@ -34,12 +34,12 @@ const BigTeamsDivider = (props: Props) => {
         <BigTeamsLabel />
         {badgeCount > 0 && <Kb.Badge badgeStyle={styles.badge} badgeNumber={badgeCount} />}
         <Kb.Box2 direction="horizontal" alignItems="flex-start" justifyContent="center" style={styles.icon}>
-          <Kb.Icon type="iconfont-arrow-up" color="inherit" fontSize={Kb.Styles.isMobile ? 20 : 16} />
+          <Kb.Icon type="iconfont-arrow-up" color="inherit" fontSize={isMobile ? 20 : 16} />
         </Kb.Box2>
         {onEdit ? (
           <Kb.BoxGrow2>
             <Kb.Box2 fullWidth={true} direction="vertical" alignItems="flex-end" justifyContent="center">
-              <Kb.Icon type="iconfont-ellipsis" fontSize={Kb.Styles.isMobile ? 20 : 16} onClick={onEdit} />
+              <Kb.Icon type="iconfont-ellipsis" fontSize={isMobile ? 20 : 16} onClick={onEdit} />
             </Kb.Box2>
           </Kb.BoxGrow2>
         ) : null}
@@ -104,7 +104,7 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       icon: {
         ...Kb.Styles.globalStyles.fillAbsolute,
-        marginTop: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.xtiny,
+        marginTop: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.xtiny,
       },
     }) as const
 )
diff --git a/shared/chat/inbox/row/big-teams-label.tsx b/shared/chat/inbox/row/big-teams-label.tsx
index 7d6d0570b039..1a270f6a4b22 100644
--- a/shared/chat/inbox/row/big-teams-label.tsx
+++ b/shared/chat/inbox/row/big-teams-label.tsx
@@ -20,7 +20,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     minHeight: 24,
   },
   container: {
-    height: Kb.Styles.isMobile ? 32 : 24,
+    height: isMobile ? 32 : 24,
     marginLeft: Kb.Styles.globalMargins.tiny,
   },
 
diff --git a/shared/chat/inbox/row/build-team.tsx b/shared/chat/inbox/row/build-team.tsx
index e5d2cd6611c0..e3ea613aab16 100644
--- a/shared/chat/inbox/row/build-team.tsx
+++ b/shared/chat/inbox/row/build-team.tsx
@@ -15,7 +15,7 @@ function BuildTeam() {
   }
 
   return (
-    <Kb.Box2 direction="vertical" gap={Kb.Styles.isMobile ? 'tiny' : 'xtiny'} style={styles.container}>
+    <Kb.Box2 direction="vertical" gap={isMobile ? 'tiny' : 'xtiny'} style={styles.container}>
       <Kb.Button fullWidth={true} label="Create a team" mode="Secondary" onClick={onCreateTeam} />
       <Kb.Button fullWidth={true} label="Join a team" mode="Secondary" onClick={onJoinTeam} />
     </Kb.Box2>
diff --git a/shared/chat/inbox/row/sizes.tsx b/shared/chat/inbox/row/sizes.tsx
index dc360b27f7da..229fb321cf74 100644
--- a/shared/chat/inbox/row/sizes.tsx
+++ b/shared/chat/inbox/row/sizes.tsx
@@ -3,14 +3,14 @@
 import * as Kb from '@/common-adapters'
 import type {ChatInboxRowType} from '../rowitem'
 
-export const smallRowHeight = Kb.Styles.isMobile ? 64 : 56
-export const bigRowHeight = Kb.Styles.isMobile ? 40 : 24
+export const smallRowHeight = isMobile ? 64 : 56
+export const bigRowHeight = isMobile ? 40 : 24
 export const bigHeaderHeight = 32
-export const floatingDivider = Kb.Styles.isMobile ? 48 : 40
+export const floatingDivider = isMobile ? 48 : 40
 export const inboxWidth = Kb.Styles.globalStyles.mediumSubNavWidth
 
 export const dividerHeight = (showingButton: boolean) => {
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return showingButton ? 68 : 44
   } else {
     return showingButton ? 84 : 41
diff --git a/shared/chat/inbox/row/small-team/index.tsx b/shared/chat/inbox/row/small-team/index.tsx
index c5b12d1d8932..c69b2e505a80 100644
--- a/shared/chat/inbox/row/small-team/index.tsx
+++ b/shared/chat/inbox/row/small-team/index.tsx
@@ -94,7 +94,7 @@ const SmallTeam = (p: Props) => {
 
   return (
     <SwipeConvActions conversationIDKey={conversationIDKey} onPress={onSelectConversation}>
-      {Kb.Styles.isMobile ? (
+      {isMobile ? (
         <Kb.Box2 direction="vertical" style={containerStyle}>
           {rowContents}
         </Kb.Box2>
@@ -140,7 +140,7 @@ const TopLine = (p: TopLineProps) => {
     styles.name,
     showBold && styles.bold,
     {color: usernameColor},
-    Kb.Styles.isMobile && {backgroundColor},
+    isMobile && {backgroundColor},
   ])
   const teamContainerStyle = Kb.Styles.collapseStyles([
     styles.teamTextStyle,
@@ -177,7 +177,7 @@ const TopLine = (p: TopLineProps) => {
       <Kb.Text key="timestamp" type="BodyTiny" className="conversation-timestamp" style={timestampStyle}>
         {timestampText}
       </Kb.Text>
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <TopLineGear conversationIDKey={conversationIDKey} subColor={subColor} isSelected={isSelected} />
       )}
       {hasBadge ? <Kb.Box2 direction="horizontal" key="unreadDot" style={styles.unreadDotStyle} /> : null}
@@ -299,7 +299,7 @@ const BottomLineDisplay = (p: BottomLineDisplayProps) => {
   }
 
   return (
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={Kb.Styles.isMobile ? {backgroundColor} : undefined}>
+    <Kb.Box2 direction="horizontal" fullWidth={true} style={isMobile ? {backgroundColor} : undefined}>
       {hasResetUsers && (
         <Kb.Meta title="reset" style={styles.alertMeta} backgroundColor={Kb.Styles.globalColors.red} />
       )}
@@ -439,7 +439,7 @@ const SnippetDecorationIcon = (p: {type: Kb.IconType; color: string}) => (
   <Kb.Icon
     color={p.color}
     type={p.type}
-    fontSize={Kb.Styles.isMobile ? 16 : 12}
+    fontSize={isMobile ? 16 : 12}
     style={styles.snippetDecoration}
   />
 )
@@ -497,7 +497,7 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       insideContainer: {
         flexGrow: 1,
-        height: Kb.Styles.isMobile ? 21 : 17,
+        height: isMobile ? 21 : 17,
       },
       name: {paddingRight: Kb.Styles.globalMargins.tiny},
       nameContainer: {
diff --git a/shared/chat/inbox/row/small-team/swipe-conv-actions/index.desktop.tsx b/shared/chat/inbox/row/small-team/swipe-conv-actions/index.desktop.tsx
deleted file mode 100644
index 63ef5ea17d50..000000000000
--- a/shared/chat/inbox/row/small-team/swipe-conv-actions/index.desktop.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as RowSizes from '../../sizes'
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-
-const SwipeConvActions = (props: Props) => {
-  return <div style={styles.row}>{props.children}</div>
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  row: {
-    flexShrink: 0,
-    height: RowSizes.smallRowHeight,
-    width: '100%',
-  },
-}))
-export default SwipeConvActions
diff --git a/shared/chat/inbox/row/small-team/swipe-conv-actions/index.native.tsx b/shared/chat/inbox/row/small-team/swipe-conv-actions/index.tsx
similarity index 82%
rename from shared/chat/inbox/row/small-team/swipe-conv-actions/index.native.tsx
rename to shared/chat/inbox/row/small-team/swipe-conv-actions/index.tsx
index a7cfe6fecaaf..1c658299eff8 100644
--- a/shared/chat/inbox/row/small-team/swipe-conv-actions/index.native.tsx
+++ b/shared/chat/inbox/row/small-team/swipe-conv-actions/index.tsx
@@ -5,7 +5,7 @@ import * as Reanimated from 'react-native-reanimated'
 import * as RowSizes from '../../sizes'
 import type {Props} from './index.shared'
 import {Pressable, View} from 'react-native'
-import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row.native'
+import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row'
 import {useOpenedRowState} from '../../opened-row-state'
 import {useInboxRowSmall} from '@/stores/inbox-rows'
 import {hideConversation, markConversationUnread, muteConversation} from '@/chat/conversation/status-actions'
@@ -36,10 +36,10 @@ const Action = (p: {
   })
 
   return (
-    <Reanimated.default.View style={[styles.action, as]}>
-      <Pressable style={[styles.rightAction, {backgroundColor: color as string}]} onPress={onClick}>
+    <Reanimated.default.View style={[nativeStyles.action, as]}>
+      <Pressable style={[nativeStyles.rightAction, {backgroundColor: color as string}]} onPress={onClick}>
         <Kb.Icon type={iconType} color={Kb.Styles.globalColors.white} />
-        <Kb.Text type="BodySmall" style={styles.actionText}>
+        <Kb.Text type="BodySmall" style={nativeStyles.actionText}>
           {text}
         </Kb.Text>
       </Pressable>
@@ -53,14 +53,29 @@ function SwipeConvActions(p: Props) {
   const wasOpenRef = React.useRef(isOpened)
   const setOpenedRow = useOpenedRowState(s => s.dispatch.setOpenRow)
   const swipeableRef = React.useRef<SwipeableMethods | null>(null)
+  const isMuted = useInboxRowSmall(conversationIDKey).isMuted
+
+  React.useEffect(() => {
+    if (!isOpened && wasOpenRef.current) {
+      swipeableRef.current?.close()
+    }
+  }, [isOpened])
+
+  React.useEffect(() => {
+    wasOpenRef.current = isOpened
+  }, [isOpened])
+
+  if (!isMobile) {
+    return <div style={Kb.Styles.castStyleDesktop(desktopStyles.row)}>{p.children}</div>
+  }
+
+  const {children, onPress} = p
+
   const closeOpenedRow = () => {
     if (isOpened) {
       setOpenedRow(Chat.noConversationIDKey)
     }
   }
-  const {children, onPress} = p
-
-  const isMuted = useInboxRowSmall(conversationIDKey).isMuted
 
   const onMarkAsUnread = () => {
     markConversationUnread(conversationIDKey)
@@ -81,19 +96,9 @@ function SwipeConvActions(p: Props) {
     setOpenedRow(conversationIDKey)
   }
 
-  React.useEffect(() => {
-    if (!isOpened && wasOpenRef.current) {
-      swipeableRef.current?.close()
-    }
-  }, [isOpened])
-
-  React.useEffect(() => {
-    wasOpenRef.current = isOpened
-  }, [isOpened])
-
   const renderRightActions = (progress: Reanimated.SharedValue<number>) => {
     return (
-      <View style={[styles.container, {width: 3 * actionWidth}]}>
+      <View style={[nativeStyles.container, {width: 3 * actionWidth}]}>
         <Action
           text="Unread"
           color={Kb.Styles.globalColors.blue}
@@ -123,13 +128,13 @@ function SwipeConvActions(p: Props) {
   }
 
   const inner = onPress ? (
-    <Pressable onPress={onPress} style={styles.touchable} testID="inboxRow">
-      <View accessible={false} style={styles.touchable}>
+    <Pressable onPress={onPress} style={nativeStyles.touchable} testID="inboxRow">
+      <View accessible={false} style={nativeStyles.touchable}>
         {children}
       </View>
     </Pressable>
   ) : (
-    <View style={styles.touchable} testID="inboxRow">
+    <View style={nativeStyles.touchable} testID="inboxRow">
       {children}
     </View>
   )
@@ -139,14 +144,22 @@ function SwipeConvActions(p: Props) {
       ref={swipeableRef}
       onSwipeableOpenStartDrag={onSwipeableOpenStartDrag}
       renderRightActions={renderRightActions}
-      containerStyle={styles.row}
+      containerStyle={nativeStyles.row}
     >
       {inner}
     </Swipeable>
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(
+const desktopStyles = Kb.Styles.styleSheetCreate(() => ({
+  row: {
+    flexShrink: 0,
+    height: RowSizes.smallRowHeight,
+    width: '100%',
+  },
+}))
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       action: {
diff --git a/shared/chat/inbox/row/start-new-chat.tsx b/shared/chat/inbox/row/start-new-chat.tsx
index d16e250e6f0f..8fab54874519 100644
--- a/shared/chat/inbox/row/start-new-chat.tsx
+++ b/shared/chat/inbox/row/start-new-chat.tsx
@@ -6,7 +6,7 @@ type Props = {
 }
 
 const StartNewChat = (props: Props) => {
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} justifyContent="center" style={styles.container} relative={true}>
         <Kb.ClickableBox2 style={styles.clickableBox} onClick={props.onNewChat}>
@@ -41,7 +41,7 @@ const styles = Kb.Styles.styleSheetCreate(
         flexDirection: 'row',
       },
       container: {
-        backgroundColor: Kb.Styles.isMobile
+        backgroundColor: isMobile
           ? undefined
           : Kb.Styles.globalColors.blueGrey,
         minHeight: 48,
diff --git a/shared/chat/inbox/row/teams-divider.tsx b/shared/chat/inbox/row/teams-divider.tsx
index 7f74187ee051..121f1cbccb76 100644
--- a/shared/chat/inbox/row/teams-divider.tsx
+++ b/shared/chat/inbox/row/teams-divider.tsx
@@ -16,7 +16,7 @@ function TeamsDivider(props: Props) {
   const {badgeCount = 0, showButton, style, hiddenCountDelta, toggle, smallTeamsExpanded} = props
   let {hiddenCount} = props
 
-  if (!Kb.Styles.isMobile) {
+  if (!isMobile) {
     hiddenCount += hiddenCountDelta ?? 0
   }
 
diff --git a/shared/chat/inbox/search-row.tsx b/shared/chat/inbox/search-row.tsx
index 905f77609085..2abc183295bb 100644
--- a/shared/chat/inbox/search-row.tsx
+++ b/shared/chat/inbox/search-row.tsx
@@ -28,7 +28,7 @@ export default function InboxSearchRow(ownProps: OwnProps) {
     })
   )
   const {showEmptyInbox} = chatState
-  const showStartNewChat = !showNewChatButton && !C.isMobile && !isSearching && showEmptyInbox
+  const showStartNewChat = !showNewChatButton && !isMobile && !isSearching && showEmptyInbox
   const showFilter = !!forceShowFilter || isSearching || !showEmptyInbox
 
   const appendNewChatBuilder = C.Router2.appendNewChatBuilder
diff --git a/shared/chat/inbox/use-header-portal.desktop.tsx b/shared/chat/inbox/use-header-portal.desktop.tsx
deleted file mode 100644
index 7f35bee8fe87..000000000000
--- a/shared/chat/inbox/use-header-portal.desktop.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {createPortal} from 'react-dom'
-import SearchRow from './search-row'
-import {useInboxHeaderPortalNode} from './header-portal-state'
-import type {InboxSearchController} from './use-inbox-search'
-
-export default function useInboxHeaderPortal(search: InboxSearchController) {
-  const portalNode = useInboxHeaderPortalNode()
-  return portalNode
-    ? createPortal(<SearchRow forceShowFilter={true} search={search} showNewChatButton={true} showSearch={true} />, portalNode)
-    : null
-}
diff --git a/shared/chat/inbox/use-header-portal.native.tsx b/shared/chat/inbox/use-header-portal.tsx
similarity index 63%
rename from shared/chat/inbox/use-header-portal.native.tsx
rename to shared/chat/inbox/use-header-portal.tsx
index 513c295b6d2f..e50d2e26dca9 100644
--- a/shared/chat/inbox/use-header-portal.native.tsx
+++ b/shared/chat/inbox/use-header-portal.tsx
@@ -1,30 +1,33 @@
 import * as C from '@/constants'
 import * as React from 'react'
+import {createPortal} from 'react-dom'
 import SearchRow from './search-row'
-import {setInboxHeaderPortalContent} from './header-portal-state'
+import {useInboxHeaderPortalNode, setInboxHeaderPortalContent} from './header-portal-state'
 import type {InboxSearchController} from './use-inbox-search'
 
 export default function useInboxHeaderPortal(search: InboxSearchController) {
+  const portalNode = useInboxHeaderPortalNode()
+
   const content = React.useMemo(
     () => <SearchRow forceShowFilter={true} search={search} showNewChatButton={true} showSearch={true} />,
     [search]
   )
 
   React.useEffect(() => {
-    if (!C.isTablet) {
-      return
-    }
+    if (!isMobile || !C.isTablet) return
     setInboxHeaderPortalContent(content)
   }, [content])
 
   React.useEffect(() => {
-    if (!C.isTablet) {
-      return
-    }
+    if (!isMobile || !C.isTablet) return
     return () => {
       setInboxHeaderPortalContent(null)
     }
   }, [])
 
+  if (!isMobile) {
+    return portalNode ? createPortal(content, portalNode) : null
+  }
+
   return null
 }
diff --git a/shared/chat/inbox/use-inbox-search.tsx b/shared/chat/inbox/use-inbox-search.tsx
index e2324961c189..c4303b7df210 100644
--- a/shared/chat/inbox/use-inbox-search.tsx
+++ b/shared/chat/inbox/use-inbox-search.tsx
@@ -4,7 +4,6 @@ import * as T from '@/constants/types'
 import logger from '@/logger'
 import {useShellState} from '@/stores/shell'
 import {RPCError} from '@/util/errors'
-import {isMobile} from '@/constants/platform'
 import * as React from 'react'
 import {ensureInboxSearchMetas} from './metadata'
 import {cancelActiveInboxSearchRPC, searchInboxRPC} from '../search-rpc'
diff --git a/shared/chat/inbox/use-inbox-state.tsx b/shared/chat/inbox/use-inbox-state.tsx
index b5a6dddbfa0b..eb9f6f1460aa 100644
--- a/shared/chat/inbox/use-inbox-state.tsx
+++ b/shared/chat/inbox/use-inbox-state.tsx
@@ -140,7 +140,7 @@ export function useInboxState(
   })
 
   React.useEffect(() => {
-    const ready = loggedIn && !!username && (!C.isMobile || isFocused)
+    const ready = loggedIn && !!username && (!isMobile || isFocused)
     if (!ready || !refreshInbox || handledRefreshNonceRef.current === refreshInbox.nonce) {
       return
     }
@@ -157,7 +157,7 @@ export function useInboxState(
 
   React.useEffect(() => {
     const ready = loggedIn && !!username
-    const shouldRetry = !inboxHasLoaded && ready && (!C.isMobile || isFocused)
+    const shouldRetry = !inboxHasLoaded && ready && (!isMobile || isFocused)
     if (shouldRetry) {
       C.ignorePromise(inboxRefresh('componentNeverLoaded'))
     }
@@ -216,7 +216,7 @@ export function useInboxState(
   }, [inboxNumSmallRowsLoaded, loadInboxNumSmallRows, loggedIn, username])
 
   React.useEffect(() => {
-    const ready = loggedIn && !!username && (!C.isMobile || isFocused)
+    const ready = loggedIn && !!username && (!isMobile || isFocused)
     if (!ready || isSearching || !inboxHasLoaded || inboxRows.length > 0 || inboxRetriedOnCurrentEmpty) {
       return
     }
diff --git a/shared/chat/location-map.desktop.tsx b/shared/chat/location-map.desktop.tsx
deleted file mode 100644
index 8ff53c4186da..000000000000
--- a/shared/chat/location-map.desktop.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {openURL} from '@/util/misc'
-
-type Props = {
-  height: number
-  mapSrc: string
-  onLoad?: () => void
-  width: number
-}
-
-const LocationMap = (props: Props) => {
-  const {height, mapSrc, width} = props
-  const [mapLoaded, setMapLoaded] = React.useState(false)
-  const onLoad = () => {
-    setMapLoaded(true)
-    if (props.onLoad) {
-      props.onLoad()
-    }
-  }
-  return (
-    <Kb.Box2 direction="vertical" style={styles.outer}>
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} gap="small" justifyContent="center" style={styles.container}>
-        {!!mapSrc && <Kb.Image src={mapSrc} style={{height, width}} onLoad={onLoad} />}
-        {!mapLoaded && <Kb.ProgressIndicator style={styles.loading} />}
-        <Kb.Banner color="white" style={styles.banner}>
-          <Kb.BannerParagraph
-            bannerColor="white"
-            content={[
-              'Your location is protected. ',
-              {onClick: () => { void openURL('https://book.keybase.io/docs/chat/location') }, text: 'Learn more'},
-            ]}
-          />
-        </Kb.Banner>
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-export default LocationMap
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      banner: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        borderBottomWidth: 1,
-        borderColor: Kb.Styles.globalColors.black_10,
-        left: 0,
-        position: 'absolute',
-        top: 0,
-      },
-      container: {
-        ...Kb.Styles.globalStyles.fillAbsolute,
-        alignItems: 'center',
-      },
-      loading: {
-        bottom: '50%',
-        left: '50%',
-        marginBottom: -12,
-        marginLeft: -12,
-        marginRight: -12,
-        marginTop: -12,
-        position: 'absolute',
-        right: '50%',
-        top: '50%',
-        width: 24,
-      },
-      outer: {
-        height: 300,
-        width: 300,
-      },
-    }) as const
-)
diff --git a/shared/chat/location-map.native.tsx b/shared/chat/location-map.tsx
similarity index 66%
rename from shared/chat/location-map.native.tsx
rename to shared/chat/location-map.tsx
index fa260941c884..4fee0e7bb827 100644
--- a/shared/chat/location-map.native.tsx
+++ b/shared/chat/location-map.tsx
@@ -14,12 +14,18 @@ const LocationMap = (props: Props) => {
   const [mapLoaded, setMapLoaded] = React.useState(false)
   const onLoad = () => {
     setMapLoaded(true)
-    if (props.onLoad) {
-      props.onLoad()
-    }
+    props.onLoad?.()
   }
-  return (
-    <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} gap="small" justifyContent="center" style={styles.container}>
+
+  const inner = (
+    <Kb.Box2
+      direction="vertical"
+      fullHeight={true}
+      fullWidth={true}
+      gap="small"
+      justifyContent="center"
+      style={styles.container}
+    >
       {!!mapSrc && <Kb.Image src={mapSrc} style={{height, width}} onLoad={onLoad} />}
       {!mapLoaded && <Kb.ProgressIndicator style={styles.loading} />}
       <Kb.Banner color="white" style={styles.banner}>
@@ -27,15 +33,18 @@ const LocationMap = (props: Props) => {
           bannerColor="white"
           content={[
             'Your location is protected. ',
-            {onClick: () => openURL('https://book.keybase.io/docs/chat/location'), text: 'Learn more'},
+            {onClick: () => { void openURL('https://book.keybase.io/docs/chat/location') }, text: 'Learn more'},
           ]}
         />
       </Kb.Banner>
     </Kb.Box2>
   )
-}
 
-export default LocationMap
+  if (!isMobile) {
+    return <Kb.Box2 direction="vertical" style={styles.outer}>{inner}</Kb.Box2>
+  }
+  return inner
+}
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
@@ -48,9 +57,14 @@ const styles = Kb.Styles.styleSheetCreate(
         position: 'absolute',
         top: 0,
       },
-      container: {
-        ...Kb.Styles.globalStyles.fillAbsolute,
-      },
+      container: Kb.Styles.platformStyles({
+        common: {
+          ...Kb.Styles.globalStyles.fillAbsolute,
+        },
+        isElectron: {
+          alignItems: 'center',
+        },
+      }),
       loading: {
         bottom: '50%',
         left: '50%',
@@ -63,5 +77,11 @@ const styles = Kb.Styles.styleSheetCreate(
         top: '50%',
         width: 24,
       },
+      outer: {
+        height: 300,
+        width: 300,
+      },
     }) as const
 )
+
+export default LocationMap
diff --git a/shared/chat/payments/status/index.tsx b/shared/chat/payments/status/index.tsx
index 5a6cac74ac89..5c33feced12d 100644
--- a/shared/chat/payments/status/index.tsx
+++ b/shared/chat/payments/status/index.tsx
@@ -95,7 +95,7 @@ const PaymentStatus = (props: Props) => {
       visible={showPopup}
     />
   ) : null
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <>
       {text}
       {popups}
diff --git a/shared/chat/pdf/index.desktop.tsx b/shared/chat/pdf/index.desktop.tsx
deleted file mode 100644
index 1b19c57de018..000000000000
--- a/shared/chat/pdf/index.desktop.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as C from '@/constants'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import {useNavigation} from '@react-navigation/native'
-import type {Props} from './index.shared'
-import * as T from '@/constants/types'
-import {openLocalPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions'
-import {attachmentDownloadMessage, takePDFMessage} from '../conversation/attachment-actions'
-import {useConversationMessage} from '../conversation/data-hooks'
-
-const ChatPDF = (props: Props) => {
-  const {messageID} = props
-  const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey
-  const [initialMessage] = React.useState(() => takePDFMessage(conversationIDKey, messageID))
-  const loadedMessage = useConversationMessage(conversationIDKey, messageID)
-  const message = loadedMessage?.type === 'attachment' ? loadedMessage : initialMessage
-  const title = message?.title || message?.fileName || 'PDF'
-  const url = props.url ?? message?.fileURL
-  const navigation = useNavigation()
-  const canDownload = !!message
-
-  const onDownload = () => {
-    if (message) {
-      attachmentDownloadMessage(conversationIDKey, message)
-    }
-    openLocalPathInSystemFileManagerDesktop(C.downloadFolder)
-  }
-
-  React.useEffect(() => {
-    navigation.setOptions({title})
-  }, [navigation, title])
-
-  return (
-    <>
-      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
-        <embed src={url} width="100%" height="100%" />
-      </Kb.Box2>
-      <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
-        <Kb.ButtonBar small={true}>
-          <Kb.Button type="Default" label="Download" onClick={onDownload} disabled={!canDownload} />
-        </Kb.ButtonBar>
-      </Kb.Box2>
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  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,
-    },
-    isElectron: {
-      borderBottomLeftRadius: Kb.Styles.borderRadius,
-      borderBottomRightRadius: Kb.Styles.borderRadius,
-      overflow: 'hidden',
-    },
-  }),
-}))
-
-export default ChatPDF
diff --git a/shared/chat/pdf/index.native.tsx b/shared/chat/pdf/index.native.tsx
deleted file mode 100644
index 74f17ac9b227..000000000000
--- a/shared/chat/pdf/index.native.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-
-const ChatPDF = (props: Props) => {
-  const {url} = props
-  const [error, setError] = React.useState('')
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
-      {url && !error ? (
-        <Kb.WebView
-          originWhitelist={['*']}
-          renderLoading={() => (
-            <Kb.Box2 direction="vertical" justifyContent="center" style={styles.progressContainer} fullWidth={true} fullHeight={true}>
-              <Kb.ProgressIndicator white={true} />
-            </Kb.Box2>
-          )}
-          url={url}
-          pinnedURLMode={true}
-          onError={err => setError(err)}
-          style={styles.webViewContainer}
-        />
-      ) : (
-        <Kb.Text type="BodySmallError">Can&apos;t load this file {error}</Kb.Text>
-      )}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  progressContainer: {
-    position: 'absolute',
-  },
-  webViewContainer: {margin: Kb.Styles.globalMargins.xtiny},
-}))
-
-export default ChatPDF
diff --git a/shared/chat/pdf/index.tsx b/shared/chat/pdf/index.tsx
new file mode 100644
index 000000000000..527c1b300d26
--- /dev/null
+++ b/shared/chat/pdf/index.tsx
@@ -0,0 +1,107 @@
+import * as C from '@/constants'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import {useNavigation} from '@react-navigation/native'
+import type {Props} from './index.shared'
+import * as T from '@/constants/types'
+import {openLocalPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions'
+import {attachmentDownloadMessage, takePDFMessage} from '../conversation/attachment-actions'
+import {useConversationMessage} from '../conversation/data-hooks'
+
+const ChatPDF = (props: Props) => {
+  const {messageID} = props
+  const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey
+  const [initialMessage] = React.useState(() =>
+    isMobile ? undefined : takePDFMessage(conversationIDKey, messageID)
+  )
+  const [error, setError] = React.useState('')
+  const loadedMessage = useConversationMessage(conversationIDKey, messageID)
+  const message = loadedMessage?.type === 'attachment' ? loadedMessage : initialMessage
+  const title = message?.title || message?.fileName || 'PDF'
+  const url = props.url ?? message?.fileURL
+  const navigation = useNavigation()
+
+  React.useEffect(() => {
+    if (isMobile) return
+    navigation.setOptions({title})
+  }, [navigation, title])
+
+  if (!isMobile) {
+    const canDownload = !!message
+    const onDownload = () => {
+      if (message) {
+        attachmentDownloadMessage(conversationIDKey, message)
+      }
+      openLocalPathInSystemFileManagerDesktop(C.downloadFolder)
+    }
+
+    return (
+      <>
+        <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+          <embed src={url} width="100%" height="100%" />
+        </Kb.Box2>
+        <Kb.Box2
+          direction="vertical"
+          centerChildren={true}
+          fullWidth={true}
+          style={desktopStyles.modalFooter}
+        >
+          <Kb.ButtonBar small={true}>
+            <Kb.Button type="Default" label="Download" onClick={onDownload} disabled={!canDownload} />
+          </Kb.ButtonBar>
+        </Kb.Box2>
+      </>
+    )
+  }
+
+  return (
+    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+      {url && !error ? (
+        <Kb.WebView
+          originWhitelist={['*']}
+          renderLoading={() => (
+            <Kb.Box2
+              direction="vertical"
+              justifyContent="center"
+              style={nativeStyles.progressContainer}
+              fullWidth={true}
+              fullHeight={true}
+            >
+              <Kb.ProgressIndicator white={true} />
+            </Kb.Box2>
+          )}
+          url={url}
+          pinnedURLMode={true}
+          onError={err => setError(err)}
+          style={nativeStyles.webViewContainer}
+        />
+      ) : (
+        <Kb.Text type="BodySmallError">Can&apos;t load this file {error}</Kb.Text>
+      )}
+    </Kb.Box2>
+  )
+}
+
+const desktopStyles = Kb.Styles.styleSheetCreate(() => ({
+  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,
+    },
+    isElectron: {
+      borderBottomLeftRadius: Kb.Styles.borderRadius,
+      borderBottomRightRadius: Kb.Styles.borderRadius,
+      overflow: 'hidden',
+    },
+  }),
+}))
+
+const nativeStyles = Kb.Styles.styleSheetCreate(() => ({
+  progressContainer: {position: 'absolute'},
+  webViewContainer: {margin: Kb.Styles.globalMargins.xtiny},
+}))
+
+export default ChatPDF
diff --git a/shared/chat/routes.tsx b/shared/chat/routes.tsx
index 3951940eb0ce..2f56d5b65e5a 100644
--- a/shared/chat/routes.tsx
+++ b/shared/chat/routes.tsx
@@ -73,10 +73,10 @@ const BotInstallHeaderLeft = () => {
       </Kb.Text>
     )
   }
-  if (Kb.Styles.isMobile || subScreen === 'install') {
+  if (isMobile || subScreen === 'install') {
     const label =
       subScreen === 'install' ? (
-        Kb.Styles.isMobile ? (
+        isMobile ? (
           'Back'
         ) : (
           <Kb.Icon type="iconfont-arrow-left" />
@@ -98,7 +98,7 @@ const BotInstallHeaderLeft = () => {
 const AddToChannelHeaderTitle = ({teamID}: {teamID: T.Teams.TeamID}) => {
   const title = useModalHeaderState(s => s.title)
   const displayTitle = title || 'Add to channel'
-  if (Kb.Styles.isMobile) return <>{displayTitle}</>
+  if (isMobile) return <>{displayTitle}</>
   return <ModalTitle teamID={teamID} title={displayTitle} />
 }
 
@@ -106,7 +106,7 @@ const AddToChannelHeaderRight = () => {
   const {enabled, waiting, onAction} = useModalHeaderState(
     C.useShallow(s => ({enabled: s.actionEnabled, onAction: s.onAction, waiting: s.actionWaiting}))
   )
-  if (!Kb.Styles.isMobile) return null
+  if (!isMobile) return null
   return (
     <Kb.Text
       type="BodyBigLink"
@@ -183,7 +183,7 @@ export const newModalRoutes = defineRouteMap({
     React.lazy(async () => import('./conversation/attachment-fullscreen/screen')),
     {
       getOptions: {
-        ...(C.isIOS ? {orientation: 'all', presentation: 'transparentModal'} : {}),
+        ...(isIOS ? {orientation: 'all', presentation: 'transparentModal'} : {}),
         headerShown: false,
         modalStyle: {flex: 1, maxHeight: 9999, width: '100%'},
         overlayStyle: {
@@ -241,7 +241,7 @@ export const newModalRoutes = defineRouteMap({
   ),
   chatInfoPanel: makeChatScreen(
     React.lazy(async () => import('./conversation/info-panel')),
-    {getOptions: C.isMobile ? undefined : {modalStyle: {height: '80%', width: '80%'}}}
+    {getOptions: isMobile ? undefined : {modalStyle: {height: '80%', width: '80%'}}}
   ),
   chatInstallBot: makeChatScreen(
     React.lazy(async () => import('./conversation/bot/install')),
@@ -249,7 +249,7 @@ export const newModalRoutes = defineRouteMap({
       getOptions: {
         headerLeft: () => <BotInstallHeaderLeft />,
         headerTitle: () => <BotInstallHeaderTitle />,
-        ...(C.isMobile ? undefined : {modalStyle: {height: 660, maxHeight: 660}}),
+        ...(isMobile ? undefined : {modalStyle: {height: 660, maxHeight: 660}}),
       },
       skipProvider: true,
     }
@@ -276,7 +276,7 @@ export const newModalRoutes = defineRouteMap({
     React.lazy(async () => import('./pdf')),
     {
       getOptions: p => ({
-        headerRight: C.isMobile ? () => <PDFShareButton url={p.route.params.url} /> : undefined,
+        headerRight: isMobile ? () => <PDFShareButton url={p.route.params.url} /> : undefined,
         modalStyle: {height: '80%', maxHeight: '80%', width: '80%'},
         overlayStyle: {alignSelf: 'stretch'},
         title: 'PDF',
diff --git a/shared/chat/selectable-big-team-channel.tsx b/shared/chat/selectable-big-team-channel.tsx
index cddcf81d59f0..346576704c67 100644
--- a/shared/chat/selectable-big-team-channel.tsx
+++ b/shared/chat/selectable-big-team-channel.tsx
@@ -47,7 +47,7 @@ const SelectableBigTeamChannel = (props: Props) => {
               {color: props.isSelected ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.black},
             ])}
             title={props.teamname}
-            lineClamp={Kb.Styles.isMobile ? 1 : undefined}
+            lineClamp={isMobile ? 1 : undefined}
             ellipsizeMode="tail"
           >
             {props.teamname}
@@ -60,7 +60,7 @@ const SelectableBigTeamChannel = (props: Props) => {
               {color: props.isSelected ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.black},
             ])}
             title={`#${props.channelname}`}
-            lineClamp={Kb.Styles.isMobile ? 1 : undefined}
+            lineClamp={isMobile ? 1 : undefined}
             ellipsizeMode="tail"
           >
             &nbsp;#
@@ -110,7 +110,7 @@ const SelectableBigTeamChannel = (props: Props) => {
   )
 }
 
-const rowHeight = Kb.Styles.isMobile ? 64 : 56
+const rowHeight = isMobile ? 64 : 56
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
diff --git a/shared/chat/selectable-small-team.tsx b/shared/chat/selectable-small-team.tsx
index f83a16fdf837..9a880c861264 100644
--- a/shared/chat/selectable-small-team.tsx
+++ b/shared/chat/selectable-small-team.tsx
@@ -99,7 +99,7 @@ const SelectableSmallTeam = (props: Props) => {
   )
 }
 
-const rowHeight = Kb.Styles.isMobile ? 64 : 56
+const rowHeight = isMobile ? 64 : 56
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   badge: {
diff --git a/shared/chat/send-to-chat/conversation-list/conversation-list.tsx b/shared/chat/send-to-chat/conversation-list/conversation-list.tsx
index 291303991f6f..fa5e3299934a 100644
--- a/shared/chat/send-to-chat/conversation-list/conversation-list.tsx
+++ b/shared/chat/send-to-chat/conversation-list/conversation-list.tsx
@@ -32,7 +32,7 @@ const _itemRenderer = (index: number, row: Row) => {
           styles.results,
           {
             backgroundColor:
-              !Kb.Styles.isMobile && row.isSelected
+              !isMobile && row.isSelected
                 ? Kb.Styles.globalColors.blue
                 : Kb.Styles.globalColors.white,
           },
diff --git a/shared/chat/send-to-chat/index.tsx b/shared/chat/send-to-chat/index.tsx
index 010e2facbec6..d78bc3ddf760 100644
--- a/shared/chat/send-to-chat/index.tsx
+++ b/shared/chat/send-to-chat/index.tsx
@@ -156,7 +156,7 @@ export const DesktopSendToChatRender = (props: DesktopSendToChatRenderProps) =>
   )
 }
 
-const SendToChat = Kb.Styles.isMobile ? MobileSendToChatRoutable : DesktopSendToChat
+const SendToChat = isMobile ? MobileSendToChatRoutable : DesktopSendToChat
 
 export default SendToChat
 
diff --git a/shared/common-adapters/animation.desktop.tsx b/shared/common-adapters/animation.desktop.tsx
deleted file mode 100644
index d01196d9c37c..000000000000
--- a/shared/common-adapters/animation.desktop.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react'
-import {Box2} from './box'
-import lottie from 'lottie-web'
-import type {Props, AnimationType} from './animation.shared'
-export type {AnimationType} from './animation.shared'
-
-const defaultDimension = 16
-
-function Animation(props: Props) {
-  const {style, width, height, animationType} = props
-  const elementRef = React.useRef<HTMLDivElement>(null)
-  const lottieInstance = React.useRef<null | ReturnType<typeof lottie.loadAnimation>>(null)
-
-  const data = React.useRef(require('./animation-data.json') as {[key in AnimationType]: unknown})
-  React.useEffect(() => {
-    if (elementRef.current) {
-      const animationData = data.current[animationType]
-      lottieInstance.current?.destroy()
-      lottieInstance.current = lottie.loadAnimation({
-        animationData,
-        container: elementRef.current,
-      })
-    }
-    return () => {
-      lottieInstance.current?.destroy()
-      lottieInstance.current = null
-    }
-  }, [animationType])
-  return (
-    <Box2 direction="vertical" className={props.className} style={props.containerStyle}>
-      <div
-        style={
-          {
-            height: height ?? defaultDimension,
-            width: width ?? defaultDimension,
-            ...style,
-          } as React.CSSProperties
-        }
-        ref={elementRef}
-      />
-    </Box2>
-  )
-}
-
-export default Animation
diff --git a/shared/common-adapters/animation.native.tsx b/shared/common-adapters/animation.native.tsx
deleted file mode 100644
index d70ecddc860a..000000000000
--- a/shared/common-adapters/animation.native.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import {Box2} from './box'
-import LottieView from 'lottie-react-native'
-import type {Props, AnimationType} from './animation.shared'
-// prettier-ignore
-type AnimationObject = {
-  v: string; fr: number; ip: number; op: number; w: number; h: number;
-  nm: string; ddd: number; assets: unknown[]; layers: unknown[]
-}
-
-function Animation(props: Props) {
-  const {animationType} = props
-  const [data] = React.useState(
-    () => require('./animation-data.json') as {[key in AnimationType]: AnimationObject}
-  )
-  const source = data[animationType]
-
-  return (
-    <Box2 direction="vertical" style={props.containerStyle}>
-      <LottieView autoPlay={true} loop={true} source={source} style={props.style ?? noStyle} />
-    </Box2>
-  )
-}
-
-const noStyle = {flexGrow: 1, flexShrink: 1}
-
-export default Animation
diff --git a/shared/common-adapters/animation.tsx b/shared/common-adapters/animation.tsx
new file mode 100644
index 000000000000..b8f8640672e4
--- /dev/null
+++ b/shared/common-adapters/animation.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react'
+import {Box2} from './box'
+import type * as Styles from '@/styles'
+import type {Props, AnimationType} from './animation.shared'
+export type {AnimationType} from './animation.shared'
+
+// prettier-ignore
+type AnimationObject = {
+  v: string; fr: number; ip: number; op: number; w: number; h: number;
+  nm: string; ddd: number; assets: unknown[]; layers: unknown[]
+}
+
+const defaultDimension = 16
+const noStyle = {flexGrow: 1, flexShrink: 1}
+
+function Animation(props: Props) {
+  const {animationType} = props
+  const elementRef = React.useRef<HTMLDivElement | null>(null)
+  const [data] = React.useState(
+    () => require('./animation-data.json') as {[key in AnimationType]: AnimationObject}
+  )
+
+  React.useEffect(() => {
+    if (isMobile) return
+    const el = elementRef.current
+    if (el) {
+      // lottie-web is a CJS UMD module; require() returns module.exports directly (no .default wrapper)
+      const lottie = require('lottie-web') as {
+        loadAnimation: (opts: {animationData: unknown; container: Element}) => {destroy: () => void}
+      }
+      const instance = lottie.loadAnimation({
+        animationData: data[animationType],
+        container: el,
+      })
+      return () => {
+        instance.destroy()
+      }
+    }
+    return undefined
+  }, [animationType, data])
+
+  if (!isMobile) {
+    const {style, width, height} = props
+    return (
+      <Box2 direction="vertical" className={props.className} style={props.containerStyle}>
+        <div
+          style={
+            {
+              height: height ?? defaultDimension,
+              width: width ?? defaultDimension,
+              ...style,
+            } as React.CSSProperties
+          }
+          ref={elementRef}
+        />
+      </Box2>
+    )
+  }
+
+  const LottieView = (
+    require('lottie-react-native') as {
+      default: React.ComponentType<{
+        autoPlay?: boolean
+        loop?: boolean
+        source: AnimationObject
+        style?: Styles.StylesCrossPlatform
+      }>
+    }
+  ).default
+
+  const source = data[animationType]
+  return (
+    <Box2 direction="vertical" style={props.containerStyle}>
+      <LottieView autoPlay={true} loop={true} source={source} style={props.style ?? noStyle} />
+    </Box2>
+  )
+}
+
+export default Animation
diff --git a/shared/common-adapters/avatar/icon-to-img-set.tsx b/shared/common-adapters/avatar/icon-to-img-set.tsx
index ff4a1cd30822..2e4f6045b8d8 100644
--- a/shared/common-adapters/avatar/icon-to-img-set.tsx
+++ b/shared/common-adapters/avatar/icon-to-img-set.tsx
@@ -1,6 +1,6 @@
-import * as Styles from '@/styles'
 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
@@ -49,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
@@ -82,5 +82,5 @@ function iconTypeToImgSetNative(imgMap: {[key: string]: IconType}, targetSize: n
 }
 
 export const iconTypeToImgSet: (imgMap: {[key: string]: IconType}, targetSize: number) => string = (
-  Styles.isMobile ? iconTypeToImgSetNative : iconTypeToImgSetDesktop
+  isMobile ? iconTypeToImgSetNative : iconTypeToImgSetDesktop
 ) as any
diff --git a/shared/common-adapters/avatar/index.desktop.tsx b/shared/common-adapters/avatar/index.desktop.tsx
deleted file mode 100644
index e530c08faa5e..000000000000
--- a/shared/common-adapters/avatar/index.desktop.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-// Minimal fast Avatar (desktop).
-import './avatar.css'
-import type * as React from 'react'
-import type * as T from '@/constants/types'
-import * as Styles from '@/styles'
-import {useConfigState} from '@/stores/config'
-import * as AvatarZus from './store'
-import {navToProfile} from '@/constants/router'
-import {iconTypeToImgSet} from './icon-to-img-set'
-import type {IconType} from '../icon.constants-gen'
-
-type Props = {
-  children?: React.ReactNode
-  crop?: T.Teams.AvatarCrop
-  imageOverrideUrl?: string
-  isTeam?: boolean
-  onClick?: ((e?: React.BaseSyntheticEvent) => void) | 'profile'
-  size: 128 | 96 | 64 | 48 | 32 | 24 | 16
-  style?: Styles.CustomStyles<'borderStyle'>
-  teamname?: string
-  username?: string
-}
-
-const avatarPlaceHolders: {[key: string]: IconType} = {
-  '192': 'icon-placeholder-avatar-192',
-  '256': 'icon-placeholder-avatar-256',
-  '960': 'icon-placeholder-avatar-960',
-}
-const teamPlaceHolders: {[key: string]: IconType} = {
-  '192': 'icon-team-placeholder-avatar-192',
-  '256': 'icon-team-placeholder-avatar-256',
-  '960': 'icon-team-placeholder-avatar-960',
-}
-
-const AVATAR_CONTAINER_SIZE = 175
-const AVATAR_BORDER_SIZE = 4
-const AVATAR_SIZE = AVATAR_CONTAINER_SIZE - AVATAR_BORDER_SIZE * 2
-const normalizeImageOverrideUrl = (url: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
-  if (url.startsWith('/') || isWindowsPath) {
-    let path = url.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) {
-      path = '/' + path
-    }
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
-    return encodeURI(url).replace(/#/g, '%23')
-  }
-  return url
-}
-
-function Avatar(p: Props) {
-  const {size, teamname, username, isTeam: _isTeam, onClick: _onClick, style, children} = p
-  const {imageOverrideUrl, crop} = p
-  const isTeam = _isTeam || !!teamname
-  const name = isTeam ? teamname : username
-  const counter = AvatarZus.useAvatarState(s => s.counts.get(name || '') ?? 0)
-  const httpSrv = useConfigState(s => s.httpSrv)
-  const {address, token} = httpSrv
-
-  const avatarSizeClassName = `avatar-${isTeam ? 'team' : 'user'}-size-${size}`
-
-  let bgImage: string | undefined
-  if (imageOverrideUrl) {
-    bgImage = `url("${normalizeImageOverrideUrl(imageOverrideUrl)}")`
-  } else if (address && name) {
-    const typ = isTeam ? 'team' : 'user'
-    const imgSize = size <= 64 ? 192 : size <= 96 ? 256 : 960
-    bgImage = `url(http://${address}/av?typ=${typ}&name=${name}&format=square_${imgSize}&mode=light&token=${token}&count=${counter})`
-  }
-
-  const placeholderBg = iconTypeToImgSet(isTeam ? teamPlaceHolders : avatarPlaceHolders, size)
-
-  const onClick =
-    _onClick === 'profile' ? (username ? () => navToProfile(username) : undefined) : _onClick
-
-  const hasCrop = crop?.offsetLeft !== undefined && crop.offsetTop !== undefined
-  const scaledAvatarRatio = size / AVATAR_SIZE
-  const avatarScaledWidth = crop?.scaledWidth ? crop.scaledWidth * scaledAvatarRatio : null
-
-  const showBg = bgImage || placeholderBg
-
-  return (
-    <div
-      className={Styles.classNames('avatar', avatarSizeClassName)}
-      onClick={onClick}
-      style={Styles.collapseStyles([onClick && clickableStyle, style]) as React.CSSProperties}
-    >
-      <div className={Styles.classNames('avatar-inner', avatarSizeClassName)}>
-        <div className="avatar-background" />
-        {!!showBg && (
-          <div className="avatar-user-image" style={{backgroundImage: showBg}} />
-        )}
-        {!!bgImage && hasCrop && (
-          <div
-            className="avatar-user-image"
-            style={{
-              backgroundImage: bgImage,
-              backgroundPositionX: (crop.offsetLeft ?? 0) * scaledAvatarRatio,
-              backgroundPositionY: (crop.offsetTop ?? 0) * scaledAvatarRatio,
-              backgroundSize: `${avatarScaledWidth}px auto`,
-            }}
-          />
-        )}
-        {isTeam && (
-          <div
-            style={borderTeamStyle}
-            className={Styles.classNames('avatar-border-team', avatarSizeClassName)}
-          />
-        )}
-      </div>
-      {children}
-    </div>
-  )
-}
-
-const clickableStyle = {cursor: 'pointer'} as const
-
-const borderTeamStyle = {
-  boxShadow: `0px 0px 0px 1px ${Styles.globalColors.black_10} inset`,
-} satisfies React.CSSProperties
-
-export default Avatar
diff --git a/shared/common-adapters/avatar/index.native.tsx b/shared/common-adapters/avatar/index.tsx
similarity index 50%
rename from shared/common-adapters/avatar/index.native.tsx
rename to shared/common-adapters/avatar/index.tsx
index 2c5d7b55b14b..f4e4eac615d1 100644
--- a/shared/common-adapters/avatar/index.native.tsx
+++ b/shared/common-adapters/avatar/index.tsx
@@ -1,12 +1,12 @@
-// Minimal fast Avatar (native).
+import './avatar.css'
 import {useState} from 'react'
 import * as Styles from '@/styles'
 import {useConfigState} from '@/stores/config'
 import * as AvatarZus from './store'
-import {Image} from 'expo-image'
 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'
@@ -35,11 +35,12 @@ const teamPlaceHolders: {[key: string]: IconType} = {
   '960': 'icon-team-placeholder-avatar-960',
 }
 
+// ── Native-only ──────────────────────────────────────────────────────────────
+
 const sizeToTeamBorderRadius: Record<number, number> = {
   128: 12, 16: 4, 24: 4, 32: 5, 48: 6, 64: 8, 96: 10,
 }
 
-// Pre-compute all possible container+image style combos (size x isTeam)
 type SizeStyle = {container: {height: number; width: number}; image: {borderRadius: number; height: number; overflow: 'hidden'; width: number}}
 const allSizes = [16, 24, 32, 48, 64, 96, 128] as const
 const styleCache = new Map<string, SizeStyle>()
@@ -55,15 +56,95 @@ for (const size of allSizes) {
 
 const bgColor = Styles.globalColors.greyLight
 
+// ── Desktop-only ─────────────────────────────────────────────────────────────
+
+const AVATAR_CONTAINER_SIZE = 175
+const AVATAR_BORDER_SIZE = 4
+const AVATAR_SIZE = AVATAR_CONTAINER_SIZE - AVATAR_BORDER_SIZE * 2
+
+const normalizeImageOverrideUrl = (url: string) => {
+  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
+  if (url.startsWith('/') || isWindowsPath) {
+    let path = url.replace(/\\/g, '/')
+    if (isWindowsPath && !path.startsWith('/')) path = '/' + path
+    return encodeURI(`file://${path}`).replace(/#/g, '%23')
+  }
+  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
+    return encodeURI(url).replace(/#/g, '%23')
+  }
+  return url
+}
+
+const clickableStyle = {cursor: 'pointer'} as const
+const borderTeamStyle = {
+  boxShadow: `0px 0px 0px 1px ${Styles.globalColors.black_10} inset`,
+} satisfies React.CSSProperties
+
+// ── Component ────────────────────────────────────────────────────────────────
+
 function Avatar(p: Props) {
   const {size, teamname, username, isTeam: _isTeam, onClick: _onClick, style, children} = p
-  const {imageOverrideUrl} = p
+  const {imageOverrideUrl, crop} = p
   const isTeam = _isTeam || !!teamname
   const name = isTeam ? teamname : username
   const counter = AvatarZus.useAvatarState(s => s.counts.get(name || '') ?? 0)
   const httpSrv = useConfigState(s => s.httpSrv)
   const isDarkMode = useColorScheme() === 'dark'
   const {address, token} = httpSrv
+  const [errorUri, setErrorUri] = useState<string>()
+
+  const onClick =
+    _onClick === 'profile' ? (username ? () => navToProfile(username) : undefined) : _onClick
+
+  if (!isMobile) {
+    const avatarSizeClassName = `avatar-${isTeam ? 'team' : 'user'}-size-${size}`
+
+    let bgImage: string | undefined
+    if (imageOverrideUrl) {
+      bgImage = `url("${normalizeImageOverrideUrl(imageOverrideUrl)}")`
+    } else if (address && name) {
+      const typ = isTeam ? 'team' : 'user'
+      const imgSize = size <= 64 ? 192 : size <= 96 ? 256 : 960
+      bgImage = `url(http://${address}/av?typ=${typ}&name=${name}&format=square_${imgSize}&mode=light&token=${token}&count=${counter})`
+    }
+
+    const placeholderBg = iconTypeToImgSet(isTeam ? teamPlaceHolders : avatarPlaceHolders, size)
+    const hasCrop = crop?.offsetLeft !== undefined && crop.offsetTop !== undefined
+    const scaledAvatarRatio = size / AVATAR_SIZE
+    const avatarScaledWidth = crop?.scaledWidth ? crop.scaledWidth * scaledAvatarRatio : null
+    const showBg = bgImage || placeholderBg
+
+    return (
+      <div
+        className={Styles.classNames('avatar', avatarSizeClassName)}
+        onClick={onClick}
+        style={Styles.collapseStyles([onClick && clickableStyle, style]) as React.CSSProperties}
+      >
+        <div className={Styles.classNames('avatar-inner', avatarSizeClassName)}>
+          <div className="avatar-background" />
+          {!!showBg && <div className="avatar-user-image" style={{backgroundImage: showBg}} />}
+          {!!bgImage && hasCrop && (
+            <div
+              className="avatar-user-image"
+              style={{
+                backgroundImage: bgImage,
+                backgroundPositionX: (crop.offsetLeft ?? 0) * scaledAvatarRatio,
+                backgroundPositionY: (crop.offsetTop ?? 0) * scaledAvatarRatio,
+                backgroundSize: `${avatarScaledWidth}px auto`,
+              }}
+            />
+          )}
+          {isTeam && (
+            <div
+              style={borderTeamStyle}
+              className={Styles.classNames('avatar-border-team', avatarSizeClassName)}
+            />
+          )}
+        </div>
+        {children}
+      </div>
+    )
+  }
 
   const cached = styleCache.get(`${size}-${isTeam}`)!
 
@@ -74,20 +155,11 @@ function Avatar(p: Props) {
     const typ = isTeam ? 'team' : 'user'
     const mode = isDarkMode ? 'dark' : 'light'
     const imgSize = size <= 64 ? 192 : size <= 96 ? 256 : 960
-    source = {
-      uri: `http://${address}/av?typ=${typ}&name=${name}&format=square_${imgSize}&mode=${mode}&token=${token}&count=${counter}`,
-    }
+    source = {uri: `http://${address}/av?typ=${typ}&name=${name}&format=square_${imgSize}&mode=${mode}&token=${token}&count=${counter}`}
   }
 
-  // Placeholder source for error state
   const placeholderSource = iconTypeToImgSet(isTeam ? teamPlaceHolders : avatarPlaceHolders, size) as unknown as number
-
-  const [errorUri, setErrorUri] = useState<string>()
   const imgError = !!source && errorUri === source.uri
-
-  const onClick =
-    _onClick === 'profile' ? (username ? () => navToProfile(username) : undefined) : _onClick
-
   const containerStyle = style ? Styles.collapseStyles([cached.container, style]) : cached.container
   const imageStyle = imgError ? Styles.collapseStyles([cached.image, {backgroundColor: bgColor}]) : cached.image
 
@@ -103,11 +175,7 @@ function Avatar(p: Props) {
   )
 
   if (onClick) {
-    return (
-      <Pressable onPress={onClick} style={containerStyle}>
-        {content}
-      </Pressable>
-    )
+    return <Pressable onPress={onClick} style={containerStyle}>{content}</Pressable>
   }
 
   return <View style={containerStyle}>{content}</View>
diff --git a/shared/common-adapters/back-button.desktop.tsx b/shared/common-adapters/back-button.desktop.tsx
deleted file mode 100644
index 78f3ae7a035c..000000000000
--- a/shared/common-adapters/back-button.desktop.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as C from '@/constants'
-import type * as React from 'react'
-import * as Styles from '@/styles'
-import Icon from './icon'
-import Text from './text'
-import type {Props} from './back-button.shared'
-
-const Kb = {
-  Icon,
-  Text,
-}
-
-function BackButton(props: Props) {
-  const navigateUp = C.Router2.navigateUp
-  const onBack = props.disabled ? () => {} : props.onClick ?? (() => navigateUp())
-  const _onClick = (event: React.BaseSyntheticEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    onBack()
-  }
-  return (
-    <div
-      style={
-        Styles.collapseStyles([
-          props.disabled ? styles.disabledContainer : styles.container,
-          props.style,
-        ]) as React.CSSProperties
-      }
-      onClick={_onClick}
-    >
-      <Kb.Icon
-        type="iconfont-arrow-left"
-        style={props.disabled ? styles.disabledIcon : styles.icon}
-        color={props.iconColor}
-      />
-      {props.title !== undefined && !props.hideBackLabel && (
-        <Kb.Text
-          type={props.onClick ? 'BodyPrimaryLink' : 'Body'}
-          style={Styles.collapseStyles([props.disabled && styles.disabledText, props.textStyle])}
-          onClick={_onClick}
-        >
-          {props.title || 'Back'}
-        </Kb.Text>
-      )}
-    </div>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      container: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.flexBoxRow,
-          ...Styles.desktopStyles.clickable,
-          alignItems: 'center',
-          zIndex: 1,
-        },
-      }),
-      disabledContainer: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.flexBoxRow,
-          alignItems: 'center',
-          cursor: 'default',
-          zIndex: 1,
-        },
-      }),
-      disabledIcon: Styles.platformStyles({
-        isElectron: {
-          cursor: 'default',
-          marginRight: 6,
-        },
-      }),
-      disabledText: Styles.platformStyles({
-        isElectron: {cursor: 'default'},
-      }),
-      icon: {
-        marginRight: 6,
-      },
-    }) as const
-)
-
-export default BackButton
diff --git a/shared/common-adapters/back-button.native.tsx b/shared/common-adapters/back-button.native.tsx
deleted file mode 100644
index ee330bd4ad6b..000000000000
--- a/shared/common-adapters/back-button.native.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as C from '@/constants'
-import {Pressable, Keyboard} from 'react-native'
-import Badge from './badge'
-import {Box2} from './box'
-import Icon from './icon'
-import * as Styles from '@/styles'
-import type {Props} from './back-button.shared'
-import noop from 'lodash/noop'
-
-const Kb = {
-  Badge,
-  Box2,
-  Icon,
-}
-
-function BackButton(props: Props) {
-  const navigateUp = C.Router2.navigateUp
-  const onNavUp = () => {
-    // this helps with some timing issues w/ dismissing keyboard avoiding views
-    Keyboard.dismiss()
-    navigateUp()
-  }
-  const onBack = props.disabled ? noop : (props.onClick ?? onNavUp)
-  return (
-    <Pressable onPress={onBack} testID="backButton">
-      <Kb.Box2 direction="horizontal" alignItems="center" style={Styles.collapseStyles([styles.container, props.style])}>
-        <Kb.Icon
-          type="iconfont-arrow-left"
-          color={props.iconColor}
-          style={styles.arrow}
-        />
-        {!!props.badgeNumber && <Kb.Badge badgeNumber={props.badgeNumber} />}
-      </Kb.Box2>
-    </Pressable>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  arrow: {
-    marginRight: -3,
-    marginTop: 2,
-  },
-  container: {
-    marginRight: 8,
-    minWidth: 32,
-    padding: Styles.globalMargins.tiny,
-    paddingLeft: Styles.globalMargins.xsmall,
-    paddingRight: Styles.globalMargins.small,
-  },
-}))
-
-export default BackButton
diff --git a/shared/common-adapters/back-button.tsx b/shared/common-adapters/back-button.tsx
new file mode 100644
index 000000000000..6727690c8c13
--- /dev/null
+++ b/shared/common-adapters/back-button.tsx
@@ -0,0 +1,111 @@
+import * as C from '@/constants'
+import * as Styles from '@/styles'
+import {Pressable, Keyboard} from 'react-native'
+import Badge from './badge'
+import {Box2} from './box'
+import Icon from './icon'
+import Text from './text'
+import type {Props} from './back-button.shared'
+import noop from 'lodash/noop'
+import type * as React from 'react'
+
+function BackButton(props: Props) {
+  const navigateUp = C.Router2.navigateUp
+
+  if (!isMobile) {
+    const onBack = props.disabled ? noop : props.onClick ?? (() => navigateUp())
+    const _onClick = (event: React.BaseSyntheticEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onBack()
+    }
+    return (
+      <div
+        style={
+          Styles.collapseStyles([
+            props.disabled ? styles.disabledContainer : styles.container,
+            props.style,
+          ]) as React.CSSProperties
+        }
+        onClick={_onClick}
+      >
+        <Icon
+          type="iconfont-arrow-left"
+          style={props.disabled ? styles.disabledIcon : styles.icon}
+          color={props.iconColor}
+        />
+        {props.title !== undefined && !props.hideBackLabel && (
+          <Text
+            type={props.onClick ? 'BodyPrimaryLink' : 'Body'}
+            style={Styles.collapseStyles([props.disabled && styles.disabledText, props.textStyle])}
+            onClick={_onClick}
+          >
+            {props.title || 'Back'}
+          </Text>
+        )}
+      </div>
+    )
+  }
+
+  const onNavUp = () => {
+    Keyboard.dismiss()
+    navigateUp()
+  }
+  const onBack = props.disabled ? noop : (props.onClick ?? onNavUp)
+  return (
+    <Pressable onPress={onBack} testID="backButton">
+      <Box2
+        direction="horizontal"
+        alignItems="center"
+        style={Styles.collapseStyles([styles.container, props.style])}
+      >
+        <Icon type="iconfont-arrow-left" color={props.iconColor} style={styles.arrow} />
+        {!!props.badgeNumber && <Badge badgeNumber={props.badgeNumber} />}
+      </Box2>
+    </Pressable>
+  )
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  arrow: {
+    marginRight: -3,
+    marginTop: 2,
+  },
+  container: Styles.platformStyles({
+    isElectron: {
+      ...Styles.globalStyles.flexBoxRow,
+      ...Styles.desktopStyles.clickable,
+      alignItems: 'center',
+      zIndex: 1,
+    },
+    isMobile: {
+      marginRight: 8,
+      minWidth: 32,
+      padding: Styles.globalMargins.tiny,
+      paddingLeft: Styles.globalMargins.xsmall,
+      paddingRight: Styles.globalMargins.small,
+    },
+  }),
+  disabledContainer: Styles.platformStyles({
+    isElectron: {
+      ...Styles.globalStyles.flexBoxRow,
+      alignItems: 'center',
+      cursor: 'default',
+      zIndex: 1,
+    },
+  }),
+  disabledIcon: Styles.platformStyles({
+    isElectron: {
+      cursor: 'default',
+      marginRight: 6,
+    },
+  }),
+  disabledText: Styles.platformStyles({
+    isElectron: {cursor: 'default'},
+  }),
+  icon: {
+    marginRight: 6,
+  },
+}))
+
+export default BackButton
diff --git a/shared/common-adapters/badge.tsx b/shared/common-adapters/badge.tsx
index 23e2249e2c85..159d37399931 100644
--- a/shared/common-adapters/badge.tsx
+++ b/shared/common-adapters/badge.tsx
@@ -21,8 +21,8 @@ export type Badge2Props = {
 
 function Badge(p: Badge2Props) {
   const {border, containerStyle, className, badgeNumberStyle, badgeNumber, badgeStyle} = p
-  const fontSize = p.fontSize ?? (Styles.isMobile ? 12 : 10)
-  const height = p.height ?? (Styles.isMobile ? 20 : 16)
+  const fontSize = p.fontSize ?? (isMobile ? 12 : 10)
+  const height = p.height ?? (isMobile ? 20 : 16)
   const leftRightPadding = p.leftRightPadding ?? (Styles.isPhone ? 5 : 4)
 
   if (border) {
@@ -101,7 +101,7 @@ function Badge(p: Badge2Props) {
               {
                 fontSize: fontSize,
                 height: height,
-                lineHeight: Styles.isMobile ? height : `${height}px`,
+                lineHeight: isMobile ? height : `${height}px`,
               } as const,
               badgeNumberStyle,
             ])}
diff --git a/shared/common-adapters/bottom-accessory.desktop.tsx b/shared/common-adapters/bottom-accessory.desktop.tsx
deleted file mode 100644
index c6a07f51271a..000000000000
--- a/shared/common-adapters/bottom-accessory.desktop.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import type * as React from 'react'
-
-export const BottomAccessory = ({children}: {children: React.ReactNode}) => <>{children}</>
diff --git a/shared/common-adapters/bottom-accessory.native.tsx b/shared/common-adapters/bottom-accessory.tsx
similarity index 71%
rename from shared/common-adapters/bottom-accessory.native.tsx
rename to shared/common-adapters/bottom-accessory.tsx
index e6611f883cb0..2e15652f87ad 100644
--- a/shared/common-adapters/bottom-accessory.native.tsx
+++ b/shared/common-adapters/bottom-accessory.tsx
@@ -6,14 +6,14 @@ import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'
 import {isLiquidGlassSupported as _isLiquidGlassSupported} from '@callstack/liquid-glass'
 import type {RootParamList} from '@/router-v2/route-params'
 
-const isLiquidGlassActive = (C.isIOS && C.isPhone && _isLiquidGlassSupported) as boolean
+const isLiquidGlassActive = (isIOS && C.isPhone && _isLiquidGlassSupported) as boolean
 
-export const BottomAccessory = ({children}: {children: React.ReactNode}) => {
+const BottomAccessoryMobile = ({children}: {children: React.ReactNode}) => {
   const navigation = useNavigation()
   const isFocused = useIsFocused()
 
   React.useEffect(() => {
-    if (!isLiquidGlassActive || !isFocused) return
+    if (!isFocused) return
     const parent = navigation.getParent() as BottomTabNavigationProp<RootParamList> | undefined
     parent?.setOptions({bottomAccessory: (): React.ReactNode => children})
     return () => {
@@ -21,6 +21,10 @@ export const BottomAccessory = ({children}: {children: React.ReactNode}) => {
     }
   }, [children, isFocused, navigation])
 
-  if (isLiquidGlassActive) return null
-  return <>{children}</>
+  return null
+}
+
+export const BottomAccessory = ({children}: {children: React.ReactNode}) => {
+  if (!isMobile || !isLiquidGlassActive) return <>{children}</>
+  return <BottomAccessoryMobile>{children}</BottomAccessoryMobile>
 }
diff --git a/shared/common-adapters/box.desktop.tsx b/shared/common-adapters/box.desktop.tsx
deleted file mode 100644
index ec252a3dcc2f..000000000000
--- a/shared/common-adapters/box.desktop.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type * as React from 'react'
-import * as Styles from '@/styles'
-import type {Box2Props, MeasureRef} from './box.shared'
-export type {LayoutEvent} from './box.shared'
-import './box.css'
-
-export const Box2 = (p: Box2Props & {ref?: React.Ref<MeasureRef>}) => {
-  const {direction, fullHeight, fullWidth, centerChildren, alignSelf, alignItems, noShrink, ref} = p
-  const {flex, justifyContent, overflow, padding, relative} = p
-  const {onMouseMove, onMouseDown, onMouseLeave, onMouseUp, onMouseOver, onCopyCapture, children} = p
-  const {onContextMenu, gap, gapStart, gapEnd, pointerEvents, onDragLeave, onDragOver, onDrop} = p
-  const {style: _style, className: _className, title, tooltip} = p
-  const horizontal = direction === 'horizontal' || direction === 'horizontalReverse'
-  const reverse = direction === 'verticalReverse' || direction === 'horizontalReverse'
-
-  const style = Styles.collapseStyles([
-    flex != null && flex !== 1 ? {flex} : undefined,
-    _style,
-  ]) as unknown as React.CSSProperties
-
-  const className = Styles.classNames(
-    {
-      [`box2_alignItems_${alignItems ?? ''}`]: alignItems,
-      [`box2_alignSelf_${alignSelf ?? ''}`]: alignSelf,
-      [`box2_gapEnd_${gap ?? ''}`]: gapEnd,
-      [`box2_gapStart_${gap ?? ''}`]: gapStart,
-      [`box2_gap_${gap ?? ''}`]: gap,
-      [`box2_justifyContent_${justifyContent ?? ''}`]: justifyContent,
-      [`box2_overflow_${overflow ?? ''}`]: overflow,
-      [`box2_padding_${padding ?? ''}`]: padding,
-      box2_centered: !fullHeight && !fullWidth,
-      box2_centeredChildren: centerChildren,
-      box2_flex1: flex === 1,
-      box2_fullHeight: fullHeight,
-      box2_fullWidth: fullWidth,
-      box2_horizontal: horizontal,
-      box2_no_shrink: noShrink,
-      box2_pointerEvents_none: pointerEvents === 'none',
-      box2_relative: relative,
-      box2_reverse: reverse,
-      box2_vertical: !horizontal,
-      tooltip,
-    },
-    _className
-  )
-
-  return (
-    <div
-      ref={ref as React.Ref<HTMLDivElement>}
-      className={className}
-      data-tooltip={tooltip}
-      onContextMenu={onContextMenu}
-      onCopyCapture={onCopyCapture}
-      onDragLeave={onDragLeave}
-      onDragOver={onDragOver}
-      onDrop={onDrop}
-      onMouseDown={onMouseDown}
-      onMouseLeave={onMouseLeave}
-      onMouseMove={onMouseMove}
-      onMouseOver={onMouseOver}
-      onMouseUp={onMouseUp}
-      style={style}
-      title={title}
-      children={children}
-    />
-  )
-}
-
-export const Box2Animated = Box2
diff --git a/shared/common-adapters/box.native.tsx b/shared/common-adapters/box.tsx
similarity index 56%
rename from shared/common-adapters/box.native.tsx
rename to shared/common-adapters/box.tsx
index b05214eae4e7..d47f905feeeb 100644
--- a/shared/common-adapters/box.native.tsx
+++ b/shared/common-adapters/box.tsx
@@ -4,7 +4,8 @@ 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'
+import './box.css'
 
 type Margins = keyof typeof Styles.globalMargins
 const marginKeys = Object.keys(Styles.globalMargins) as Array<Margins>
@@ -17,7 +18,7 @@ const hgapEndStyles = new Map(marginKeys.map(gap => [gap, {paddingRight: Styles.
 const vgapEndStyles = new Map(marginKeys.map(gap => [gap, {paddingBottom: Styles.globalMargins[gap]}]))
 const paddingStyles = new Map(marginKeys.map(p => [p, {padding: Styles.globalMargins[p]}]))
 
-const useBox2Shared = (p: Box2Props) => {
+const box2SharedProps = (p: Box2Props) => {
   const {direction, fullHeight, fullWidth, centerChildren, alignSelf, alignItems, noShrink} = p
   const {flex, justifyContent, overflow, padding, relative} = p
   const {collapsable = true, onLayout, pointerEvents, children, gap, gapStart, gapEnd} = p
@@ -26,96 +27,96 @@ const useBox2Shared = (p: Box2Props) => {
   let directionStyle: Styles.StylesCrossPlatform
   switch (direction) {
     case 'horizontal':
-      directionStyle = styles.hbox
+      directionStyle = nativeStyles.hbox
       break
     case 'horizontalReverse':
-      directionStyle = styles.hrbox
+      directionStyle = nativeStyles.hrbox
       break
     case 'verticalReverse':
-      directionStyle = styles.vrbox
+      directionStyle = nativeStyles.vrbox
       break
     case 'vertical':
     default:
-      directionStyle = styles.vbox
+      directionStyle = nativeStyles.vbox
       break
   }
   let alignSelfStyle: Styles.StylesCrossPlatform = null
   switch (alignSelf) {
     case 'center':
-      alignSelfStyle = styles.alignSelfCenter
+      alignSelfStyle = nativeStyles.alignSelfCenter
       break
     case 'flex-start':
-      alignSelfStyle = styles.alignSelfStart
+      alignSelfStyle = nativeStyles.alignSelfStart
       break
     case 'flex-end':
-      alignSelfStyle = styles.alignSelfEnd
+      alignSelfStyle = nativeStyles.alignSelfEnd
       break
     case 'stretch':
-      alignSelfStyle = styles.alignSelfStretch
+      alignSelfStyle = nativeStyles.alignSelfStretch
       break
     default:
   }
   let alignItemsStyle: Styles.StylesCrossPlatform = null
   switch (alignItems) {
     case 'center':
-      alignItemsStyle = styles.alignItemsCenter
+      alignItemsStyle = nativeStyles.alignItemsCenter
       break
     case 'flex-start':
-      alignItemsStyle = styles.alignItemsStart
+      alignItemsStyle = nativeStyles.alignItemsStart
       break
     case 'flex-end':
-      alignItemsStyle = styles.alignItemsEnd
+      alignItemsStyle = nativeStyles.alignItemsEnd
       break
     case 'stretch':
-      alignItemsStyle = styles.alignItemsStretch
+      alignItemsStyle = nativeStyles.alignItemsStretch
       break
     default:
   }
   let justifyContentStyle: Styles.StylesCrossPlatform = null
   switch (justifyContent) {
     case 'center':
-      justifyContentStyle = styles.justifyContentCenter
+      justifyContentStyle = nativeStyles.justifyContentCenter
       break
     case 'flex-start':
-      justifyContentStyle = styles.justifyContentStart
+      justifyContentStyle = nativeStyles.justifyContentStart
       break
     case 'flex-end':
-      justifyContentStyle = styles.justifyContentEnd
+      justifyContentStyle = nativeStyles.justifyContentEnd
       break
     case 'space-between':
-      justifyContentStyle = styles.justifyContentBetween
+      justifyContentStyle = nativeStyles.justifyContentBetween
       break
     case 'space-around':
-      justifyContentStyle = styles.justifyContentAround
+      justifyContentStyle = nativeStyles.justifyContentAround
       break
     case 'space-evenly':
-      justifyContentStyle = styles.justifyContentEvenly
+      justifyContentStyle = nativeStyles.justifyContentEvenly
       break
     default:
   }
   let overflowStyle: Styles.StylesCrossPlatform = null
   switch (overflow) {
     case 'hidden':
-      overflowStyle = styles.overflowHidden
+      overflowStyle = nativeStyles.overflowHidden
       break
     case 'visible':
-      overflowStyle = styles.overflowVisible
+      overflowStyle = nativeStyles.overflowVisible
       break
     default:
   }
 
   const style = Styles.collapseStyles([
     directionStyle,
-    fullHeight && styles.fullHeight,
-    fullWidth && styles.fullWidth,
-    !fullHeight && !fullWidth && styles.centered,
-    centerChildren && styles.centeredChildren,
+    fullHeight && nativeStyles.fullHeight,
+    fullWidth && nativeStyles.fullWidth,
+    !fullHeight && !fullWidth && nativeStyles.centered,
+    centerChildren && nativeStyles.centeredChildren,
     alignSelfStyle,
     alignItemsStyle,
     justifyContentStyle,
-    noShrink && styles.noShrink,
-    flex != null && (flex === 1 ? styles.flex1 : {flex}),
-    relative && styles.relative,
+    noShrink && nativeStyles.noShrink,
+    flex != null && (flex === 1 ? nativeStyles.flex1 : {flex}),
+    relative && nativeStyles.relative,
     overflowStyle,
     padding && paddingStyles.get(padding),
     gap && horizontal && hgapStyles.get(gap),
@@ -124,8 +125,6 @@ const useBox2Shared = (p: Box2Props) => {
     gap && gapStart && !horizontal && vgapStartStyles.get(gap),
     gap && gapEnd && horizontal && hgapEndStyles.get(gap),
     gap && gapEnd && !horizontal && vgapEndStyles.get(gap),
-    // uncomment this to get debugging colors
-    // {backgroundColor: `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`},
     _style,
   ])
 
@@ -139,24 +138,86 @@ const useBox2Shared = (p: Box2Props) => {
 }
 
 export const Box2 = (p: Box2Props & {ref?: React.Ref<MeasureRef>}) => {
+  if (!isMobile) {
+    const {direction, fullHeight, fullWidth, centerChildren, alignSelf, alignItems, noShrink, ref} = p
+    const {flex, justifyContent, overflow, padding, relative} = p
+    const {onMouseMove, onMouseDown, onMouseLeave, onMouseUp, onMouseOver, onCopyCapture, children} = p
+    const {onContextMenu, gap, gapStart, gapEnd, pointerEvents, onDragLeave, onDragOver, onDrop} = p
+    const {style: _style, className: _className, title, tooltip} = p
+    const horizontal = direction === 'horizontal' || direction === 'horizontalReverse'
+    const reverse = direction === 'verticalReverse' || direction === 'horizontalReverse'
+
+    const style = Styles.collapseStyles([
+      flex != null && flex !== 1 ? {flex} : undefined,
+      _style,
+    ]) as unknown as React.CSSProperties
+
+    const className = Styles.classNames(
+      {
+        [`box2_alignItems_${alignItems ?? ''}`]: alignItems,
+        [`box2_alignSelf_${alignSelf ?? ''}`]: alignSelf,
+        [`box2_gapEnd_${gap ?? ''}`]: gapEnd,
+        [`box2_gapStart_${gap ?? ''}`]: gapStart,
+        [`box2_gap_${gap ?? ''}`]: gap,
+        [`box2_justifyContent_${justifyContent ?? ''}`]: justifyContent,
+        [`box2_overflow_${overflow ?? ''}`]: overflow,
+        [`box2_padding_${padding ?? ''}`]: padding,
+        box2_centered: !fullHeight && !fullWidth,
+        box2_centeredChildren: centerChildren,
+        box2_flex1: flex === 1,
+        box2_fullHeight: fullHeight,
+        box2_fullWidth: fullWidth,
+        box2_horizontal: horizontal,
+        box2_no_shrink: noShrink,
+        box2_pointerEvents_none: pointerEvents === 'none',
+        box2_relative: relative,
+        box2_reverse: reverse,
+        box2_vertical: !horizontal,
+        tooltip,
+      },
+      _className
+    )
+
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={className}
+        data-tooltip={tooltip}
+        onContextMenu={onContextMenu}
+        onCopyCapture={onCopyCapture}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        onMouseDown={onMouseDown}
+        onMouseLeave={onMouseLeave}
+        onMouseMove={onMouseMove}
+        onMouseOver={onMouseOver}
+        onMouseUp={onMouseUp}
+        style={style}
+        title={title}
+        children={children}
+      />
+    )
+  }
+
   const {ref, ...rest} = p
-  const props = useBox2Shared(rest)
+  const props = box2SharedProps(rest)
   return <View {...props} ref={ref as React.Ref<View>} />
 }
 
 export const Box2Animated = (p: Box2Props & {ref?: React.Ref<MeasureRef>}) => {
+  if (!isMobile) return <Box2 {...p} />
   const {ref, ...rest} = p
-  const props = useBox2Shared(rest)
+  const props = box2SharedProps(rest)
   return <Reanimated.View {...props} ref={ref as React.Ref<View>} />
 }
 
-
 const common = {
   alignItems: 'stretch',
   justifyContent: 'flex-start',
 } as const
 
-const styles = {
+const nativeStyles = {
   alignItemsCenter: {alignItems: 'center'},
   alignItemsEnd: {alignItems: 'flex-end'},
   alignItemsStart: {alignItems: 'flex-start'},
@@ -202,6 +263,3 @@ const styles = {
     ...common,
   },
 } as const
-
-
-export type * from '@/common-adapters/box.shared'
diff --git a/shared/common-adapters/button-bar.tsx b/shared/common-adapters/button-bar.tsx
index dd8d8946dbb5..bba49806ef8e 100644
--- a/shared/common-adapters/button-bar.tsx
+++ b/shared/common-adapters/button-bar.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 const ButtonBar = (props: Props) => {
   const _spacing = () => {
-    if ((props.direction ?? 'row') === 'row' && props.small && !Styles.isMobile) {
+    if ((props.direction ?? 'row') === 'row' && props.small && !isMobile) {
       return SmallSpacer
     }
     return BigSpacer
@@ -40,7 +40,7 @@ const ButtonBar = (props: Props) => {
   }, [])
 
   const minHeight = {
-    minHeight: Styles.isMobile ? (props.small ? 64 : 72) : props.small ? 44 : 64,
+    minHeight: isMobile ? (props.small ? 64 : 72) : props.small ? 44 : 64,
   }
 
   const isColumn = (props.direction ?? 'row') === 'column'
@@ -79,8 +79,8 @@ const bigSpacerStyle = {
 const SmallSpacer = () => <Kb.Box2 direction="vertical" style={smallSpacerStyle} />
 const smallSpacerStyle = {
   flexShrink: 0,
-  height: Styles.isMobile ? 8 : 4,
-  width: Styles.isMobile ? 8 : 4,
+  height: isMobile ? 8 : 4,
+  width: isMobile ? 8 : 4,
 }
 
 export default ButtonBar
diff --git a/shared/common-adapters/button.tsx b/shared/common-adapters/button.tsx
index b67eaa1baa27..311607e4435c 100644
--- a/shared/common-adapters/button.tsx
+++ b/shared/common-adapters/button.tsx
@@ -25,8 +25,8 @@ export type ButtonProps = {
   labelStyle?: Styles.StylesCrossPlatform
 }
 
-export const regularHeight = Styles.isMobile ? 40 : 32
-export const smallHeight = Styles.isMobile ? 32 : 28
+export const regularHeight = isMobile ? 40 : 32
+export const smallHeight = isMobile ? 32 : 28
 
 // Pre-computed container styles for all 8 mode+type combos
 const baseContainer: Styles._StylesCrossPlatform = Styles.platformStyles({
@@ -98,14 +98,14 @@ const smallStyle = {
   borderRadius: Styles.borderRadius,
   height: smallHeight,
   minWidth: undefined,
-  paddingLeft: Styles.isMobile ? Styles.globalMargins.small : Styles.globalMargins.xsmall,
-  paddingRight: Styles.isMobile ? Styles.globalMargins.small : Styles.globalMargins.xsmall,
+  paddingLeft: isMobile ? Styles.globalMargins.small : Styles.globalMargins.xsmall,
+  paddingRight: isMobile ? Styles.globalMargins.small : Styles.globalMargins.xsmall,
 } satisfies Styles._StylesCrossPlatform
 
 const childrenOnlyStyle = {
   minWidth: undefined,
-  paddingLeft: Styles.isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
-  paddingRight: Styles.isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
+  paddingLeft: isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
+  paddingRight: isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
   width: regularHeight,
 } satisfies Styles._StylesCrossPlatform
 
@@ -129,13 +129,13 @@ const progressContainerStyle = {
   justifyContent: 'center' as const,
 } satisfies Styles._StylesCrossPlatform
 
-const progressNormal = {height: Styles.isMobile ? 32 : 24, width: Styles.isMobile ? 32 : 24}
-const progressSmall = {height: Styles.isMobile ? 28 : 20, width: Styles.isMobile ? 28 : 20}
+const progressNormal = {height: isMobile ? 32 : 24, width: isMobile ? 32 : 24}
+const progressSmall = {height: isMobile ? 28 : 20, width: isMobile ? 28 : 20}
 
 const Progress = ({small, white}: {small?: boolean; white: boolean}) => {
   const {default: Animation} = require('./animation') as {default: typeof AnimationType}
   const animStyle = small ? progressSmall : progressNormal
-  if (Styles.isMobile) {
+  if (isMobile) {
     const {View} = require('react-native') as {View: typeof ViewType}
     return (
       <View style={Styles.castStyleNative(progressContainerStyle)}>
@@ -267,7 +267,7 @@ const ButtonNative = (props: FullProps) => {
   )
 }
 
-const Button = Styles.isMobile ? ButtonNative : ButtonDesktop
+const Button = isMobile ? ButtonNative : ButtonDesktop
 export default Button
 
 // IconButton — convenience wrapper that renders an Icon as a child
diff --git a/shared/common-adapters/checkbox.desktop.tsx b/shared/common-adapters/checkbox.desktop.tsx
deleted file mode 100644
index e425cb3c1a73..000000000000
--- a/shared/common-adapters/checkbox.desktop.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import {Box2} from './box'
-import ClickableBox from './clickable-box'
-import Icon from './icon'
-import Text from './text'
-import type {Props} from './checkbox.shared'
-import * as Styles from '@/styles'
-
-const Kb = {
-  Box2,
-  ClickableBox,
-  Icon,
-  Styles,
-  Text,
-}
-
-const CHECKBOX_SIZE = 13
-const CHECKBOX_MARGIN = 8
-
-const Checkbox = (props: Props) => {
-  return (
-    <Kb.ClickableBox
-      style={Kb.Styles.collapseStyles([styles.container, !props.disabled && styles.clickable, props.style])}
-      onClick={e =>
-        // If something in labelComponent needs to catch a click without calling this, use
-        // event.preventDefault()
-        props.disabled || e.defaultPrevented ? undefined : props.onCheck?.(!props.checked)
-      }
-    >
-      <div style={Kb.Styles.castStyleDesktop(Kb.Styles.collapseStyles([
-        styles.checkbox,
-        props.checked && styles.checkboxChecked,
-        props.disabled && styles.checkboxInactive,
-        props.disabled && props.checked && styles.semiTransparent,
-        props.checkboxStyle,
-      ]))}>
-        <Kb.Icon
-          type="iconfont-check"
-          style={Kb.Styles.collapseStyles([styles.icon, !props.checked && styles.transparent])}
-          hoverColor={Kb.Styles.globalColors.white}
-          color={props.checkboxColor ?? Kb.Styles.globalColors.white}
-          fontSize={9}
-        />
-      </div>
-      <Kb.Box2 direction="vertical">
-        {props.labelComponent || (typeof props.label === 'string' ? (
-          <Kb.Text type={props.labelType ?? 'Body'}>{props.label}</Kb.Text>
-        ) : (
-          props.label
-        ))}
-        {!!props.labelSubtitle && <Kb.Text type="BodySmall">{props.labelSubtitle}</Kb.Text>}
-      </Kb.Box2>
-    </Kb.ClickableBox>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  checkbox: Kb.Styles.platformStyles({
-    isElectron: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      ...Kb.Styles.transition('background'),
-      backgroundColor: Kb.Styles.globalColors.white,
-      borderColor: Kb.Styles.globalColors.black_20,
-      borderRadius: 2,
-      borderStyle: 'solid',
-      borderWidth: 1,
-      flexShrink: 0,
-      height: CHECKBOX_SIZE,
-      justifyContent: 'center',
-      marginRight: CHECKBOX_MARGIN,
-      marginTop: 2,
-      position: 'relative',
-      width: CHECKBOX_SIZE,
-    },
-  }),
-  checkboxChecked: {
-    backgroundColor: Kb.Styles.globalColors.blue,
-    borderColor: Kb.Styles.globalColors.blue,
-  },
-  checkboxInactive: {borderColor: Kb.Styles.globalColors.black_10},
-  clickable: Kb.Styles.platformStyles({
-    isElectron: {
-      ...Kb.Styles.desktopStyles.clickable,
-    },
-  }),
-  container: {
-    ...Kb.Styles.globalStyles.flexBoxRow,
-    alignItems: 'flex-start',
-    paddingBottom: 2,
-    paddingTop: 2,
-  },
-  icon: Kb.Styles.platformStyles({
-    isElectron: {
-      ...Kb.Styles.transition('opacity'),
-      alignSelf: 'center',
-    },
-  }),
-  semiTransparent: {opacity: 0.4},
-  transparent: {opacity: 0},
-}))
-
-export default Checkbox
diff --git a/shared/common-adapters/checkbox.native.tsx b/shared/common-adapters/checkbox.native.tsx
deleted file mode 100644
index c18b604fa8bb..000000000000
--- a/shared/common-adapters/checkbox.native.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type {TextType} from '@/common-adapters/text.shared'
-import type * as React from 'react'
-import Switch from '@/common-adapters/switch'
-import * as Styles from '@/styles'
-
-
-type Props = {
-  key?: string
-  label?: string | React.ReactNode
-  checkboxColor?: Styles.Color
-  checkboxStyle?: Styles.StylesCrossPlatform
-  labelComponent?: React.ReactNode
-  labelSubtitle?: string
-  labelType?: TextType
-  onCheck?: (newCheckedValue: boolean) => void
-  checked: boolean
-  style?: Styles.StylesCrossPlatform
-  disabled?: boolean
-}
-const Checkbox = (props: Props) => (
-  <Switch
-    align="left"
-    color="blue"
-    disabled={props.disabled}
-    label={props.labelComponent || props.label || ''}
-    labelType={props.labelType}
-    on={props.checked}
-    onClick={() => {
-      props.onCheck?.(!props.checked)
-    }}
-    style={Styles.collapseStyles([styles.container, props.style])}
-    labelSubtitle={props.labelSubtitle}
-  />
-)
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    paddingBottom: Styles.globalMargins.xtiny,
-    paddingTop: Styles.globalMargins.xtiny,
-  },
-}))
-
-export default Checkbox
diff --git a/shared/common-adapters/checkbox.tsx b/shared/common-adapters/checkbox.tsx
new file mode 100644
index 000000000000..f472fed2e3dd
--- /dev/null
+++ b/shared/common-adapters/checkbox.tsx
@@ -0,0 +1,125 @@
+import {Box2} from './box'
+import ClickableBox from './clickable-box'
+import Icon from './icon'
+import Switch from '@/common-adapters/switch'
+import Text from './text'
+import type {Props} from './checkbox.shared'
+import * as Styles from '@/styles'
+
+const CHECKBOX_SIZE = 13
+const CHECKBOX_MARGIN = 8
+
+const Kb = {Box2, ClickableBox, Icon, Styles, Switch, Text}
+
+const Checkbox = (props: Props) => {
+  if (!isMobile) {
+    return (
+      <Kb.ClickableBox
+        style={Kb.Styles.collapseStyles([
+          styles.container,
+          !props.disabled && styles.clickable,
+          props.style,
+        ])}
+        onClick={e =>
+          props.disabled || e.defaultPrevented ? undefined : props.onCheck?.(!props.checked)
+        }
+      >
+        <div
+          style={Kb.Styles.castStyleDesktop(
+            Kb.Styles.collapseStyles([
+              styles.checkbox,
+              props.checked && styles.checkboxChecked,
+              props.disabled && styles.checkboxInactive,
+              props.disabled && props.checked && styles.semiTransparent,
+              props.checkboxStyle,
+            ])
+          )}
+        >
+          <Kb.Icon
+            type="iconfont-check"
+            style={Kb.Styles.collapseStyles([styles.icon, !props.checked && styles.transparent])}
+            hoverColor={Kb.Styles.globalColors.white}
+            color={props.checkboxColor ?? Kb.Styles.globalColors.white}
+            fontSize={9}
+          />
+        </div>
+        <Kb.Box2 direction="vertical">
+          {props.labelComponent ||
+            (typeof props.label === 'string' ? (
+              <Kb.Text type={props.labelType ?? 'Body'}>{props.label}</Kb.Text>
+            ) : (
+              props.label
+            ))}
+          {!!props.labelSubtitle && <Kb.Text type="BodySmall">{props.labelSubtitle}</Kb.Text>}
+        </Kb.Box2>
+      </Kb.ClickableBox>
+    )
+  }
+
+  return (
+    <Kb.Switch
+      align="left"
+      color="blue"
+      disabled={props.disabled}
+      label={props.labelComponent || props.label || ''}
+      labelType={props.labelType}
+      on={props.checked}
+      onClick={() => {
+        props.onCheck?.(!props.checked)
+      }}
+      style={Styles.collapseStyles([styles.mobileContainer, props.style])}
+      labelSubtitle={props.labelSubtitle}
+    />
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  checkbox: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+      ...Kb.Styles.transition('background'),
+      backgroundColor: Kb.Styles.globalColors.white,
+      borderColor: Kb.Styles.globalColors.black_20,
+      borderRadius: 2,
+      borderStyle: 'solid',
+      borderWidth: 1,
+      flexShrink: 0,
+      height: CHECKBOX_SIZE,
+      justifyContent: 'center',
+      marginRight: CHECKBOX_MARGIN,
+      marginTop: 2,
+      position: 'relative',
+      width: CHECKBOX_SIZE,
+    },
+  }),
+  checkboxChecked: {
+    backgroundColor: Kb.Styles.globalColors.blue,
+    borderColor: Kb.Styles.globalColors.blue,
+  },
+  checkboxInactive: {borderColor: Kb.Styles.globalColors.black_10},
+  clickable: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.desktopStyles.clickable,
+    },
+  }),
+  container: {
+    ...Kb.Styles.globalStyles.flexBoxRow,
+    alignItems: 'flex-start',
+    paddingBottom: 2,
+    paddingTop: 2,
+  },
+  icon: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.transition('opacity'),
+      alignSelf: 'center',
+    },
+  }),
+  mobileContainer: {
+    paddingBottom: Kb.Styles.globalMargins.xtiny,
+    paddingTop: Kb.Styles.globalMargins.xtiny,
+  },
+  semiTransparent: {opacity: 0.4},
+  transparent: {opacity: 0},
+}))
+
+export default Checkbox
diff --git a/shared/common-adapters/choice-list.desktop.tsx b/shared/common-adapters/choice-list.desktop.tsx
deleted file mode 100644
index 94795be14a1e..000000000000
--- a/shared/common-adapters/choice-list.desktop.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {Box2} from './box'
-import ClickableBox from './clickable-box'
-import Text from './text'
-import IconAuto from './icon-auto'
-import * as Styles from '@/styles'
-import type {Props} from './choice-list.shared'
-import './choice-list.css'
-
-const Kb = {
-  Box2,
-  ClickableBox,
-  IconAuto,
-  Text,
-}
-
-const ChoiceList = ({options}: Props) => {
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true}>
-      {options.map((op, idx) => {
-        const iconType = op.icon
-        return (
-          <Kb.ClickableBox key={idx} onClick={() => op.onClick()}>
-            <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.entry} className="cl-entry">
-              <Kb.Box2
-                direction="vertical"
-                centerChildren={true}
-                style={styles.iconContainer}
-                className="cl-icon-container"
-              >
-                {typeof op.icon === 'string' ? (
-                  <Kb.IconAuto style={styles.icon} type={iconType} className="cl-icon" />
-                ) : (
-                  <Kb.Box2 direction="vertical" style={styles.icon} className="cl-icon">
-                    {op.icon}
-                  </Kb.Box2>
-                )}
-              </Kb.Box2>
-              <Kb.Box2 direction="vertical" alignItems="flex-start" justifyContent="center" flex={1} style={styles.infoContainer}>
-                <Text type="BodyBigLink">{op.title}</Text>
-                <Text type="Body">{op.description}</Text>
-              </Kb.Box2>
-            </Kb.Box2>
-          </Kb.ClickableBox>
-        )
-      })}
-    </Kb.Box2>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  entry: Styles.platformStyles({
-    isElectron: {
-      ...Styles.desktopStyles.clickable,
-      ...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.small),
-    },
-  }),
-  icon: {
-    height: 48,
-    width: 48,
-  },
-  iconContainer: {
-    background: Styles.globalColors.greyLight,
-    height: 80,
-    width: 80,
-  },
-  infoContainer: {
-    marginLeft: Styles.globalMargins.small,
-    textAlign: 'left',
-  },
-}))
-
-export default ChoiceList
diff --git a/shared/common-adapters/choice-list.native.tsx b/shared/common-adapters/choice-list.tsx
similarity index 56%
rename from shared/common-adapters/choice-list.native.tsx
rename to shared/common-adapters/choice-list.tsx
index 83ddd130230f..68447cafa7b1 100644
--- a/shared/common-adapters/choice-list.native.tsx
+++ b/shared/common-adapters/choice-list.tsx
@@ -5,6 +5,7 @@ import Text from './text'
 import * as React from 'react'
 import * as Styles from '@/styles'
 import type {Props} from './choice-list.shared'
+import './choice-list.css'
 
 const Kb = {Box2, ClickableBox, IconAuto, Text}
 
@@ -19,6 +20,46 @@ const ChoiceList = (props: Props) => {
   }))
   const activeIndex = active.optionsKey === optionsKey ? active.index : undefined
 
+  if (!isMobile) {
+    return (
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        {options.map((op, idx) => {
+          const iconType = op.icon
+          return (
+            <Kb.ClickableBox key={idx} onClick={() => op.onClick()}>
+              <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.entry} className="cl-entry">
+                <Kb.Box2
+                  direction="vertical"
+                  centerChildren={true}
+                  style={styles.iconContainer}
+                  className="cl-icon-container"
+                >
+                  {typeof op.icon === 'string' ? (
+                    <Kb.IconAuto style={styles.icon} type={iconType} className="cl-icon" />
+                  ) : (
+                    <Kb.Box2 direction="vertical" style={styles.icon} className="cl-icon">
+                      {op.icon}
+                    </Kb.Box2>
+                  )}
+                </Kb.Box2>
+                <Kb.Box2
+                  direction="vertical"
+                  alignItems="flex-start"
+                  justifyContent="center"
+                  flex={1}
+                  style={styles.infoContainer}
+                >
+                  <Text type="BodyBigLink">{op.title}</Text>
+                  <Text type="Body">{op.description}</Text>
+                </Kb.Box2>
+              </Kb.Box2>
+            </Kb.ClickableBox>
+          )
+        })}
+      </Kb.Box2>
+    )
+  }
+
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
       {options.map((op, idx) => {
@@ -36,7 +77,9 @@ const ChoiceList = (props: Props) => {
                 {typeof op.icon === 'string' ? (
                   <IconAuto style={styleIcon} type={iconType} />
                 ) : (
-                  <Kb.Box2 direction="vertical" style={styleIcon}>{op.icon}</Kb.Box2>
+                  <Kb.Box2 direction="vertical" style={styleIcon}>
+                    {op.icon}
+                  </Kb.Box2>
                 )}
               </Kb.Box2>
               <Kb.Box2 direction="vertical" justifyContent="center" flex={1} style={styleInfoContainer}>
@@ -53,6 +96,28 @@ const ChoiceList = (props: Props) => {
   )
 }
 
+const styles = Styles.styleSheetCreate(() => ({
+  entry: Styles.platformStyles({
+    isElectron: {
+      ...Styles.desktopStyles.clickable,
+      ...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.small),
+    },
+  }),
+  icon: {
+    height: 48,
+    width: 48,
+  },
+  iconContainer: {
+    background: Styles.globalColors.greyLight,
+    height: 80,
+    width: 80,
+  },
+  infoContainer: {
+    marginLeft: Styles.globalMargins.small,
+    textAlign: 'left',
+  },
+}))
+
 const styleEntry = {
   paddingBottom: Styles.globalMargins.tiny,
   paddingLeft: Styles.globalMargins.small,
@@ -60,12 +125,12 @@ const styleEntry = {
   paddingTop: Styles.globalMargins.tiny,
 }
 
-const styleIconContainer = (active: boolean) =>
+const styleIconContainer = (isActive: boolean) =>
   ({
     alignSelf: 'center',
     borderRadius: (Styles.globalMargins.large + Styles.globalMargins.medium) / 2,
     height: Styles.globalMargins.large + Styles.globalMargins.medium,
-    ...(active ? {} : {backgroundColor: Styles.globalColors.greyLight}),
+    ...(isActive ? {} : {backgroundColor: Styles.globalColors.greyLight}),
     width: Styles.globalMargins.large + Styles.globalMargins.medium,
   }) as const
 
diff --git a/shared/common-adapters/clickable-box.desktop.tsx b/shared/common-adapters/clickable-box.desktop.tsx
deleted file mode 100644
index 137b097488d3..000000000000
--- a/shared/common-adapters/clickable-box.desktop.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import type {Props as _Props, Props2, MeasureRef} from './clickable-box.shared'
-import type {_StylesCrossPlatform} from '@/styles/css'
-
-type Props = _Props & {children: React.ReactNode}
-
-const ClickableBox = (props: Props & {ref?: React.Ref<MeasureRef | null>}) => {
-  const {ref} = props
-  const [mouseDown, setMouseDown] = React.useState(false)
-  const [mouseIn, setMouseIn] = React.useState(false)
-
-  // Set onMouseEnter/Leave only if needed, so that any hover
-  // properties of children elements work.
-  const needMouseEnterLeaveHandlers = !!(
-    props.hoverColor ||
-    props.underlayColor ||
-    props.onMouseEnter ||
-    props.onMouseLeave
-  )
-  const onMouseEnter = needMouseEnterLeaveHandlers
-    ? (e: React.MouseEvent): void => {
-        setMouseIn(true)
-        props.onMouseEnter?.(e)
-      }
-    : undefined
-  const onMouseLeave = needMouseEnterLeaveHandlers
-    ? (e: React.MouseEvent) => {
-        setMouseIn(false)
-        props.onMouseLeave?.(e)
-      }
-    : undefined
-  const onMouseDown = (e: React.MouseEvent) => {
-    setMouseDown(true)
-    props.onMouseDown?.(e)
-  }
-  const onMouseUp = (e: React.MouseEvent) => {
-    setMouseDown(false)
-    props.onMouseUp?.(e)
-  }
-
-  const {
-    style,
-    children,
-    underlayColor,
-    hoverColor,
-    onClick,
-    onDoubleClick,
-    className,
-    tooltip,
-    ref: _ref,
-    ...otherProps
-  } = props
-
-  // filter out native-only calls
-  const {onPress, onLongPress, onPressIn, onPressOut, activeOpacity, feedback, ...passThroughProps} =
-    otherProps
-
-  let underlay: React.ReactNode
-
-  if (mouseIn && props.onClick && (props.feedback || props.feedback === undefined)) {
-    let borderRadius = 0
-    if (style && typeof style === 'object') {
-      borderRadius = ((style as _StylesCrossPlatform).borderRadius as number) || 0
-    }
-    // Down or hover
-    const backgroundColor = mouseDown
-      ? underlayColor || 'rgba(255, 255, 255, 0.2)'
-      : hoverColor || 'rgba(255, 255, 255, 0.1)'
-    underlay = (
-      <div
-        style={{
-          ...Styles.globalStyles.fillAbsolute,
-          backgroundColor,
-          borderRadius,
-        }}
-      />
-    )
-  }
-
-  return (
-    <div
-      ref={ref as React.Ref<HTMLDivElement>}
-      className={Styles.classNames(className, {tooltip})}
-      data-tooltip={tooltip}
-      {...passThroughProps}
-      onMouseDown={onMouseDown}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onMouseUp={onMouseUp}
-      onDoubleClick={onDoubleClick}
-      onClick={onClick}
-      style={
-        Styles.collapseStyles([
-          styles.container,
-          onClick || props.onMouseDown ? styles.click : null,
-          style,
-        ]) as React.CSSProperties
-      }
-    >
-      {underlay}
-      {children}
-    </div>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      click: Styles.platformStyles({
-        isElectron: {
-          ...Styles.desktopStyles.clickable,
-        },
-      }),
-      container: Styles.platformStyles({
-        isElectron: {
-          alignItems: 'stretch',
-          borderRadius: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          height: undefined,
-          lineHeight: 0,
-          minWidth: undefined,
-          position: 'relative',
-          textAlign: 'left',
-          transform: 'none',
-          transition: 'none',
-        },
-      }),
-    }) as const
-)
-
-export default ClickableBox
-
-export const ClickableBox2 = (p: Props2 & {ref?: React.Ref<MeasureRef | null>}) => {
-  const {onClick, children, style, className, onMouseOver, ref} = p
-  return (
-    <div
-      onClick={onClick}
-      onMouseOver={onMouseOver}
-      style={Styles.castStyleDesktop(style)}
-      ref={ref as React.Ref<HTMLDivElement>}
-      className={Styles.classNames('clickable-box2', className)}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/shared/common-adapters/clickable-box.native.tsx b/shared/common-adapters/clickable-box.native.tsx
deleted file mode 100644
index 8a08ad27217e..000000000000
--- a/shared/common-adapters/clickable-box.native.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type * as React from 'react'
-import * as Styles from '@/styles'
-import {Pressable, View, TouchableOpacity, TouchableWithoutFeedback} from 'react-native'
-import type {MeasureRef} from '@/common-adapters/measure-ref'
-
-type Props = {
-  className?: string
-  children?: React.ReactNode
-  style?: Styles.StylesCrossPlatform
-  onClick?: (event: React.BaseSyntheticEvent) => void
-  onDoubleClick?: (event: React.BaseSyntheticEvent) => void
-  onPress?: never
-  onLongPress?: (event: React.BaseSyntheticEvent) => void
-  underlayColor?: string
-  onPressIn?: () => void
-  onPressOut?: () => void
-  feedback?: boolean
-  activeOpacity?: number
-  hoverColor?: string
-  onMouseOver?: (event: React.MouseEvent) => void
-  onMouseEnter?: (event: React.MouseEvent) => void
-  onMouseLeave?: (event: React.MouseEvent) => void
-  onMouseDown?: (event: React.MouseEvent) => void
-  onMouseMove?: (event: React.MouseEvent) => void
-  onMouseUp?: (event: React.MouseEvent) => void
-  title?: string
-  tooltip?: string
-}
-
-type Props2 = {
-  onLongPress?: () => void
-  hitSlop?: number
-  testID?: string
-  onMouseOver?: (event: React.MouseEvent) => void
-  onClick?: () => void
-  children: React.ReactNode
-  className?: string
-  style?: Styles.StylesCrossPlatform
-  ref?: React.Ref<MeasureRef>
-}
-const Kb = {
-  Styles,
-}
-
-const ClickableBox = (props: Props & {ref?: React.Ref<MeasureRef>}) => {
-  const {feedback = true, onClick, onPressIn, onPressOut, onLongPress} = props
-  const {style, activeOpacity, children} = props
-
-  if (onClick) {
-    const clickStyle = Kb.Styles.collapseStyles([styles.box, style])
-    if (feedback) {
-      return (
-        <TouchableOpacity
-          disabled={!onClick}
-          onPress={onClick}
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          onLongPress={onLongPress}
-          style={clickStyle}
-          activeOpacity={activeOpacity ?? 0.7}
-        >
-          {children}
-        </TouchableOpacity>
-      )
-    } else {
-      return (
-        <TouchableWithoutFeedback
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          onPress={onClick}
-          onLongPress={onLongPress}
-        >
-          <View style={clickStyle}>{children}</View>
-        </TouchableWithoutFeedback>
-      )
-    }
-  } else {
-    if (__DEV__) {
-      if (onPressIn || onPressOut || onLongPress) {
-        console.warn("Passed onPress*/on*Press with no onPress, which isn't supported on the native side")
-      }
-    }
-    return <View style={style}>{children}</View>
-  }
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  box: {borderRadius: 3},
-}))
-
-export default ClickableBox
-
-export const ClickableBox2 = (p: Props2) => {
-  const {onLongPress, onClick, children, hitSlop, style, testID} = p
-  const onPress = () => {
-    onClick?.()
-  }
-  return (
-    <Pressable onLongPress={onLongPress} onPress={onPress} style={style} hitSlop={hitSlop} testID={testID}>
-      {children}
-    </Pressable>
-  )
-}
diff --git a/shared/common-adapters/clickable-box.tsx b/shared/common-adapters/clickable-box.tsx
new file mode 100644
index 000000000000..77f02b6e3236
--- /dev/null
+++ b/shared/common-adapters/clickable-box.tsx
@@ -0,0 +1,199 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Pressable, View, TouchableOpacity, TouchableWithoutFeedback} from 'react-native'
+import type {Props, Props2, MeasureRef} from './clickable-box.shared'
+import type {_StylesCrossPlatform} from '@/styles/css'
+
+const ClickableBox = (props: Props & {children: React.ReactNode; ref?: React.Ref<MeasureRef | null>}) => {
+  const {ref} = props
+  const [mouseDown, setMouseDown] = React.useState(false)
+  const [mouseIn, setMouseIn] = React.useState(false)
+
+  if (!isMobile) {
+    const needMouseEnterLeaveHandlers = !!(
+      props.hoverColor ||
+      props.underlayColor ||
+      props.onMouseEnter ||
+      props.onMouseLeave
+    )
+    const onMouseEnter = needMouseEnterLeaveHandlers
+      ? (e: React.MouseEvent): void => {
+          setMouseIn(true)
+          props.onMouseEnter?.(e)
+        }
+      : undefined
+    const onMouseLeave = needMouseEnterLeaveHandlers
+      ? (e: React.MouseEvent) => {
+          setMouseIn(false)
+          props.onMouseLeave?.(e)
+        }
+      : undefined
+    const onMouseDown = (e: React.MouseEvent) => {
+      setMouseDown(true)
+      props.onMouseDown?.(e)
+    }
+    const onMouseUp = (e: React.MouseEvent) => {
+      setMouseDown(false)
+      props.onMouseUp?.(e)
+    }
+
+    const {
+      style,
+      children,
+      underlayColor,
+      hoverColor,
+      onClick,
+      onDoubleClick,
+      className,
+      tooltip,
+      ref: _ref,
+      ...otherProps
+    } = props
+
+    const {onPress, onLongPress, onPressIn, onPressOut, activeOpacity, feedback, ...passThroughProps} =
+      otherProps
+
+    let underlay: React.ReactNode
+    if (mouseIn && props.onClick && (props.feedback || props.feedback === undefined)) {
+      let borderRadius = 0
+      if (style && typeof style === 'object') {
+        borderRadius = ((style as _StylesCrossPlatform).borderRadius as number) || 0
+      }
+      const backgroundColor = mouseDown
+        ? underlayColor || 'rgba(255, 255, 255, 0.2)'
+        : hoverColor || 'rgba(255, 255, 255, 0.1)'
+      underlay = (
+        <div
+          style={{
+            ...Styles.globalStyles.fillAbsolute,
+            backgroundColor,
+            borderRadius,
+          }}
+        />
+      )
+    }
+
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={Styles.classNames(className, {tooltip})}
+        data-tooltip={tooltip}
+        {...passThroughProps}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseUp={onMouseUp}
+        onDoubleClick={onDoubleClick}
+        onClick={onClick}
+        style={
+          Styles.collapseStyles([
+            desktopStyles.container,
+            onClick || props.onMouseDown ? desktopStyles.click : null,
+            style,
+          ]) as React.CSSProperties
+        }
+      >
+        {underlay}
+        {children}
+      </div>
+    )
+  }
+
+  const {feedback = true, onClick, onPressIn, onPressOut, onLongPress} = props
+  const {style, activeOpacity, children} = props
+
+  if (onClick) {
+    const clickStyle = Styles.collapseStyles([nativeStyles.box, style])
+    if (feedback) {
+      return (
+        <TouchableOpacity
+          disabled={!onClick}
+          onPress={onClick}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onLongPress={onLongPress}
+          style={clickStyle}
+          activeOpacity={activeOpacity ?? 0.7}
+        >
+          {children}
+        </TouchableOpacity>
+      )
+    } else {
+      return (
+        <TouchableWithoutFeedback
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onPress={onClick}
+          onLongPress={onLongPress}
+        >
+          <View style={clickStyle}>{children}</View>
+        </TouchableWithoutFeedback>
+      )
+    }
+  } else {
+    if (__DEV__) {
+      if (onPressIn || onPressOut || onLongPress) {
+        console.warn("Passed onPress*/on*Press with no onPress, which isn't supported on the native side")
+      }
+    }
+    return <View style={style}>{children}</View>
+  }
+}
+
+const desktopStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      click: Styles.platformStyles({
+        isElectron: {
+          ...Styles.desktopStyles.clickable,
+        },
+      }),
+      container: Styles.platformStyles({
+        isElectron: {
+          alignItems: 'stretch',
+          borderRadius: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          height: undefined,
+          lineHeight: 0,
+          minWidth: undefined,
+          position: 'relative',
+          textAlign: 'left',
+          transform: 'none',
+          transition: 'none',
+        },
+      }),
+    }) as const
+)
+
+const nativeStyles = Styles.styleSheetCreate(() => ({
+  box: {borderRadius: 3},
+}))
+
+export default ClickableBox
+
+export const ClickableBox2 = (p: Props2 & {ref?: React.Ref<MeasureRef | null>}) => {
+  if (!isMobile) {
+    const {onClick, children, style, className, onMouseOver, ref} = p
+    return (
+      <div
+        onClick={onClick}
+        onMouseOver={onMouseOver}
+        style={Styles.castStyleDesktop(style)}
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={Styles.classNames('clickable-box2', className)}
+      >
+        {children}
+      </div>
+    )
+  }
+  const {onLongPress, onClick, children, hitSlop, style, testID} = p
+  const onPress = () => {
+    onClick?.()
+  }
+  return (
+    <Pressable onLongPress={onLongPress} onPress={onPress} style={style} hitSlop={hitSlop} testID={testID}>
+      {children}
+    </Pressable>
+  )
+}
diff --git a/shared/common-adapters/confirm-modal.tsx b/shared/common-adapters/confirm-modal.tsx
index 9d0d62553e9c..0d7f9312bc13 100644
--- a/shared/common-adapters/confirm-modal.tsx
+++ b/shared/common-adapters/confirm-modal.tsx
@@ -44,7 +44,7 @@ const ConfirmModal = (props: Props) => (
         <Box2 direction="vertical" style={styles.icon}>
           <IconAuto
             color={props.iconColor ? props.iconColor : Styles.globalColors.black_50}
-            fontSize={Styles.isMobile ? 64 : 48}
+            fontSize={isMobile ? 64 : 48}
             style={styles.icon}
             type={props.icon}
           />
@@ -69,9 +69,9 @@ const ConfirmModal = (props: Props) => (
       )}
       {props.content}
     </Box2>
-    <Box2 direction="vertical" centerChildren={true} fullWidth={true} style={Styles.isMobile ? styles.modalFooterNoBorder : styles.modalFooter}>
+    <Box2 direction="vertical" centerChildren={true} fullWidth={true} style={isMobile ? styles.modalFooterNoBorder : styles.modalFooter}>
       <ButtonBar direction="row" fullWidth={true} style={styles.buttonBar}>
-        {!Styles.isMobile && (
+        {!isMobile && (
           <WaitingButton
             key="cancel"
             disabled={!props.onCancel || props.waiting}
diff --git a/shared/common-adapters/copy-text.tsx b/shared/common-adapters/copy-text.tsx
index e12fcf7dd3e1..3397877c0374 100644
--- a/shared/common-adapters/copy-text.tsx
+++ b/shared/common-adapters/copy-text.tsx
@@ -38,7 +38,7 @@ const CopyText = (props: Props) => {
   const {withReveal, text, loadText, onCopy, hideOnCopy} = props
   const [revealed, setRevealed] = React.useState(!props.withReveal)
   const [showingToast, setShowingToast] = React.useState(false)
-  const shareSheet = props.shareSheet && Styles.isMobile
+  const shareSheet = props.shareSheet && isMobile
   const copyRequestIDRef = React.useRef(0)
   const copyOnLoadedRequestIDRef = React.useRef(0)
   const popupAnchor = React.useRef<MeasureRef | null>(null)
@@ -153,8 +153,8 @@ const CopyText = (props: Props) => {
       ])}
     >
       <Kb.Toast position="top center" attachTo={popupAnchor} visible={showingToast}>
-        {Styles.isMobile && <Kb.Icon type="iconfont-clipboard" color={Styles.globalColors.whiteOrWhite} />}
-        <Kb.Text type={Styles.isMobile ? 'BodySmallSemibold' : 'BodySmall'} style={styles.toastText}>
+        {isMobile && <Kb.Icon type="iconfont-clipboard" color={Styles.globalColors.whiteOrWhite} />}
+        <Kb.Text type={isMobile ? 'BodySmallSemibold' : 'BodySmall'} style={styles.toastText}>
           Copied to clipboard
         </Kb.Text>
       </Kb.Toast>
diff --git a/shared/common-adapters/copyable-text.desktop.tsx b/shared/common-adapters/copyable-text.desktop.tsx
deleted file mode 100644
index aab2746a06ec..000000000000
--- a/shared/common-adapters/copyable-text.desktop.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as Styles from '@/styles'
-import type {Props} from './copyable-text.shared'
-
-const CopyableText = ({value, style}: Props) => {
-  return (
-    <textarea
-      style={Styles.collapseStyles([styles.base, style]) as React.CSSProperties}
-      readOnly={true}
-      value={value}
-      onClick={e => {
-        const target = e.target as HTMLTextAreaElement
-        target.focus()
-        target.select()
-      }}
-    />
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      base: Styles.platformStyles({
-        common: {
-          ...Styles.globalStyles.fontTerminal,
-          alignItems: 'flex-start',
-          backgroundColor: Styles.globalColors.greyLight,
-          borderRadius: 3,
-          color: Styles.globalColors.black,
-          fontSize: 13,
-          padding: 10,
-          textAlign: 'left',
-        },
-        isElectron: {
-          border: `solid 1px ${Styles.globalColors.black_10}`,
-          justifyContent: 'stretch',
-          lineHeight: '17px',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          resize: 'none',
-          whiteSpace: 'pre-wrap',
-          wordWrap: 'break-word',
-        },
-      }),
-    }) as const
-)
-
-export default CopyableText
diff --git a/shared/common-adapters/copyable-text.native.tsx b/shared/common-adapters/copyable-text.tsx
similarity index 59%
rename from shared/common-adapters/copyable-text.native.tsx
rename to shared/common-adapters/copyable-text.tsx
index 24ed525122ea..d83d5495c0d2 100644
--- a/shared/common-adapters/copyable-text.native.tsx
+++ b/shared/common-adapters/copyable-text.tsx
@@ -4,8 +4,8 @@ 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'
-import * as Clipboard from 'expo-clipboard'
 
 export type Props = {
   textStyle?: object
@@ -14,8 +14,24 @@ export type Props = {
 const CopyableText = (props: Props) => {
   const [hasCopied, setHasCopied] = React.useState(false)
   const setHasCopiedFalseLater = useTimeout(() => setHasCopied(false), 5000)
+
+  if (!isMobile) {
+    return (
+      <textarea
+        style={Styles.castStyleDesktop(Styles.collapseStyles([styles.base, props.style]))}
+        readOnly={true}
+        value={props.value}
+        onClick={e => {
+          const target = e.target as unknown as {focus: () => void; select: () => void}
+          target.focus()
+          target.select()
+        }}
+      />
+    )
+  }
+
   const handleCopy = () => {
-    Clipboard.setStringAsync(props.value)
+    setStringAsync(props.value)
       .then(() => {})
       .catch(() => {})
     setHasCopied(true)
@@ -47,16 +63,35 @@ const CopyableText = (props: Props) => {
 const styles = Styles.styleSheetCreate(
   () =>
     ({
-      base: {
-        backgroundColor: Styles.globalColors.greyLight,
-        borderColor: Styles.globalColors.black_10,
-        borderRadius: 3,
-        borderWidth: 1,
-        // Guarantee that the first line of text is shown above the 'Tap to Copy' toast
-        minHeight:
-          Styles.globalMargins.medium + Styles.globalMargins.tiny + 2 * Styles.globalMargins.small + 24,
-        padding: 10,
-      },
+      base: Styles.platformStyles({
+        common: {
+          ...Styles.globalStyles.fontTerminal,
+          alignItems: 'flex-start',
+          backgroundColor: Styles.globalColors.greyLight,
+          borderRadius: 3,
+          color: Styles.globalColors.black,
+          fontSize: 13,
+          padding: 10,
+          textAlign: 'left',
+        },
+        isElectron: {
+          border: `solid 1px ${Styles.globalColors.black_10}`,
+          justifyContent: 'stretch',
+          lineHeight: '17px',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          resize: 'none',
+          whiteSpace: 'pre-wrap',
+          wordWrap: 'break-word',
+        },
+        isMobile: {
+          borderColor: Styles.globalColors.black_10,
+          borderWidth: 1,
+          // Guarantee that the first line of text is shown above the 'Tap to Copy' toast
+          minHeight:
+            Styles.globalMargins.medium + Styles.globalMargins.tiny + 2 * Styles.globalMargins.small + 24,
+        },
+      }),
       copyToast: {
         backgroundColor: Styles.globalColors.black_50,
         borderRadius: Styles.globalMargins.large,
diff --git a/shared/common-adapters/drag-and-drop.native.tsx b/shared/common-adapters/drag-and-drop.native.tsx
deleted file mode 100644
index 6da4a3f44a06..000000000000
--- a/shared/common-adapters/drag-and-drop.native.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type {Props} from './drag-and-drop.shared'
-
-const RenderChildren = (props: Props): React.ReactNode => props.children || null
-
-// Do nothing
-export {RenderChildren as default}
diff --git a/shared/common-adapters/drag-and-drop.desktop.tsx b/shared/common-adapters/drag-and-drop.tsx
similarity index 69%
rename from shared/common-adapters/drag-and-drop.desktop.tsx
rename to shared/common-adapters/drag-and-drop.tsx
index 34a9b3a23d7c..b61e796342f2 100644
--- a/shared/common-adapters/drag-and-drop.desktop.tsx
+++ b/shared/common-adapters/drag-and-drop.tsx
@@ -6,32 +6,41 @@ import Icon from './icon'
 import Text from './text'
 import logger from '@/logger'
 import type {Props} from './drag-and-drop.shared'
-import KB2 from '@/util/electron.desktop'
+import KB2 from '@/util/electron'
 
 const {isDirectory, getPathForFile} = KB2.functions
 
-const DragAndDrop = (props: Props) => {
+type DragEvent = {
+  dataTransfer: {
+    types: Array<string>
+    files: {length: number; [n: number]: File}
+    dropEffect: string
+  }
+}
+
+const DragAndDrop = (props: Props): React.ReactNode => {
   const [showDropOverlay, setShowDropOverlay] = React.useState(false)
 
-  const _onDrop = (e: React.DragEvent) => {
+  if (isMobile) {
+    return props.children ?? null
+  }
+
+  const _onDrop = (e: DragEvent) => {
     const f = async () => {
       if (!_validDrag(e)) return
       const fileList = e.dataTransfer.files
       const paths: Array<string> = fileList.length
-        ? Array.from(fileList).map(f => getPathForFile?.(f) ?? '')
+        ? Array.from({length: fileList.length}, (_, i) => getPathForFile?.(fileList[i] as File) ?? '')
         : []
       if (paths.length) {
         if (!props.allowFolders) {
           for (const path of paths) {
-            // Check if any file is a directory and bail out if not
             try {
               const isDir = await (isDirectory?.(path) ?? Promise.resolve(false))
               if (isDir) {
-                // TODO show a red error banner on failure: https://zpl.io/2jlkMLm
                 setShowDropOverlay(false)
                 return
               }
-              // delegate to handler for any errors
             } catch (error) {
               logger.warn(`Error stating dropped attachment: ${String(error)}`)
             }
@@ -44,9 +53,10 @@ const DragAndDrop = (props: Props) => {
     C.ignorePromise(f())
   }
 
-  const _validDrag = (e: React.DragEvent) => e.dataTransfer.types.includes('Files') && !props.disabled
+  const _validDrag = (e: DragEvent) =>
+    e.dataTransfer.types.includes('Files') && !props.disabled
 
-  const _onDragOver = (e: React.DragEvent) => {
+  const _onDragOver = (e: DragEvent) => {
     if (_validDrag(e)) {
       e.dataTransfer.dropEffect = 'copy'
       setShowDropOverlay(true)
@@ -65,7 +75,7 @@ const DragAndDrop = (props: Props) => {
       centerChildren={true}
       direction="horizontal"
       onDragLeave={_onDragLeave}
-      onDrop={_onDrop}
+      onDrop={_onDrop as never}
       style={styles.dropOverlay}
     >
       <Box2 direction="vertical" centerChildren={true} gap="medium">
@@ -88,7 +98,7 @@ const DragAndDrop = (props: Props) => {
       direction="vertical"
       fullHeight={props.fullHeight}
       fullWidth={props.fullWidth}
-      onDragOver={_onDragOver}
+      onDragOver={_onDragOver as never}
       style={Styles.collapseStyles([styles.containerStyle, props.containerStyle])}
     >
       {props.children}
@@ -97,20 +107,17 @@ const DragAndDrop = (props: Props) => {
   )
 }
 
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      containerStyle: {
-        position: 'relative',
-      },
-      dropOverlay: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.fillAbsolute,
-          backgroundImage: `linear-gradient(${Styles.globalColors.white_75}, ${Styles.globalColors.white})`,
-          padding: Styles.globalMargins.large,
-        },
-      }),
-    }) as const
-)
+const styles = Styles.styleSheetCreate(() => ({
+  containerStyle: {
+    position: 'relative',
+  },
+  dropOverlay: Styles.platformStyles({
+    isElectron: {
+      ...Styles.globalStyles.fillAbsolute,
+      backgroundImage: `linear-gradient(${Styles.globalColors.white_75}, ${Styles.globalColors.white})`,
+      padding: Styles.globalMargins.large,
+    },
+  }),
+}))
 
 export default DragAndDrop
diff --git a/shared/common-adapters/dropdown.tsx b/shared/common-adapters/dropdown.tsx
index e9f765fc43e5..07a30a12d602 100644
--- a/shared/common-adapters/dropdown.tsx
+++ b/shared/common-adapters/dropdown.tsx
@@ -53,7 +53,7 @@ export const DropdownButton = (props: DropdownButtonProps) => {
           {
             paddingRight: inline
               ? Styles.globalMargins.tiny
-              : Styles.isMobile
+              : isMobile
                 ? Styles.globalMargins.large
                 : Styles.globalMargins.small,
           },
@@ -68,7 +68,7 @@ export const DropdownButton = (props: DropdownButtonProps) => {
         <Kb.Icon
           type="iconfont-caret-down"
           sizeType="Tiny"
-          style={{marginTop: Styles.isMobile ? 2 : -8}}
+          style={{marginTop: isMobile ? 2 : -8}}
         />
       </Kb.Box2>
     </Kb.ClickableBox>
@@ -221,7 +221,7 @@ const styles = Styles.styleSheetCreate(
         borderColor: Styles.globalColors.black_10,
         borderStyle: 'solid',
         justifyContent: 'center',
-        minHeight: Styles.isMobile ? 40 : 32,
+        minHeight: isMobile ? 40 : 32,
         width: '100%',
       },
       itemClickBox: Styles.platformStyles({
@@ -236,7 +236,7 @@ const styles = Styles.styleSheetCreate(
       measureBox: {
         ...Styles.globalStyles.flexBoxRow,
         alignItems: 'center',
-        ...(Styles.isMobile
+        ...(isMobile
           ? {
               borderColor: Styles.globalColors.black_10,
               color: Styles.globalColors.black_50,
diff --git a/shared/common-adapters/emoji/custom-emoji.native.tsx b/shared/common-adapters/emoji/custom-emoji.native.tsx
deleted file mode 100644
index e24155063b41..000000000000
--- a/shared/common-adapters/emoji/custom-emoji.native.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type {Props} from './custom-emoji.shared'
-import Image from '@/common-adapters/image'
-import * as Styles from '@/styles'
-
-const CustomEmoji = (props: Props) => {
-  const {size, src, style} = props
-  const dimensions = {
-    height: size,
-    transform: [{translateY: Styles.isAndroid ? 4 : 2}],
-    width: size,
-    ...style,
-  }
-
-  return <Image key={size} src={src} style={dimensions} />
-}
-
-export default CustomEmoji
diff --git a/shared/common-adapters/emoji/custom-emoji.desktop.tsx b/shared/common-adapters/emoji/custom-emoji.tsx
similarity index 85%
rename from shared/common-adapters/emoji/custom-emoji.desktop.tsx
rename to shared/common-adapters/emoji/custom-emoji.tsx
index b98d5d2c399a..e3e54e8a19d0 100644
--- a/shared/common-adapters/emoji/custom-emoji.desktop.tsx
+++ b/shared/common-adapters/emoji/custom-emoji.tsx
@@ -13,6 +13,17 @@ const Kb = {
 
 const CustomEmoji = (props: Props) => {
   const {size, src, alias, style} = props
+
+  if (isMobile) {
+    const dimensions = {
+      height: size,
+      transform: [{translateY: isAndroid ? 4 : 2}],
+      width: size,
+      ...style,
+    }
+    return <Image key={size} src={src} style={dimensions} />
+  }
+
   return (
     <Kb.Box2
       direction="horizontal"
diff --git a/shared/common-adapters/emoji/native-emoji.native.tsx b/shared/common-adapters/emoji/native-emoji.native.tsx
deleted file mode 100644
index 9be458f62d15..000000000000
--- a/shared/common-adapters/emoji/native-emoji.native.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Styles from '@/styles'
-import {isAndroid} from '@/constants/platform'
-import {emojiIndexByName} from '../markdown/emoji-gen'
-import Text from '../text'
-
-import type {Props} from './native-emoji.shared'
-
-const sizes = [16, 18, 22, 24, 26, 28, 32, 36] as const
-const sizeStyle = new Map<(typeof sizes)[number], Styles.StylesCrossPlatform>(
-  sizes.map(size => [size, {fontSize: size - 2, lineHeight: undefined}])
-)
-
-// Android fails to paint emoji glyphs in mixed-content Text nodes when the
-// variant selector (VS16 / U+FE0F) is appended to codepoints that already
-// have Emoji_Presentation. iOS and desktop handle it fine.
-const emojiVariantSuffix = isAndroid ? '' : '\ufe0f'
-
-function EmojiWrapper(props: Props) {
-  const {emojiName, size} = props
-  return (
-    <Text
-      type="Body"
-      style={Styles.collapseStyles([sizeStyle.get(size), props.style])}
-      allowFontScaling={props.allowFontScaling}
-    >
-      {emojiIndexByName[emojiName] ? emojiIndexByName[emojiName] + emojiVariantSuffix : emojiName}
-    </Text>
-  )
-}
-
-export default EmojiWrapper
diff --git a/shared/common-adapters/emoji/native-emoji.desktop.tsx b/shared/common-adapters/emoji/native-emoji.tsx
similarity index 72%
rename from shared/common-adapters/emoji/native-emoji.desktop.tsx
rename to shared/common-adapters/emoji/native-emoji.tsx
index 04d5c4935b7b..1b87da81a2dd 100644
--- a/shared/common-adapters/emoji/native-emoji.desktop.tsx
+++ b/shared/common-adapters/emoji/native-emoji.tsx
@@ -1,10 +1,18 @@
-import type {Props} from './native-emoji.shared'
+import * as Styles from '@/styles'
+import {emojiIndexByName, spriteSheetWidth, spriteSheetHeight} from '../markdown/emoji-gen'
+import Text from '../text'
 import {type EmojiData} from '.'
 import {emojiData} from './data'
-import {spriteSheetWidth, spriteSheetHeight} from '../markdown/emoji-gen'
-import * as Styles from '@/styles'
+import type {Props} from './native-emoji.shared'
 
-// Just the single set we use
+const sizes = [16, 18, 22, 24, 26, 28, 32, 36] as const
+const sizeStyle = new Map<(typeof sizes)[number], Styles.StylesCrossPlatform>(
+  sizes.map(size => [size, {fontSize: size - 2, lineHeight: undefined}])
+)
+
+const emojiVariantSuffix = isAndroid ? '' : '️'
+
+// Desktop: sprite sheet
 import emojiSet from 'emoji-datasource-apple/img/apple/sheets/64.png'
 
 const unifiedToNative = (unified: string) =>
@@ -12,8 +20,20 @@ const unifiedToNative = (unified: string) =>
 
 const nameReg = /^(?::([^:]+):)(?::skin-tone-(\d):)?$/
 
-const EmojiWrapper = (props: Props) => {
-  const {emojiName, size, style} = props
+function EmojiWrapper(props: Props) {
+  const {emojiName, size} = props
+
+  if (isMobile) {
+    return (
+      <Text
+        type="Body"
+        style={Styles.collapseStyles([sizeStyle.get(size), props.style])}
+        allowFontScaling={props.allowFontScaling}
+      >
+        {emojiIndexByName[emojiName] ? emojiIndexByName[emojiName] + emojiVariantSuffix : emojiName}
+      </Text>
+    )
+  }
 
   const match = emojiName.match(nameReg)
   if (!match) {
@@ -23,7 +43,7 @@ const EmojiWrapper = (props: Props) => {
           className="emoji emoji-native"
           style={Styles.castStyleDesktop(
             Styles.platformStyles({
-              common: {...style},
+              common: {...props.style},
               isElectron: {
                 display: 'inline-block',
                 fontSize: size,
@@ -71,7 +91,7 @@ const EmojiWrapper = (props: Props) => {
       title={name}
       style={Styles.castStyleDesktop(
         Styles.platformStyles({
-          common: {...style},
+          common: {...props.style},
           isElectron: {
             backgroundImage,
             backgroundPosition,
diff --git a/shared/common-adapters/error-boundary.tsx b/shared/common-adapters/error-boundary.tsx
index 258ff7557280..b4fd12e5fc1c 100644
--- a/shared/common-adapters/error-boundary.tsx
+++ b/shared/common-adapters/error-boundary.tsx
@@ -79,9 +79,9 @@ const Fallback = ({closeOnClick, info: {name, message, stack, componentStack}, s
           <Text type="Header">Something went wrong...</Text>
           <Text type="Body">
             Please submit a bug report by
-            {Styles.isMobile ? ' going into Settings / Feedback' : ' running this command in your terminal:'}
+            {isMobile ? ' going into Settings / Feedback' : ' running this command in your terminal:'}
           </Text>
-          {!Styles.isMobile && (
+          {!isMobile && (
             <Box2
               direction="vertical"
               style={{
diff --git a/shared/common-adapters/floating-menu/index.tsx b/shared/common-adapters/floating-menu/index.tsx
index e44108ec5b62..9d7b7563b61b 100644
--- a/shared/common-adapters/floating-menu/index.tsx
+++ b/shared/common-adapters/floating-menu/index.tsx
@@ -3,7 +3,7 @@ import Popup from '../popup'
 import type {MeasureRef} from '@/common-adapters/measure-ref'
 import MenuLayout from './menu-layout'
 import type {MenuItems as _MenuItems} from './menu-layout/index.shared'
-import * as Styles from '@/styles'
+import type * as Styles from '@/styles'
 import {useNavigation, type NavigationProp, type ParamListBase} from '@react-navigation/native'
 
 export type MenuItems = _MenuItems
@@ -33,8 +33,8 @@ export type Props = {
 
 type SafeNavigationHook = <T extends NavigationProp<ParamListBase>>() => T | null
 
-const useSafeNavigation: SafeNavigationHook = Styles.isMobile
-  ? (useNavigation as SafeNavigationHook)
+const useSafeNavigation: SafeNavigationHook = isMobile
+  ? (useNavigation)
   : () => null
 
 function FloatingMenu(props: Props) {
@@ -74,7 +74,7 @@ function FloatingMenu(props: Props) {
 
   return (
     <Popup
-      attachTo={mode === 'bottomsheet' && Styles.isMobile ? undefined : props.attachTo}
+      attachTo={mode === 'bottomsheet' && isMobile ? undefined : props.attachTo}
       onHidden={onHidden}
       visible={props.visible}
       position={props.position}
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx b/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx
deleted file mode 100644
index 9ba52728eaf9..000000000000
--- a/shared/common-adapters/floating-menu/menu-layout/index.desktop.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import type * as React from 'react'
-import type {MenuLayoutProps, MenuItem} from './index.shared'
-export type {MenuItem, MenuItems, MenuLayoutProps, _InnerMenuItem} from './index.shared'
-import {Box2} from '@/common-adapters/box'
-import ClickableBox from '@/common-adapters/clickable-box'
-import Divider from '@/common-adapters/divider'
-import Icon from '@/common-adapters/icon'
-import IconAuto from '@/common-adapters/icon-auto'
-import Text from '@/common-adapters/text'
-import Meta from '@/common-adapters/meta'
-import Badge from '@/common-adapters/badge'
-import ProgressIndicator from '@/common-adapters/progress-indicator'
-import * as Styles from '@/styles'
-import './menu-layout.css'
-
-const MenuLayout = (props: MenuLayoutProps) => {
-  const renderDivider = (index: number) => (
-    <Divider style={index === 0 ? styles.dividerFirst : styles.divider} key={index} />
-  )
-
-  const renderMenuItem = (item: MenuItem, index: number): React.ReactNode => {
-    let hoverClassName: string | undefined
-    let styleDisabled: Styles.StylesCrossPlatform = {}
-    if (!item.disabled) {
-      hoverClassName = item.danger ? 'menu-hover-danger' : 'menu-hover'
-    } else {
-      styleDisabled = {opacity: 0.4}
-    }
-
-    const styleClickable = item.disabled ? {} : Styles.desktopStyles.clickable
-
-    return item.unWrapped ? (
-      item.view
-    ) : (
-      <ClickableBox
-        key={index}
-        className={hoverClassName}
-        style={Styles.collapseStyles([styles.itemContainer, styleClickable])}
-        onClick={() => {
-          item.onClick?.()
-          if (props.closeOnClick) {
-            props.onHidden()
-          }
-        }}
-      >
-        {item.view}
-        {!item.view && (
-          <Box2 direction="horizontal" fullWidth={true}>
-            <Text
-              className="title"
-              type="Body"
-              style={Styles.collapseStyles([styles.itemBodyText, item.style, styleDisabled])}
-            >
-              {item.title}
-            </Text>
-            {!!item.icon && item.iconIsVisible && <IconAuto style={styles.icon} type={item.icon} />}
-            {item.newTag && (
-              <Meta
-                title="New"
-                size="Small"
-                backgroundColor={Styles.globalColors.blue}
-                style={styles.badge}
-              />
-            )}
-            {item.decoration}
-            {item.isBadged && <Badge badgeStyle={Styles.collapseStyles([styles.badge, styles.iconBadge])} />}
-            {item.isSelected && (
-              <Icon
-                type="iconfont-check"
-                color={Styles.globalColors.blue}
-                fontSize={16}
-                sizeType="Default"
-                style={{paddingLeft: Styles.globalMargins.tiny}}
-              />
-            )}
-          </Box2>
-        )}
-        {!item.view && item.subTitle && (
-          <Text
-            className="subtitle"
-            key={item.subTitle}
-            type="BodySmall"
-            style={Styles.collapseStyles([styles.itemBodyText, item.style])}
-          >
-            {item.subTitle}
-          </Text>
-        )}
-        {!!item.progressIndicator && <ProgressIndicator type="Large" style={styles.progressIndicator} />}
-      </ClickableBox>
-    )
-  }
-
-  const items = props.items.reduce<Array<'Divider' | MenuItem>>((arr, item) => {
-    if (item === 'Divider' && arr.length && arr.at(-1) === 'Divider') {
-      return arr
-    }
-    if (item) {
-      arr.push(item)
-    }
-    return arr
-  }, [])
-
-  return (
-    <ClickableBox
-      onClick={event => {
-        // never allow a click to go through
-        event.stopPropagation()
-      }}
-    >
-      <Box2
-        direction="vertical"
-        alignItems="stretch"
-        fullWidth={true}
-        style={Styles.collapseStyles([styles.menuContainer, props.style])}
-      >
-        {/* Display header if there is one */}
-        {props.header}
-        {/* Display menu items */}
-        {items.some(item => item !== 'Divider') && (
-          <Box2
-            direction="vertical"
-            fullWidth={true}
-            style={Styles.collapseStyles([styles.menuItemList, props.listStyle])}
-          >
-            {items.map(
-              (item, index): React.ReactNode =>
-                item === 'Divider' ? renderDivider(index) : renderMenuItem(item, index)
-            )}
-          </Box2>
-        )}
-      </Box2>
-    </ClickableBox>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      badge: {
-        alignSelf: 'center',
-        marginLeft: 'auto',
-      },
-      divider: {
-        marginBottom: 8,
-        marginTop: 8,
-      },
-      dividerFirst: {
-        marginBottom: 8,
-      },
-      icon: {marginLeft: Styles.globalMargins.xtiny},
-      iconBadge: {
-        backgroundColor: Styles.globalColors.blue,
-        height: Styles.globalMargins.tiny,
-        minWidth: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        position: 'relative',
-        right: Styles.globalMargins.xtiny,
-        width: Styles.globalMargins.tiny,
-      },
-      itemBodyText: {color: undefined},
-      itemContainer: {
-        ...Styles.globalStyles.flexBoxColumn,
-        ...Styles.padding(7, Styles.globalMargins.small),
-        position: 'relative',
-      },
-      menuContainer: Styles.platformStyles({
-        isElectron: {
-          ...Styles.desktopStyles.boxShadow,
-          backgroundColor: Styles.globalColors.white,
-          borderRadius: Styles.borderRadius,
-          justifyContent: 'flex-start',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          width: 240,
-        },
-      }),
-      menuItemList: {
-        flexShrink: 0,
-        paddingBottom: Styles.globalMargins.tiny,
-        paddingTop: Styles.globalMargins.tiny,
-      },
-      progressIndicator: {
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: Styles.globalMargins.xtiny,
-      },
-    }) as const
-)
-
-export default MenuLayout
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.native.tsx b/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
deleted file mode 100644
index 1f7756f2ffee..000000000000
--- a/shared/common-adapters/floating-menu/menu-layout/index.native.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import * as Styles from '@/styles'
-import {TouchableOpacity, Keyboard} from 'react-native'
-import Badge from '@/common-adapters/badge'
-import {Box2} from '@/common-adapters/box'
-import Icon from '@/common-adapters/icon'
-import IconAuto from '@/common-adapters/icon-auto'
-import Text from '@/common-adapters/text'
-import Meta from '@/common-adapters/meta'
-import Divider from '@/common-adapters/divider'
-import ScrollView from '@/common-adapters/scroll-view'
-import {BottomSheetScrollView} from '@/common-adapters/popup/bottom-sheet'
-import ProgressIndicator from '@/common-adapters/progress-indicator'
-import {useOnMountOnce} from '@/constants/react'
-import type {MenuItem, MenuLayoutProps} from './index.shared'
-import {default as SafeAreaView, useSafeAreaInsets} from '@/common-adapters/safe-area-view'
-import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
-import noop from 'lodash/noop'
-
-const Kb = {
-  Badge,
-  Box2,
-  Divider,
-  Icon,
-  IconAuto,
-  Meta,
-  ProgressIndicator,
-  SafeAreaView,
-  Text,
-  useSafeAreaInsets,
-}
-
-type MenuRowProps = {
-  isHeader?: boolean
-  newTag?: boolean
-  index: number
-  numItems: number
-  onHidden?: () => void
-  textColor?: Styles.Color
-  backgroundColor?: Styles.Color
-} & MenuItem
-
-const itemContainerHeight = 40
-
-const MenuRow = (props: MenuRowProps) => (
-  <TouchableOpacity
-    disabled={props.disabled}
-    onPress={() => {
-      if (!props.unWrapped) {
-        props.onHidden?.() // auto hide after a selection
-        props.onClick?.()
-      }
-    }}
-    style={Styles.collapseStyles([
-      styles.itemContainer,
-      !props.unWrapped && styles.itemContainerWrapped,
-      !!props.subTitle && styles.itemContainerWithSubTitle,
-      props.backgroundColor && {backgroundColor: props.backgroundColor},
-    ])}
-  >
-    {props.view || (
-      <Kb.Box2
-        direction="horizontal"
-        fullWidth={true}
-        fullHeight={true}
-        gap={props.icon ? 'small' : undefined}
-      >
-        {props.icon || props.isSelected ? (
-          <Kb.Box2 direction="horizontal" fullHeight={true} alignItems="center" justifyContent="center" style={styles.iconContainer}>
-            {props.isSelected && (
-              <Kb.Icon
-                type="iconfont-check"
-                color={Styles.globalColors.blue}
-                fontSize={16}
-                sizeType="Default"
-              />
-            )}
-            {props.icon &&
-              !props.isSelected &&
-              (props.inProgress ? (
-                <Kb.ProgressIndicator />
-              ) : (
-                <>
-                  <Kb.IconAuto
-                    color={props.danger ? Styles.globalColors.redDark : Styles.globalColors.black_60}
-                    style={Styles.collapseStyles([{alignSelf: 'center'}, props.iconStyle])}
-                    sizeType="Default"
-                    type={props.icon}
-                  />
-                  {props.isBadged && <Kb.Badge badgeStyle={styles.iconBadge} />}
-                </>
-              ))}
-          </Kb.Box2>
-        ) : null}
-        <Kb.Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
-          <Kb.Box2
-            direction="vertical"
-            fullHeight={true}
-            fullWidth={true}
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Kb.Box2 direction="horizontal" fullWidth={true}>
-              <Kb.Text type="Body" style={Styles.collapseStyles([styleRowText(props), props.style])}>
-                {props.title}
-                {props.rightTitle ? (
-                  <Kb.Text type="BodyTinySemiboldItalic">{' ' + props.rightTitle}</Kb.Text>
-                ) : null}
-              </Kb.Text>
-              {props.newTag && (
-                <Kb.Meta
-                  title="New"
-                  size="Small"
-                  backgroundColor={Styles.globalColors.blue}
-                  style={styles.badge}
-                />
-              )}
-              {props.decoration}
-            </Kb.Box2>
-            {!!props.subTitle && (
-              <Kb.Box2 direction="horizontal" fullWidth={true}>
-                <Kb.Text type="BodyTiny">{props.subTitle}</Kb.Text>
-              </Kb.Box2>
-            )}
-          </Kb.Box2>
-        </Kb.Box2>
-      </Kb.Box2>
-    )}
-    {!!props.progressIndicator && <Kb.ProgressIndicator style={styles.progressIndicator} />}
-  </TouchableOpacity>
-)
-
-const MenuLayout = (props: MenuLayoutProps) => {
-  const {isModal} = props
-  const menuItemsWithDividers = props.items.filter((x): x is MenuItem | 'Divider' => x !== undefined)
-  const beginningDivider = props.items[0] === 'Divider'
-  const firstIsUnWrapped = props.items[0] !== 'Divider' && props.items[0]?.unWrapped
-
-  // hide keyboards that are up
-  useOnMountOnce(() => {
-    Keyboard.dismiss()
-  })
-
-  const items = menuItemsWithDividers.map((mi, idx) =>
-    mi === 'Divider' ? (
-      idx !== 0 && idx !== props.items.length ? (
-        <Kb.Divider key={idx} style={styles.dividerInScrolleView} />
-      ) : null
-    ) : (
-      <MenuRow
-        key={idx}
-        {...mi}
-        index={idx}
-        numItems={menuItemsWithDividers.length}
-        onHidden={props.closeOnClick ? props.onHidden : undefined}
-        textColor={props.textColor}
-        backgroundColor={props.backgroundColor}
-      />
-    )
-  )
-
-  const close = (
-    <>
-      <Kb.Divider style={styles.divider} />
-      <Kb.Box2 direction="vertical" fullWidth={true} style={Styles.collapseStyles([styles.menuGroup, props.listStyle])}>
-        <MenuRow
-          title={props.closeText || 'Close'}
-          index={0}
-          numItems={1}
-          onClick={props.onHidden} // pass in nothing to onHidden so it doesn't trigger it twice
-          onHidden={noop}
-          textColor={props.textColor}
-          backgroundColor={props.backgroundColor}
-        />
-      </Kb.Box2>
-    </>
-  )
-
-  const {bottom: safeBottom} = Kb.useSafeAreaInsets()
-
-  if (isModal === 'bottomsheet') {
-    return (
-      <BottomSheetScrollView
-        style={[
-          {backgroundColor: Styles.undynamicColor(Styles.globalColors.black_05OrBlack)},
-          styles.bottomSheetScrollView,
-        ]}
-      >
-        <Kb.Box2
-          style={Styles.collapseStyles([styles.bottomSheetContainer, {marginBottom: 20 + safeBottom}])}
-          direction="vertical"
-          fullWidth={true}
-        >
-          {props.header}
-          {items}
-          {close}
-        </Kb.Box2>
-      </BottomSheetScrollView>
-    )
-  }
-
-  return (
-    <SafeAreaProvider
-      initialMetrics={initialWindowMetrics}
-      style={[styles.safeProvider, props.safeProviderStyle]}
-      pointerEvents="box-none"
-    >
-      <Kb.SafeAreaView
-        style={Styles.collapseStyles([
-          styles.safeArea,
-          props.backgroundColor && {backgroundColor: props.backgroundColor},
-        ])}
-      >
-        <Kb.Box2
-          direction="vertical"
-          fullWidth={true}
-          style={Styles.collapseStyles([
-            styles.menuBox,
-            firstIsUnWrapped && styles.firstIsUnWrapped,
-            props.backgroundColor && {backgroundColor: props.backgroundColor},
-          ])}
-        >
-          {props.header}
-          {beginningDivider && <Kb.Divider />}
-          <ScrollView
-            alwaysBounceVertical={false}
-            style={Styles.collapseStyles([styles.scrollView, firstIsUnWrapped && styles.firstIsUnWrapped])}
-            contentContainerStyle={styles.menuGroup}
-          >
-            {items}
-          </ScrollView>
-          {close}
-        </Kb.Box2>
-      </Kb.SafeAreaView>
-    </SafeAreaProvider>
-  )
-}
-
-const styleRowText = (props: {
-  isHeader?: boolean
-  danger?: boolean
-  disabled?: boolean
-  textColor?: Styles.Color
-}) => {
-  const dangerColor = props.danger ? Styles.globalColors.redDark : Styles.globalColors.black
-  const color = props.textColor || props.isHeader ? Styles.globalColors.white : dangerColor
-  return {color, ...(props.disabled ? {opacity: 0.6} : {})}
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      badge: {
-        alignSelf: 'center',
-        marginLeft: Styles.globalMargins.tiny,
-      },
-      bottomSheetContainer: {
-        backgroundColor: Styles.globalColors.white,
-        borderRadius: Styles.borderRadius,
-        marginBottom: 20,
-      },
-      bottomSheetScrollView: {
-        padding: 8,
-      },
-      divider: {marginBottom: Styles.globalMargins.tiny},
-      dividerInScrolleView: {
-        marginBottom: Styles.globalMargins.tiny,
-        marginTop: Styles.globalMargins.tiny,
-      },
-      firstIsUnWrapped: {paddingTop: 0},
-      iconBadge: {
-        backgroundColor: Styles.globalColors.blue,
-        height: Styles.globalMargins.tiny,
-        minWidth: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        position: 'relative',
-        right: Styles.globalMargins.xtiny,
-        width: Styles.globalMargins.tiny,
-      },
-      iconContainer: {
-        width: 20,
-      },
-      itemContainer: {
-        ...Styles.globalStyles.flexBoxColumn,
-        alignItems: 'center',
-        height: itemContainerHeight,
-        justifyContent: 'center',
-        position: 'relative',
-      },
-      itemContainerWithSubTitle: {height: itemContainerHeight},
-      itemContainerWrapped: {
-        paddingLeft: Styles.globalMargins.small,
-        paddingRight: Styles.globalMargins.small,
-      },
-      menuBox: {
-        backgroundColor: Styles.globalColors.white,
-        justifyContent: 'flex-end',
-        paddingBottom: Styles.globalMargins.tiny,
-        paddingTop: Styles.globalMargins.xsmall,
-      },
-      menuGroup: {
-        justifyContent: 'flex-end',
-      },
-      progressIndicator: {
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0,
-      },
-      safeArea: {backgroundColor: Styles.globalColors.white},
-      safeProvider: {
-        flex: 0,
-        justifyContent: 'flex-end',
-      },
-      scrollView: {
-        flexGrow: 1,
-        marginBottom: Styles.globalMargins.tiny,
-        marginTop: Styles.globalMargins.tiny,
-      },
-    }) as const
-)
-
-export default MenuLayout
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.tsx b/shared/common-adapters/floating-menu/menu-layout/index.tsx
new file mode 100644
index 000000000000..fd678884336d
--- /dev/null
+++ b/shared/common-adapters/floating-menu/menu-layout/index.tsx
@@ -0,0 +1,495 @@
+import type * as React from 'react'
+import type {MenuLayoutProps, MenuItem} from './index.shared'
+export type {MenuItem, MenuItems, MenuLayoutProps, _InnerMenuItem} from './index.shared'
+import {Box2} from '@/common-adapters/box'
+import ClickableBox from '@/common-adapters/clickable-box'
+import Divider from '@/common-adapters/divider'
+import Icon from '@/common-adapters/icon'
+import IconAuto from '@/common-adapters/icon-auto'
+import Text from '@/common-adapters/text'
+import Meta from '@/common-adapters/meta'
+import Badge from '@/common-adapters/badge'
+import ProgressIndicator from '@/common-adapters/progress-indicator'
+import SafeAreaView, {useSafeAreaInsets} from '@/common-adapters/safe-area-view'
+import ScrollView from '@/common-adapters/scroll-view'
+import {BottomSheetScrollView} from '@/common-adapters/popup/bottom-sheet'
+import {TouchableOpacity, Keyboard} from 'react-native'
+import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
+import {useOnMountOnce} from '@/constants/react'
+import * as Styles from '@/styles'
+import noop from 'lodash/noop'
+import './menu-layout.css'
+
+const MenuLayout = (props: MenuLayoutProps) => {
+  const {bottom: safeBottom} = useSafeAreaInsets()
+  useOnMountOnce(() => {
+    if (!isMobile) return
+    Keyboard.dismiss()
+  })
+
+  if (!isMobile) {
+    return <DesktopMenuLayout {...props} />
+  }
+
+  return <NativeMenuLayout {...props} safeBottom={safeBottom} />
+}
+
+const DesktopMenuLayout = (props: MenuLayoutProps) => {
+  const renderDivider = (index: number) => (
+    <Divider style={index === 0 ? desktopStyles.dividerFirst : desktopStyles.divider} key={index} />
+  )
+
+  const renderMenuItem = (item: MenuItem, index: number): React.ReactNode => {
+    let hoverClassName: string | undefined
+    let styleDisabled: Styles.StylesCrossPlatform = {}
+    if (!item.disabled) {
+      hoverClassName = item.danger ? 'menu-hover-danger' : 'menu-hover'
+    } else {
+      styleDisabled = {opacity: 0.4}
+    }
+
+    const styleClickable = item.disabled ? {} : Styles.desktopStyles.clickable
+
+    return item.unWrapped ? (
+      item.view
+    ) : (
+      <ClickableBox
+        key={index}
+        className={hoverClassName}
+        style={Styles.collapseStyles([desktopStyles.itemContainer, styleClickable])}
+        onClick={() => {
+          item.onClick?.()
+          if (props.closeOnClick) {
+            props.onHidden()
+          }
+        }}
+      >
+        {item.view}
+        {!item.view && (
+          <Box2 direction="horizontal" fullWidth={true}>
+            <Text
+              className="title"
+              type="Body"
+              style={Styles.collapseStyles([desktopStyles.itemBodyText, item.style, styleDisabled])}
+            >
+              {item.title}
+            </Text>
+            {!!item.icon && item.iconIsVisible && <IconAuto style={desktopStyles.icon} type={item.icon} />}
+            {item.newTag && (
+              <Meta
+                title="New"
+                size="Small"
+                backgroundColor={Styles.globalColors.blue}
+                style={desktopStyles.badge}
+              />
+            )}
+            {item.decoration}
+            {item.isBadged && <Badge badgeStyle={Styles.collapseStyles([desktopStyles.badge, desktopStyles.iconBadge])} />}
+            {item.isSelected && (
+              <Icon
+                type="iconfont-check"
+                color={Styles.globalColors.blue}
+                fontSize={16}
+                sizeType="Default"
+                style={{paddingLeft: Styles.globalMargins.tiny}}
+              />
+            )}
+          </Box2>
+        )}
+        {!item.view && item.subTitle && (
+          <Text
+            className="subtitle"
+            key={item.subTitle}
+            type="BodySmall"
+            style={Styles.collapseStyles([desktopStyles.itemBodyText, item.style])}
+          >
+            {item.subTitle}
+          </Text>
+        )}
+        {!!item.progressIndicator && <ProgressIndicator type="Large" style={desktopStyles.progressIndicator} />}
+      </ClickableBox>
+    )
+  }
+
+  const items = props.items.reduce<Array<'Divider' | MenuItem>>((arr, item) => {
+    if (item === 'Divider' && arr.length && arr.at(-1) === 'Divider') {
+      return arr
+    }
+    if (item) {
+      arr.push(item)
+    }
+    return arr
+  }, [])
+
+  return (
+    <ClickableBox
+      onClick={event => {
+        event.stopPropagation()
+      }}
+    >
+      <Box2
+        direction="vertical"
+        alignItems="stretch"
+        fullWidth={true}
+        style={Styles.collapseStyles([desktopStyles.menuContainer, props.style])}
+      >
+        {props.header}
+        {items.some(item => item !== 'Divider') && (
+          <Box2
+            direction="vertical"
+            fullWidth={true}
+            style={Styles.collapseStyles([desktopStyles.menuItemList, props.listStyle])}
+          >
+            {items.map(
+              (item, index): React.ReactNode =>
+                item === 'Divider' ? renderDivider(index) : renderMenuItem(item, index)
+            )}
+          </Box2>
+        )}
+      </Box2>
+    </ClickableBox>
+  )
+}
+
+type MenuRowProps = {
+  isHeader?: boolean
+  newTag?: boolean
+  index: number
+  numItems: number
+  onHidden?: () => void
+  textColor?: Styles.Color
+  backgroundColor?: Styles.Color
+} & MenuItem
+
+const itemContainerHeight = 40
+
+const MenuRow = (props: MenuRowProps) => (
+  <TouchableOpacity
+    disabled={props.disabled}
+    onPress={() => {
+      if (!props.unWrapped) {
+        props.onHidden?.()
+        props.onClick?.()
+      }
+    }}
+    style={Styles.collapseStyles([
+      nativeStyles.itemContainer,
+      !props.unWrapped && nativeStyles.itemContainerWrapped,
+      !!props.subTitle && nativeStyles.itemContainerWithSubTitle,
+      props.backgroundColor && {backgroundColor: props.backgroundColor},
+    ])}
+  >
+    {props.view || (
+      <Box2
+        direction="horizontal"
+        fullWidth={true}
+        fullHeight={true}
+        gap={props.icon ? 'small' : undefined}
+      >
+        {props.icon || props.isSelected ? (
+          <Box2 direction="horizontal" fullHeight={true} alignItems="center" justifyContent="center" style={nativeStyles.iconContainer}>
+            {props.isSelected && (
+              <Icon
+                type="iconfont-check"
+                color={Styles.globalColors.blue}
+                fontSize={16}
+                sizeType="Default"
+              />
+            )}
+            {props.icon &&
+              !props.isSelected &&
+              (props.inProgress ? (
+                <ProgressIndicator />
+              ) : (
+                <>
+                  <IconAuto
+                    color={props.danger ? Styles.globalColors.redDark : Styles.globalColors.black_60}
+                    style={Styles.collapseStyles([{alignSelf: 'center'}, props.iconStyle])}
+                    sizeType="Default"
+                    type={props.icon}
+                  />
+                  {props.isBadged && <Badge badgeStyle={nativeStyles.iconBadge} />}
+                </>
+              ))}
+          </Box2>
+        ) : null}
+        <Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
+          <Box2
+            direction="vertical"
+            fullHeight={true}
+            fullWidth={true}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Box2 direction="horizontal" fullWidth={true}>
+              <Text type="Body" style={Styles.collapseStyles([styleRowText(props), props.style])}>
+                {props.title}
+                {props.rightTitle ? (
+                  <Text type="BodyTinySemiboldItalic">{' ' + props.rightTitle}</Text>
+                ) : null}
+              </Text>
+              {props.newTag && (
+                <Meta
+                  title="New"
+                  size="Small"
+                  backgroundColor={Styles.globalColors.blue}
+                  style={nativeStyles.badge}
+                />
+              )}
+              {props.decoration}
+            </Box2>
+            {!!props.subTitle && (
+              <Box2 direction="horizontal" fullWidth={true}>
+                <Text type="BodyTiny">{props.subTitle}</Text>
+              </Box2>
+            )}
+          </Box2>
+        </Box2>
+      </Box2>
+    )}
+    {!!props.progressIndicator && <ProgressIndicator style={nativeStyles.progressIndicator} />}
+  </TouchableOpacity>
+)
+
+const NativeMenuLayout = (props: MenuLayoutProps & {safeBottom: number}) => {
+  const {isModal, safeBottom} = props
+  const menuItemsWithDividers = props.items.filter((x): x is MenuItem | 'Divider' => x !== undefined)
+  const beginningDivider = props.items[0] === 'Divider'
+  const firstIsUnWrapped = props.items[0] !== 'Divider' && props.items[0]?.unWrapped
+
+  const items = menuItemsWithDividers.map((mi, idx) =>
+    mi === 'Divider' ? (
+      idx !== 0 && idx !== props.items.length ? (
+        <Divider key={idx} style={nativeStyles.dividerInScrolleView} />
+      ) : null
+    ) : (
+      <MenuRow
+        key={idx}
+        {...mi}
+        index={idx}
+        numItems={menuItemsWithDividers.length}
+        onHidden={props.closeOnClick ? props.onHidden : undefined}
+        textColor={props.textColor}
+        backgroundColor={props.backgroundColor}
+      />
+    )
+  )
+
+  const close = (
+    <>
+      <Divider style={nativeStyles.divider} />
+      <Box2 direction="vertical" fullWidth={true} style={Styles.collapseStyles([nativeStyles.menuGroup, props.listStyle])}>
+        <MenuRow
+          title={props.closeText || 'Close'}
+          index={0}
+          numItems={1}
+          onClick={props.onHidden}
+          onHidden={noop}
+          textColor={props.textColor}
+          backgroundColor={props.backgroundColor}
+        />
+      </Box2>
+    </>
+  )
+
+  if (isModal === 'bottomsheet') {
+    return (
+      <BottomSheetScrollView
+        style={[
+          {backgroundColor: Styles.undynamicColor(Styles.globalColors.black_05OrBlack)},
+          nativeStyles.bottomSheetScrollView,
+        ]}
+      >
+        <Box2
+          style={Styles.collapseStyles([nativeStyles.bottomSheetContainer, {marginBottom: 20 + safeBottom}])}
+          direction="vertical"
+          fullWidth={true}
+        >
+          {props.header}
+          {items}
+          {close}
+        </Box2>
+      </BottomSheetScrollView>
+    )
+  }
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={initialWindowMetrics}
+      style={[nativeStyles.safeProvider, props.safeProviderStyle]}
+      pointerEvents="box-none"
+    >
+      <SafeAreaView
+        style={Styles.collapseStyles([
+          nativeStyles.safeArea,
+          props.backgroundColor && {backgroundColor: props.backgroundColor},
+        ])}
+      >
+        <Box2
+          direction="vertical"
+          fullWidth={true}
+          style={Styles.collapseStyles([
+            nativeStyles.menuBox,
+            firstIsUnWrapped && nativeStyles.firstIsUnWrapped,
+            props.backgroundColor && {backgroundColor: props.backgroundColor},
+          ])}
+        >
+          {props.header}
+          {beginningDivider && <Divider />}
+          <ScrollView
+            alwaysBounceVertical={false}
+            style={Styles.collapseStyles([nativeStyles.scrollView, firstIsUnWrapped && nativeStyles.firstIsUnWrapped])}
+            contentContainerStyle={nativeStyles.menuGroup}
+          >
+            {items}
+          </ScrollView>
+          {close}
+        </Box2>
+      </SafeAreaView>
+    </SafeAreaProvider>
+  )
+}
+
+const styleRowText = (props: {
+  isHeader?: boolean
+  danger?: boolean
+  disabled?: boolean
+  textColor?: Styles.Color
+}) => {
+  const dangerColor = props.danger ? Styles.globalColors.redDark : Styles.globalColors.black
+  const color = props.textColor || props.isHeader ? Styles.globalColors.white : dangerColor
+  return {color, ...(props.disabled ? {opacity: 0.6} : {})}
+}
+
+const desktopStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      badge: {
+        alignSelf: 'center',
+        marginLeft: 'auto',
+      },
+      divider: {
+        marginBottom: 8,
+        marginTop: 8,
+      },
+      dividerFirst: {
+        marginBottom: 8,
+      },
+      icon: {marginLeft: Styles.globalMargins.xtiny},
+      iconBadge: {
+        backgroundColor: Styles.globalColors.blue,
+        height: Styles.globalMargins.tiny,
+        minWidth: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        position: 'relative',
+        right: Styles.globalMargins.xtiny,
+        width: Styles.globalMargins.tiny,
+      },
+      itemBodyText: {color: undefined},
+      itemContainer: {
+        ...Styles.globalStyles.flexBoxColumn,
+        ...Styles.padding(7, Styles.globalMargins.small),
+        position: 'relative',
+      },
+      menuContainer: Styles.platformStyles({
+        isElectron: {
+          ...Styles.desktopStyles.boxShadow,
+          backgroundColor: Styles.globalColors.white,
+          borderRadius: Styles.borderRadius,
+          justifyContent: 'flex-start',
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          width: 240,
+        },
+      }),
+      menuItemList: {
+        flexShrink: 0,
+        paddingBottom: Styles.globalMargins.tiny,
+        paddingTop: Styles.globalMargins.tiny,
+      },
+      progressIndicator: {
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: Styles.globalMargins.xtiny,
+      },
+    }) as const
+)
+
+const nativeStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      badge: {
+        alignSelf: 'center',
+        marginLeft: Styles.globalMargins.tiny,
+      },
+      bottomSheetContainer: {
+        backgroundColor: Styles.globalColors.white,
+        borderRadius: Styles.borderRadius,
+        marginBottom: 20,
+      },
+      bottomSheetScrollView: {
+        padding: 8,
+      },
+      divider: {marginBottom: Styles.globalMargins.tiny},
+      dividerInScrolleView: {
+        marginBottom: Styles.globalMargins.tiny,
+        marginTop: Styles.globalMargins.tiny,
+      },
+      firstIsUnWrapped: {paddingTop: 0},
+      iconBadge: {
+        backgroundColor: Styles.globalColors.blue,
+        height: Styles.globalMargins.tiny,
+        minWidth: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        position: 'relative',
+        right: Styles.globalMargins.xtiny,
+        width: Styles.globalMargins.tiny,
+      },
+      iconContainer: {
+        width: 20,
+      },
+      itemContainer: {
+        ...Styles.globalStyles.flexBoxColumn,
+        alignItems: 'center',
+        height: itemContainerHeight,
+        justifyContent: 'center',
+        position: 'relative',
+      },
+      itemContainerWithSubTitle: {height: itemContainerHeight},
+      itemContainerWrapped: {
+        paddingLeft: Styles.globalMargins.small,
+        paddingRight: Styles.globalMargins.small,
+      },
+      menuBox: {
+        backgroundColor: Styles.globalColors.white,
+        justifyContent: 'flex-end',
+        paddingBottom: Styles.globalMargins.tiny,
+        paddingTop: Styles.globalMargins.xsmall,
+      },
+      menuGroup: {
+        justifyContent: 'flex-end',
+      },
+      progressIndicator: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+      },
+      safeArea: {backgroundColor: Styles.globalColors.white},
+      safeProvider: {
+        flex: 0,
+        justifyContent: 'flex-end',
+      },
+      scrollView: {
+        flexGrow: 1,
+        marginBottom: Styles.globalMargins.tiny,
+        marginTop: Styles.globalMargins.tiny,
+      },
+    }) as const
+)
+
+export default MenuLayout
diff --git a/shared/common-adapters/floating-picker.desktop.tsx b/shared/common-adapters/floating-picker.desktop.tsx
deleted file mode 100644
index 5bb7d27dd7df..000000000000
--- a/shared/common-adapters/floating-picker.desktop.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type * as React from 'react'
-import type {Props} from './floating-picker.shared'
-export type {Props, PickerItem} from './floating-picker.shared'
-
-function FloatingPicker<T>(_p: Props<T>): React.ReactNode {
-  return null
-}
-
-export default FloatingPicker
diff --git a/shared/common-adapters/floating-picker.native.tsx b/shared/common-adapters/floating-picker.tsx
similarity index 56%
rename from shared/common-adapters/floating-picker.native.tsx
rename to shared/common-adapters/floating-picker.tsx
index a367c9264260..3706cdb6888d 100644
--- a/shared/common-adapters/floating-picker.native.tsx
+++ b/shared/common-adapters/floating-picker.tsx
@@ -7,16 +7,10 @@ import Popup from './popup'
 import Text from './text'
 import type {Props} from './floating-picker.shared'
 
-const Kb = {
-  Box2,
-  Picker,
-  Popup,
-  SafeAreaView,
-  Text,
-}
+export type {Props, PickerItem} from './floating-picker.shared'
+
+const Kb = {Box2, Picker, Popup, SafeAreaView, Text}
 
-// semi-controller to work around issues where a fully controlled one will cause the wheel on ios
-// to jump back and then slowly animate to the value you just went to
 function WrapPicker<T>(p: {
   initialValue?: T
   onValueChange: (v: T | undefined) => void
@@ -52,27 +46,26 @@ function WrapPicker<T>(p: {
 
 export {Picker}
 
-// NOTE: this doesn't seem to work well when debugging w/ chrome. aka if you scroll and set a value the native component will undo it a bunch and its very finnicky. works fine outside of that it seems
-const FloatingPicker = <T extends string | number>(props: Props<T>) => {
-  if (!props.visible) {
+// NOTE: this doesn't seem to work well when debugging w/ chrome. aka if you scroll and set a value
+// the native component will undo it a bunch and its very finnicky. works fine outside of that it seems
+const FloatingPicker = <T extends string | number>(props: Props<T>): React.ReactNode => {
+  if (!isMobile || !props.visible) {
     return null
   }
 
   return (
     <Kb.Popup
-      key={
-        // Android bug: after selecting a new value (e.g. in
-        // set-explode-popup), it flips to the new value, then back to the old
-        // value, then to the new value. There is also a user report claiming
-        // it flips forever. So just force remounting when the selected avlue
-        // changes as a hacky fix.
-        Styles.isAndroid ? props.selectedValue || 0 : undefined
-      }
+      key={isAndroid ? props.selectedValue || 0 : undefined}
       onHidden={props.onHidden}
     >
       <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="flex-end" style={styles.menu}>
         {props.header}
-        <Kb.Box2 direction="horizontal" fullWidth={true} justifyContent="flex-end" style={styles.actionButtons}>
+        <Kb.Box2
+          direction="horizontal"
+          fullWidth={true}
+          justifyContent="flex-end"
+          style={styles.actionButtons}
+        >
           <Kb.Text type="BodySemibold" style={styles.link} onClick={props.onCancel}>
             Cancel
           </Kb.Text>
@@ -96,37 +89,34 @@ const FloatingPicker = <T extends string | number>(props: Props<T>) => {
   )
 }
 
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      actionButtons: {
-        alignItems: 'stretch',
-        height: 56,
-      },
-      item: {
-        ...Styles.globalStyles.fontRegular,
-        color: Styles.globalColors.black,
-      },
-      link: {
-        color: Styles.globalColors.blueDark,
-        fontSize: 17,
-        padding: Styles.globalMargins.small,
-      },
-      menu: {
-        alignItems: 'stretch',
-        backgroundColor: Styles.globalColors.white,
-      },
-      picker: Styles.platformStyles({
-        isAndroid: {
-          color: Styles.globalColors.black,
-          marginBottom: Styles.globalMargins.large,
-          marginTop: Styles.globalMargins.medium,
-        },
-      }),
-      safeArea: {
-        backgroundColor: Styles.globalColors.white,
-      },
-    }) as const
-)
+const styles = Styles.styleSheetCreate(() => ({
+  actionButtons: {
+    alignItems: 'stretch',
+    height: 56,
+  },
+  item: {
+    ...Styles.globalStyles.fontRegular,
+    color: Styles.globalColors.black,
+  },
+  link: {
+    color: Styles.globalColors.blueDark,
+    fontSize: 17,
+    padding: Styles.globalMargins.small,
+  },
+  menu: {
+    alignItems: 'stretch',
+    backgroundColor: Styles.globalColors.white,
+  },
+  picker: Styles.platformStyles({
+    isAndroid: {
+      color: Styles.globalColors.black,
+      marginBottom: Styles.globalMargins.large,
+      marginTop: Styles.globalMargins.medium,
+    },
+  }),
+  safeArea: {
+    backgroundColor: Styles.globalColors.white,
+  },
+}))
 
 export default FloatingPicker
diff --git a/shared/common-adapters/header-buttons.native.tsx b/shared/common-adapters/header-buttons.native.tsx
deleted file mode 100644
index b5d6db6217f0..000000000000
--- a/shared/common-adapters/header-buttons.native.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import type * as React from 'react'
-import type {ColorValue} from 'react-native'
-import * as Styles from '@/styles'
-import BackButton from '@/common-adapters/back-button'
-import {Box2} from '@/common-adapters/box'
-import Text from '@/common-adapters/text'
-import {useNavigation} from '@react-navigation/native'
-const Kb = {BackButton, Box2, Text}
-
-const LeftAction = (p: {
-  badgeNumber: number
-  mode: 'back' | 'cancel'
-  onAction: () => void
-  iconColor?: string
-}): React.ReactElement => (
-  <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.leftAction}>
-    {p.mode === 'cancel' ? (
-      <Text type="BodyBigLink" style={styles.action} onClick={p.onAction}>
-        Cancel
-      </Text>
-    ) : (
-      <Kb.BackButton
-        badgeNumber={p.badgeNumber}
-        iconColor={p.iconColor ?? Styles.globalColors.black_50}
-        style={styles.action}
-        onClick={p.onAction}
-      />
-    )}
-  </Kb.Box2>
-)
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      action: Styles.platformStyles({
-        common: {
-          opacity: 1,
-          paddingBottom: Styles.globalMargins.tiny,
-          paddingLeft: 0,
-          paddingRight: Styles.globalMargins.tiny,
-          paddingTop: Styles.globalMargins.tiny,
-        },
-        isAndroid: {
-          paddingLeft: Styles.globalMargins.small,
-          paddingRight: Styles.globalMargins.small,
-        },
-        isIOS: {
-          paddingLeft: Styles.globalMargins.tiny,
-        },
-      }),
-      leftAction: Styles.platformStyles({
-        common: {
-          flexShrink: 1,
-          justifyContent: 'flex-start',
-        },
-      }),
-    }) as const
-)
-
-export function HeaderLeftButton(hp: {
-  canGoBack?: boolean
-  badgeNumber?: number
-  onPress?: () => void
-  tintColor?: ColorValue
-  mode?: 'back' | 'cancel'
-  autoDetectCanGoBack?: boolean
-}) {
-  const nav = useNavigation()
-  const canGoBack = hp.autoDetectCanGoBack ? nav.canGoBack() : (hp.canGoBack ?? true)
-  if (!canGoBack) return null
-  return (
-    <LeftAction
-      badgeNumber={hp.badgeNumber ?? 0}
-      mode={hp.mode ?? 'back'}
-      onAction={nav.goBack}
-      iconColor={hp.tintColor as string | undefined}
-    />
-  )
-}
-
-export type * from '@/common-adapters/header-buttons.shared'
diff --git a/shared/common-adapters/header-buttons.desktop.tsx b/shared/common-adapters/header-buttons.tsx
similarity index 80%
rename from shared/common-adapters/header-buttons.desktop.tsx
rename to shared/common-adapters/header-buttons.tsx
index 9b48ad511f29..076b5e530f20 100644
--- a/shared/common-adapters/header-buttons.desktop.tsx
+++ b/shared/common-adapters/header-buttons.tsx
@@ -1,8 +1,10 @@
 import * as Styles from '@/styles'
-import BackButton from './back-button'
+import BackButton from '@/common-adapters/back-button'
 import {Box2} from '@/common-adapters/box'
 import Text from '@/common-adapters/text'
 import {useNavigation} from '@react-navigation/native'
+import type {HeaderBackButtonProps} from './header-buttons.shared'
+
 const Kb = {BackButton, Box2, Text}
 
 const LeftAction = (p: {
@@ -13,9 +15,9 @@ const LeftAction = (p: {
 }) => (
   <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.leftAction}>
     {p.mode === 'cancel' ? (
-      <Kb.Text type="BodyBigLink" style={styles.action} onClick={p.onAction}>
+      <Text type="BodyBigLink" style={styles.action} onClick={p.onAction}>
         Cancel
-      </Kb.Text>
+      </Text>
     ) : (
       <Kb.BackButton
         badgeNumber={p.badgeNumber}
@@ -32,10 +34,20 @@ const styles = Styles.styleSheetCreate(() => ({
     common: {
       opacity: 1,
       paddingBottom: Styles.globalMargins.tiny,
-      paddingLeft: Styles.globalMargins.tiny,
+      paddingLeft: 0,
       paddingRight: Styles.globalMargins.tiny,
       paddingTop: Styles.globalMargins.tiny,
     },
+    isAndroid: {
+      paddingLeft: Styles.globalMargins.small,
+      paddingRight: Styles.globalMargins.small,
+    },
+    isElectron: {
+      paddingLeft: Styles.globalMargins.tiny,
+    },
+    isIOS: {
+      paddingLeft: Styles.globalMargins.tiny,
+    },
   }),
   leftAction: Styles.platformStyles({
     common: {
@@ -45,8 +57,7 @@ const styles = Styles.styleSheetCreate(() => ({
   }),
 }))
 
-export type {HeaderBackButtonProps} from './header-buttons.shared'
-import type {HeaderBackButtonProps} from './header-buttons.shared'
+export type * from './header-buttons.shared'
 
 export function HeaderLeftButton(hp: HeaderBackButtonProps & {
   badgeNumber?: number
diff --git a/shared/common-adapters/hot-key.native.tsx b/shared/common-adapters/hot-key.native.tsx
deleted file mode 100644
index 8d335067507a..000000000000
--- a/shared/common-adapters/hot-key.native.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export function useHotKey(_keys: Array<string> | string, _cb: (key: string) => void) {}
-
diff --git a/shared/common-adapters/hot-key.desktop.tsx b/shared/common-adapters/hot-key.tsx
similarity index 61%
rename from shared/common-adapters/hot-key.desktop.tsx
rename to shared/common-adapters/hot-key.tsx
index c6b5c1ea3c46..0eb12d37105a 100644
--- a/shared/common-adapters/hot-key.desktop.tsx
+++ b/shared/common-adapters/hot-key.tsx
@@ -2,6 +2,24 @@ import * as React from 'react'
 import * as C from '@/constants'
 import {isMac} from '@/constants/platform'
 
+// Desktop-only keyboard shortcut system. On mobile, useHotKey is a no-op.
+
+type KeyEvent = {
+  key: string
+  ctrlKey: boolean
+  shiftKey: boolean
+  altKey: boolean
+  metaKey: boolean
+  preventDefault: () => void
+  stopPropagation: () => void
+  target: {tagName?: string; getAttribute?: (name: string) => string | null} | null
+}
+
+type DocEventTarget = {
+  addEventListener: (type: string, listener: (e: KeyEvent) => void, useCapture?: boolean) => void
+  removeEventListener: (type: string, listener: (e: KeyEvent) => void, useCapture?: boolean) => void
+}
+
 const keyToCBStack = new Map<string, Array<(cmd: string) => void>>()
 
 const normalizeKey = (key: string): string => {
@@ -61,10 +79,9 @@ const parseKeyCombo = (
   return {alt, ctrl, hasMod, key, meta, shift}
 }
 
-const matchesCombo = (
-  e: KeyboardEvent,
-  combo: {key: string; ctrl: boolean; shift: boolean; alt: boolean; meta: boolean; hasMod: boolean}
-): boolean => {
+type KeyCombo = {key: string; ctrl: boolean; shift: boolean; alt: boolean; meta: boolean; hasMod: boolean}
+
+const matchesCombo = (e: KeyEvent, combo: KeyCombo): boolean => {
   const eventKey = e.key.toLowerCase()
   const comboKey = combo.key.toLowerCase()
 
@@ -101,20 +118,21 @@ const matchesCombo = (
   )
 }
 
-const shouldIgnoreEvent = (e: KeyboardEvent): boolean => {
-  const target = e.target as HTMLElement | null
+const shouldIgnoreEvent = (e: KeyEvent): boolean => {
+  const target = e.target
   if (!target) {
     return false
   }
 
-  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-    return target.getAttribute('data-allow-keyboard-shortcuts') !== 'true'
+  const tagName = target.tagName?.toLowerCase()
+  if (tagName === 'input' || tagName === 'textarea') {
+    return target.getAttribute?.('data-allow-keyboard-shortcuts') !== 'true'
   }
 
   return false
 }
 
-const handleKeyDown = (e: KeyboardEvent): void => {
+const handleKeyDown = (e: KeyEvent): void => {
   if (shouldIgnoreEvent(e)) {
     return
   }
@@ -138,20 +156,51 @@ const handleKeyDown = (e: KeyboardEvent): void => {
 
 let globalHandlerAttached = false
 
+const doc = (globalThis as unknown as {document?: DocEventTarget}).document
+
 const ensureGlobalHandler = (): void => {
   if (!globalHandlerAttached) {
     globalHandlerAttached = true
-    document.addEventListener('keydown', handleKeyDown, true)
+    doc?.addEventListener('keydown', handleKeyDown, true)
   }
 }
 
 const removeGlobalHandler = (): void => {
   if (globalHandlerAttached && keyToCBStack.size === 0) {
     globalHandlerAttached = false
-    document.removeEventListener('keydown', handleKeyDown, true)
+    doc?.removeEventListener('keydown', handleKeyDown, true)
   }
 }
 
+const registerKeys = (keysArr: Array<string>, cb: (key: string) => void) => {
+  ensureGlobalHandler()
+  keysArr.forEach(key => {
+    const normalizedKey = key.toLowerCase().trim()
+    let cbs = keyToCBStack.get(normalizedKey)
+    if (!cbs) {
+      cbs = []
+      keyToCBStack.set(normalizedKey, cbs)
+    }
+    cbs.push(cb)
+  })
+}
+
+const unregisterKeys = (keysArr: Array<string>, cb: (key: string) => void) => {
+  keysArr.forEach(key => {
+    const normalizedKey = key.toLowerCase().trim()
+    const cbs = keyToCBStack.get(normalizedKey)
+    if (!cbs) return
+    const idx = cbs.indexOf(cb)
+    if (idx !== -1) {
+      cbs.splice(idx, 1)
+    }
+    if (cbs.length === 0) {
+      keyToCBStack.delete(normalizedKey)
+    }
+  })
+  removeGlobalHandler()
+}
+
 export function useHotKey(keys: Array<string> | string, cb: (key: string) => void) {
   const keysArr = (() => {
     const arr = typeof keys === 'string' ? [keys] : keys
@@ -159,60 +208,14 @@ export function useHotKey(keys: Array<string> | string, cb: (key: string) => voi
   })()
 
   C.Router2.useSafeFocusEffect(() => {
-    if (keysArr.length === 0) return
-    ensureGlobalHandler()
-    keysArr.forEach(key => {
-      const normalizedKey = key.toLowerCase().trim()
-      let cbs = keyToCBStack.get(normalizedKey)
-      if (!cbs) {
-        cbs = []
-        keyToCBStack.set(normalizedKey, cbs)
-      }
-      cbs.push(cb)
-    })
-    return () => {
-      keysArr.forEach(key => {
-        const normalizedKey = key.toLowerCase().trim()
-        const cbs = keyToCBStack.get(normalizedKey)
-        if (!cbs) return
-        const idx = cbs.indexOf(cb)
-        if (idx !== -1) {
-          cbs.splice(idx, 1)
-        }
-        if (cbs.length === 0) {
-          keyToCBStack.delete(normalizedKey)
-        }
-      })
-      removeGlobalHandler()
-    }
+    if (isMobile || keysArr.length === 0) return
+    registerKeys(keysArr, cb)
+    return () => unregisterKeys(keysArr, cb)
   })
 
   React.useEffect(() => {
-    if (keysArr.length === 0) return
-    ensureGlobalHandler()
-    keysArr.forEach(key => {
-      const normalizedKey = key.toLowerCase().trim()
-      let cbs = keyToCBStack.get(normalizedKey)
-      if (!cbs) {
-        cbs = []
-        keyToCBStack.set(normalizedKey, cbs)
-      }
-      cbs.push(cb)
-    })
-    return () => {
-      keysArr.forEach(key => {
-        const normalizedKey = key.toLowerCase().trim()
-        const cbs = keyToCBStack.get(normalizedKey)
-        if (!cbs) return
-        const idx = cbs.indexOf(cb)
-        if (idx !== -1) {
-          cbs.splice(idx, 1)
-        }
-        if (cbs.length === 0) {
-          keyToCBStack.delete(normalizedKey)
-        }
-      })
-      removeGlobalHandler()
-    }
+    if (isMobile || keysArr.length === 0) return
+    registerKeys(keysArr, cb)
+    return () => unregisterKeys(keysArr, cb)
   }, [keysArr, cb])
 }
diff --git a/shared/common-adapters/icon.constants-gen.desktop.tsx b/shared/common-adapters/icon.constants-gen.desktop.tsx
deleted file mode 100644
index abf6d275c2e0..000000000000
--- a/shared/common-adapters/icon.constants-gen.desktop.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// @ts-nocheck
-import {iconMeta as _iconMeta} from './icon.constants-gen.shared'
-export type IconType = keyof typeof _iconMeta
-
-type ReqOut = string | number
-type IconMeta = {
-  isFont?: boolean
-  gridSize?: number
-  extension?: string
-  charCode?: number
-  nameDark?: string
-  imagesDir?: string
-  require?: ReqOut
-  requireDark?: ReqOut
-}
-export const iconMeta: {[k in IconType]: IconMeta} = _iconMeta
diff --git a/shared/common-adapters/icon.constants-gen.shared.tsx b/shared/common-adapters/icon.constants-gen.shared.tsx
index 3ee7e5c9c140..8a4ab6af9b23 100644
--- a/shared/common-adapters/icon.constants-gen.shared.tsx
+++ b/shared/common-adapters/icon.constants-gen.shared.tsx
@@ -1,6 +1,5 @@
 // @ts-nocheck
 // This file is GENERATED by yarn run update-icon-font. DON'T hand edit
-import {isMobile} from '@/constants/platform'
 
 // prettier-ignore
 export const iconMeta = {
diff --git a/shared/common-adapters/icon.constants-gen.native.tsx b/shared/common-adapters/icon.constants-gen.tsx
similarity index 80%
rename from shared/common-adapters/icon.constants-gen.native.tsx
rename to shared/common-adapters/icon.constants-gen.tsx
index abf6d275c2e0..f650f1942f7b 100644
--- a/shared/common-adapters/icon.constants-gen.native.tsx
+++ b/shared/common-adapters/icon.constants-gen.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {iconMeta as _iconMeta} from './icon.constants-gen.shared'
 export type IconType = keyof typeof _iconMeta
 
@@ -13,4 +12,4 @@ type IconMeta = {
   require?: ReqOut
   requireDark?: ReqOut
 }
-export const iconMeta: {[k in IconType]: IconMeta} = _iconMeta
+export const iconMeta = _iconMeta as unknown as {[k in IconType]: IconMeta}
diff --git a/shared/common-adapters/icon.tsx b/shared/common-adapters/icon.tsx
index f05216a08ea6..676e7743380f 100644
--- a/shared/common-adapters/icon.tsx
+++ b/shared/common-adapters/icon.tsx
@@ -22,7 +22,7 @@ export type IconProps = {
 
 const sizeToFontDesktop = {Big: 24, Bigger: 36, Default: 16, Huge: 48, Small: 12, Tiny: 8} as const
 const sizeToFontMobile = {Big: 32, Bigger: 48, Default: 20, Huge: 64, Small: 16, Tiny: 10} as const
-const sizeToFont = Styles.isMobile ? sizeToFontMobile : sizeToFontDesktop
+const sizeToFont = isMobile ? sizeToFontMobile : sizeToFontDesktop
 
 const cssVarToColorName = (cssVar: string): string | undefined => {
   const match = /^var\(--color-(.+)\)$/.exec(cssVar)
@@ -101,5 +101,5 @@ const IconNative = (props: IconProps) => {
   )
 }
 
-const Icon = Styles.isMobile ? IconNative : IconDesktop
+const Icon = isMobile ? IconNative : IconDesktop
 export default Icon
diff --git a/shared/common-adapters/image-icon.tsx b/shared/common-adapters/image-icon.tsx
index c5755fefe7da..c579bd9023c9 100644
--- a/shared/common-adapters/image-icon.tsx
+++ b/shared/common-adapters/image-icon.tsx
@@ -1,8 +1,9 @@
-import * as Styles from '@/styles'
+import type * as Styles from '@/styles'
 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)
@@ -72,8 +71,8 @@ const ImageIconNative = (props: ImageIconProps) => {
   }
   if (!source) return null
 
-  return <RNImage source={source} style={style as any} />
+  return <RNImage source={source} style={style} />
 }
 
-const ImageIcon = Styles.isMobile ? ImageIconNative : ImageIconDesktop
+const ImageIcon = isMobile ? ImageIconNative : ImageIconDesktop
 export default ImageIcon
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.native.tsx b/shared/common-adapters/index.native.tsx
deleted file mode 100644
index e970a77c3bb5..000000000000
--- a/shared/common-adapters/index.native.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-export type {MenuItem, MenuItems} from './floating-menu/menu-layout/index.shared'
-export type {IconType} from './icon.constants-gen.native'
-export type {WebViewProps, WebViewInjections} from './web-view.shared'
-export type {AnimationType} from './animation.shared'
-
-export {LayoutAnimation} from 'react-native'
-
-export {
-  BottomSheetModal,
-  BottomSheetBackdrop,
-  BottomSheetScrollView,
-  type BottomSheetBackdropProps,
-} from './popup/bottom-sheet.native'
-export {default as Animation} from './animation.native'
-export {default as Avatar} from './avatar/index.native'
-export {default as AvatarLine} from './avatar/avatar-line'
-export {BottomAccessory} from './bottom-accessory.native'
-export {default as BackButton} from './back-button.native'
-export {default as Badge} from './badge'
-export {Banner, BannerParagraph} from './banner'
-export {Box2, Box2Animated} from './box.native'
-export type {LayoutEvent} from './box.shared'
-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.native'
-export {default as CheckCircle} from './check-circle'
-export {default as ChoiceList} from './choice-list.native'
-export {default as ClickableBox, ClickableBox2} from './clickable-box.native'
-export {default as ConfirmModal} from './confirm-modal'
-export {default as CopyText} from './copy-text'
-export {default as CopyableText} from './copyable-text.native'
-export {default as Divider} from './divider'
-export {default as Dropdown, DropdownButton, InlineDropdown} from './dropdown'
-export {default as DragAndDrop} from './drag-and-drop.native'
-export {default as NativeEmoji} from './emoji/native-emoji.native'
-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.native'
-export {usePopup2, type Popup2Parms} from './popup/use-popup'
-export {HeaderLeftButton} from './header-buttons.native'
-export {useHotKey} from './hot-key.native'
-export {default as Image} from './image.native'
-export {default as ImageIcon} from './image-icon'
-export {default as InfoNote} from './info-note'
-export {default as Input3} from './input3.native'
-export type {Input3Ref, Input3Props} from './input3.shared'
-export {KeyboardAvoidingView2} from './keyboard-avoiding-view.native'
-export {default as List} from './list.native'
-export type {LegendListRef} from './list.shared'
-export {
-  default as ListItem,
-  largeHeight as largeListItemHeight,
-  smallHeight as smallListItemHeight,
-} from './list-item'
-export {default as LoadingLine} from './loading-line.native'
-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} from './popup/index.native'
-export type {PopupProps} from './popup/index.shared'
-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.native'
-export {default as ProofBrokenBanner} from './proof-broken-banner'
-export {default as RadioButton} from './radio-button.native'
-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.native'
-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} from './scroll-view.native'
-export type {ScrollViewRef} from './scroll-view.shared'
-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.native'
-export {useClickURL} from './text-url.native'
-export {default as Toast} from './toast.native'
-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.native'
-export {default as WebView} from './web-view.native'
-export {default as WithTooltip} from './with-tooltip.native'
-export {default as ZoomableImage} from './zoomable-image.native'
-export * as Styles from '@/styles'
diff --git a/shared/common-adapters/index.desktop.tsx b/shared/common-adapters/index.tsx
similarity index 60%
rename from shared/common-adapters/index.desktop.tsx
rename to shared/common-adapters/index.tsx
index d9ada62f1edf..21a06c919d8b 100644
--- a/shared/common-adapters/index.desktop.tsx
+++ b/shared/common-adapters/index.tsx
@@ -1,11 +1,13 @@
-import type {LayoutAnimation as NativeLayoutAnimation} from 'react-native'
+import {LayoutAnimation as NativeLayoutAnimation} from 'react-native'
 
-export type {MenuItem, MenuItems} from './floating-menu/menu-layout/index.desktop'
-export type {IconType} from './icon.constants-gen.desktop'
-export type {WebViewProps, WebViewInjections} from './web-view.desktop'
-export type {AnimationType} from './animation.desktop'
+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 LayoutAnimation: typeof NativeLayoutAnimation = isMobile
+  ? NativeLayoutAnimation
+  : ({} as typeof NativeLayoutAnimation)
 export const ReAnimated = {}
 
 export {
@@ -13,79 +15,81 @@ export {
   BottomSheetBackdrop,
   BottomSheetScrollView,
   type BottomSheetBackdropProps,
-} from './popup/bottom-sheet.desktop'
-export {default as Animation} from './animation.desktop'
-export {default as Avatar} from './avatar/index.desktop'
+} 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'
-export {BottomAccessory} from './bottom-accessory.desktop'
-export {default as BackButton} from './back-button.desktop'
+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.desktop'
+export {Box2, Box2Animated} from './box'
+export 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.desktop'
+export {default as Checkbox} from './checkbox'
 export {default as CheckCircle} from './check-circle'
-export {default as ChoiceList} from './choice-list.desktop'
-export {default as ClickableBox, ClickableBox2} from './clickable-box.desktop'
+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.desktop'
+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.desktop'
-export {default as NativeEmoji} from './emoji/native-emoji.desktop'
+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.desktop'
+export {default as FloatingPicker} from './floating-picker'
 export {usePopup2, type Popup2Parms} from './popup/use-popup'
-export {HeaderLeftButton} from './header-buttons.desktop'
-export {useHotKey} from './hot-key.desktop'
-export {default as Image} from './image.desktop'
+export {HeaderLeftButton} from './header-buttons'
+export {useHotKey} from './hot-key'
+export {default as Image} from './image'
 export {default as ImageIcon} from './image-icon'
 export {default as InfoNote} from './info-note'
-export {default as Input3, type Input3Ref, type Input3Props} from './input3.desktop'
-export {KeyboardAvoidingView2} from './keyboard-avoiding-view.desktop'
-export {default as List, type LegendListRef} from './list.desktop'
+export {default as Input3} from './input3'
+export type {Input3Ref, Input3Props} from './input3'
+export {KeyboardAvoidingView2} from './keyboard-avoiding-view'
+export {default as List, type LegendListRef} from './list'
 export {
   default as ListItem,
   largeHeight as largeListItemHeight,
   smallHeight as smallListItemHeight,
 } from './list-item'
-export {default as LoadingLine} from './loading-line.desktop'
+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.desktop'
+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.desktop'
+export {default as ProgressIndicator} from './progress-indicator'
 export {default as ProofBrokenBanner} from './proof-broken-banner'
-export {default as RadioButton} from './radio-button.desktop'
+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.desktop'
+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.desktop'
+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.desktop'
-export {useClickURL} from './text-url.desktop'
-export {default as Toast} from './toast.desktop'
+export {default as Text} from './text'
+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'
 export {default as ConnectedUsernames} from './usernames'
@@ -93,8 +97,8 @@ 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.desktop'
-export {default as WebView} from './web-view.desktop'
-export {default as WithTooltip} from './with-tooltip.desktop'
-export {default as ZoomableImage} from './zoomable-image.desktop'
+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/info-note.tsx b/shared/common-adapters/info-note.tsx
index 89d70583c397..f9003a5b7d21 100644
--- a/shared/common-adapters/info-note.tsx
+++ b/shared/common-adapters/info-note.tsx
@@ -20,7 +20,7 @@ const InfoNote = (props: Props) => (
       <Icon
         color={props.color || Styles.globalColors.black_10}
         type="iconfont-info"
-        fontSize={Styles.isMobile ? 22 : 16}
+        fontSize={isMobile ? 22 : 16}
       />
       <Box2 direction="vertical" style={{backgroundColor: props.color || Styles.globalColors.black_10, height: 1, width: 24}} />
     </Box2>
diff --git a/shared/common-adapters/input3.desktop.tsx b/shared/common-adapters/input3.desktop.tsx
deleted file mode 100644
index f8f4720f2ddf..000000000000
--- a/shared/common-adapters/input3.desktop.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import {Box2} from './box'
-import IconAuto from './icon-auto'
-import Text from './text'
-import {getTextStyle} from './text.styles'
-import {useColorScheme} from 'react-native'
-import './input.css'
-import type {Input3Props, Input3Ref} from './input3.shared'
-export type {Input3Props, Input3Ref} from './input3.shared'
-
-function Input3(props: Input3Props & {ref?: React.Ref<Input3Ref>}) {
-  const {autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled} = props
-  const {error, growAndScroll, hideBorder, icon, inputStyle, maxLength, multiline, selectTextOnFocus} = props
-  const {onBlur: onBlurProp, onChangeText, onClick, onEnterKeyDown, onFocus: onFocusProp, onKeyDown: onKeyDownProp} = props
-  const {placeholder, prefix, ref, rowsMax, rowsMin, secureTextEntry, spellCheck, textType = 'BodySemibold', value} = props
-
-  const [focused, setFocused] = React.useState(false)
-  const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null)
-  const isComposingRef = React.useRef(false)
-  const isDarkMode = useColorScheme() === 'dark'
-
-  const onFocus = () => {
-    if (disabled) return
-    setFocused(true)
-    if (selectTextOnFocus) {
-      inputRef.current?.select()
-    }
-    onFocusProp?.()
-  }
-
-  const onBlur = () => {
-    setFocused(false)
-    onBlurProp?.()
-  }
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    onChangeText?.(e.target.value)
-  }
-
-  const onCompositionStart = () => {
-    isComposingRef.current = true
-  }
-
-  const onCompositionEnd = () => {
-    isComposingRef.current = false
-  }
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (isComposingRef.current) return
-    onKeyDownProp?.(e)
-    if (e.key === 'Enter' && !(e.shiftKey || e.ctrlKey || e.altKey)) {
-      onEnterKeyDown?.(e)
-    }
-  }
-
-  const isControlled = typeof value === 'string'
-
-  React.useImperativeHandle(ref, () => ({
-    blur: () => inputRef.current?.blur(),
-    clear: () => {
-      if (isControlled) {
-        onChangeText?.('')
-      } else if (inputRef.current) {
-        inputRef.current.value = ''
-      }
-    },
-    focus: () => inputRef.current?.focus(),
-  }))
-
-  const textStyle = getTextStyle(textType, isDarkMode)
-  const fontSize = textStyle.fontSize
-
-  const rows = rowsMin || Math.min(2, rowsMax || 2)
-  const lineHeight =
-    textStyle.lineHeight === undefined ? 20 : typeof textStyle.lineHeight === 'string' ? parseInt(textStyle.lineHeight, 10) || 20 : textStyle.lineHeight
-
-  const commonInputProps = {
-    autoCapitalize,
-    autoCorrect: autoCorrect === undefined ? undefined : autoCorrect ? 'on' : 'off',
-    autoFocus,
-    maxLength,
-    onBlur,
-    onChange,
-    onClick,
-    onCompositionEnd,
-    onCompositionStart,
-    onFocus,
-    onKeyDown,
-    placeholder,
-    ref: inputRef,
-    spellCheck,
-    value,
-    ...(disabled ? {readOnly: true as const} : {}),
-    'data-allow-keyboard-shortcuts': 'true',
-  }
-
-  const inputElement = multiline ? (
-    <textarea
-      {...commonInputProps}
-      ref={inputRef as React.RefObject<HTMLTextAreaElement>}
-      rows={rows}
-      style={
-        Styles.collapseStyles([
-          styles.noChrome,
-          textStyle,
-          styles.multiline,
-          {minHeight: rows * lineHeight},
-          rowsMax && {maxHeight: rowsMax * lineHeight},
-          growAndScroll && styles.growAndScroll,
-          inputStyle,
-        ]) as React.CSSProperties
-      }
-    />
-  ) : (
-    <input
-      {...commonInputProps}
-      ref={inputRef as React.RefObject<HTMLInputElement>}
-      type={secureTextEntry ? 'password' : 'text'}
-      style={
-        Styles.collapseStyles([textStyle, styles.noChrome, styles.singleline, inputStyle]) as React.CSSProperties
-      }
-    />
-  )
-
-  return (
-    <Box2
-      direction="horizontal"
-      style={Styles.collapseStyles([
-        styles.container,
-        focused && styles.focused,
-        error && styles.error,
-        hideBorder && styles.hideBorder,
-        disabled && styles.disabled,
-        containerStyle,
-      ])}
-    >
-      {!!icon && (
-        <Box2 direction="horizontal" style={styles.icon}>
-          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
-        </Box2>
-      )}
-      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
-      {inputElement}
-      {decoration}
-    </Box2>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        alignItems: 'center',
-        backgroundColor: Styles.globalColors.white,
-        borderColor: Styles.globalColors.black_10,
-        borderRadius: Styles.borderRadius,
-        borderStyle: 'solid',
-        borderWidth: 1,
-        padding: Styles.globalMargins.xtiny,
-        width: '100%',
-      },
-      disabled: {opacity: 0.4},
-      displayFlex: {display: 'flex'},
-      error: {borderColor: Styles.globalColors.red},
-      focused: {borderColor: Styles.globalColors.blue},
-      growAndScroll: Styles.platformStyles({
-        isElectron: {
-          fieldSizing: 'fixed',
-          maxHeight: '100%',
-          overflowY: 'auto',
-          scrollbarGutter: 'stable',
-        },
-      }),
-      hideBorder: {borderWidth: 0},
-      icon: {marginRight: Styles.globalMargins.xtiny},
-      multiline: Styles.platformStyles({
-        isElectron: {
-          fieldSizing: 'content',
-          paddingBottom: 0,
-          paddingTop: 0,
-          resize: 'none',
-          width: '100%',
-        },
-      }),
-      noChrome: Styles.platformStyles({
-        isElectron: {
-          borderWidth: 0,
-          lineHeight: 'unset',
-          outline: 'none',
-        },
-      }),
-      prefix: {marginRight: Styles.globalMargins.xtiny},
-      singleline: {
-        flex: 1,
-        minWidth: 0,
-        width: '100%',
-      },
-    }) as const
-)
-
-export default Input3
diff --git a/shared/common-adapters/input3.native.tsx b/shared/common-adapters/input3.native.tsx
deleted file mode 100644
index 98f573472e00..000000000000
--- a/shared/common-adapters/input3.native.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import {Box2} from './box'
-import IconAuto from './icon-auto'
-import Text from './text'
-import {getTextStyle} from './text.styles'
-import {TextInput as NativeTextInput} from 'react-native'
-import {isIOS} from '@/constants/platform'
-import {useColorScheme} from 'react-native'
-import type {Input3Props, Input3Ref} from './input3.shared'
-
-function Input3(props: Input3Props & {ref?: React.Ref<Input3Ref>}) {
-  const {autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled} = props
-  const {error, hideBorder, icon, inputStyle, keyboardType, maxLength, multiline, selectTextOnFocus} = props
-  const {onBlur: onBlurProp, onChangeText, onEnterKeyDown, onFocus: onFocusProp} = props
-  const {placeholder, prefix, ref, returnKeyType, rowsMax, rowsMin, secureTextEntry, textContentType, textType = 'BodySemibold', value} = props
-
-  const [focused, setFocused] = React.useState(false)
-  const inputRef = React.useRef<NativeTextInput>(null)
-  const isDarkMode = useColorScheme() === 'dark'
-
-  const onFocus = () => {
-    if (disabled) return
-    setFocused(true)
-    onFocusProp?.()
-  }
-
-  const onBlur = () => {
-    setFocused(false)
-    onBlurProp?.()
-  }
-
-  const onSubmitEditing = () => {
-    onEnterKeyDown?.()
-  }
-
-  const isControlled = typeof value === 'string'
-
-  React.useImperativeHandle(ref, () => ({
-    blur: () => inputRef.current?.blur(),
-    clear: () => {
-      if (isControlled) {
-        onChangeText?.('')
-      } else {
-        inputRef.current?.clear()
-      }
-    },
-    focus: () => inputRef.current?.focus(),
-  }))
-
-  let textStyle = getTextStyle(textType, isDarkMode)
-  if (isIOS) {
-    const {lineHeight: _, ...rest} = textStyle
-    textStyle = rest
-  }
-
-  const fontSize = textStyle.fontSize
-  const lineHeight = getTextStyle(textType, true).lineHeight ?? 20
-  const defaultRows = Math.min(2, rowsMax || 2)
-  const rows = rowsMin || defaultRows
-
-  const inputElement = (
-    <NativeTextInput
-      autoCapitalize={autoCapitalize ?? 'none'}
-      autoCorrect={autoCorrect ?? false}
-      autoFocus={autoFocus}
-      blurOnSubmit={!multiline}
-      editable={!disabled}
-      keyboardType={keyboardType ?? 'default'}
-      maxLength={maxLength}
-      multiline={multiline}
-      onBlur={onBlur}
-      onChangeText={onChangeText}
-      onFocus={onFocus}
-      onSubmitEditing={onSubmitEditing}
-      placeholder={placeholder}
-      placeholderTextColor={Styles.globalColors.black_35}
-      ref={inputRef}
-      returnKeyType={returnKeyType}
-      secureTextEntry={secureTextEntry}
-      selectTextOnFocus={selectTextOnFocus}
-      style={Styles.collapseStyles([
-        textStyle,
-        styles.input,
-        multiline && styles.multiline,
-        multiline && {minHeight: rows * lineHeight},
-        multiline && rowsMax && {maxHeight: rowsMax * lineHeight},
-        inputStyle,
-      ])}
-      textContentType={textContentType}
-      underlineColorAndroid="transparent"
-      value={value}
-    />
-  )
-
-  return (
-    <Box2
-      direction="horizontal"
-      style={Styles.collapseStyles([
-        styles.container,
-        focused && styles.focused,
-        error && styles.error,
-        hideBorder && styles.hideBorder,
-        disabled && styles.disabled,
-        containerStyle,
-      ])}
-    >
-      {!!icon && (
-        <Box2 direction="horizontal" style={styles.icon}>
-          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
-        </Box2>
-      )}
-      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
-      {inputElement}
-      {decoration}
-    </Box2>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        alignItems: 'center',
-        backgroundColor: Styles.globalColors.white,
-        borderColor: Styles.globalColors.black_10,
-        borderRadius: Styles.borderRadius,
-        borderStyle: 'solid',
-        borderWidth: 1,
-        padding: Styles.globalMargins.xtiny,
-      },
-      disabled: {opacity: 0.4},
-      displayFlex: {display: 'flex'},
-      error: {borderColor: Styles.globalColors.red},
-      focused: {borderColor: Styles.globalColors.blue},
-      hideBorder: {borderWidth: 0},
-      icon: {marginRight: Styles.globalMargins.xtiny},
-      input: {
-        borderWidth: 0,
-        flexGrow: 1,
-      },
-      multiline: Styles.platformStyles({
-        isMobile: {
-          height: undefined,
-          textAlignVertical: 'top',
-        },
-      }),
-      prefix: {marginRight: Styles.globalMargins.xtiny},
-    }) as const
-)
-
-export default Input3
diff --git a/shared/common-adapters/input3.tsx b/shared/common-adapters/input3.tsx
new file mode 100644
index 000000000000..fe5558beb6bf
--- /dev/null
+++ b/shared/common-adapters/input3.tsx
@@ -0,0 +1,347 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Box2} from './box'
+import IconAuto from './icon-auto'
+import Text from './text'
+import {getTextStyle} from './text.styles'
+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
+import './input.css'
+
+// Stub types to avoid DOM lib dependency in native tsconfig
+type InputLikeRef = {
+  blur?: () => void
+  focus?: () => void
+  select?: () => void
+  clear?: () => void
+  value?: string
+}
+type InputChangeEvent = {target: {value: string}}
+type InputKeyEvent = {
+  key?: string
+  shiftKey?: boolean
+  ctrlKey?: boolean
+  altKey?: boolean
+}
+
+const DesktopInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
+  const {
+    autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled, error,
+    growAndScroll, hideBorder, icon, inputStyle, maxLength, multiline, selectTextOnFocus,
+    onBlur: onBlurProp, onChangeText, onClick, onEnterKeyDown, onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp, placeholder, prefix, ref, rowsMax, rowsMin,
+    secureTextEntry, spellCheck, textType = 'BodySemibold', value,
+  } = props
+
+  const [focused, setFocused] = React.useState(false)
+  const inputRef = React.useRef<InputLikeRef>(null)
+  const isComposingRef = React.useRef(false)
+  const isDarkMode = useColorScheme() === 'dark'
+
+  const onFocus = () => {
+    if (disabled) return
+    setFocused(true)
+    if (selectTextOnFocus) {
+      inputRef.current?.select?.()
+    }
+    onFocusProp?.()
+  }
+
+  const onBlur = () => {
+    setFocused(false)
+    onBlurProp?.()
+  }
+
+  const onChange = (e: InputChangeEvent) => {
+    onChangeText?.(e.target.value)
+  }
+
+  const onKeyDown = (e: InputKeyEvent) => {
+    if (isComposingRef.current) return
+    onKeyDownProp?.(e as React.KeyboardEvent)
+    if (e.key === 'Enter' && !(e.shiftKey || e.ctrlKey || e.altKey)) {
+      onEnterKeyDown?.(e as React.KeyboardEvent)
+    }
+  }
+
+  const isControlled = typeof value === 'string'
+
+  React.useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur?.(),
+    clear: () => {
+      if (isControlled) {
+        onChangeText?.('')
+      } else if (inputRef.current) {
+        inputRef.current.value = ''
+      }
+    },
+    focus: () => inputRef.current?.focus?.(),
+  }))
+
+  const textStyle = getTextStyle(textType, isDarkMode)
+  const fontSize = textStyle.fontSize
+  const lineHeight =
+    textStyle.lineHeight === undefined
+      ? 20
+      : typeof textStyle.lineHeight === 'string'
+        ? parseInt(textStyle.lineHeight, 10) || 20
+        : textStyle.lineHeight
+
+  const rows = rowsMin || Math.min(2, rowsMax || 2)
+
+  const commonInputProps = {
+    autoCapitalize,
+    autoCorrect: autoCorrect === undefined ? undefined : autoCorrect ? 'on' : 'off',
+    autoFocus,
+    maxLength,
+    onBlur,
+    onChange,
+    onClick,
+    onCompositionEnd: () => {
+      isComposingRef.current = false
+    },
+    onCompositionStart: () => {
+      isComposingRef.current = true
+    },
+    onFocus,
+    onKeyDown,
+    placeholder,
+    ref: inputRef,
+    spellCheck,
+    value,
+    ...(disabled ? {readOnly: true as const} : {}),
+    'data-allow-keyboard-shortcuts': 'true',
+  }
+
+  const inputElement = multiline ? (
+    <textarea
+      {...(commonInputProps as unknown as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+      ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+      rows={rows}
+      style={
+        Styles.collapseStyles([
+          styles.noChrome,
+          textStyle,
+          styles.multiline,
+          {minHeight: rows * lineHeight},
+          rowsMax && {maxHeight: rowsMax * lineHeight},
+          growAndScroll && styles.growAndScroll,
+          inputStyle,
+        ]) as React.CSSProperties
+      }
+    />
+  ) : (
+    <input
+      {...(commonInputProps as unknown as React.InputHTMLAttributes<HTMLInputElement>)}
+      ref={inputRef as React.RefObject<HTMLInputElement>}
+      type={secureTextEntry ? 'password' : 'text'}
+      style={
+        Styles.collapseStyles([textStyle, styles.noChrome, styles.singleline, inputStyle]) as React.CSSProperties
+      }
+    />
+  )
+
+  return (
+    <Box2
+      direction="horizontal"
+      style={Styles.collapseStyles([
+        styles.container,
+        focused && styles.focused,
+        error && styles.error,
+        hideBorder && styles.hideBorder,
+        disabled && styles.disabled,
+        containerStyle,
+      ])}
+    >
+      {!!icon && (
+        <Box2 direction="horizontal" style={styles.icon}>
+          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
+        </Box2>
+      )}
+      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
+      {inputElement}
+      {decoration}
+    </Box2>
+  )
+}
+
+const NativeInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
+  const {
+    autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled, error,
+    hideBorder, icon, inputStyle, keyboardType, maxLength, multiline, onEnterKeyDown,
+    onBlur: onBlurProp, onChangeText, onFocus: onFocusProp, placeholder, prefix, ref,
+    returnKeyType, rowsMax, rowsMin, secureTextEntry, selectTextOnFocus,
+    textContentType, textType = 'BodySemibold', value,
+  } = props
+
+  const [focused, setFocused] = React.useState(false)
+  const inputRef = React.useRef<InputLikeRef>(null)
+  const isDarkMode = useColorScheme() === 'dark'
+
+  const onFocus = () => {
+    if (disabled) return
+    setFocused(true)
+    onFocusProp?.()
+  }
+
+  const onBlur = () => {
+    setFocused(false)
+    onBlurProp?.()
+  }
+
+  const isControlled = typeof value === 'string'
+
+  React.useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur?.(),
+    clear: () => {
+      if (isControlled) {
+        onChangeText?.('')
+      } else {
+        inputRef.current?.clear?.()
+      }
+    },
+    focus: () => inputRef.current?.focus?.(),
+  }))
+
+  let textStyle = getTextStyle(textType, isDarkMode)
+  if (isIOS) {
+    const {lineHeight: _, ...rest} = textStyle
+    textStyle = rest
+  }
+
+  const fontSize = textStyle.fontSize
+  const lineHeight = getTextStyle(textType, true).lineHeight ?? 20
+  const rows = rowsMin || Math.min(2, rowsMax || 2)
+
+  return (
+    <Box2
+      direction="horizontal"
+      style={Styles.collapseStyles([
+        styles.container,
+        focused && styles.focused,
+        error && styles.error,
+        hideBorder && styles.hideBorder,
+        disabled && styles.disabled,
+        containerStyle,
+      ])}
+    >
+      {!!icon && (
+        <Box2 direction="horizontal" style={styles.icon}>
+          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
+        </Box2>
+      )}
+      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
+      <NativeTextInput
+        autoCapitalize={autoCapitalize ?? 'none'}
+        autoCorrect={autoCorrect ?? false}
+        autoFocus={autoFocus}
+        blurOnSubmit={!multiline}
+        editable={!disabled}
+        keyboardType={keyboardType ?? 'default'}
+        maxLength={maxLength}
+        multiline={multiline}
+        onBlur={onBlur}
+        onChangeText={onChangeText}
+        onFocus={onFocus}
+        onSubmitEditing={onEnterKeyDown}
+        placeholder={placeholder}
+        placeholderTextColor={Styles.globalColors.black_35}
+        ref={inputRef as React.Ref<InputLikeRef>}
+        returnKeyType={returnKeyType}
+        secureTextEntry={secureTextEntry}
+        selectTextOnFocus={selectTextOnFocus}
+        style={Styles.collapseStyles([
+          textStyle,
+          styles.input,
+          multiline && styles.multiline,
+          multiline && {minHeight: rows * lineHeight},
+          multiline && rowsMax && {maxHeight: rowsMax * lineHeight},
+          inputStyle,
+        ])}
+        textContentType={textContentType}
+        underlineColorAndroid="transparent"
+        value={value}
+      />
+      {decoration}
+    </Box2>
+  )
+}
+
+function Input3(props: Input3Props & {ref?: React.Ref<Input3Ref>}) {
+  if (!isMobile) return <DesktopInput3 {...props} />
+  return <NativeInput3 {...props} />
+}
+
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      container: Styles.platformStyles({
+        common: {
+          alignItems: 'center',
+          backgroundColor: Styles.globalColors.white,
+          borderColor: Styles.globalColors.black_10,
+          borderRadius: Styles.borderRadius,
+          borderStyle: 'solid',
+          borderWidth: 1,
+          padding: Styles.globalMargins.xtiny,
+        },
+        isElectron: {
+          width: '100%',
+        },
+      }),
+      disabled: {opacity: 0.4},
+      displayFlex: Styles.platformStyles({isElectron: {display: 'flex'}}),
+      error: {borderColor: Styles.globalColors.red},
+      focused: {borderColor: Styles.globalColors.blue},
+      growAndScroll: Styles.platformStyles({
+        isElectron: {
+          fieldSizing: 'fixed',
+          maxHeight: '100%',
+          overflowY: 'auto',
+          scrollbarGutter: 'stable',
+        },
+      }),
+      hideBorder: {borderWidth: 0},
+      icon: {marginRight: Styles.globalMargins.xtiny},
+      input: Styles.platformStyles({
+        isMobile: {
+          borderWidth: 0,
+          flexGrow: 1,
+        },
+      }),
+      multiline: Styles.platformStyles({
+        isElectron: {
+          fieldSizing: 'content',
+          paddingBottom: 0,
+          paddingTop: 0,
+          resize: 'none',
+          width: '100%',
+        },
+        isMobile: {
+          height: undefined,
+          textAlignVertical: 'top',
+        },
+      }),
+      noChrome: Styles.platformStyles({
+        isElectron: {
+          borderWidth: 0,
+          lineHeight: 'unset',
+          outline: 'none',
+        },
+      }),
+      prefix: {marginRight: Styles.globalMargins.xtiny},
+      singleline: Styles.platformStyles({
+        isElectron: {
+          flex: 1,
+          minWidth: 0,
+          width: '100%',
+        },
+      }),
+    }) as const
+)
+
+export default Input3
diff --git a/shared/common-adapters/key-event-handler.tsx b/shared/common-adapters/key-event-handler.tsx
new file mode 100644
index 000000000000..ceab68e49339
--- /dev/null
+++ b/shared/common-adapters/key-event-handler.tsx
@@ -0,0 +1,10 @@
+import type * as React from 'react'
+
+type EscapeHandlerProps = {
+  onESC?: () => void
+  children: React.ReactNode
+}
+
+export const EscapeHandler = (props: EscapeHandlerProps) => props.children as React.ReactElement
+export const KeyEventHandler = (props: {children: React.ReactNode}) => props.children as React.ReactElement
+export const GlobalKeyEventHandler = () => null
diff --git a/shared/common-adapters/keyboard-avoiding-view.desktop.tsx b/shared/common-adapters/keyboard-avoiding-view.desktop.tsx
deleted file mode 100644
index 6fe755ce4505..000000000000
--- a/shared/common-adapters/keyboard-avoiding-view.desktop.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import type * as React from 'react'
-export const KeyboardAvoidingView2 = ({children}: {children?: React.ReactNode}): React.ReactNode =>
-  children || null
-export default KeyboardAvoidingView2
diff --git a/shared/common-adapters/keyboard-avoiding-view.native.tsx b/shared/common-adapters/keyboard-avoiding-view.native.tsx
deleted file mode 100644
index 6f5cac3a3883..000000000000
--- a/shared/common-adapters/keyboard-avoiding-view.native.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-/*
-import * as Styles from '@/styles'
-import {
-  AccessibilityInfo,
-  Dimensions,
-  Keyboard,
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  View,
-  type EventSubscription,
-  type KeyboardAvoidingView as OldKeyboardAvoidingViewType,
-  type KeyboardEvent,
-  type LayoutChangeEvent,
-  type ViewStyle,
-} from 'react-native'
-import {useHeaderHeight} from '@react-navigation/elements'
-import type {Props as KAVProps} from './keyboard-avoiding-view.shared'
-import * as React from 'react'
-import {getKeyboardUp} from '@/styles/keyboard-state'
-import {isTablet} from '@/constants/platform'
-
-type Props = React.ComponentProps<typeof OldKeyboardAvoidingViewType> & {
-  extraPadding?: number
-  compensateNotBeingOnBottom?: boolean
-}
-
-type ViewLayout = {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-type KeyboardMetrics = {
-  screenX: number
-  screenY: number
-  width: number
-  height: number
-}
-
-const useSafeHeaderHeight = () => {
-  try {
-    // eslint-disable-next-line
-    return useHeaderHeight()
-  } catch {
-    return 0
-  }
-}
-
-type State = {
-  bottom: number
-}
-
-// Pulling this from RN since we patch it up
-class KeyboardAvoidingView extends React.Component<Props, State> {
-  _bottom: number = 0
-  _frame?: ViewLayout
-  _keyboardEvent?: KeyboardEvent | undefined
-  _subscriptions: Array<EventSubscription> = []
-  viewRef: {current: React.ElementRef<typeof View> | null}
-  _initialFrameHeight: number = 0
-  _tabletLayoutHeight: number = 0
-
-  constructor(props: Props) {
-    super(props)
-    this.state = {bottom: 0}
-    this.viewRef = React.createRef()
-  }
-
-  async _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number> {
-    const frame = this._frame
-    if (!frame) {
-      return 0
-    }
-
-    // On iOS when Prefer Cross-Fade Transitions is enabled, the keyboard position
-    // & height is reported differently (0 instead of Y position value matching height of frame)
-    if (
-      Platform.OS === 'ios' &&
-      keyboardFrame.screenY === 0 &&
-      (await AccessibilityInfo.prefersCrossFadeTransitions())
-    ) {
-      return 0
-    }
-
-    const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0)
-
-    if (this.props.behavior === 'height') {
-      return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0)
-    }
-
-    // just use the keyboard height
-    // showing?
-    const windowHeight = Dimensions.get('window').height
-    if (keyboardFrame.screenY + keyboardFrame.height === windowHeight) {
-      return keyboardFrame.height
-    }
-    return 0
-
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
-    // return Math.max(frame.y + frame.height - keyboardY, 0)
-  }
-
-  _onKeyboardChange = (event?: KeyboardEvent) => {
-    this._keyboardEvent = event
-    this._updateBottomIfNecessary()
-      .then(() => {})
-      .catch(() => {})
-  }
-
-  _onLayout = (event: LayoutChangeEvent) => {
-    if (isTablet) {
-      this._tabletLayoutHeight = (Dimensions.get('window').height - event.nativeEvent.layout.height) / 2
-    }
-    const f = async () => {
-      const wasFrameNull = !this._frame
-      this._frame = event.nativeEvent.layout
-      if (!this._initialFrameHeight) {
-        // save the initial frame height, before the keyboard is visible
-        this._initialFrameHeight = this._frame.height
-      }
-
-      if (wasFrameNull) {
-        await this._updateBottomIfNecessary()
-      }
-
-      if (this.props.onLayout) {
-        this.props.onLayout(event)
-      }
-    }
-    f()
-      .then(() => {})
-      .catch(() => {})
-  }
-
-  // Avoid unnecessary renders if the KeyboardAvoidingView is disabled.
-  _setBottom = (value: number) => {
-    const enabled = this.props.enabled ?? true
-    this._bottom = value
-    if (enabled) {
-      this.setState({bottom: value + (this.props.extraPadding ?? 0)})
-    }
-  }
-
-  _updateBottomIfNecessary = async () => {
-    if (!this._keyboardEvent) {
-      this._setBottom(0)
-
-      if (getKeyboardUp()) {
-        const h = Keyboard.metrics()?.height ?? 0
-        this._setBottom(h)
-      } else {
-        this._setBottom(0)
-      }
-      return
-    }
-
-    const {duration, easing: _easing, endCoordinates} = this._keyboardEvent
-    const easing = _easing as typeof _easing | undefined // i think this is possible...
-    const height = await this._relativeKeyboardHeight(endCoordinates)
-
-    if (this._bottom === height) {
-      return
-    }
-
-    const enabled = this.props.enabled ?? true
-    if (enabled && duration && easing) {
-      LayoutAnimation.configureNext({
-        // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
-        duration: duration > 10 ? duration : 10,
-        update: {
-          duration: duration > 10 ? duration : 10,
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          type: LayoutAnimation.Types[easing] || 'keyboard',
-        },
-      })
-    }
-
-    // tablet modals are centered so we need to offset that, zero otherwise
-    const bottomOffset = this.props.compensateNotBeingOnBottom ? this._tabletLayoutHeight : 0
-    this._setBottom(height - bottomOffset)
-  }
-
-  // componentDidUpdate(_: Props, prevState: State): void {
-  // const enabled = this.props.enabled ?? true
-  // if (enabled && this._bottom !== prevState.bottom) {
-  //   this.setState({bottom: this._bottom})
-  // }
-  // }
-
-  componentDidMount(): void {
-    if (Platform.OS === 'ios') {
-      this._subscriptions = [Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange)]
-    } else {
-      this._subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
-        Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
-      ]
-    }
-  }
-
-  componentWillUnmount(): void {
-    this._subscriptions.forEach(subscription => {
-      subscription.remove()
-    })
-  }
-
-  render(): React.ReactNode {
-    const {
-      behavior,
-      children,
-      contentContainerStyle,
-      enabled = true,
-      // keyboardVerticalOffset = 0,
-      style,
-      onLayout,
-      ...props
-    } = this.props
-    const bottomHeight = enabled ? this.state.bottom : 0
-    switch (behavior) {
-      case 'height': {
-        let heightStyle: ViewStyle | undefined
-        if (!!this._frame && this.state.bottom > 0) {
-          // Note that we only apply a height change when there is keyboard present,
-          // i.e. this.state.bottom is greater than 0. If we remove that condition,
-          // this.frame.height will never go back to its original value.
-          // When height changes, we need to disable flex.
-          heightStyle = {
-            flex: 0,
-            height: this._initialFrameHeight - bottomHeight,
-          }
-        }
-        return (
-          <View
-            ref={this.viewRef}
-            style={StyleSheet.compose(style, heightStyle)}
-            onLayout={this._onLayout}
-            {...props}
-          >
-            {children}
-          </View>
-        )
-      }
-      case 'position':
-        return (
-          <View ref={this.viewRef} style={style} onLayout={this._onLayout} {...props}>
-            <View
-              style={StyleSheet.compose(contentContainerStyle, {
-                bottom: bottomHeight,
-              })}
-            >
-              {children}
-            </View>
-          </View>
-        )
-
-      case 'padding':
-        return (
-          <View
-            ref={this.viewRef}
-            style={StyleSheet.compose(style, {paddingBottom: bottomHeight})}
-            onLayout={this._onLayout}
-            {...props}
-          >
-            {children}
-          </View>
-        )
-
-      default:
-        return (
-          <View ref={this.viewRef} onLayout={this._onLayout} style={style} {...props}>
-            {children}
-          </View>
-        )
-    }
-  }
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      keyboard: {
-        flexGrow: 1,
-        maxHeight: '100%',
-        position: 'relative',
-      },
-    }) as const
-)
-
-export const KeyboardAvoidingView2 = (p: KAVProps) => {
-  const {children, extraOffset, extraPadding, compensateNotBeingOnBottom} = p
-  const headerHeight = useSafeHeaderHeight()
-  const keyboardVerticalOffset = headerHeight + (extraOffset ?? 0)
-
-  return (
-    <KeyboardAvoidingView
-      compensateNotBeingOnBottom={compensateNotBeingOnBottom}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      pointerEvents="box-none"
-      style={styles.keyboard}
-      extraPadding={extraPadding}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      {children}
-    </KeyboardAvoidingView>
-  )
-}
-*/
-
-import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
-import type {Props} from './keyboard-avoiding-view.shared'
-import * as Styles from '@/styles'
-import {useHeaderHeight} from '@react-navigation/elements'
-
-const useSafeHeaderHeight = () => {
-  try {
-    return useHeaderHeight()
-  } catch {
-    return 0
-  }
-}
-
-export const KeyboardAvoidingView2 = (p: Props) => {
-  const {extraOffset, behavior} = p
-  const headerHeight = useSafeHeaderHeight()
-  const keyboardVerticalOffset = headerHeight + (extraOffset ?? 0)
-  return (
-    <KeyboardAvoidingView
-      behavior={behavior ?? (Styles.isIOS ? 'padding' : 'height')}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      pointerEvents="box-none"
-      {...p}
-      style={styles.keyboard}
-    />
-  )
-}
-export default KeyboardAvoidingView2
-
-const styles = Styles.styleSheetCreate(() => ({
-  keyboard: {flexGrow: 1, flexShrink: 1},
-}))
diff --git a/shared/common-adapters/keyboard-avoiding-view.tsx b/shared/common-adapters/keyboard-avoiding-view.tsx
new file mode 100644
index 000000000000..bfba52455ecc
--- /dev/null
+++ b/shared/common-adapters/keyboard-avoiding-view.tsx
@@ -0,0 +1,38 @@
+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 {
+  // 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 => {
+
+  const headerHeight = useSafeHeaderHeight()
+  const {extraOffset, behavior, children} = p
+  const keyboardVerticalOffset = headerHeight + (extraOffset ?? 0)
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior ?? (isIOS ? 'padding' : 'height')}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+      pointerEvents="box-none"
+      style={styles.keyboard}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  )
+}
+
+export const KeyboardAvoidingView2 = isMobile ? NativeKeyboardAvoidingView : DesktopKeyboardAvoidingView
+export default KeyboardAvoidingView2
+
+const styles = Styles.styleSheetCreate(() => ({
+  keyboard: {flexGrow: 1, flexShrink: 1},
+}))
diff --git a/shared/common-adapters/list-item.tsx b/shared/common-adapters/list-item.tsx
index 211cab9bbeaf..8db6c35d63fb 100644
--- a/shared/common-adapters/list-item.tsx
+++ b/shared/common-adapters/list-item.tsx
@@ -104,12 +104,12 @@ const ListItem = (props: Props) => (
   </Kb.ClickableBox>
 )
 
-export const smallHeight = Styles.isMobile ? 56 : 48
-export const largeHeight = Styles.isMobile ? 64 : 56
-const smallIconWidth = Styles.isMobile ? 64 : 64
-const largeIconWidth = Styles.isMobile ? 72 : 72
-const statusIconWidth = Styles.isMobile ? 48 : 44
-const afterStatusIconItemLeftDistance = statusIconWidth - (Styles.isMobile ? 10 : 14)
+export const smallHeight = isMobile ? 56 : 48
+export const largeHeight = isMobile ? 64 : 56
+const smallIconWidth = isMobile ? 64 : 64
+const largeIconWidth = isMobile ? 72 : 72
+const statusIconWidth = isMobile ? 48 : 44
+const afterStatusIconItemLeftDistance = statusIconWidth - (isMobile ? 10 : 14)
 
 const styles = Styles.styleSheetCreate(() => {
   const _styles = {
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/loading-line.desktop.tsx b/shared/common-adapters/loading-line.desktop.tsx
deleted file mode 100644
index 814fa1ef1b22..000000000000
--- a/shared/common-adapters/loading-line.desktop.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Box2} from './box'
-import * as Styles from '@/styles'
-import './loading-line.css'
-
-const Kb = {Box2}
-
-function LoadingLine() {
-  return (
-    <Kb.Box2 direction="vertical" style={styles.container}>
-      <Kb.Box2 direction="vertical" fullWidth={true} className="loading-line" style={styles.line} />
-    </Kb.Box2>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    left: 0,
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-  },
-  line: {
-    backgroundColor: Styles.globalColors.blue,
-    height: 1,
-  },
-}))
-
-export default LoadingLine
diff --git a/shared/common-adapters/loading-line.native.tsx b/shared/common-adapters/loading-line.native.tsx
deleted file mode 100644
index 0c62bde88128..000000000000
--- a/shared/common-adapters/loading-line.native.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import Animated, {withRepeat, useSharedValue, withTiming, useAnimatedStyle, withDelay} from './reanimated'
-
-function LoadingLine() {
-  'use no memo'
-  const opacity = useSharedValue(1)
-  React.useEffect(() => {
-    opacity.set(withDelay(1000, withRepeat(withTiming(0, {duration: 600}), -1, true)))
-  }, [opacity])
-  const backgroundColor = Styles.undynamicColor(Styles.globalColors.blue)
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      backgroundColor,
-      opacity: opacity.value,
-    }
-  })
-  return <Animated.View style={[styles.line, animatedStyle]} />
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      line: {
-        height: 1,
-        position: 'absolute',
-        width: '100%',
-      },
-    }) as const
-)
-
-export default LoadingLine
diff --git a/shared/common-adapters/loading-line.tsx b/shared/common-adapters/loading-line.tsx
new file mode 100644
index 000000000000..0fea294c0027
--- /dev/null
+++ b/shared/common-adapters/loading-line.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Box2} from './box'
+import Animated, {withRepeat, useSharedValue, withTiming, useAnimatedStyle, withDelay} from './reanimated'
+import './loading-line.css'
+
+function LoadingLine() {
+  'use no memo'
+  const opacity = useSharedValue(1)
+  React.useEffect(() => {
+    if (!isMobile) return
+    opacity.set(withDelay(1000, withRepeat(withTiming(0, {duration: 600}), -1, true)))
+  }, [opacity])
+
+  const backgroundColor = Styles.undynamicColor(Styles.globalColors.blue)
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor,
+      opacity: opacity.value,
+    }
+  })
+
+  if (!isMobile) {
+    return (
+      <Box2 direction="vertical" style={styles.container}>
+        <Box2 direction="vertical" fullWidth={true} className="loading-line" style={styles.line} />
+      </Box2>
+    )
+  }
+
+  return <Animated.View style={[styles.nativeLine, animatedStyle]} />
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  container: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+  },
+  line: {
+    backgroundColor: Styles.globalColors.blue,
+    height: 1,
+  },
+  nativeLine: {
+    height: 1,
+    position: 'absolute',
+    width: '100%',
+  },
+}))
+
+export default LoadingLine
diff --git a/shared/common-adapters/markdown/index.tsx b/shared/common-adapters/markdown/index.tsx
index bcb8e95e8664..cb41f9d1b8a9 100644
--- a/shared/common-adapters/markdown/index.tsx
+++ b/shared/common-adapters/markdown/index.tsx
@@ -161,7 +161,7 @@ const wrapInParagraph = (parse: SM.Parser, content: string, state: State): Array
   return ret
 }
 
-const isMarkdownMobile = (state: State) => state.isMobile ?? Styles.isMobile
+const isMarkdownMobile = (state: State) => state.isMobile ?? isMobile
 
 const wordBoundaryLookBehind = /\B$/
 // Wraps the match to also check that the behind is not a text, but a boundary (like a space)
@@ -432,7 +432,7 @@ export const parseMarkdown = (
   return parser(source + '\n', {
     disableAutoBlockNewlines: true,
     inline: false,
-    isMobile: options?.isMobile ?? Styles.isMobile,
+    isMobile: options?.isMobile ?? isMobile,
     messageType: options?.messageType,
   })
 }
@@ -471,7 +471,7 @@ function SimpleMarkdownComponent(p: Props) {
   let parseTree: Array<SM.SingleASTNode>
   let output: React.ReactNode
   try {
-    parseTree = parseMarkdown(children ?? '', {isMobile: Styles.isMobile, messageType})
+    parseTree = parseMarkdown(children ?? '', {isMobile: isMobile, messageType})
 
     const state = {
       allowFontScaling,
@@ -528,7 +528,7 @@ function SimpleMarkdownComponent(p: Props) {
         return (
           <Text
             className={paragraphTextClassName}
-            type={Styles.isMobile ? 'Body' : 'BodySmall'}
+            type={isMobile ? 'Body' : 'BodySmall'}
             style={Styles.collapseStyles([markdownStyles.neutralPreviewStyle, style, styleOverride.preview])}
             lineClamp={1 as const}
           >
@@ -543,7 +543,7 @@ function SimpleMarkdownComponent(p: Props) {
   // Mobile doesn't use a wrapper
   return (
     <BareErrorBoundary fallback={<ErrorComponent>{children}</ErrorComponent>}>
-      {Styles.isMobile ? (
+      {isMobile ? (
         inner
       ) : (
         <Text
diff --git a/shared/common-adapters/markdown/maybe-mention/team.tsx b/shared/common-adapters/markdown/maybe-mention/team.tsx
index 52a726847a47..707d50ac3ab6 100644
--- a/shared/common-adapters/markdown/maybe-mention/team.tsx
+++ b/shared/common-adapters/markdown/maybe-mention/team.tsx
@@ -72,7 +72,7 @@ const TeamMention = (ownProps: OwnProps) => {
     <Kb.Text
       textRef={mentionRef}
       type="BodyBold"
-      className={Kb.Styles.classNames({'hover-underline': !Styles.isMobile})}
+      className={Kb.Styles.classNames({'hover-underline': !isMobile})}
       style={Kb.Styles.collapseStyles([style, styles.text])}
       allowFontScaling={allowFontScaling}
       onClick={handleClick}
@@ -89,7 +89,7 @@ const TeamMention = (ownProps: OwnProps) => {
 
   const popups = (
     <TeamInfo
-      attachTo={Kb.Styles.isMobile ? undefined : mentionRef}
+      attachTo={isMobile ? undefined : mentionRef}
       description={description}
       inTeam={inTeam}
       isOpen={isOpen}
@@ -105,7 +105,7 @@ const TeamMention = (ownProps: OwnProps) => {
   )
 
   return resolved ? (
-    Kb.Styles.isMobile ? (
+    isMobile ? (
       <>
         {content}
         {popups}
diff --git a/shared/common-adapters/markdown/maybe-mention/unknown.tsx b/shared/common-adapters/markdown/maybe-mention/unknown.tsx
index 923d9a7a5b8f..ff7f9946deff 100644
--- a/shared/common-adapters/markdown/maybe-mention/unknown.tsx
+++ b/shared/common-adapters/markdown/maybe-mention/unknown.tsx
@@ -71,7 +71,7 @@ const UnknownMention = (props: Props) => {
     <Kb.Text
       textRef={mentionRef}
       type="BodySemibold"
-      className={Kb.Styles.classNames({'hover-underline': !Styles.isMobile})}
+      className={Kb.Styles.classNames({'hover-underline': !isMobile})}
       allowFontScaling={props.allowFontScaling}
       style={Kb.Styles.collapseStyles([props.style, styles.text])}
       onClick={handleMouseOver}
@@ -82,7 +82,7 @@ const UnknownMention = (props: Props) => {
 
   const popups = (
     <UnknownMentionPopup
-      attachTo={Kb.Styles.isMobile ? undefined : mentionRef}
+      attachTo={isMobile ? undefined : mentionRef}
       onHidden={handleMouseLeave}
       onResolve={onResolve}
       text={text}
@@ -90,7 +90,7 @@ const UnknownMention = (props: Props) => {
     />
   )
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <>
       {content}
       {popups}
diff --git a/shared/common-adapters/markdown/react.tsx b/shared/common-adapters/markdown/react.tsx
index 47def8266990..4146d6da5dab 100644
--- a/shared/common-adapters/markdown/react.tsx
+++ b/shared/common-adapters/markdown/react.tsx
@@ -181,7 +181,7 @@ const InlineCode = (p: {children: React.ReactNode; state: State}) => {
 
 const Fence = (p: {children: React.ReactNode; state: State}) => {
   const {children, state} = p
-  return Styles.isMobile ? (
+  return isMobile ? (
     <Box2 direction="vertical" fullWidth={true}>
       <Text
         type="Body"
@@ -312,7 +312,7 @@ const reactComponentsForMarkdownType = {
   },
   newline: {
     react: (_node: Node, output: SM.ReactOutput, state: State): React.ReactNode =>
-      !Styles.isMobile || state.inParagraph ? (
+      !isMobile || state.inParagraph ? (
         output({content: '\n', type: 'text'}, state)
       ) : (
         <Text
diff --git a/shared/common-adapters/markdown/service-decoration.tsx b/shared/common-adapters/markdown/service-decoration.tsx
index 50dd056b6e36..f80904fef012 100644
--- a/shared/common-adapters/markdown/service-decoration.tsx
+++ b/shared/common-adapters/markdown/service-decoration.tsx
@@ -64,7 +64,7 @@ const WarningLink = (props: WarningLinkProps) => {
   const {display, punycode, url} = props
   const navigateAppend = C.Router2.navigateAppend
   const urlProps = useClickURL(url)
-  if (Styles.isMobile) {
+  if (isMobile) {
     return (
       <Text
         className="hover-underline"
@@ -254,7 +254,7 @@ const ServiceDecoration = (p: Props) => {
         emojiData={RPCToEmojiData(parsed.emoji, disableEmojiAnimation)}
         showTooltip={!parsed.emoji.isReacji}
         size={
-          parsed.emoji.isBig && !disableBigEmojis ? 32 : parsed.emoji.isReacji && !Styles.isMobile ? 18 : 16
+          parsed.emoji.isBig && !disableBigEmojis ? 32 : parsed.emoji.isReacji && !isMobile ? 18 : 16
         }
         style={styleOverride?.emoji}
       />
diff --git a/shared/common-adapters/mention.tsx b/shared/common-adapters/mention.tsx
index acde14bd339a..4684f329c7dc 100644
--- a/shared/common-adapters/mention.tsx
+++ b/shared/common-adapters/mention.tsx
@@ -18,7 +18,7 @@ const Mention = ({username, theme, style, allowFontScaling, onClick}: Props) =>
     <Text
       type="BodyBold"
       onClick={onClick || undefined}
-      className={Styles.classNames({'hover-underline': !Styles.isMobile})}
+      className={Styles.classNames({'hover-underline': !isMobile})}
       style={Styles.collapseStyles([style, styles[theme || 'none'], styles.text])}
       allowFontScaling={allowFontScaling}
       onLongPress={onLongPress}
diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx
index 9216995ab049..85eb55038cb4 100644
--- a/shared/common-adapters/name-with-icon.tsx
+++ b/shared/common-adapters/name-with-icon.tsx
@@ -78,7 +78,7 @@ const NameWithIcon = (props: NameWithIconProps) => {
   }
 
   const isAvatar = !!(username || teamname) && !props.icon
-  const commonHeight = size === 'big' ? 64 : Styles.isMobile ? 48 : 32
+  const commonHeight = size === 'big' ? 64 : isMobile ? 48 : 32
   const adapterProps = getAdapterProps(size || 'default')
 
   const showFollowing = !props.horizontal && !props.hideFollowingOverlay && !!username
@@ -136,7 +136,7 @@ const NameWithIcon = (props: NameWithIconProps) => {
                 : styles.hIconStyle
               : {height: adapterProps.iconSize, width: adapterProps.iconSize}
           }
-          fontSize={props.horizontal ? (Styles.isMobile ? 48 : 32) : adapterProps.iconSize}
+          fontSize={props.horizontal ? (isMobile ? 48 : 32) : adapterProps.iconSize}
         />
       </Box2>
     )
@@ -154,7 +154,7 @@ const NameWithIcon = (props: NameWithIconProps) => {
       onUsernameClicked={props.clickType === 'onClick' ? onClick : 'profile'}
       type={props.horizontal ? 'BodyBold' : adapterProps.titleType}
       containerStyle={Styles.collapseStyles([
-        !props.horizontal && !Styles.isMobile && styles.vUsernameContainerStyle,
+        !props.horizontal && !isMobile && styles.vUsernameContainerStyle,
         size === 'smaller' && styles.smallerWidthTextContainer,
       ] as const)}
       inline={!props.horizontal}
diff --git a/shared/common-adapters/phone-input.tsx b/shared/common-adapters/phone-input.tsx
index f9b36ba7c813..745db9654ab5 100644
--- a/shared/common-adapters/phone-input.tsx
+++ b/shared/common-adapters/phone-input.tsx
@@ -12,7 +12,6 @@ import ProgressIndicator from './progress-indicator'
 import ClickableBox from './clickable-box'
 import Icon from './icon'
 import {usePopup2, type Popup2Parms} from './popup/use-popup'
-import {isIOS, isMobile} from '@/constants/platform'
 import {
   countryData,
   codeToCountry,
@@ -203,7 +202,7 @@ function CountrySelector(p: CountrySelectorProps & {ref?: React.Ref<CountrySelec
     const mobileItems = pickerItems(countryData())
 
     const onSelectFirst = () => {
-      if (Styles.isMobile && mobileItems[0]) {
+      if (isMobile && mobileItems[0]) {
         onSelectMenu(mobileItems[0].value)
       } else if (desktopItems[0]) {
         onSelectMenu(desktopItems[0].alpha2)
@@ -388,7 +387,7 @@ const PhoneInput = (p: Props) => {
     }
   }
 
-  const isSmall = small ?? !Styles.isMobile
+  const isSmall = small ?? !isMobile
 
   // If country is falsey, the input is loading
   if (country === undefined) {
@@ -509,7 +508,7 @@ const PhoneInput = (p: Props) => {
   }
 
   const renderCountrySelector = () => {
-    const isSmall = small ?? !Styles.isMobile
+    const isSmall = small ?? !isMobile
     if (!isSmall) {
       return (
         <Kb.Text
diff --git a/shared/common-adapters/platform-icon.tsx b/shared/common-adapters/platform-icon.tsx
index f66c784340bd..fd56bca43cec 100644
--- a/shared/common-adapters/platform-icon.tsx
+++ b/shared/common-adapters/platform-icon.tsx
@@ -3,7 +3,6 @@ import {Box2} from './box'
 import IconAuto from './icon-auto'
 import type {IconType} from './icon.constants-gen'
 import ImageIcon from './image-icon'
-import {isMobile} from '@/constants/platform'
 
 type Props = {
   platform: T.More.PlatformsExpandedType
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 71a5d6c05ef6..000000000000
--- a/shared/common-adapters/popup/bottom-sheet.desktop.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// Desktop stubs for mobile-only bottom sheet components
-export const BottomSheetView = () => null
-export const BottomSheetModal = () => null
-export const BottomSheetBackdrop = () => null
-export const BottomSheetScrollView = () => 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/popup/index.desktop.tsx b/shared/common-adapters/popup/index.desktop.tsx
deleted file mode 100644
index 9c5d234cd7e8..000000000000
--- a/shared/common-adapters/popup/index.desktop.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as React from 'react'
-import {Box2} from '../box'
-import FloatingBox from './floating-box'
-import Icon from '../icon'
-import {EscapeHandler} from '../key-event-handler.desktop'
-import * as Styles from '@/styles'
-import type {PopupProps} from './index.shared'
-export type {PopupProps} from './index.shared'
-
-const Kb = {
-  Box2,
-  EscapeHandler,
-  FloatingBox,
-  Icon,
-}
-
-function stopBubbling(ev: React.MouseEvent<HTMLDivElement>) {
-  ev.stopPropagation()
-}
-
-function PopupPositioned(props: PopupProps) {
-  if (Object.hasOwn(props, 'visible') && !props.visible) {
-    return null
-  }
-  return (
-    <Kb.FloatingBox
-      attachTo={props.attachTo}
-      containerStyle={props.containerStyle}
-      matchDimension={!!props.matchDimension}
-      onHidden={props.onHidden}
-      remeasureHint={props.remeasureHint}
-      position={props.position}
-      positionFallbacks={props.positionFallbacks}
-      propagateOutsideClicks={props.propagateOutsideClicks}
-      offset={props.offset}
-    >
-      {props.onHidden ? (
-        <Kb.Box2 direction="vertical" style={Styles.collapseStyles([styles.positioned, props.style])}>
-          {props.children}
-        </Kb.Box2>
-      ) : (
-        props.children
-      )}
-    </Kb.FloatingBox>
-  )
-}
-
-function PopupCentered(props: PopupProps) {
-  const [mouseDownOnCover, setMouseDownOnCover] = React.useState(false)
-  return (
-    <Kb.EscapeHandler onESC={props.onHidden ?? (() => {})}>
-      <Kb.Box2
-        direction="vertical"
-        style={Styles.collapseStyles([styles.cover, props.style])}
-        onMouseUp={() => {
-          if (mouseDownOnCover) {
-            props.onHidden?.()
-          }
-        }}
-        onMouseDown={() => {
-          setMouseDownOnCover(true)
-        }}
-      >
-        <Kb.Box2
-          direction="vertical"
-          style={styles.centeredContainer}
-          onMouseDown={(e: React.BaseSyntheticEvent) => {
-            setMouseDownOnCover(false)
-            e.stopPropagation()
-          }}
-          onMouseUp={(e: React.BaseSyntheticEvent) => e.stopPropagation()}
-        >
-          <div
-            style={styles.clipContainer as React.CSSProperties}
-            onClick={stopBubbling}
-          >
-            {props.children}
-          </div>
-        </Kb.Box2>
-      </Kb.Box2>
-    </Kb.EscapeHandler>
-  )
-}
-
-function Popup(props: PopupProps) {
-  if (props.attachTo) {
-    return <PopupPositioned {...props} />
-  }
-  return <PopupCentered {...props} />
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  centeredContainer: {
-    ...Styles.globalStyles.flexBoxRow,
-    maxHeight: '100%',
-    maxWidth: '100%',
-    position: 'relative' as const,
-  },
-  clipContainer: Styles.platformStyles({
-    isElectron: {
-      ...Styles.desktopStyles.boxShadow,
-      ...Styles.globalStyles.flexBoxColumn,
-      backgroundColor: Styles.globalColors.white,
-      borderRadius: Styles.borderRadius,
-      flex: 1,
-      maxWidth: '100%',
-      position: 'relative',
-    },
-  }),
-  cover: {
-    ...Styles.globalStyles.flexBoxColumn,
-    ...Styles.globalStyles.fillAbsolute,
-    alignItems: 'center',
-    alignSelf: 'stretch',
-    justifyContent: 'center',
-    paddingBottom: Styles.globalMargins.small,
-    paddingLeft: Styles.globalMargins.large,
-    paddingRight: Styles.globalMargins.large,
-    paddingTop: Styles.globalMargins.large,
-  },
-  positioned: Styles.platformStyles({
-    isElectron: {
-      ...Styles.desktopStyles.boxShadow,
-      borderRadius: 3,
-      overflowX: 'hidden',
-      overflowY: 'auto',
-    },
-  }),
-}))
-
-export default Popup
diff --git a/shared/common-adapters/popup/index.native.tsx b/shared/common-adapters/popup/index.native.tsx
deleted file mode 100644
index 230c2868f317..000000000000
--- a/shared/common-adapters/popup/index.native.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import {Box2} from '../box'
-import {Keyboard} from 'react-native'
-import {Portal} from '../portal.native'
-import {
-  BottomSheetModal,
-  BottomSheetView,
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-} from './bottom-sheet'
-import {FullWindowOverlay} from 'react-native-screens'
-import type {PopupProps} from './index.shared'
-
-const defaultSnapPoints = ['75%']
-
-function Backdrop(props: BottomSheetBackdropProps) {
-  return <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
-}
-
-const FullWindow = ({children}: {children?: React.ReactNode}): React.ReactNode => {
-  return Styles.isIOS ? <FullWindowOverlay>{children}</FullWindowOverlay> : children
-}
-
-function PopupPositioned(props: PopupProps) {
-  const {hideKeyboard, children, containerStyle} = props
-  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>
-  )
-}
-
-function PopupSheet(props: PopupProps) {
-  const {children, onHidden, snapPoints} = props
-  const bottomRef = React.useRef<BottomSheetModal | null>(null)
-
-  React.useEffect(() => {
-    bottomRef.current?.present()
-    return () => {
-      bottomRef.current?.forceClose()
-      bottomRef.current = null
-    }
-  }, [])
-
-  const setBottomSheetRef = (sheet: BottomSheetModal | null) => {
-    bottomRef.current = sheet
-  }
-
-  return (
-    <BottomSheetModal
-      ref={setBottomSheetRef}
-      enableDynamicSizing={true}
-      snapPoints={snapPoints ?? defaultSnapPoints}
-      backgroundStyle={styles.modalBackground}
-      containerComponent={FullWindow}
-      handleStyle={styles.handleStyle}
-      handleIndicatorStyle={styles.handleIndicatorStyle}
-      style={styles.modalStyle}
-      backdropComponent={Backdrop}
-      onDismiss={onHidden}
-    >
-      <BottomSheetView>{children}</BottomSheetView>
-    </BottomSheetModal>
-  )
-}
-
-function PopupPortal(props: PopupProps) {
-  const {children} = props
-  return (
-    <Portal hostName="popup-root">
-      {children}
-    </Portal>
-  )
-}
-
-function Popup(props: PopupProps) {
-  if (props.attachTo) {
-    return <PopupPositioned {...props} />
-  }
-  if (!props.onHidden) {
-    return <PopupPortal {...props} />
-  }
-  return <PopupSheet {...props} />
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      handleIndicatorStyle: {backgroundColor: Styles.globalColors.black_40},
-      handleStyle: {backgroundColor: Styles.globalColors.black_05_on_white},
-      modalBackground: {backgroundColor: Styles.globalColors.black_05_on_white},
-      modalStyle: Styles.platformStyles({
-        isAndroid: {
-          elevation: 17,
-          shadowColor: Styles.globalColors.black_50OrBlack_40,
-          shadowOffset: {height: 5, width: 0},
-          shadowOpacity: 1,
-          shadowRadius: 10,
-        },
-      }),
-    }) as const
-)
-
-export default Popup
diff --git a/shared/common-adapters/popup/index.tsx b/shared/common-adapters/popup/index.tsx
new file mode 100644
index 000000000000..357e7c494d77
--- /dev/null
+++ b/shared/common-adapters/popup/index.tsx
@@ -0,0 +1,235 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Box2} from '../box'
+import FloatingBox from './floating-box'
+import {EscapeHandler} from '../key-event-handler'
+import {Keyboard} from 'react-native'
+import {Portal} from '../portal'
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+} from './bottom-sheet'
+import {FullWindowOverlay} from 'react-native-screens'
+import type {PopupProps} from './index.shared'
+export type {PopupProps} from './index.shared'
+
+const defaultSnapPoints = ['75%']
+
+function Backdrop(props: BottomSheetBackdropProps) {
+  return <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} />
+}
+
+const FullWindow = ({children}: {children?: React.ReactNode}): React.ReactNode => {
+  return isIOS ? <FullWindowOverlay>{children}</FullWindowOverlay> : children
+}
+
+function DesktopPopupPositioned(props: PopupProps) {
+  if (Object.hasOwn(props, 'visible') && !props.visible) {
+    return null
+  }
+  return (
+    <FloatingBox
+      attachTo={props.attachTo}
+      containerStyle={props.containerStyle}
+      matchDimension={!!props.matchDimension}
+      onHidden={props.onHidden}
+      remeasureHint={props.remeasureHint}
+      position={props.position}
+      positionFallbacks={props.positionFallbacks}
+      propagateOutsideClicks={props.propagateOutsideClicks}
+      offset={props.offset}
+    >
+      {props.onHidden ? (
+        <Box2 direction="vertical" style={Styles.collapseStyles([desktopStyles.positioned, props.style])}>
+          {props.children}
+        </Box2>
+      ) : (
+        props.children
+      )}
+    </FloatingBox>
+  )
+}
+
+function NativePopupPositioned(props: PopupProps) {
+  const {hideKeyboard, children, containerStyle} = props
+  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>
+  )
+}
+
+function PopupPositioned(props: PopupProps) {
+  return isMobile ? <NativePopupPositioned {...props} /> : <DesktopPopupPositioned {...props} />
+}
+
+function PopupCentered(props: PopupProps) {
+  const [mouseDownOnCover, setMouseDownOnCover] = React.useState(false)
+  return (
+    <EscapeHandler onESC={props.onHidden ?? (() => {})}>
+      <Box2
+        direction="vertical"
+        style={Styles.collapseStyles([desktopStyles.cover, props.style])}
+        onMouseUp={() => {
+          if (mouseDownOnCover) {
+            props.onHidden?.()
+          }
+        }}
+        onMouseDown={() => {
+          setMouseDownOnCover(true)
+        }}
+      >
+        <Box2
+          direction="vertical"
+          style={desktopStyles.centeredContainer}
+          onMouseDown={(e: React.BaseSyntheticEvent) => {
+            setMouseDownOnCover(false)
+            e.stopPropagation()
+          }}
+          onMouseUp={(e: React.BaseSyntheticEvent) => e.stopPropagation()}
+        >
+          <div
+            style={desktopStyles.clipContainer as React.CSSProperties}
+            onClick={stopBubbling}
+          >
+            {props.children}
+          </div>
+        </Box2>
+      </Box2>
+    </EscapeHandler>
+  )
+}
+
+function stopBubbling(ev: React.MouseEvent<HTMLDivElement>) {
+  ev.stopPropagation()
+}
+
+function PopupSheet(props: PopupProps) {
+  const {children, onHidden, snapPoints} = props
+  const bottomRef = React.useRef<BottomSheetModal | null>(null)
+
+  React.useEffect(() => {
+    bottomRef.current?.present()
+    return () => {
+      bottomRef.current?.forceClose()
+      bottomRef.current = null
+    }
+  }, [])
+
+  const setBottomSheetRef = (sheet: BottomSheetModal | null) => {
+    bottomRef.current = sheet
+  }
+
+  return (
+    <BottomSheetModal
+      ref={setBottomSheetRef}
+      enableDynamicSizing={true}
+      snapPoints={snapPoints ?? defaultSnapPoints}
+      backgroundStyle={nativeStyles.modalBackground}
+      containerComponent={FullWindow}
+      handleStyle={nativeStyles.handleStyle}
+      handleIndicatorStyle={nativeStyles.handleIndicatorStyle}
+      style={nativeStyles.modalStyle}
+      backdropComponent={Backdrop}
+      onDismiss={onHidden}
+    >
+      <BottomSheetView>{children}</BottomSheetView>
+    </BottomSheetModal>
+  )
+}
+
+function PopupPortal(props: PopupProps) {
+  const {children} = props
+  return (
+    <Portal hostName="popup-root">
+      {children}
+    </Portal>
+  )
+}
+
+function Popup(props: PopupProps) {
+  if (props.attachTo) {
+    return <PopupPositioned {...props} />
+  }
+  if (isMobile) {
+    if (!props.onHidden) {
+      return <PopupPortal {...props} />
+    }
+    return <PopupSheet {...props} />
+  }
+  return <PopupCentered {...props} />
+}
+
+const desktopStyles = Styles.styleSheetCreate(() => ({
+  centeredContainer: {
+    ...Styles.globalStyles.flexBoxRow,
+    maxHeight: '100%',
+    maxWidth: '100%',
+    position: 'relative' as const,
+  },
+  clipContainer: Styles.platformStyles({
+    isElectron: {
+      ...Styles.desktopStyles.boxShadow,
+      ...Styles.globalStyles.flexBoxColumn,
+      backgroundColor: Styles.globalColors.white,
+      borderRadius: Styles.borderRadius,
+      flex: 1,
+      maxWidth: '100%',
+      position: 'relative',
+    },
+  }),
+  cover: {
+    ...Styles.globalStyles.flexBoxColumn,
+    ...Styles.globalStyles.fillAbsolute,
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    paddingBottom: Styles.globalMargins.small,
+    paddingLeft: Styles.globalMargins.large,
+    paddingRight: Styles.globalMargins.large,
+    paddingTop: Styles.globalMargins.large,
+  },
+  positioned: Styles.platformStyles({
+    isElectron: {
+      ...Styles.desktopStyles.boxShadow,
+      borderRadius: 3,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+    },
+  }),
+}))
+
+const nativeStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      handleIndicatorStyle: {backgroundColor: Styles.globalColors.black_40},
+      handleStyle: {backgroundColor: Styles.globalColors.black_05_on_white},
+      modalBackground: {backgroundColor: Styles.globalColors.black_05_on_white},
+      modalStyle: Styles.platformStyles({
+        isAndroid: {
+          elevation: 17,
+          shadowColor: Styles.globalColors.black_50OrBlack_40,
+          shadowOffset: {height: 5, width: 0},
+          shadowOpacity: 1,
+          shadowRadius: 10,
+        },
+      }),
+    }) as const
+)
+
+export default Popup
diff --git a/shared/common-adapters/popup/use-popup.tsx b/shared/common-adapters/popup/use-popup.tsx
index 2067daabecdf..5d8f64b4fde1 100644
--- a/shared/common-adapters/popup/use-popup.tsx
+++ b/shared/common-adapters/popup/use-popup.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import {isMobile} from '@/styles'
 import type {MeasureRef} from '../measure-ref'
 
 export type Popup2Parms = {
diff --git a/shared/common-adapters/portal.native.tsx b/shared/common-adapters/portal.native.tsx
index 90e2388f8ba6..4582f3b7aa3c 100644
--- a/shared/common-adapters/portal.native.tsx
+++ b/shared/common-adapters/portal.native.tsx
@@ -1,5 +1,4 @@
 import {Portal as GPortal} from '@gorhom/portal'
-import * as Styles from '@/styles'
 import {FullWindowOverlay} from 'react-native-screens'
 import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
 
@@ -7,7 +6,7 @@ import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-con
 // otherwise you want it to be true so you can go above modals, aka the ... menu in an image attachment modal
 export const Portal = (p: {children: React.ReactNode; hostName?: string; useFullScreenOverlay?: boolean}) => {
   const {children, hostName, useFullScreenOverlay} = p
-  const fullWindow = (useFullScreenOverlay ?? true) && Styles.isIOS
+  const fullWindow = (useFullScreenOverlay ?? true) && isIOS
   return fullWindow ? (
     <GPortal hostName={hostName}>
       <FullWindowOverlay>
diff --git a/shared/common-adapters/portal.tsx b/shared/common-adapters/portal.tsx
new file mode 100644
index 000000000000..66d2112639b9
--- /dev/null
+++ b/shared/common-adapters/portal.tsx
@@ -0,0 +1,6 @@
+import type * as React from 'react'
+
+export const Portal = (p: {children: React.ReactNode; hostName?: string; useFullScreenOverlay?: boolean}) =>
+  p.children as React.ReactElement
+export const PortalHost = (_p: {name: string}) => null
+export const PortalProvider = (p: {children: React.ReactNode}) => p.children as React.ReactElement
diff --git a/shared/common-adapters/profile-card.tsx b/shared/common-adapters/profile-card.tsx
index d0263494482b..4aa350bd3810 100644
--- a/shared/common-adapters/profile-card.tsx
+++ b/shared/common-adapters/profile-card.tsx
@@ -108,7 +108,7 @@ const ServiceIcons = ({userDetailsAssertions}: ServiceIconsProps) => {
             />
             {assertion.state !== 'valid' && (
               <Kb.Icon
-                fontSize={Styles.isMobile ? 12 : 10}
+                fontSize={isMobile ? 12 : 10}
                 style={styles.brokenBadge}
                 type="iconfont-proof-broken"
                 color={Styles.globalColors.red}
@@ -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"
@@ -264,15 +264,15 @@ export const WithProfileCardPopup = ({username, children, ellipsisStyle}: WithPr
     return children()
   }
   const popup = showing && (
-    <DelayedMounting delay={Styles.isMobile ? 0 : 300}>
+    <DelayedMounting delay={isMobile ? 0 : 300}>
       <Kb.FloatingMenu
-        attachTo={Styles.isMobile ? undefined : popupAnchor}
+        attachTo={isMobile ? undefined : popupAnchor}
         closeOnSelect={true}
         onHidden={onHide}
         position="top center"
-        offset={Styles.isMobile ? 0 : 10}
+        offset={isMobile ? 0 : 10}
         positionFallbacks={positionFallbacks}
-        propagateOutsideClicks={!Styles.isMobile}
+        propagateOutsideClicks={!isMobile}
         remeasureHint={remeasureHint}
         visible={showing}
         header={
@@ -288,7 +288,7 @@ export const WithProfileCardPopup = ({username, children, ellipsisStyle}: WithPr
       />
     </DelayedMounting>
   )
-  return Styles.isMobile ? (
+  return isMobile ? (
     <>
       {children(onShow)}
       {popup}
diff --git a/shared/common-adapters/progress-indicator.desktop.tsx b/shared/common-adapters/progress-indicator.desktop.tsx
deleted file mode 100644
index 7e7cd76148aa..000000000000
--- a/shared/common-adapters/progress-indicator.desktop.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Animation from './animation'
-import type {Props} from './progress-indicator.shared'
-import * as Styles from '@/styles'
-
-const Kb = {
-  Animation,
-}
-
-function ProgressIndicator({white, style, type}: Props) {
-  return (
-    <Kb.Animation
-      animationType={white ? 'spinnerWhite' : 'spinner'}
-      style={Styles.collapseStyles([
-        type === 'Small' && styles.small,
-        type === 'Large' && styles.large,
-        type === 'Huge' && styles.huge,
-        style,
-      ])}
-    />
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  huge: {
-    height: Styles.globalMargins.xlarge,
-    width: Styles.globalMargins.xlarge,
-  },
-  large: {
-    height: Styles.globalMargins.mediumLarge,
-    width: Styles.globalMargins.mediumLarge,
-  },
-  small: {
-    height: Styles.globalMargins.medium,
-    width: Styles.globalMargins.medium,
-  },
-}))
-
-export default ProgressIndicator
diff --git a/shared/common-adapters/progress-indicator.native.tsx b/shared/common-adapters/progress-indicator.native.tsx
deleted file mode 100644
index 29f67ea918b9..000000000000
--- a/shared/common-adapters/progress-indicator.native.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {Props} from './progress-indicator.shared'
-import {ActivityIndicator} from 'react-native'
-import {globalColors, collapseStyles} from '@/styles'
-
-const ProgressIndicator = (p: Props) => {
-  const size = p.type === 'Large' ? 'large' : 'small'
-
-  return (
-    <ActivityIndicator
-      color={p.white ? globalColors.whiteOrWhite : globalColors.black}
-      size={size}
-      style={collapseStyles([style, p.style])}
-    />
-  )
-}
-
-const style = {
-  alignItems: 'center',
-  justifyContent: 'center',
-} as const
-
-export default ProgressIndicator
diff --git a/shared/common-adapters/progress-indicator.tsx b/shared/common-adapters/progress-indicator.tsx
new file mode 100644
index 000000000000..867568a3ea46
--- /dev/null
+++ b/shared/common-adapters/progress-indicator.tsx
@@ -0,0 +1,50 @@
+import type {Props} from './progress-indicator.shared'
+import {ActivityIndicator} from 'react-native'
+import Animation from './animation'
+import * as Styles from '@/styles'
+
+const ProgressIndicator = (p: Props) => {
+  if (isMobile) {
+    const size = p.type === 'Large' ? 'large' : 'small'
+    return (
+      <ActivityIndicator
+        color={p.white ? Styles.globalColors.whiteOrWhite : Styles.globalColors.black}
+        size={size}
+        style={Styles.collapseStyles([nativeStyle, p.style])}
+      />
+    )
+  }
+  return (
+    <Animation
+      animationType={p.white ? 'spinnerWhite' : 'spinner'}
+      style={Styles.collapseStyles([
+        p.type === 'Small' && desktopStyles.small,
+        p.type === 'Large' && desktopStyles.large,
+        p.type === 'Huge' && desktopStyles.huge,
+        p.style,
+      ])}
+    />
+  )
+}
+
+const nativeStyle = {
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const
+
+const desktopStyles = Styles.styleSheetCreate(() => ({
+  huge: {
+    height: Styles.globalMargins.xlarge,
+    width: Styles.globalMargins.xlarge,
+  },
+  large: {
+    height: Styles.globalMargins.mediumLarge,
+    width: Styles.globalMargins.mediumLarge,
+  },
+  small: {
+    height: Styles.globalMargins.medium,
+    width: Styles.globalMargins.medium,
+  },
+}))
+
+export default ProgressIndicator
diff --git a/shared/common-adapters/radio-button.desktop.tsx b/shared/common-adapters/radio-button.desktop.tsx
deleted file mode 100644
index 37f6bdad4f40..000000000000
--- a/shared/common-adapters/radio-button.desktop.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as Styles from '@/styles'
-import Text from './text'
-import type {Props} from './radio-button.shared'
-import './radio-button.css'
-
-const Kb = {
-  Text,
-}
-
-const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => (
-  <div
-    style={{...styles.container, ...(disabled ? {} : Styles.desktopStyles.clickable), ...style}}
-    onClick={disabled ? undefined : () => onSelect(!selected)}
-  >
-    <div className={Styles.classNames('radio-button', {disabled, selected})}>
-      <div style={Styles.castStyleDesktop(styles.radio)} />
-    </div>
-    <Kb.Text type="Body" style={{color: Styles.globalColors.black}}>
-      {label}
-    </Kb.Text>
-  </div>
-)
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    ...Styles.globalStyles.flexBoxRow,
-    alignItems: 'center',
-  },
-  radio: Styles.platformStyles({
-    isElectron: {
-      ...Styles.transition('opacity'),
-      border: `solid 3px ${Styles.globalColors.white}`,
-      borderRadius: 100,
-      color: Styles.globalColors.white,
-      hoverColor: Styles.globalColors.white,
-      left: 3,
-      position: 'absolute',
-      top: 3,
-    },
-  }),
-}))
-
-export default RadioButton
diff --git a/shared/common-adapters/radio-button.native.tsx b/shared/common-adapters/radio-button.native.tsx
deleted file mode 100644
index cfe77a596ddc..000000000000
--- a/shared/common-adapters/radio-button.native.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type * as React from 'react'
-import ClickableBox from './clickable-box'
-import Text from './text'
-import * as Styles from '@/styles'
-import type {Props} from './radio-button.shared'
-
-const Kb = {
-  ClickableBox,
-  Text,
-}
-
-export const RADIOBUTTON_SIZE = 22
-export const RADIOBUTTON_MARGIN = 8
-
-const RadioOuterCircle = (p: {disabled: boolean; selected: boolean; children: React.ReactNode}) => {
-  return (
-    <Kb.ClickableBox
-      style={Styles.collapseStyles([
-        styles.outer,
-        {
-          borderColor: p.selected ? Styles.globalColors.blue : Styles.globalColors.black_20,
-          opacity: p.disabled ? 0.4 : 1,
-        },
-      ])}
-    >
-      {p.children}
-    </Kb.ClickableBox>
-  )
-}
-
-const RadioInnerCircle = (p: {selected: boolean}) => {
-  return (
-    <Kb.ClickableBox
-      style={Styles.collapseStyles([
-        styles.inner,
-        {borderColor: p.selected ? Styles.globalColors.blue : Styles.globalColors.transparent},
-      ])}
-    />
-  )
-}
-
-const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => {
-  return (
-    <Kb.ClickableBox
-      style={{...styles.container, ...style}}
-      onClick={disabled ? undefined : () => onSelect(!selected)}
-    >
-      <RadioOuterCircle disabled={disabled ?? false} selected={selected}>
-        <RadioInnerCircle selected={selected} />
-      </RadioOuterCircle>
-      {typeof label === 'string' ? (
-        <Kb.Text type="Body" style={{color: Styles.globalColors.black}}>
-          {label}
-        </Kb.Text>
-      ) : (
-        label
-      )}
-    </Kb.ClickableBox>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        ...Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
-        paddingBottom: Styles.globalMargins.xtiny,
-        paddingTop: Styles.globalMargins.xtiny,
-      },
-      inner: {
-        borderColor: Styles.globalColors.white,
-        borderRadius: 10,
-        borderWidth: 5,
-        left: 5,
-        position: 'absolute',
-        top: 5,
-      },
-      outer: {
-        backgroundColor: Styles.globalColors.white,
-        borderRadius: 100,
-        borderWidth: 1,
-        height: RADIOBUTTON_SIZE,
-        marginRight: RADIOBUTTON_MARGIN,
-        position: 'relative' as const,
-        width: RADIOBUTTON_SIZE,
-      },
-    }) as const
-)
-
-export default RadioButton
diff --git a/shared/common-adapters/radio-button.tsx b/shared/common-adapters/radio-button.tsx
new file mode 100644
index 000000000000..686237146c19
--- /dev/null
+++ b/shared/common-adapters/radio-button.tsx
@@ -0,0 +1,112 @@
+import {View} from 'react-native'
+import ClickableBox from './clickable-box'
+import Text from './text'
+import * as Styles from '@/styles'
+import type {Props} from './radio-button.shared'
+import './radio-button.css'
+
+const Kb = {
+  ClickableBox,
+  Text,
+}
+
+export const RADIOBUTTON_SIZE = 22
+export const RADIOBUTTON_MARGIN = 8
+
+const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => {
+  if (!isMobile) {
+    return (
+      <div
+        style={{...desktopStyles.container, ...(disabled ? {} : Styles.desktopStyles.clickable), ...style}}
+        onClick={disabled ? undefined : () => onSelect(!selected)}
+      >
+        <div className={Styles.classNames('radio-button', {disabled, selected})}>
+          <div style={Styles.castStyleDesktop(desktopStyles.radio)} />
+        </div>
+        <Kb.Text type="Body" style={{color: Styles.globalColors.black}}>
+          {label}
+        </Kb.Text>
+      </div>
+    )
+  }
+  return (
+    <Kb.ClickableBox
+      style={{...nativeStyles.container, ...style}}
+      onClick={disabled ? undefined : () => onSelect(!selected)}
+    >
+      <View
+        style={Styles.collapseStyles([
+          nativeStyles.outer,
+          {
+            borderColor: selected ? Styles.globalColors.blue : Styles.globalColors.black_20,
+            opacity: disabled ? 0.4 : 1,
+          },
+        ])}
+      >
+        <View
+          style={Styles.collapseStyles([
+            nativeStyles.inner,
+            {borderColor: selected ? Styles.globalColors.blue : Styles.globalColors.transparent},
+          ])}
+        />
+      </View>
+      {typeof label === 'string' ? (
+        <Kb.Text type="Body" style={{color: Styles.globalColors.black}}>
+          {label}
+        </Kb.Text>
+      ) : (
+        label
+      )}
+    </Kb.ClickableBox>
+  )
+}
+
+const desktopStyles = Styles.styleSheetCreate(() => ({
+  container: {
+    ...Styles.globalStyles.flexBoxRow,
+    alignItems: 'center',
+  },
+  radio: Styles.platformStyles({
+    isElectron: {
+      ...Styles.transition('opacity'),
+      border: `solid 3px ${Styles.globalColors.white}`,
+      borderRadius: 100,
+      color: Styles.globalColors.white,
+      hoverColor: Styles.globalColors.white,
+      left: 3,
+      position: 'absolute',
+      top: 3,
+    },
+  }),
+}))
+
+const nativeStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        ...Styles.globalStyles.flexBoxRow,
+        alignItems: 'center',
+        paddingBottom: Styles.globalMargins.xtiny,
+        paddingTop: Styles.globalMargins.xtiny,
+      },
+      inner: {
+        borderColor: Styles.globalColors.white,
+        borderRadius: 10,
+        borderWidth: 5,
+        left: 5,
+        position: 'absolute',
+        top: 5,
+      },
+      outer: {
+        backgroundColor: Styles.globalColors.white,
+        borderRadius: 100,
+        borderWidth: 1,
+        height: RADIOBUTTON_SIZE,
+        marginRight: RADIOBUTTON_MARGIN,
+        position: 'relative' as const,
+        width: RADIOBUTTON_SIZE,
+      },
+    }) as const
+)
+
+export default RadioButton
diff --git a/shared/common-adapters/reanimated.tsx b/shared/common-adapters/reanimated.tsx
index 7d5b34c5c780..cf35f5918ad1 100644
--- a/shared/common-adapters/reanimated.tsx
+++ b/shared/common-adapters/reanimated.tsx
@@ -1,4 +1,4 @@
-import {isDebuggingInChrome, isMobile} from '@/constants/platform'
+import {isDebuggingInChrome} from '@/constants/platform'
 import skipAnimations from './skip-animations'
 import type * as R from 'react-native-reanimated'
 
diff --git a/shared/common-adapters/reload.tsx b/shared/common-adapters/reload.tsx
index 46654854e6f5..03d31744c53c 100644
--- a/shared/common-adapters/reload.tsx
+++ b/shared/common-adapters/reload.tsx
@@ -39,7 +39,7 @@ function Reload(props: ReloadProps) {
   const toggle = () => setExpanded(e => !e)
   return (
     <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={props.style}>
-      {Styles.isMobile && props.onBack && (
+      {isMobile && props.onBack && (
         <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.header}>
           <Kb.BackButton onClick={props.onBack} />
           <Kb.Box2 direction="horizontal" centerChildren={true} flex={1}>
diff --git a/shared/common-adapters/safe-area-view.desktop.tsx b/shared/common-adapters/safe-area-view.desktop.tsx
deleted file mode 100644
index bddb2de48fd1..000000000000
--- a/shared/common-adapters/safe-area-view.desktop.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type {Props} from './safe-area-view.shared'
-
-const RenderChildren = (props: Props): React.ReactNode => props.children || null
-export const useSafeAreaInsets = () => ({
-  bottom: 0,
-  left: 0,
-  right: 0,
-  top: 0,
-})
-
-// Do nothing
-export {RenderChildren as default, RenderChildren as SafeAreaViewTop}
diff --git a/shared/common-adapters/safe-area-view.native.tsx b/shared/common-adapters/safe-area-view.native.tsx
deleted file mode 100644
index b43b55fe92f0..000000000000
--- a/shared/common-adapters/safe-area-view.native.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import {View} from 'react-native'
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
-import type {Props} from './safe-area-view.shared'
-import * as Styles from '@/styles'
-
-// Android doesn't have an implementation for SafeAreaView, so add a special case for handling the top of the screen
-export const SafeAreaViewTop = (p: Props) => {
-  const {children, style} = p
-  const insets = useSafeAreaInsets()
-  return (
-    <View style={[{paddingTop: insets.top}, styles.topSafeArea, style]} pointerEvents="box-none">
-      {children}
-    </View>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  topSafeArea: {backgroundColor: Styles.globalColors.white, flexGrow: 0},
-}))
-
-export {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
-export default SafeAreaView
diff --git a/shared/common-adapters/safe-area-view.tsx b/shared/common-adapters/safe-area-view.tsx
new file mode 100644
index 000000000000..035048992b55
--- /dev/null
+++ b/shared/common-adapters/safe-area-view.tsx
@@ -0,0 +1,31 @@
+import {View} from 'react-native'
+import {SafeAreaView, useSafeAreaInsets as useSafeAreaInsetsNative} from 'react-native-safe-area-context'
+import type {Props} from './safe-area-view.shared'
+import * as Styles from '@/styles'
+
+const SafeAreaViewTopNative = (p: Props) => {
+  const {children, style} = p
+  const insets = useSafeAreaInsetsNative()
+  return (
+    <View style={[{paddingTop: insets.top}, nativeStyles.topSafeArea, style]} pointerEvents="box-none">
+      {children}
+    </View>
+  )
+}
+
+const SafeAreaViewTopDesktop = (props: Props): React.ReactNode => props.children ?? null
+
+const nativeStyles = Styles.styleSheetCreate(() => ({
+  topSafeArea: {backgroundColor: Styles.globalColors.white, flexGrow: 0},
+}))
+
+export const SafeAreaViewTop = isMobile ? SafeAreaViewTopNative : SafeAreaViewTopDesktop
+
+const desktopInsets = {bottom: 0, left: 0, right: 0, top: 0}
+export const useSafeAreaInsets = isMobile
+  ? useSafeAreaInsetsNative
+  : () => desktopInsets
+
+const DesktopSafeAreaView = (props: Props): React.ReactNode => props.children ?? null
+
+export default isMobile ? SafeAreaView : DesktopSafeAreaView
diff --git a/shared/common-adapters/scroll-view.desktop.tsx b/shared/common-adapters/scroll-view.desktop.tsx
deleted file mode 100644
index 68d424feac5c..000000000000
--- a/shared/common-adapters/scroll-view.desktop.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import type {Props} from './scroll-view.shared'
-export type {ScrollViewRef} from './scroll-view.shared'
-
-function ScrollView(props: Props) {
-  const {className, contentContainerStyle, onScroll, style, children, ref} = props
-  const {showsHorizontalScrollIndicator, showsVerticalScrollIndicator} = props
-  const hideScroll = showsVerticalScrollIndicator === false && showsHorizontalScrollIndicator === false
-  const cn = Styles.classNames(
-    // TODO: make it work for horizontal/vertical separately
-    // .hide-vertical-scrollbar::-webkit-scrollbar:vertical doesn't work.
-    {'hide-scrollbar': hideScroll},
-    {'scroll-container': hideScroll},
-    className
-  )
-  const divRef = React.useRef<HTMLDivElement>(null)
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      scrollTo: (arg0: {x: number; y: number; animated?: boolean}) => {
-        divRef.current?.scrollTo({left: arg0.x, top: arg0.y})
-      },
-      scrollToEnd: () => {
-        divRef.current?.scrollTo({
-          left: divRef.current.scrollWidth,
-        })
-      },
-    }),
-    [divRef]
-  )
-
-  const onScroll_ = (e: React.UIEvent<HTMLDivElement>) => {
-    onScroll?.({currentTarget: e.currentTarget})
-  }
-
-  return (
-    <div
-      className={cn}
-      style={Styles.collapseStylesDesktop([styles.overflowAuto, style])}
-      onScroll={onScroll_}
-      ref={divRef}
-    >
-      <div style={Styles.castStyleDesktop(contentContainerStyle)}>{children}</div>
-    </div>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  overflowAuto: Styles.platformStyles({
-    isElectron: {
-      overflow: 'auto',
-    },
-  }),
-}))
-
-export default ScrollView
diff --git a/shared/common-adapters/scroll-view.native.tsx b/shared/common-adapters/scroll-view.native.tsx
deleted file mode 100644
index a4b6af548764..000000000000
--- a/shared/common-adapters/scroll-view.native.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import {ScrollView, type ScrollViewProps} from 'react-native'
-import type {ScrollViewRef} from './scroll-view.shared'
-// Out of the box the ScrollView will consume taps of all children to dismiss the keyboard. This means if you have
-// an input with focus and a button, tapping the button won't work until you click it twice. Setting these defaults
-// changes this behavior: https://github.com/facebook/react-native/issues/4087
-
-function BetterScrollView(props: ScrollViewProps & {ref?: React.Ref<ScrollViewRef>}) {
-  const {ref: outerRef, ...rest} = props
-  const innerRef = React.useRef<ScrollView>(null)
-  React.useImperativeHandle(outerRef, () => ({
-    scrollTo: (args: {x: number; y: number; animated?: boolean}) => innerRef.current?.scrollTo(args),
-    scrollToEnd: (opts: {animated?: boolean; duration?: number}) => innerRef.current?.scrollToEnd(opts),
-  }))
-  const keyboardShouldPersistTaps = rest.keyboardShouldPersistTaps ?? 'handled'
-  const contentInsetAdjustmentBehavior = rest.contentInsetAdjustmentBehavior ?? 'automatic'
-  return (
-    <ScrollView
-      ref={innerRef}
-      {...rest}
-      contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}
-      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-      overScrollMode="never"
-    />
-  )
-}
-
-export default BetterScrollView
diff --git a/shared/common-adapters/scroll-view.tsx b/shared/common-adapters/scroll-view.tsx
new file mode 100644
index 000000000000..9eb3b9aea6e7
--- /dev/null
+++ b/shared/common-adapters/scroll-view.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {ScrollView as NativeScrollView} from 'react-native'
+import type {ScrollViewProps} from 'react-native'
+import type {Props} from './scroll-view.shared'
+
+export type {ScrollViewRef} from './scroll-view.shared'
+
+type DivScrollable = {
+  scrollTo: (opts: {left?: number; top?: number}) => void
+  readonly scrollWidth: number
+}
+
+function ScrollView(props: Props) {
+  const {ref: outerRef, ...rest} = props
+
+  const divRef = React.useRef<DivScrollable | null>(null)
+  const innerRef = React.useRef<NativeScrollView | null>(null)
+
+  React.useImperativeHandle(outerRef, () => ({
+    scrollTo: (args: {x: number; y: number; animated?: boolean}) => {
+      if (isMobile) {
+        innerRef.current?.scrollTo(args)
+      } else {
+        divRef.current?.scrollTo({left: args.x, top: args.y})
+      }
+    },
+    scrollToEnd: (opts?: {animated?: boolean; duration?: number}) => {
+      if (isMobile) {
+        innerRef.current?.scrollToEnd(opts)
+      } else {
+        divRef.current?.scrollTo({left: divRef.current.scrollWidth})
+      }
+    },
+  }))
+
+  if (!isMobile) {
+    const {className, contentContainerStyle, onScroll, style, children} = rest
+    const {showsHorizontalScrollIndicator, showsVerticalScrollIndicator} = rest
+    const hideScroll =
+      showsVerticalScrollIndicator === false && showsHorizontalScrollIndicator === false
+    const cn = Styles.classNames(
+      {'hide-scrollbar': hideScroll},
+      {'scroll-container': hideScroll},
+      className
+    )
+    const onScroll_ = (e: {currentTarget: DivScrollable}) => {
+      onScroll?.({currentTarget: e.currentTarget as never})
+    }
+    return (
+      <div
+        className={cn}
+        style={Styles.collapseStylesDesktop([styles.overflowAuto, style]) as React.CSSProperties}
+        onScroll={onScroll_ as never}
+        ref={divRef as React.RefObject<HTMLDivElement>}
+      >
+        <div style={Styles.castStyleDesktop(contentContainerStyle)}>{children}</div>
+      </div>
+    )
+  }
+
+  const nativeProps = rest as ScrollViewProps
+  const keyboardShouldPersistTaps = nativeProps.keyboardShouldPersistTaps ?? 'handled'
+  const contentInsetAdjustmentBehavior =
+    nativeProps.contentInsetAdjustmentBehavior ?? 'automatic'
+  return (
+    <NativeScrollView
+      ref={innerRef}
+      {...nativeProps}
+      contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      overScrollMode="never"
+    />
+  )
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  overflowAuto: Styles.platformStyles({
+    isElectron: {overflow: 'auto'},
+  }),
+}))
+
+export default ScrollView
diff --git a/shared/common-adapters/search-filter.tsx b/shared/common-adapters/search-filter.tsx
index a73edf86d143..6ddbd2e35a5a 100644
--- a/shared/common-adapters/search-filter.tsx
+++ b/shared/common-adapters/search-filter.tsx
@@ -151,7 +151,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
   const typing = () => focused || !!currentText()
 
   const iconSizeType = () => {
-    return !Styles.isMobile && props.size === 'full-width' ? 'Default' : 'Small'
+    return !isMobile && props.size === 'full-width' ? 'Default' : 'Small'
   }
 
   const iconColor = () => {
@@ -166,7 +166,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
           type={props.icon}
           sizeType={iconSizeType()}
           color={iconColor()}
-          style={Styles.collapseStyles([styles.icon, !Styles.isMobile && props.size === 'small' ? styles.leftIconXTiny : styles.leftIconTiny])}
+          style={Styles.collapseStyles([styles.icon, !isMobile && props.size === 'small' ? styles.leftIconXTiny : styles.leftIconTiny])}
         />
       )
     )
@@ -174,7 +174,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
 
   const input = () => {
     const hotkeyText =
-      props.hotkey && !props.onClick && !focused && !Styles.isMobile
+      props.hotkey && !props.onClick && !focused && !isMobile
         ? ` (${Platforms.shortcutSymbol}${props.hotkey.toUpperCase()})`
         : ''
     return (
@@ -198,7 +198,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
   const waiting = () => {
     return (
       !!props.waiting &&
-      (Styles.isMobile ? (
+      (isMobile ? (
         <Kb.ProgressIndicator type="Small" style={styles.spinnerMobile} white={false} />
       ) : (
         <Kb.Animation
@@ -221,7 +221,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
     if (!show) {
       return null
     }
-    if (Styles.isMobile) {
+    if (isMobile) {
       return (
         <Kb.ClickableBox2 onClick={props.mobileCancelButton ? clear : cancel} hitSlop={10}>
           <Kb.Icon
@@ -253,8 +253,8 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
     <Kb.Box2
       ref={measureRef}
       direction="horizontal"
-      style={Styles.collapseStyles([{alignItems: 'center'}, !Styles.isMobile && {width: '100%'}])}
-      pointerEvents={Styles.isMobile && props.onClick ? 'none' : undefined}
+      style={Styles.collapseStyles([{alignItems: 'center'}, !isMobile && {width: '100%'}])}
+      pointerEvents={isMobile && props.onClick ? 'none' : undefined}
     >
       {leftIcon()}
       {input()}
@@ -263,7 +263,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
     </Kb.Box2>
   )
 
-  const content = Styles.isMobile ? (
+  const content = isMobile ? (
     <Kb.ClickableBox2
       data-search-filter={true}
       style={Styles.collapseStyles([
@@ -297,7 +297,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) {
     </Kb.ClickableBox>
   )
 
-  return Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2
       direction="horizontal"
       style={Styles.collapseStyles([styles.containerMobile, props.style])}
diff --git a/shared/common-adapters/section-divider.tsx b/shared/common-adapters/section-divider.tsx
index bc903af84e98..1febde0f47d6 100644
--- a/shared/common-adapters/section-divider.tsx
+++ b/shared/common-adapters/section-divider.tsx
@@ -48,7 +48,7 @@ const SectionDivider = (props: Props) => {
     children
   )
 }
-const height = Styles.isMobile ? 40 : 32
+const height = isMobile ? 40 : 32
 SectionDivider.height = height
 
 const styles = Styles.styleSheetCreate(() => ({
diff --git a/shared/common-adapters/swipeable-row.tsx b/shared/common-adapters/swipeable-row.tsx
new file mode 100644
index 000000000000..9e819a2ac9f8
--- /dev/null
+++ b/shared/common-adapters/swipeable-row.tsx
@@ -0,0 +1,20 @@
+import type * as React from 'react'
+import type * as Reanimated from 'react-native-reanimated'
+
+export type SwipeableMethods = {
+  close: () => void
+}
+
+type Props = {
+  children?: React.ReactNode
+  renderRightActions?: (
+    progress: Reanimated.SharedValue<number>,
+    translation: Reanimated.SharedValue<number>
+  ) => React.ReactNode
+  onSwipeableOpenStartDrag?: () => void
+  onSwipeableWillOpen?: (direction: 'left') => void
+  containerStyle?: object
+}
+
+const SwipeableRow = (_p: Props & {ref?: React.Ref<SwipeableMethods>}) => null
+export default SwipeableRow
diff --git a/shared/common-adapters/switch-toggle.desktop.tsx b/shared/common-adapters/switch-toggle.desktop.tsx
deleted file mode 100644
index dedf3b6d51ff..000000000000
--- a/shared/common-adapters/switch-toggle.desktop.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as Styles from '@/styles'
-import type {Props} from './switch-toggle.shared'
-
-const SwitchToggle = (props: Props) => (
-  <div
-    style={
-      Styles.collapseStyles([
-        styles.outer,
-        props.on && {
-          backgroundColor: Styles.globalColors[props.color],
-          paddingLeft: enabledOffset,
-        },
-        props.style,
-      ]) as React.CSSProperties
-    }
-  >
-    <div style={styles.inner} />
-  </div>
-)
-
-export default SwitchToggle
-
-const disabledOffset = 2
-const enabledOffset = 10
-const styles = Styles.styleSheetCreate(() => ({
-  inner: {
-    backgroundColor: Styles.globalColors.white,
-    borderRadius: 6,
-    height: 12,
-    width: 12,
-  },
-  outer: Styles.platformStyles({
-    isElectron: {
-      ...Styles.globalStyles.flexBoxRow,
-      alignItems: 'center',
-      backgroundColor: Styles.globalColors.greyDark,
-      borderRadius: 8,
-      flexShrink: 0,
-      height: 16,
-      paddingLeft: disabledOffset,
-      transition: 'all 100ms ease-in-out',
-      width: 24,
-    },
-  }),
-}))
diff --git a/shared/common-adapters/switch-toggle.native.tsx b/shared/common-adapters/switch-toggle.tsx
similarity index 52%
rename from shared/common-adapters/switch-toggle.native.tsx
rename to shared/common-adapters/switch-toggle.tsx
index b55a9d409d91..85dfb3d71e07 100644
--- a/shared/common-adapters/switch-toggle.native.tsx
+++ b/shared/common-adapters/switch-toggle.tsx
@@ -3,29 +3,63 @@ import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
 import * as Styles from '@/styles'
 import type {Props} from './switch-toggle.shared'
 
+const nativeDisabledOffset = 2
+const nativeEnabledOffset = 22
+const desktopDisabledOffset = 2
+const desktopEnabledOffset = 10
+
+const desktopInnerStyle: React.CSSProperties = {
+  backgroundColor: Styles.globalColors.white,
+  borderRadius: 6,
+  height: 12,
+  width: 12,
+}
+
 const SwitchToggle = (props: Props) => {
   const {on: _on} = props
-  const [offset] = React.useState(new NativeAnimated.Value(_on ? enabledOffset : disabledOffset))
+  const [offset] = React.useState(
+    new NativeAnimated.Value(_on ? nativeEnabledOffset : nativeDisabledOffset)
+  )
   const animationRef = React.useRef<NativeAnimated.CompositeAnimation | undefined>(undefined)
 
   React.useEffect(() => {
+    if (!isMobile) return
     animationRef.current?.stop()
     animationRef.current = NativeAnimated.timing(offset, {
       duration: 100,
       easing: NativeEasing.linear,
-      toValue: _on ? enabledOffset : disabledOffset,
+      toValue: _on ? nativeEnabledOffset : nativeDisabledOffset,
       useNativeDriver: false,
     })
     animationRef.current.start()
   }, [_on, offset])
 
+  if (!isMobile) {
+    const outerStyle: React.CSSProperties = {
+      ...Styles.globalStyles.flexBoxRow,
+      alignItems: 'center',
+      backgroundColor: _on ? Styles.globalColors[props.color] : Styles.globalColors.greyDark,
+      borderRadius: 8,
+      flexShrink: 0,
+      height: 16,
+      paddingLeft: _on ? desktopEnabledOffset : desktopDisabledOffset,
+      transition: 'all 100ms ease-in-out',
+      width: 24,
+    }
+    return (
+      <div style={outerStyle}>
+        <div style={desktopInnerStyle} />
+      </div>
+    )
+  }
+
   return (
     <NativeAnimated.View
       style={[
-        styles.outer,
+        styles.nativeOuter,
         {
           backgroundColor: offset.interpolate({
-            inputRange: [disabledOffset, enabledOffset],
+            inputRange: [nativeDisabledOffset, nativeEnabledOffset],
             outputRange: [
               Styles.undynamicColor(Styles.globalColors.greyDark),
               Styles.undynamicColor(Styles.globalColors[props.color]),
@@ -35,22 +69,19 @@ const SwitchToggle = (props: Props) => {
         props.style,
       ]}
     >
-      <NativeAnimated.View style={[styles.inner, {marginLeft: offset}]} />
+      <NativeAnimated.View style={[styles.nativeInner, {marginLeft: offset}]} />
     </NativeAnimated.View>
   )
 }
 
-const disabledOffset = 2
-const enabledOffset = 22
-
 const styles = Styles.styleSheetCreate(() => ({
-  inner: {
+  nativeInner: {
     backgroundColor: Styles.undynamicColor(Styles.globalColors.white),
     borderRadius: 12,
     height: 24,
     width: 24,
   },
-  outer: {
+  nativeOuter: {
     ...Styles.globalStyles.flexBoxRow,
     alignItems: 'center',
     borderRadius: 14,
diff --git a/shared/common-adapters/switch.tsx b/shared/common-adapters/switch.tsx
index bdc528d0d9af..02cb56061d32 100644
--- a/shared/common-adapters/switch.tsx
+++ b/shared/common-adapters/switch.tsx
@@ -36,7 +36,7 @@ type Props = {
 
 const LabelContainer = (props: Props) =>
   // We put the tooltip on the whole thing on desktop.
-  Styles.isMobile && props.labelTooltip ? (
+  isMobile && props.labelTooltip ? (
     <Kb.WithTooltip
       tooltip={props.labelTooltip}
       containerStyle={Styles.collapseStyles([Styles.globalStyles.flexBoxColumn, styles.labelContainer])}
@@ -93,7 +93,7 @@ function Switch(props: Props & {ref?: React.Ref<MeasureRef>}) {
     </>
   )
 
-  return Styles.isMobile || !props.labelTooltip ? (
+  return isMobile || !props.labelTooltip ? (
     <Kb.Box2 direction={props.align !== 'right' ? 'horizontal' : 'horizontalReverse'} fullWidth={true} style={Styles.collapseStyles([styles.container, props.style])}>{content}</Kb.Box2>
   ) : (
     <Kb.WithTooltip
diff --git a/shared/common-adapters/tabs.tsx b/shared/common-adapters/tabs.tsx
index b40cce18591d..7116b509366f 100644
--- a/shared/common-adapters/tabs.tsx
+++ b/shared/common-adapters/tabs.tsx
@@ -93,7 +93,7 @@ const styles = Styles.styleSheetCreate(() => ({
     borderBottomWidth: 1,
     borderStyle: 'solid',
     flex: 1,
-    maxHeight: Styles.isMobile ? 48 : 40,
+    maxHeight: isMobile ? 48 : 40,
   },
   divider: {
     ...Styles.globalStyles.flexBoxRow,
diff --git a/shared/common-adapters/team-with-popup.tsx b/shared/common-adapters/team-with-popup.tsx
index 9f2b1b8e0fc9..a4e96c8f57d7 100644
--- a/shared/common-adapters/team-with-popup.tsx
+++ b/shared/common-adapters/team-with-popup.tsx
@@ -51,9 +51,9 @@ const TeamWithPopup = (props: Props) => {
 
   const popup = showPopup && (
     <>
-      <DelayedMounting delay={Styles.isMobile ? 0 : 500}>
+      <DelayedMounting delay={isMobile ? 0 : 500}>
         <TeamInfo
-          attachTo={Styles.isMobile ? undefined : popupRef}
+          attachTo={isMobile ? undefined : popupRef}
           description={description}
           inTeam={isMember}
           isOpen={isOpen}
diff --git a/shared/common-adapters/text.meta.native.tsx b/shared/common-adapters/text-meta.tsx
similarity index 100%
rename from shared/common-adapters/text.meta.native.tsx
rename to shared/common-adapters/text-meta.tsx
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/text.desktop.tsx b/shared/common-adapters/text.desktop.tsx
deleted file mode 100644
index 51d1ee7033d2..000000000000
--- a/shared/common-adapters/text.desktop.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as Styles from '@/styles'
-import {linkTypes} from './text.shared'
-import type {Props} from './text.shared'
-import './text.css'
-
-export function Text(p: Props) {
-  const type = p.type ?? 'BodySmall'
-  const {textRef} = p
-  const setRef = textRef
-    ? (r: HTMLSpanElement | null) => {
-        textRef.current = r
-      }
-    : undefined
-  const cn = Styles.classNames(`text_${type}`, p.className, {
-    text_center: p.center,
-    text_clickable: !!p.onClick,
-    'text_hover-underline': linkTypes.has(type),
-    text_lineClamp1: p.lineClamp === 1,
-    text_lineClamp2: p.lineClamp === 2,
-    text_lineClamp3: p.lineClamp === 3,
-    text_lineClamp4: p.lineClamp === 4,
-    text_lineClamp5: p.lineClamp === 5,
-    text_negative: p.negative,
-    text_selectable: p.selectable,
-    text_underline: p.underline,
-    text_underlineNever: p.underlineNever,
-    text_virtualText: p.virtualText,
-    tooltip: !!p.tooltip,
-  })
-  const lcStyle: React.CSSProperties | undefined =
-    p.lineClamp && p.lineClamp > 5
-      ? {
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: p.lineClamp,
-          display: '-webkit-box',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          wordBreak: 'break-word',
-        }
-      : undefined
-  const style = lcStyle
-    ? {...lcStyle, ...(p.style as React.CSSProperties)}
-    : p.style
-      ? Styles.castStyleDesktop(p.style)
-      : undefined
-
-  return (
-    <span
-      ref={setRef}
-      title={p.title}
-      className={cn}
-      onClick={p.onClick ?? undefined}
-      onContextMenuCapture={p.onContextMenu ?? undefined}
-      style={style}
-      data-tooltip={p.tooltip}
-      data-virtual-text={p.virtualText ? p.children : undefined}
-    >
-      {p.virtualText ? null : p.children}
-    </span>
-  )
-}
-export default Text
diff --git a/shared/common-adapters/text.native.tsx b/shared/common-adapters/text.native.tsx
deleted file mode 100644
index c48acaf2bc74..000000000000
--- a/shared/common-adapters/text.native.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as Styles from '@/styles'
-import {typeStyles, negativeColors} from './text.meta.native'
-import type {Props} from './text.shared'
-import {Text as RNText} from 'react-native'
-
-export function Text(p: Props) {
-  const type = p.type ?? 'BodySmall'
-  const baseStyle = typeStyles[type]
-  const negStyle = p.negative ? {color: negativeColors[type]} : undefined
-  const centerStyle = p.center ? styles.center : undefined
-  const mergedStyle =
-    negStyle || centerStyle || p.style
-      ? Styles.collapseStyles([baseStyle, negStyle, centerStyle, p.style])
-      : baseStyle
-
-  return (
-    <RNText
-      style={mergedStyle}
-      allowFontScaling={p.allowFontScaling ?? false}
-      onPress={p.onClick ?? undefined}
-      onLongPress={p.onLongPress ?? undefined}
-      selectable={p.selectable}
-      numberOfLines={p.lineClamp}
-      ellipsizeMode={p.lineClamp ? (p.ellipsizeMode ?? 'tail') : undefined}
-      suppressHighlighting={true}
-    >
-      {p.children}
-    </RNText>
-  )
-}
-
-export default Text
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      center: {textAlign: 'center'},
-    }) as const
-)
diff --git a/shared/common-adapters/text.styles.desktop.tsx b/shared/common-adapters/text.styles.desktop.tsx
deleted file mode 100644
index 124e4bf7fd00..000000000000
--- a/shared/common-adapters/text.styles.desktop.tsx
+++ /dev/null
@@ -1,352 +0,0 @@
-import * as Styles from '@/styles'
-import type {MetaType, TextType, TextStyle} from './text.shared'
-
-function fontSizeToSizeStyle(fontSize: 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 24 | 28) {
-  const hm = {
-    [12]: 16,
-    [13]: 17,
-    [14]: 18,
-    [15]: 19,
-    [16]: 20,
-    [17]: 21,
-    [18]: 22,
-    [20]: 24,
-    [24]: 28,
-    [28]: 32,
-  } as const
-
-  const height = hm[fontSize]
-  const lineHeight = `${height}px` as const
-  return {
-    fontSize,
-    lineHeight,
-  }
-}
-
-const _metaData = (): {[K in TextType]: MetaType} => {
-  const whiteNegative = {
-    negative: Styles.globalColors.white,
-    positive: Styles.globalColors.black,
-  }
-
-  const _blueLink = {
-    negative: Styles.globalColors.white,
-    positive: Styles.globalColors.blueDark,
-  }
-  return {
-    Body: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyBig: {
-      colorForBackground: whiteNegative,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyBigExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyBigLink: {
-      colorForBackground: _blueLink,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyBold: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodyExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: {
-        ...Styles.globalStyles.fontRegular,
-        fontStyle: 'italic',
-      },
-    },
-    BodyPrimaryLink: {
-      colorForBackground: _blueLink,
-      fontSize: 14,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySecondaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 14,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySemibold: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySemiboldItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 14,
-      styleOverride: {
-        ...Styles.globalStyles.fontSemibold,
-        fontStyle: 'italic',
-      },
-    },
-    BodySemiboldLink: {
-      colorForBackground: _blueLink,
-      fontSize: 14,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmall: {
-      colorForBackground: {
-        ...whiteNegative,
-        positive: Styles.globalColors.black_50,
-      },
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallBold: {
-      colorForBackground: {
-        ...whiteNegative,
-        positive: Styles.globalColors.black_50,
-      },
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodySmallError: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.redDark},
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallExtrabold: {
-      colorForBackground: {
-        ...whiteNegative,
-        positive: Styles.globalColors.black_50,
-      },
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodySmallExtraboldSecondaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodySmallItalic: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      styleOverride: {
-        ...Styles.globalStyles.fontRegular,
-        fontStyle: 'italic',
-      },
-    },
-    BodySmallPrimaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDark},
-      fontSize: 13,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallSecondaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallSemibold: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmallSemiboldItalic: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'},
-    },
-    BodySmallSemiboldPrimaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDark},
-      fontSize: 13,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmallSemiboldSecondaryLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 13,
-      isLink: true,
-      styleOverride: {...Styles.globalStyles.fontSemibold, textDecoration: undefined},
-    },
-    BodySmallSuccess: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.greenDark},
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallWallet: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.purpleDark},
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTiny: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTinyBold: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodyTinyExtrabold: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyTinyLink: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTinySemibold: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyTinySemiboldItalic: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50},
-      fontSize: 12,
-      styleOverride: {
-        ...Styles.globalStyles.fontSemibold,
-        fontStyle: 'italic',
-      },
-    },
-    Header: {
-      colorForBackground: whiteNegative,
-      fontSize: 18,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    HeaderBig: {
-      colorForBackground: whiteNegative,
-      fontSize: 24,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    HeaderBigExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 24,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    HeaderExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 18,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    HeaderItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 18,
-      styleOverride: {
-        ...Styles.globalStyles.fontBold,
-        fontStyle: 'italic',
-      },
-    },
-    HeaderLink: {
-      colorForBackground: _blueLink,
-      fontSize: 18,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    Terminal: {
-      colorForBackground: {
-        negative: Styles.globalColors.blueLighter,
-        positive: Styles.globalColors.blueLighter,
-      },
-      fontSize: 13,
-      styleOverride: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.fontTerminal,
-          lineHeight: '20px',
-        },
-      }),
-    },
-    TerminalComment: {
-      colorForBackground: {
-        negative: Styles.globalColors.blueLighter_40,
-        positive: Styles.globalColors.blueLighter_40,
-      },
-      fontSize: 13,
-      styleOverride: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.fontTerminal,
-          lineHeight: '20px',
-        },
-      }),
-    },
-    TerminalEmpty: {
-      colorForBackground: {
-        negative: Styles.globalColors.blueLighter_40,
-        positive: Styles.globalColors.blueLighter_40,
-      },
-      fontSize: 13,
-      styleOverride: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.fontTerminal,
-          height: 20,
-          lineHeight: '20px',
-        },
-      }),
-    },
-    TerminalInline: {
-      colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDarker},
-      fontSize: 13,
-      styleOverride: Styles.platformStyles({
-        isElectron: {
-          ...Styles.globalStyles.fontTerminal,
-          backgroundColor: Styles.globalColors.blueLighter2,
-          borderRadius: 2,
-          display: 'inline-block',
-          height: 17,
-          lineHeight: '16px',
-          padding: 2,
-          wordWrap: 'break-word',
-        },
-      }),
-    },
-  }
-}
-
-// TODO unclear we need this caching and passsing in dark mode
-let _darkMetaData: {[K in TextType]: MetaType} | undefined
-let _lightMetaData: {[K in TextType]: MetaType} | undefined
-
-const metaData = (isDarkMode: boolean): {[K in TextType]: MetaType} => {
-  if (isDarkMode) {
-    _darkMetaData = _darkMetaData || _metaData()
-    return _darkMetaData
-  } else {
-    _lightMetaData = _lightMetaData || _metaData()
-    return _lightMetaData
-  }
-}
-
-export function getTextStyle(type: TextType, isDarkMode: boolean): TextStyle {
-  const meta = metaData(isDarkMode)[type]
-  const sizeStyle = fontSizeToSizeStyle(meta.fontSize)
-  // pipe positive color through because caller probably isn't using class
-  const colorStyle = {color: meta.colorForBackground['positive']}
-  const cursorStyle = meta.isLink ? {cursor: 'pointer'} : null
-
-  return Styles.platformStyles({
-    common: {
-      ...meta.styleOverride,
-    },
-    isElectron: {
-      ...sizeStyle,
-      ...colorStyle,
-      ...cursorStyle,
-    },
-  })
-}
diff --git a/shared/common-adapters/text.styles.native.tsx b/shared/common-adapters/text.styles.native.tsx
deleted file mode 100644
index 42550dc7ed56..000000000000
--- a/shared/common-adapters/text.styles.native.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-import * as Styles from '@/styles'
-import type {MetaType, TextType, TextStyle} from './text.shared'
-
-function fontSizeToSizeStyle(fontSize: number): {fontSize: number; lineHeight: number} {
-  const lineHeight = {
-    '13': 17,
-    '15': 19,
-    '16': 20,
-    '17': 21,
-    '20': 24,
-    '28': 32,
-  }[String(fontSize)] as number
-
-  return {
-    fontSize,
-    lineHeight,
-  }
-}
-
-const _metaData = (): {[K in TextType]: MetaType} => {
-  // you CANNOT spread these else the getters dissappear and your colors will be wrong
-  const whiteNegative = {
-    get negative() {
-      return Styles.globalColors.white
-    },
-    get positive() {
-      return Styles.globalColors.black
-    },
-  }
-  const whiteNegative_50 = {
-    get negative() {
-      return Styles.globalColors.white
-    },
-    get positive() {
-      return Styles.globalColors.black_50
-    },
-  }
-
-  const _blueLink = {
-    get negative() {
-      return Styles.globalColors.white
-    },
-    get positive() {
-      return Styles.globalColors.blueDark
-    },
-  }
-  return {
-    Body: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyBig: {
-      colorForBackground: whiteNegative,
-      fontSize: 17,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyBigExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 17,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyBigLink: {
-      colorForBackground: _blueLink,
-      fontSize: 17,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyBold: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodyExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: {
-        ...Styles.globalStyles.fontRegular,
-        fontStyle: 'italic',
-      },
-    },
-    BodyPrimaryLink: {
-      colorForBackground: _blueLink,
-      fontSize: 16,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySecondaryLink: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 16,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySemibold: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySemiboldItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 16,
-      styleOverride: {
-        ...Styles.globalStyles.fontSemibold,
-        fontStyle: 'italic',
-      },
-    },
-    BodySemiboldLink: {
-      colorForBackground: _blueLink,
-      fontSize: 16,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmall: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallBold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodySmallError: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.white
-        },
-        get positive() {
-          return Styles.globalColors.redDark
-        },
-      },
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallExtrabold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodySmallExtraboldSecondaryLink: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodySmallItalic: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: {
-        ...Styles.globalStyles.fontRegular,
-        fontStyle: 'italic',
-      },
-    },
-    BodySmallPrimaryLink: {
-      colorForBackground: _blueLink,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallSecondaryLink: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallSemibold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmallSemiboldItalic: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 15,
-      styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'},
-    },
-    BodySmallSemiboldPrimaryLink: {
-      colorForBackground: _blueLink,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodySmallSemiboldSecondaryLink: {
-      colorForBackground: _blueLink,
-      fontSize: 15,
-      isLink: true,
-      styleOverride: {...Styles.globalStyles.fontSemibold, textDecorationLine: undefined},
-    },
-    BodySmallSuccess: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.white
-        },
-        get positive() {
-          return Styles.globalColors.greenDark
-        },
-      },
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodySmallWallet: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.white
-        },
-        get positive() {
-          return Styles.globalColors.purpleDark
-        },
-      },
-      fontSize: 15,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTiny: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTinyBold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    BodyTinyExtrabold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    BodyTinyLink: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontRegular,
-    },
-    BodyTinySemibold: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      styleOverride: Styles.globalStyles.fontSemibold,
-    },
-    BodyTinySemiboldItalic: {
-      colorForBackground: whiteNegative_50,
-      fontSize: 13,
-      styleOverride: {
-        ...Styles.globalStyles.fontSemibold,
-        fontStyle: 'italic',
-      },
-    },
-    Header: {
-      colorForBackground: whiteNegative,
-      fontSize: 20,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    HeaderBig: {
-      colorForBackground: whiteNegative,
-      fontSize: 28,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    HeaderBigExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 28,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    HeaderExtrabold: {
-      colorForBackground: whiteNegative,
-      fontSize: 20,
-      styleOverride: Styles.globalStyles.fontExtrabold,
-    },
-    HeaderItalic: {
-      colorForBackground: whiteNegative,
-      fontSize: 20,
-      styleOverride: {
-        ...Styles.globalStyles.fontBold,
-        fontStyle: 'italic',
-      },
-    },
-    HeaderLink: {
-      colorForBackground: _blueLink,
-      fontSize: 20,
-      isLink: true,
-      styleOverride: Styles.globalStyles.fontBold,
-    },
-    Terminal: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.blueDarker
-        },
-        get positive() {
-          return Styles.globalColors.blueLighter
-        },
-      },
-      fontSize: 15,
-      styleOverride: {
-        ...Styles.globalStyles.fontTerminal,
-        lineHeight: 20,
-      },
-    },
-    TerminalComment: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.blueLighter_40
-        },
-        get positive() {
-          return Styles.globalColors.blueLighter_40
-        },
-      },
-      fontSize: 15,
-      styleOverride: {
-        ...Styles.globalStyles.fontTerminal,
-        lineHeight: 20,
-      },
-    },
-    TerminalEmpty: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.blueLighter_40
-        },
-        get positive() {
-          return Styles.globalColors.blueLighter_40
-        },
-      },
-      fontSize: 15,
-      styleOverride: {
-        ...Styles.globalStyles.fontTerminal,
-        height: 20,
-        lineHeight: 20,
-      },
-    },
-    TerminalInline: {
-      colorForBackground: {
-        get negative() {
-          return Styles.globalColors.blueDarker
-        },
-        get positive() {
-          return Styles.globalColors.blueDarker
-        },
-      },
-      fontSize: 15,
-      styleOverride: {
-        ...Styles.globalStyles.fontTerminal,
-        backgroundColor: Styles.globalColors.blueLighter2,
-        borderRadius: 2,
-        height: 20,
-        lineHeight: 20,
-        padding: 2,
-      },
-    },
-  }
-}
-
-let _darkMetaData: {[K in TextType]: MetaType} | undefined
-let _lightMetaData: {[K in TextType]: MetaType} | undefined
-
-const metaData = (isDarkMode: boolean): {[K in TextType]: MetaType} => {
-  if (isDarkMode) {
-    _darkMetaData = _darkMetaData || _metaData()
-    return _darkMetaData
-  } else {
-    _lightMetaData = _lightMetaData || _metaData()
-    return _lightMetaData
-  }
-}
-
-export function getTextStyle(type: TextType, isDarkMode: boolean): TextStyle {
-  const meta = metaData(isDarkMode)[type]
-  const sizeStyle = fontSizeToSizeStyle(meta.fontSize)
-  const colorStyle = {color: meta.colorForBackground['positive']}
-
-  return {
-    ...sizeStyle,
-    ...colorStyle,
-    ...meta.styleOverride,
-  }
-}
diff --git a/shared/common-adapters/text.styles.tsx b/shared/common-adapters/text.styles.tsx
new file mode 100644
index 000000000000..b2cf5c74f059
--- /dev/null
+++ b/shared/common-adapters/text.styles.tsx
@@ -0,0 +1,261 @@
+import * as Styles from '@/styles'
+import type {MetaType, TextType, TextStyle} from './text.shared'
+
+function fontSizeToSizeStyleDesktop(fontSize: 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 24 | 28) {
+  const hm = {
+    [12]: 16,
+    [13]: 17,
+    [14]: 18,
+    [15]: 19,
+    [16]: 20,
+    [17]: 21,
+    [18]: 22,
+    [20]: 24,
+    [24]: 28,
+    [28]: 32,
+  } as const
+  const height = hm[fontSize]
+  const lineHeight = `${height}px` as const
+  return {fontSize, lineHeight}
+}
+
+function fontSizeToSizeStyleNative(fontSize: number): {fontSize: number; lineHeight: number} {
+  const lineHeight = {
+    '13': 17,
+    '15': 19,
+    '16': 20,
+    '17': 21,
+    '20': 24,
+    '28': 32,
+  }[String(fontSize)] as number
+  return {fontSize, lineHeight}
+}
+
+const _metaDataDesktop = (): {[K in TextType]: MetaType} => {
+  const whiteNegative = {
+    negative: Styles.globalColors.white,
+    positive: Styles.globalColors.black,
+  }
+  const _blueLink = {
+    negative: Styles.globalColors.white,
+    positive: Styles.globalColors.blueDark,
+  }
+  return {
+    Body: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: Styles.globalStyles.fontRegular},
+    BodyBig: {colorForBackground: whiteNegative, fontSize: 15, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyBigExtrabold: {colorForBackground: whiteNegative, fontSize: 15, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyBigLink: {colorForBackground: _blueLink, fontSize: 15, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyBold: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: Styles.globalStyles.fontBold},
+    BodyExtrabold: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyItalic: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: {...Styles.globalStyles.fontRegular, fontStyle: 'italic'}},
+    BodyPrimaryLink: {colorForBackground: _blueLink, fontSize: 14, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySecondaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 14, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySemibold: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySemiboldItalic: {colorForBackground: whiteNegative, fontSize: 14, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    BodySemiboldLink: {colorForBackground: _blueLink, fontSize: 14, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmall: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallBold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: Styles.globalStyles.fontBold},
+    BodySmallError: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.redDark}, fontSize: 13, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallExtrabold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodySmallExtraboldSecondaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, isLink: true, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodySmallItalic: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: {...Styles.globalStyles.fontRegular, fontStyle: 'italic'}},
+    BodySmallPrimaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDark}, fontSize: 13, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallSecondaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallSemibold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmallSemiboldItalic: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    BodySmallSemiboldPrimaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDark}, fontSize: 13, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmallSemiboldSecondaryLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 13, isLink: true, styleOverride: {...Styles.globalStyles.fontSemibold, textDecoration: undefined}},
+    BodySmallSuccess: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.greenDark}, fontSize: 13, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallWallet: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.purpleDark}, fontSize: 13, styleOverride: Styles.globalStyles.fontRegular},
+    BodyTiny: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, styleOverride: Styles.globalStyles.fontRegular},
+    BodyTinyBold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, styleOverride: Styles.globalStyles.fontBold},
+    BodyTinyExtrabold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyTinyLink: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodyTinySemibold: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyTinySemiboldItalic: {colorForBackground: {...whiteNegative, positive: Styles.globalColors.black_50}, fontSize: 12, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    Header: {colorForBackground: whiteNegative, fontSize: 18, styleOverride: Styles.globalStyles.fontBold},
+    HeaderBig: {colorForBackground: whiteNegative, fontSize: 24, styleOverride: Styles.globalStyles.fontBold},
+    HeaderBigExtrabold: {colorForBackground: whiteNegative, fontSize: 24, styleOverride: Styles.globalStyles.fontExtrabold},
+    HeaderExtrabold: {colorForBackground: whiteNegative, fontSize: 18, styleOverride: Styles.globalStyles.fontExtrabold},
+    HeaderItalic: {colorForBackground: whiteNegative, fontSize: 18, styleOverride: {...Styles.globalStyles.fontBold, fontStyle: 'italic'}},
+    HeaderLink: {colorForBackground: _blueLink, fontSize: 18, isLink: true, styleOverride: Styles.globalStyles.fontBold},
+    Terminal: {
+      colorForBackground: {negative: Styles.globalColors.blueLighter, positive: Styles.globalColors.blueLighter},
+      fontSize: 13,
+      styleOverride: Styles.platformStyles({isElectron: {...Styles.globalStyles.fontTerminal, lineHeight: '20px'}}),
+    },
+    TerminalComment: {
+      colorForBackground: {negative: Styles.globalColors.blueLighter_40, positive: Styles.globalColors.blueLighter_40},
+      fontSize: 13,
+      styleOverride: Styles.platformStyles({isElectron: {...Styles.globalStyles.fontTerminal, lineHeight: '20px'}}),
+    },
+    TerminalEmpty: {
+      colorForBackground: {negative: Styles.globalColors.blueLighter_40, positive: Styles.globalColors.blueLighter_40},
+      fontSize: 13,
+      styleOverride: Styles.platformStyles({isElectron: {...Styles.globalStyles.fontTerminal, height: 20, lineHeight: '20px'}}),
+    },
+    TerminalInline: {
+      colorForBackground: {...whiteNegative, positive: Styles.globalColors.blueDarker},
+      fontSize: 13,
+      styleOverride: Styles.platformStyles({
+        isElectron: {
+          ...Styles.globalStyles.fontTerminal,
+          backgroundColor: Styles.globalColors.blueLighter2,
+          borderRadius: 2,
+          display: 'inline-block',
+          height: 17,
+          lineHeight: '16px',
+          padding: 2,
+          wordWrap: 'break-word',
+        },
+      }),
+    },
+  }
+}
+
+const _metaDataNative = (): {[K in TextType]: MetaType} => {
+  // you CANNOT spread these else the getters disappear and your colors will be wrong
+  const whiteNegative = {
+    get negative() { return Styles.globalColors.white },
+    get positive() { return Styles.globalColors.black },
+  }
+  const whiteNegative_50 = {
+    get negative() { return Styles.globalColors.white },
+    get positive() { return Styles.globalColors.black_50 },
+  }
+  const _blueLink = {
+    get negative() { return Styles.globalColors.white },
+    get positive() { return Styles.globalColors.blueDark },
+  }
+  return {
+    Body: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: Styles.globalStyles.fontRegular},
+    BodyBig: {colorForBackground: whiteNegative, fontSize: 17, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyBigExtrabold: {colorForBackground: whiteNegative, fontSize: 17, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyBigLink: {colorForBackground: _blueLink, fontSize: 17, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyBold: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: Styles.globalStyles.fontBold},
+    BodyExtrabold: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyItalic: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: {...Styles.globalStyles.fontRegular, fontStyle: 'italic'}},
+    BodyPrimaryLink: {colorForBackground: _blueLink, fontSize: 16, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySecondaryLink: {colorForBackground: whiteNegative_50, fontSize: 16, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySemibold: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySemiboldItalic: {colorForBackground: whiteNegative, fontSize: 16, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    BodySemiboldLink: {colorForBackground: _blueLink, fontSize: 16, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmall: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallBold: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: Styles.globalStyles.fontBold},
+    BodySmallError: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.white },
+        get positive() { return Styles.globalColors.redDark },
+      },
+      fontSize: 15,
+      styleOverride: Styles.globalStyles.fontRegular,
+    },
+    BodySmallExtrabold: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodySmallExtraboldSecondaryLink: {colorForBackground: whiteNegative_50, fontSize: 15, isLink: true, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodySmallItalic: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: {...Styles.globalStyles.fontRegular, fontStyle: 'italic'}},
+    BodySmallPrimaryLink: {colorForBackground: _blueLink, fontSize: 15, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallSecondaryLink: {colorForBackground: whiteNegative_50, fontSize: 15, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodySmallSemibold: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmallSemiboldItalic: {colorForBackground: whiteNegative_50, fontSize: 15, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    BodySmallSemiboldPrimaryLink: {colorForBackground: _blueLink, fontSize: 15, isLink: true, styleOverride: Styles.globalStyles.fontSemibold},
+    BodySmallSemiboldSecondaryLink: {colorForBackground: _blueLink, fontSize: 15, isLink: true, styleOverride: {...Styles.globalStyles.fontSemibold, textDecorationLine: undefined}},
+    BodySmallSuccess: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.white },
+        get positive() { return Styles.globalColors.greenDark },
+      },
+      fontSize: 15,
+      styleOverride: Styles.globalStyles.fontRegular,
+    },
+    BodySmallWallet: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.white },
+        get positive() { return Styles.globalColors.purpleDark },
+      },
+      fontSize: 15,
+      styleOverride: Styles.globalStyles.fontRegular,
+    },
+    BodyTiny: {colorForBackground: whiteNegative_50, fontSize: 13, styleOverride: Styles.globalStyles.fontRegular},
+    BodyTinyBold: {colorForBackground: whiteNegative_50, fontSize: 13, styleOverride: Styles.globalStyles.fontBold},
+    BodyTinyExtrabold: {colorForBackground: whiteNegative_50, fontSize: 13, styleOverride: Styles.globalStyles.fontExtrabold},
+    BodyTinyLink: {colorForBackground: whiteNegative_50, fontSize: 13, isLink: true, styleOverride: Styles.globalStyles.fontRegular},
+    BodyTinySemibold: {colorForBackground: whiteNegative_50, fontSize: 13, styleOverride: Styles.globalStyles.fontSemibold},
+    BodyTinySemiboldItalic: {colorForBackground: whiteNegative_50, fontSize: 13, styleOverride: {...Styles.globalStyles.fontSemibold, fontStyle: 'italic'}},
+    Header: {colorForBackground: whiteNegative, fontSize: 20, styleOverride: Styles.globalStyles.fontBold},
+    HeaderBig: {colorForBackground: whiteNegative, fontSize: 28, styleOverride: Styles.globalStyles.fontBold},
+    HeaderBigExtrabold: {colorForBackground: whiteNegative, fontSize: 28, styleOverride: Styles.globalStyles.fontExtrabold},
+    HeaderExtrabold: {colorForBackground: whiteNegative, fontSize: 20, styleOverride: Styles.globalStyles.fontExtrabold},
+    HeaderItalic: {colorForBackground: whiteNegative, fontSize: 20, styleOverride: {...Styles.globalStyles.fontBold, fontStyle: 'italic'}},
+    HeaderLink: {colorForBackground: _blueLink, fontSize: 20, isLink: true, styleOverride: Styles.globalStyles.fontBold},
+    Terminal: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.blueDarker },
+        get positive() { return Styles.globalColors.blueLighter },
+      },
+      fontSize: 15,
+      styleOverride: {...Styles.globalStyles.fontTerminal, lineHeight: 20},
+    },
+    TerminalComment: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.blueLighter_40 },
+        get positive() { return Styles.globalColors.blueLighter_40 },
+      },
+      fontSize: 15,
+      styleOverride: {...Styles.globalStyles.fontTerminal, lineHeight: 20},
+    },
+    TerminalEmpty: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.blueLighter_40 },
+        get positive() { return Styles.globalColors.blueLighter_40 },
+      },
+      fontSize: 15,
+      styleOverride: {...Styles.globalStyles.fontTerminal, height: 20, lineHeight: 20},
+    },
+    TerminalInline: {
+      colorForBackground: {
+        get negative() { return Styles.globalColors.blueDarker },
+        get positive() { return Styles.globalColors.blueDarker },
+      },
+      fontSize: 15,
+      styleOverride: {
+        ...Styles.globalStyles.fontTerminal,
+        backgroundColor: Styles.globalColors.blueLighter2,
+        borderRadius: 2,
+        height: 20,
+        lineHeight: 20,
+        padding: 2,
+      },
+    },
+  }
+}
+
+const _metaData = isMobile ? _metaDataNative : _metaDataDesktop
+
+let _darkMetaData: {[K in TextType]: MetaType} | undefined
+let _lightMetaData: {[K in TextType]: MetaType} | undefined
+
+const metaData = (isDarkMode: boolean): {[K in TextType]: MetaType} => {
+  if (isDarkMode) {
+    _darkMetaData = _darkMetaData || _metaData()
+    return _darkMetaData
+  } else {
+    _lightMetaData = _lightMetaData || _metaData()
+    return _lightMetaData
+  }
+}
+
+export function getTextStyle(type: TextType, isDarkMode: boolean): TextStyle {
+  const meta = metaData(isDarkMode)[type]
+  if (!isMobile) {
+    const sizeStyle = fontSizeToSizeStyleDesktop(meta.fontSize as Parameters<typeof fontSizeToSizeStyleDesktop>[0])
+    const colorStyle = {color: meta.colorForBackground['positive']}
+    const cursorStyle = meta.isLink ? {cursor: 'pointer'} : null
+    return Styles.platformStyles({
+      common: {...meta.styleOverride},
+      isElectron: {...sizeStyle, ...colorStyle, ...cursorStyle},
+    })
+  }
+  const sizeStyle = fontSizeToSizeStyleNative(meta.fontSize)
+  const colorStyle = {color: meta.colorForBackground['positive']}
+  return {...sizeStyle, ...colorStyle, ...meta.styleOverride}
+}
diff --git a/shared/common-adapters/text.tsx b/shared/common-adapters/text.tsx
new file mode 100644
index 000000000000..4f1d5a2eafb5
--- /dev/null
+++ b/shared/common-adapters/text.tsx
@@ -0,0 +1,99 @@
+import type * as React from 'react'
+import * as Styles from '@/styles'
+import {typeStyles, negativeColors} from './text-meta'
+import {linkTypes} from './text.shared'
+import type {Props} from './text.shared'
+import {Text as RNText} from 'react-native'
+import './text.css'
+
+export function Text(p: Props) {
+  if (!isMobile) {
+    const type = p.type ?? 'BodySmall'
+    const {textRef} = p
+    const setRef = textRef
+      ? (r: HTMLSpanElement | null) => {
+          textRef.current = r as unknown as typeof textRef.current
+        }
+      : undefined
+    const cn = Styles.classNames(`text_${type}`, p.className, {
+      text_center: p.center,
+      text_clickable: !!p.onClick,
+      'text_hover-underline': linkTypes.has(type),
+      text_lineClamp1: p.lineClamp === 1,
+      text_lineClamp2: p.lineClamp === 2,
+      text_lineClamp3: p.lineClamp === 3,
+      text_lineClamp4: p.lineClamp === 4,
+      text_lineClamp5: p.lineClamp === 5,
+      text_negative: p.negative,
+      text_selectable: p.selectable,
+      text_underline: p.underline,
+      text_underlineNever: p.underlineNever,
+      text_virtualText: p.virtualText,
+      tooltip: !!p.tooltip,
+    })
+    const lcStyle: React.CSSProperties | undefined =
+      p.lineClamp && p.lineClamp > 5
+        ? {
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: p.lineClamp,
+            display: '-webkit-box',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            wordBreak: 'break-word',
+          }
+        : undefined
+    const style = lcStyle
+      ? {...lcStyle, ...(p.style as React.CSSProperties)}
+      : p.style
+        ? Styles.castStyleDesktop(p.style)
+        : undefined
+
+    return (
+      <span
+        ref={setRef}
+        title={p.title}
+        className={cn}
+        onClick={p.onClick ?? undefined}
+        onContextMenuCapture={p.onContextMenu ?? undefined}
+        style={style}
+        data-tooltip={p.tooltip}
+        data-virtual-text={p.virtualText ? p.children : undefined}
+      >
+        {p.virtualText ? null : p.children}
+      </span>
+    )
+  }
+
+  const type = p.type ?? 'BodySmall'
+  const baseStyle = typeStyles[type]
+  const negStyle = p.negative ? {color: negativeColors[type]} : undefined
+  const centerStyle = p.center ? nativeStyles.center : undefined
+  const mergedStyle =
+    negStyle || centerStyle || p.style
+      ? Styles.collapseStyles([baseStyle, negStyle, centerStyle, p.style])
+      : baseStyle
+
+  return (
+    <RNText
+      style={mergedStyle}
+      allowFontScaling={p.allowFontScaling ?? false}
+      onPress={p.onClick ?? undefined}
+      onLongPress={p.onLongPress ?? undefined}
+      selectable={p.selectable}
+      numberOfLines={p.lineClamp}
+      ellipsizeMode={p.lineClamp ? (p.ellipsizeMode ?? 'tail') : undefined}
+      suppressHighlighting={true}
+    >
+      {p.children}
+    </RNText>
+  )
+}
+
+export default Text
+
+const nativeStyles = Styles.styleSheetCreate(
+  () =>
+    ({
+      center: {textAlign: 'center'},
+    }) as const
+)
diff --git a/shared/common-adapters/toast.desktop.tsx b/shared/common-adapters/toast.desktop.tsx
deleted file mode 100644
index 12e71fb1d642..000000000000
--- a/shared/common-adapters/toast.desktop.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import type {Props} from './toast.shared'
-import Popup from './popup'
-import * as Styles from '@/styles'
-import './toast.css'
-
-const positionFallbacks = [] as const
-
-const Toast = (props: Props) => {
-  const [dismissedOnBlur, setDismissedOnBlur] = React.useState(false)
-  const lastVisibleRef = React.useRef(props.visible)
-
-  React.useEffect(() => {
-    if (!props.visible || !lastVisibleRef.current) {
-      setDismissedOnBlur(false)
-    }
-    lastVisibleRef.current = props.visible
-  }, [props.visible])
-
-  C.Router2.useSafeFocusEffect(() => {
-    setDismissedOnBlur(false)
-    return () => {
-      setDismissedOnBlur(true)
-    }
-  })
-
-  return (
-    <Popup
-      attachTo={props.attachTo}
-      propagateOutsideClicks={true}
-      position={props.position}
-      containerStyle={styles.float}
-      offset={4}
-      positionFallbacks={positionFallbacks}
-    >
-      <div
-        className={Styles.classNames(
-          {visible: props.visible && !dismissedOnBlur},
-          props.className,
-          'fadeBox'
-        )}
-        style={Styles.collapseStyles([styles.container, props.containerStyle]) as React.CSSProperties}
-      >
-        {props.children}
-      </div>
-    </Popup>
-  )
-}
-export default Toast
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: Styles.platformStyles({
-    isElectron: {
-      alignItems: 'center',
-      backgroundColor: Styles.globalColors.black,
-      borderRadius: Styles.borderRadius,
-      borderWidth: 0,
-      justifyContent: 'center',
-      margin: Styles.globalMargins.xtiny,
-      paddingBottom: Styles.globalMargins.xtiny,
-      paddingLeft: Styles.globalMargins.tiny,
-      paddingRight: Styles.globalMargins.tiny,
-      paddingTop: Styles.globalMargins.xtiny,
-      pointerEvents: 'none',
-      position: 'relative',
-    },
-  }),
-  float: Styles.platformStyles({
-    isElectron: {pointerEvents: 'none'},
-  }),
-}))
diff --git a/shared/common-adapters/toast.native.tsx b/shared/common-adapters/toast.tsx
similarity index 53%
rename from shared/common-adapters/toast.native.tsx
rename to shared/common-adapters/toast.tsx
index 41a3d97152dc..4e5aa23e9872 100644
--- a/shared/common-adapters/toast.native.tsx
+++ b/shared/common-adapters/toast.tsx
@@ -4,10 +4,10 @@ import * as Styles from '@/styles'
 import {Box2} from './box'
 import {KeyboardAvoidingView2} from './keyboard-avoiding-view'
 import Popup from './popup'
-import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
+import {Animated as NativeAnimated, Easing as NativeEasing, useColorScheme} from 'react-native'
 import type {Props} from './toast.shared'
 import {colors, darkColors} from '@/styles/colors'
-import {useColorScheme} from 'react-native'
+import './toast.css'
 
 const Kb = {
   Box2,
@@ -15,17 +15,26 @@ const Kb = {
   Popup,
 }
 
+const positionFallbacks = [] as const
+
 const Toast = (props: Props) => {
   const {visible} = props
+
+  // Desktop state
+  const [dismissedOnBlur, setDismissedOnBlur] = React.useState(false)
+  const lastVisibleRef = React.useRef(visible)
+
+  // Native state
   const [opacity] = React.useState(() => new NativeAnimated.Value(0))
   const [renderState, setRenderState] = React.useState(() => ({
     dismissedOnBlur: false,
     shouldRender: visible,
     visible,
   }))
+  const isDarkMode = useColorScheme() === 'dark'
 
   let currentRenderState = renderState
-  if (currentRenderState.visible !== visible) {
+  if (isMobile && currentRenderState.visible !== visible) {
     currentRenderState = {
       dismissedOnBlur: false,
       shouldRender: visible || currentRenderState.shouldRender,
@@ -36,6 +45,15 @@ const Toast = (props: Props) => {
   const {shouldRender} = currentRenderState
 
   React.useEffect(() => {
+    if (isMobile) return undefined
+    if (!visible || !lastVisibleRef.current) {
+      setDismissedOnBlur(false)
+    }
+    lastVisibleRef.current = visible
+  }, [visible])
+
+  React.useEffect(() => {
+    if (!isMobile) return undefined
     if (!shouldRender) {
       return undefined
     }
@@ -52,6 +70,7 @@ const Toast = (props: Props) => {
   }, [opacity, shouldRender, visible])
 
   React.useEffect(() => {
+    if (!isMobile) return undefined
     if (visible || !shouldRender) {
       return undefined
     }
@@ -65,7 +84,7 @@ const Toast = (props: Props) => {
     }
   }, [shouldRender, visible])
 
-  const onSafeFocus = React.useCallback(() => {
+  const onSafeFocusNative = React.useCallback(() => {
     setRenderState(state =>
       state.dismissedOnBlur
         ? {...state, dismissedOnBlur: false, shouldRender: state.visible || state.shouldRender}
@@ -80,22 +99,48 @@ const Toast = (props: Props) => {
     }
   }, [])
 
-  // since this uses portals we need to hide if we're hidden else we can get stuck showing if our render is frozen
-  C.Router2.useSafeFocusEffect(onSafeFocus)
+  const onSafeFocusDesktop = React.useCallback(() => {
+    setDismissedOnBlur(false)
+    return () => {
+      setDismissedOnBlur(true)
+    }
+  }, [])
+
+  C.Router2.useSafeFocusEffect(isMobile ? onSafeFocusNative : onSafeFocusDesktop)
 
-  const isDarkMode = useColorScheme() === 'dark'
+  if (!isMobile) {
+    return (
+      <Popup
+        attachTo={props.attachTo}
+        propagateOutsideClicks={true}
+        position={props.position}
+        containerStyle={desktopStyles.float}
+        offset={4}
+        positionFallbacks={positionFallbacks}
+      >
+        <div
+          className={Styles.classNames(
+            {visible: visible && !dismissedOnBlur},
+            props.className,
+            'fadeBox'
+          )}
+          style={Styles.collapseStyles([desktopStyles.container, props.containerStyle]) as React.CSSProperties}
+        >
+          {props.children}
+        </div>
+      </Popup>
+    )
+  }
 
   return shouldRender ? (
     <Kb.Popup>
       <Kb.KeyboardAvoidingView2>
-        <Kb.Box2 direction="vertical" pointerEvents="none" justifyContent="center" style={styles.wrapper}>
+        <Kb.Box2 direction="vertical" pointerEvents="none" justifyContent="center" style={nativeStyles.wrapper}>
           <NativeAnimated.View
             style={[
               Styles.collapseStyles([
-                styles.container,
+                nativeStyles.container,
                 {
-                  // RN bugs with animated dynamicColors so have to use the raw ones
-                  // known bug this won't work if the dark mode changes dynamic on ios currently
                   backgroundColor: isDarkMode ? darkColors.black : colors.black,
                 },
                 props.containerStyle,
@@ -111,32 +156,52 @@ const Toast = (props: Props) => {
   ) : null
 }
 
-const styles = Styles.styleSheetCreate(() => {
-  return {
-    container: {
+export default Toast
+
+const desktopStyles = Styles.styleSheetCreate(() => ({
+  container: Styles.platformStyles({
+    isElectron: {
       alignItems: 'center',
-      borderRadius: 140,
+      backgroundColor: Styles.globalColors.black,
+      borderRadius: Styles.borderRadius,
       borderWidth: 0,
-      display: 'flex',
-      height: 140,
       justifyContent: 'center',
       margin: Styles.globalMargins.xtiny,
-      overflow: 'hidden',
       paddingBottom: Styles.globalMargins.xtiny,
       paddingLeft: Styles.globalMargins.tiny,
       paddingRight: Styles.globalMargins.tiny,
       paddingTop: Styles.globalMargins.xtiny,
-      width: 140,
-    },
-    wrapper: {
-      alignItems: 'center',
-      bottom: 0,
-      left: 0,
-      position: 'absolute',
-      right: 0,
-      top: 0,
+      pointerEvents: 'none',
+      position: 'relative',
     },
-  }
-})
+  }),
+  float: Styles.platformStyles({
+    isElectron: {pointerEvents: 'none'},
+  }),
+}))
 
-export default Toast
+const nativeStyles = Styles.styleSheetCreate(() => ({
+  container: {
+    alignItems: 'center',
+    borderRadius: 140,
+    borderWidth: 0,
+    display: 'flex',
+    height: 140,
+    justifyContent: 'center',
+    margin: Styles.globalMargins.xtiny,
+    overflow: 'hidden',
+    paddingBottom: Styles.globalMargins.xtiny,
+    paddingLeft: Styles.globalMargins.tiny,
+    paddingRight: Styles.globalMargins.tiny,
+    paddingTop: Styles.globalMargins.xtiny,
+    width: 140,
+  },
+  wrapper: {
+    alignItems: 'center',
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))
diff --git a/shared/common-adapters/usernames.tsx b/shared/common-adapters/usernames.tsx
index 5ebb74c2101b..803d8fc6bec5 100644
--- a/shared/common-adapters/usernames.tsx
+++ b/shared/common-adapters/usernames.tsx
@@ -45,7 +45,7 @@ export type Props = {
 } & ({colorFollowing?: false; type: TextType} | {colorFollowing: boolean; type: TextTypeBold})
 
 // Mobile handles spaces correctly so don't insert anything
-const space = Styles.isMobile ? ` ` : <>&nbsp;</>
+const space = isMobile ? ` ` : <>&nbsp;</>
 
 // common-adapters/profile-card.tsx already imports this, so have it assign
 // this here instead of importing directly to avoid an import cycle.
@@ -221,7 +221,7 @@ const UsernamesText = (p: UsernamesTextProps) => {
   )
 }
 
-const inlineProps = Styles.isMobile ? {lineClamp: 1 as const} : {}
+const inlineProps = isMobile ? {lineClamp: 1 as const} : {}
 
 function Usernames(p: Props) {
   const {backgroundMode, commaColor, inline, containerStyle, className} = p
diff --git a/shared/common-adapters/video.desktop.tsx b/shared/common-adapters/video.desktop.tsx
deleted file mode 100644
index 0a5b4955cfe7..000000000000
--- a/shared/common-adapters/video.desktop.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from 'react'
-import type {Props} from './video.shared'
-import * as Styles from '@/styles'
-import {useCheckURL} from './video.shared'
-
-const normalizeURL = (url: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
-  if (url.startsWith('/') || isWindowsPath) {
-    let path = url.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) {
-      path = '/' + path
-    }
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
-    return encodeURI(url).replace(/#/g, '%23')
-  }
-  return url
-}
-
-const Video = (props: Props) => {
-  const {onUrlError} = props
-
-  const videoRef = React.useRef<HTMLVideoElement>(null)
-  const mountedRef = React.useRef(false)
-
-  React.useEffect(() => {
-    mountedRef.current = true
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  const onVideoClick = () => {
-    if (videoRef.current) {
-      if (videoRef.current.paused) {
-        videoRef.current.play().catch(() => {})
-      } else {
-        videoRef.current.pause()
-      }
-    }
-  }
-
-  const url = normalizeURL(props.url)
-  const content = (
-    <div style={Styles.castStyleDesktop(Styles.collapseStyles([styles.container, props.style]))}>
-      <video
-        controlsList="nodownload nofullscreen"
-        onClick={onVideoClick}
-        ref={videoRef}
-        controls={!props.hideControls}
-        src={url}
-        style={styles.container}
-        muted={props.muted ?? true}
-        autoPlay={props.autoPlay ?? true}
-        preload="metadata"
-        onError={onUrlError && (() => onUrlError('video loading error'))}
-      />
-    </div>
-  )
-  return useCheckURL(content, url, props.allowFile)
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    ...Styles.globalStyles.flexBoxColumn,
-    ...Styles.globalStyles.flexBoxCenter,
-    height: '100%',
-    maxHeight: '100%',
-    maxWidth: '100%',
-    overflow: 'hidden',
-    width: '100%',
-  },
-}))
-
-export default Video
diff --git a/shared/common-adapters/video.native.tsx b/shared/common-adapters/video.native.tsx
deleted file mode 100644
index d88c254c4274..000000000000
--- a/shared/common-adapters/video.native.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import {Box2} from './box'
-import type {Props} from './video.shared'
-import {StatusBar} from 'react-native'
-import {useVideoPlayer, VideoView} from 'expo-video'
-import {useEventListener} from 'expo'
-import {useCheckURL} from './video.shared'
-
-const Kb = {Box2}
-
-// There seems to be a race between navigation animation and the measurement stuff
-// here that causes stuff to be rendered off-screen. So delay mounting to avoid
-// the race.
-const DelayMount = ({children}: {children: React.ReactNode}): React.ReactNode => {
-  const [mount, setMount] = React.useState(false)
-  React.useEffect(() => {
-    const id = setTimeout(() => setMount(true), 500)
-    return () => clearTimeout(id)
-  }, [])
-  return mount && children
-}
-
-const Video = (props: Props) => {
-  const {url: _url, allowFile, muted, onUrlError, autoPlay} = props
-  const url = Styles.urlEscapeFilePath(_url)
-  const uri = allowFile ? Styles.normalizePath(url) : url
-
-  const player = useVideoPlayer(uri, p => {
-    p.muted = muted ?? false
-    if (autoPlay ?? true) {
-      p.play()
-    }
-  })
-
-  useEventListener(player, 'statusChange', ({status, error}) => {
-    if (status === 'error' && error && onUrlError) {
-      onUrlError(JSON.stringify(error))
-    }
-  })
-
-  const content = (
-    <DelayMount>
-      <Kb.Box2 direction="horizontal" centerChildren={true} style={styles.container}>
-        <VideoView
-          player={player}
-          nativeControls={true}
-          contentFit="contain"
-          onFullscreenExit={() => {
-            StatusBar.setHidden(false)
-          }}
-          style={styles.video}
-        />
-      </Kb.Box2>
-    </DelayMount>
-  )
-
-  return useCheckURL(content, url, allowFile)
-}
-export default Video
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    height: '100%',
-    width: '100%',
-  },
-  video: {
-    height: '100%',
-    width: '100%',
-  },
-}))
diff --git a/shared/common-adapters/video.tsx b/shared/common-adapters/video.tsx
new file mode 100644
index 000000000000..fa4bce5aba7f
--- /dev/null
+++ b/shared/common-adapters/video.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react'
+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
+const normalizeURL = (url: string) => {
+  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
+  if (url.startsWith('/') || isWindowsPath) {
+    let path = url.replace(/\\/g, '/')
+    if (isWindowsPath && !path.startsWith('/')) {
+      path = '/' + path
+    }
+    return encodeURI(`file://${path}`).replace(/#/g, '%23')
+  }
+  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
+    return encodeURI(url).replace(/#/g, '%23')
+  }
+  return url
+}
+
+// Stub type for desktop video element (avoids dom lib dependency in native tsconfig)
+type VideoElementRef = {
+  paused?: boolean
+  play?: () => Promise<void>
+  pause?: () => void
+}
+
+// Native: delay mount to avoid navigation animation race
+const DelayMount = ({children}: {children: React.ReactNode}): React.ReactNode => {
+  const [mount, setMount] = React.useState(false)
+  React.useEffect(() => {
+    const id = setTimeout(() => setMount(true), 500)
+    return () => clearTimeout(id)
+  }, [])
+  return mount && children
+}
+
+const DesktopVideo = (props: Props) => {
+  const {onUrlError} = props
+  const videoRef = React.useRef<VideoElementRef>(null)
+  const mountedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const onVideoClick = () => {
+    if (videoRef.current?.paused) {
+      videoRef.current.play?.().catch(() => {})
+    } else {
+      videoRef.current?.pause?.()
+    }
+  }
+
+  const url = normalizeURL(props.url)
+  const content = (
+    <div style={Styles.castStyleDesktop(Styles.collapseStyles([styles.container, props.style]))}>
+      <video
+        controlsList="nodownload nofullscreen"
+        onClick={onVideoClick}
+        ref={videoRef as React.RefObject<HTMLVideoElement>}
+        controls={!props.hideControls}
+        src={url}
+        style={styles.container}
+        muted={props.muted ?? true}
+        autoPlay={props.autoPlay ?? true}
+        preload="metadata"
+        onError={onUrlError && (() => onUrlError('video loading error'))}
+      />
+    </div>
+  )
+  return useCheckURL(content, url, props.allowFile)
+}
+
+const NativeVideo = (props: Props) => {
+  const {url: _url, allowFile, muted, onUrlError, autoPlay} = props
+  const url = Styles.urlEscapeFilePath(_url)
+  const uri = allowFile ? Styles.normalizePath(url) : url
+
+  const player = useVideoPlayer(uri, p => {
+    p.muted = muted ?? false
+    if (autoPlay ?? true) {
+      p.play()
+    }
+  })
+
+  useEventListener(player, 'statusChange', ({status, error}) => {
+    if (status === 'error' && error && onUrlError) {
+      onUrlError(JSON.stringify(error))
+    }
+  })
+
+  const content = (
+    <DelayMount>
+      <Box2 direction="horizontal" centerChildren={true} style={styles.container}>
+        <VideoView
+          player={player}
+          nativeControls={true}
+          contentFit="contain"
+          onFullscreenExit={() => {
+            StatusBar.setHidden(false)
+          }}
+          style={styles.video}
+        />
+      </Box2>
+    </DelayMount>
+  )
+
+  return useCheckURL(content, url, allowFile)
+}
+
+const Video = (props: Props) => {
+  if (!isMobile) return <DesktopVideo {...props} />
+  return <NativeVideo {...props} />
+}
+
+export default Video
+
+const styles = Styles.styleSheetCreate(() => ({
+  container: {
+    ...Styles.globalStyles.flexBoxColumn,
+    ...Styles.globalStyles.flexBoxCenter,
+    height: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    width: '100%',
+  },
+  video: {
+    height: '100%',
+    width: '100%',
+  },
+}))
diff --git a/shared/common-adapters/web-view.desktop.tsx b/shared/common-adapters/web-view.desktop.tsx
deleted file mode 100644
index 87d78007903d..000000000000
--- a/shared/common-adapters/web-view.desktop.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react'
-import type {WebViewProps} from './web-view.shared'
-export type {WebViewProps, WebViewInjections} from './web-view.shared'
-// this class isn't used at all afaik
-
-// not properly exposed in electron yet
-type WebviewTag = ReturnType<Document['createElement']>
-
-const WebView = (props: WebViewProps) => {
-  const {onError, injections} = props
-  const _webviewRef = React.useRef<WebviewTag>(null)
-
-  React.useEffect(() => {
-    const css = injections?.css || ''
-    const javaScript = injections?.javaScript || ''
-    const ref = _webviewRef.current
-
-    const onDomReady = () => {
-      if (!ref) return
-      if (css) {
-        ref.insertCSS(css).catch(() => {})
-      }
-      if (javaScript) {
-        ref.executeJavaScript(javaScript).catch(() => {})
-      }
-
-      ref.removeEventListener('dom-ready', onDomReady)
-    }
-    ref?.addEventListener('dom-ready', onDomReady)
-    if (onError) {
-      const handleError = ({errorDescription}: {errorDescription: string}) => {
-        onError(errorDescription)
-        ref?.removeEventListener('did-fail-load', handleError)
-      }
-      ref?.addEventListener('did-fail-load', handleError)
-    }
-  }, [injections, onError])
-  return <webview ref={_webviewRef} style={props.style} src={props.url} />
-}
-
-export default WebView
diff --git a/shared/common-adapters/web-view.native.tsx b/shared/common-adapters/web-view.tsx
similarity index 61%
rename from shared/common-adapters/web-view.native.tsx
rename to shared/common-adapters/web-view.tsx
index e6082e25abe7..6ea3d0eddb5c 100644
--- a/shared/common-adapters/web-view.native.tsx
+++ b/shared/common-adapters/web-view.tsx
@@ -5,9 +5,17 @@ import LoadingStateView from './loading-state-view'
 import memoize from 'lodash/memoize'
 import {openURL} from '@/util/misc'
 import type {WebViewInjections, WebViewProps} from './web-view.shared'
+export type {WebViewProps, WebViewInjections} from './web-view.shared'
 import {View as NativeView} from 'react-native'
 import {WebView as NativeWebView} from 'react-native-webview'
 
+type ElectronWebviewTag = {
+  insertCSS: (css: string) => Promise<void>
+  executeJavaScript: (js: string) => Promise<void>
+  addEventListener: (event: string, handler: (e: {errorDescription?: string}) => void) => void
+  removeEventListener: (event: string, handler: (e: {errorDescription?: string}) => void) => void
+}
+
 const escape = (str?: string): string => (str ? str.replace(/\\/g, '\\\\').replace(/`/g, '\\`') : '')
 
 const combineJavaScriptAndCSS = (injections?: WebViewInjections) =>
@@ -24,9 +32,38 @@ const combineJavaScriptAndCSS = (injections?: WebViewInjections) =>
 (function() { ${escape(injections.javaScript)} })();
 `
 
-const KBWebViewBase = (props: WebViewProps) => {
+const WebView = (props: WebViewProps) => {
+  const {onError, injections} = props
+  const webviewRef = React.useRef<ElectronWebviewTag | null>(null)
+
+  React.useEffect(() => {
+    if (isMobile) return
+    const css = injections?.css || ''
+    const javaScript = injections?.javaScript || ''
+    const ref = webviewRef.current
+
+    const onDomReady = () => {
+      if (!ref) return
+      if (css) {
+        ref.insertCSS(css).catch(() => {})
+      }
+      if (javaScript) {
+        ref.executeJavaScript(javaScript).catch(() => {})
+      }
+      ref.removeEventListener('dom-ready', onDomReady)
+    }
+    ref?.addEventListener('dom-ready', onDomReady)
+    if (onError) {
+      const handleError = (e: {errorDescription?: string}) => {
+        onError(e.errorDescription ?? '')
+        ref?.removeEventListener('did-fail-load', handleError)
+      }
+      ref?.addEventListener('did-fail-load', handleError)
+    }
+  }, [injections, onError])
+
   const {allowFileAccessFromFileURLs, allowFileAccess, originWhitelist} = props
-  const {allowUniversalAccessFromFileURLs, url, renderLoading, onError} = props
+  const {allowUniversalAccessFromFileURLs, url, renderLoading} = props
   const {showLoadingStateUntilLoaded} = props
   const [loading, _setLoading] = React.useState(true)
   const [progress, setProgress] = React.useState(0)
@@ -38,21 +75,26 @@ const KBWebViewBase = (props: WebViewProps) => {
     setOpacity(l ? 0 : 1)
   }
 
-  // on ios when we tab away and back pdfs won't rerender somehow
   const [forceReload, setForceReload] = React.useState(1)
   C.Router2.useSafeFocusEffect(() => {
-    setForceReload(a => a + 1)
+    if (isMobile) {
+      setForceReload(a => a + 1)
+    }
   })
 
+  if (!isMobile) {
+    return (
+      <webview
+        ref={webviewRef as React.Ref<HTMLElement>}
+        style={props.style as React.CSSProperties}
+        src={props.url}
+      />
+    )
+  }
+
   return (
     <>
-      <NativeView
-        style={{
-          height: '100%',
-          opacity,
-          width: '100%',
-        }}
-      >
+      <NativeView style={{height: '100%', opacity, width: '100%'}}>
         <NativeWebView
           key={String(forceReload)}
           allowUniversalAccessFromFileURLs={allowUniversalAccessFromFileURLs}
@@ -83,10 +125,8 @@ const KBWebViewBase = (props: WebViewProps) => {
                   if (request.url === url) {
                     return true
                   }
-                  // With links from the Files tab, URL can change because of the
-                  // token. So only open the URL when navigationType is 'click'.
                   if (request.navigationType === 'click') {
-                    openURL(request.url)
+                    void openURL(request.url)
                   }
                   return false
                 }
@@ -94,15 +134,13 @@ const KBWebViewBase = (props: WebViewProps) => {
           }
         />
       </NativeView>
-      {props.showLoadingStateUntilLoaded ? <LoadingStateView loading={loading} progress={progress} /> : null}
+      {showLoadingStateUntilLoaded ? <LoadingStateView loading={loading} progress={progress} /> : null}
     </>
   )
 }
 
-const KBWebView = KBWebViewBase
-
 const styles = Styles.styleSheetCreate(() => ({
   absolute: {position: 'absolute'},
 }))
 
-export default KBWebView
+export default WebView
diff --git a/shared/common-adapters/with-tooltip.desktop.tsx b/shared/common-adapters/with-tooltip.desktop.tsx
deleted file mode 100644
index da3f7163b618..000000000000
--- a/shared/common-adapters/with-tooltip.desktop.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import * as React from 'react'
-import * as Styles from '@/styles'
-import {Box2} from './box'
-import Toast from './toast'
-import Text from './text'
-import type {Props} from './with-tooltip.shared'
-import type {MeasureRef} from './measure-ref'
-
-const IGNORE_FOR_PROFILING = false as boolean
-
-const Kb = {
-  Box2,
-  Text,
-  Toast,
-}
-
-function WithTooltip(p: Props) {
-  const {containerStyle, className, multiline, backgroundColor, toastStyle} = p
-  const {disabled, toastClassName, children, position, textStyle, tooltip} = p
-  const popupAnchor = React.useRef<MeasureRef | null>(null)
-  const [visible, setVisible] = React.useState(false)
-
-  const onMouseEnter = () => {
-    setVisible(true)
-  }
-  const onMouseLeave = () => {
-    setVisible(false)
-  }
-
-  const toast = (
-    <Kb.Toast
-      containerStyle={Styles.collapseStyles([
-        styles.container,
-        multiline && styles.containerMultiline,
-        backgroundColor && {backgroundColor},
-        toastStyle,
-      ])}
-      visible={true}
-      attachTo={popupAnchor}
-      position={position || 'top center'}
-      className={toastClassName}
-    >
-      <Kb.Text
-        center={!Styles.isMobile}
-        type="BodySmall"
-        style={Styles.collapseStyles([styles.text, textStyle])}
-      >
-        {tooltip}
-      </Kb.Text>
-    </Kb.Toast>
-  )
-
-  return (
-    <>
-      <Kb.Box2
-        direction="vertical"
-        alignSelf="stretch"
-        alignItems="center"
-        justifyContent="center"
-        style={containerStyle}
-        ref={popupAnchor}
-        onMouseOver={IGNORE_FOR_PROFILING ? undefined : onMouseEnter}
-        onMouseLeave={IGNORE_FOR_PROFILING ? undefined : onMouseLeave}
-        className={className}
-      >
-        {children}
-      </Kb.Box2>
-      {!disabled && visible && tooltip ? toast : null}
-    </>
-  )
-}
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: Styles.platformStyles({
-    isElectron: {
-      borderRadius: Styles.borderRadius,
-      pointerEvents: 'none',
-    },
-  }),
-  containerMultiline: {
-    maxWidth: 320,
-    minWidth: 320,
-    width: 320,
-  },
-  text: Styles.platformStyles({
-    isElectron: {
-      color: Styles.globalColors.white,
-      wordBreak: 'break-word',
-    } as const,
-  }),
-}))
-
-export default WithTooltip
diff --git a/shared/common-adapters/with-tooltip.native.tsx b/shared/common-adapters/with-tooltip.native.tsx
deleted file mode 100644
index 9f8843cd1add..000000000000
--- a/shared/common-adapters/with-tooltip.native.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import {Portal} from './portal.native'
-import {useTimeout} from './use-timers'
-import {Box2} from './box'
-import ClickableBox from './clickable-box'
-import Text from './text'
-import * as Styles from '@/styles'
-import type {Props} from './with-tooltip.shared'
-import {View} from 'react-native'
-import {useSafeAreaFrame} from 'react-native-safe-area-context'
-
-// This uses a similar mechanism to relative-popup-hoc.desktop.js. It's only
-// ever used for tooltips on mobile for now. If we end up needing relative
-// positioning in other places, we should probably make a
-// relative-popup-hoc.native.js. Also, this only supports "bottom center" and
-// "top center" for now.
-
-const Kb = {
-  Box2,
-  ClickableBox,
-  Portal,
-  Text,
-}
-
-type Dims = {
-  height: number
-  left: number
-  top: number
-  width: number
-}
-
-const FloatingBox = (props: {children: React.ReactNode; style: Styles.StylesCrossPlatform}) => (
-  <Kb.Portal hostName="popup-root">
-    <Kb.Box2
-      direction="vertical"
-      pointerEvents="box-none"
-      style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, props.style])}
-    >
-      {props.children}
-    </Kb.Box2>
-  </Kb.Portal>
-)
-
-const WithTooltip = (props: Props) => {
-  const {position} = props
-  const [left, setLeft] = React.useState(0)
-  const [top, setTop] = React.useState(0)
-  const [visible, setVisible] = React.useState(false)
-  const animatedStyle = {opacity: visible ? 1 : 0}
-  const clickableRef = React.useRef<View>(null)
-  const tooltipRef = React.useRef<View>(null)
-  const setVisibleFalseLater = useTimeout(() => {
-    setVisible(false)
-  }, 3000)
-  const {width: screenWidth, height: screenHeight} = useSafeAreaFrame()
-
-  // since this uses portals we need to hide if we're hidden else we can get stuck showing if our render is frozen
-  C.Router2.useSafeFocusEffect(() => {
-    return () => {
-      setVisible(false)
-    }
-  })
-
-  const _onClick = () => {
-    if (!clickableRef.current || !tooltipRef.current || visible) {
-      return
-    }
-
-    Promise.all([
-      new Promise<Dims>(resolve => {
-        clickableRef.current?.measure(
-          (_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
-            resolve({height, left: pageX, top: pageY, width})
-          }
-        )
-      }),
-      new Promise<Dims>(resolve => {
-        tooltipRef.current?.measure(
-          (_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
-            resolve({height, left: pageX, top: pageY, width})
-          }
-        )
-      }),
-    ] as const)
-      .then(([c, t]) => {
-        const constrainLeft = (ideal: number) => Math.max(0, Math.min(ideal, screenWidth - t.width))
-        const constrainTop = (ideal: number) => Math.max(0, Math.min(ideal, screenHeight - t.height))
-        if (position === 'bottom center') {
-          setLeft(constrainLeft(c.left + c.width / 2 - t.width / 2))
-          setTop(constrainTop(c.top + c.height))
-        } else {
-          // default to top center
-          setLeft(constrainLeft(c.left + c.width / 2 - t.width / 2))
-          setTop(constrainTop(c.top - t.height))
-        }
-
-        setVisible(true)
-        setVisibleFalseLater()
-      })
-      .catch(() => {})
-  }
-
-  if (!props.showOnPressMobile || props.disabled) {
-    return <View style={Styles.castStyleNative(props.containerStyle)}>{props.children}</View>
-  }
-
-  return (
-    <>
-      <View style={Styles.castStyleNative(props.containerStyle)} ref={clickableRef} collapsable={false}>
-        <Kb.ClickableBox onClick={_onClick}>{props.children}</Kb.ClickableBox>
-      </View>
-      <FloatingBox style={animatedStyle}>
-        <View pointerEvents="none" style={Styles.collapseStyles([Styles.globalStyles.flexBoxRow, {top}])}>
-          <View
-            style={Styles.collapseStyles([
-              styles.container,
-              {left},
-              props.backgroundColor && {backgroundColor: props.backgroundColor},
-            ])}
-            ref={tooltipRef}
-            collapsable={false}
-          >
-            <Kb.Text
-              center={!props.multiline}
-              type="BodySmall"
-              style={Styles.collapseStyles([styles.text, props.textStyle])}
-              lineClamp={props.multiline ? undefined : 1}
-            >
-              {props.tooltip}
-            </Kb.Text>
-          </View>
-        </View>
-      </FloatingBox>
-    </>
-  )
-}
-
-export default WithTooltip
-
-const styles = Styles.styleSheetCreate(() => ({
-  container: {
-    backgroundColor: Styles.globalColors.black,
-    borderRadius: Styles.borderRadius,
-    maxWidth: 280,
-    padding: Styles.globalMargins.xtiny,
-  },
-  text: {color: Styles.globalColors.white},
-}))
diff --git a/shared/common-adapters/with-tooltip.tsx b/shared/common-adapters/with-tooltip.tsx
new file mode 100644
index 000000000000..7f44d20c4613
--- /dev/null
+++ b/shared/common-adapters/with-tooltip.tsx
@@ -0,0 +1,215 @@
+import * as C from '@/constants'
+import * as React from 'react'
+import * as Styles from '@/styles'
+import {Portal} from './portal'
+import {useTimeout} from './use-timers'
+import {Box2} from './box'
+import ClickableBox from './clickable-box'
+import Toast from './toast'
+import Text from './text'
+import type {Props} from './with-tooltip.shared'
+import type {MeasureRef} from './measure-ref'
+import {View} from 'react-native'
+import {useSafeAreaFrame} from 'react-native-safe-area-context'
+
+const IGNORE_FOR_PROFILING = false as boolean
+
+const Kb = {
+  Box2,
+  ClickableBox,
+  Portal,
+  Text,
+  Toast,
+}
+
+type Dims = {
+  height: number
+  left: number
+  top: number
+  width: number
+}
+
+function WithTooltip(p: Props) {
+  const {containerStyle, className, multiline, backgroundColor, toastStyle} = p
+  const {disabled, toastClassName, children, position, textStyle, tooltip} = p
+
+  // Desktop state
+  const popupAnchor = React.useRef<MeasureRef | null>(null)
+  const [desktopVisible, setDesktopVisible] = React.useState(false)
+
+  // Native state
+  const [left, setLeft] = React.useState(0)
+  const [top, setTop] = React.useState(0)
+  const [nativeVisible, setNativeVisible] = React.useState(false)
+  const clickableRef = React.useRef<View>(null)
+  const tooltipRef = React.useRef<View>(null)
+  const setVisibleFalseLater = useTimeout(() => {
+    setNativeVisible(false)
+  }, 3000)
+  const {width: screenWidth, height: screenHeight} = useSafeAreaFrame()
+
+  C.Router2.useSafeFocusEffect(() => {
+    return () => {
+      setNativeVisible(false)
+    }
+  })
+
+  if (!isMobile) {
+    const onMouseEnter = () => setDesktopVisible(true)
+    const onMouseLeave = () => setDesktopVisible(false)
+
+    const toast = (
+      <Kb.Toast
+        containerStyle={Styles.collapseStyles([
+          desktopStyles.container,
+          multiline && desktopStyles.containerMultiline,
+          backgroundColor && {backgroundColor},
+          toastStyle,
+        ])}
+        visible={true}
+        attachTo={popupAnchor}
+        position={position || 'top center'}
+        className={toastClassName}
+      >
+        <Kb.Text
+          center={!isMobile}
+          type="BodySmall"
+          style={Styles.collapseStyles([desktopStyles.text, textStyle])}
+        >
+          {tooltip}
+        </Kb.Text>
+      </Kb.Toast>
+    )
+
+    return (
+      <>
+        <Kb.Box2
+          direction="vertical"
+          alignSelf="stretch"
+          alignItems="center"
+          justifyContent="center"
+          style={containerStyle}
+          ref={popupAnchor}
+          onMouseOver={IGNORE_FOR_PROFILING ? undefined : onMouseEnter}
+          onMouseLeave={IGNORE_FOR_PROFILING ? undefined : onMouseLeave}
+          className={className}
+        >
+          {children}
+        </Kb.Box2>
+        {!disabled && desktopVisible && tooltip ? toast : null}
+      </>
+    )
+  }
+
+  const _onClick = () => {
+    if (!clickableRef.current || !tooltipRef.current || nativeVisible) {
+      return
+    }
+
+    Promise.all([
+      new Promise<Dims>(resolve => {
+        clickableRef.current?.measure(
+          (_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
+            resolve({height, left: pageX, top: pageY, width})
+          }
+        )
+      }),
+      new Promise<Dims>(resolve => {
+        tooltipRef.current?.measure(
+          (_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
+            resolve({height, left: pageX, top: pageY, width})
+          }
+        )
+      }),
+    ] as const)
+      .then(([c, t]) => {
+        const constrainLeft = (ideal: number) => Math.max(0, Math.min(ideal, screenWidth - t.width))
+        const constrainTop = (ideal: number) => Math.max(0, Math.min(ideal, screenHeight - t.height))
+        if (position === 'bottom center') {
+          setLeft(constrainLeft(c.left + c.width / 2 - t.width / 2))
+          setTop(constrainTop(c.top + c.height))
+        } else {
+          setLeft(constrainLeft(c.left + c.width / 2 - t.width / 2))
+          setTop(constrainTop(c.top - t.height))
+        }
+
+        setNativeVisible(true)
+        setVisibleFalseLater()
+      })
+      .catch(() => {})
+  }
+
+  if (!p.showOnPressMobile || disabled) {
+    return <View style={Styles.castStyleNative(containerStyle)}>{children}</View>
+  }
+
+  const animatedStyle = {opacity: nativeVisible ? 1 : 0}
+
+  return (
+    <>
+      <View style={Styles.castStyleNative(containerStyle)} ref={clickableRef} collapsable={false}>
+        <Kb.ClickableBox onClick={_onClick}>{children}</Kb.ClickableBox>
+      </View>
+      <Kb.Portal hostName="popup-root">
+        <Kb.Box2
+          direction="vertical"
+          pointerEvents="box-none"
+          style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, animatedStyle])}
+        >
+          <View pointerEvents="none" style={Styles.collapseStyles([Styles.globalStyles.flexBoxRow, {top}])}>
+            <View
+              style={Styles.collapseStyles([
+                nativeStyles.container,
+                {left},
+                backgroundColor && {backgroundColor},
+              ])}
+              ref={tooltipRef}
+              collapsable={false}
+            >
+              <Kb.Text
+                center={!multiline}
+                type="BodySmall"
+                style={Styles.collapseStyles([nativeStyles.text, textStyle])}
+                lineClamp={multiline ? undefined : 1}
+              >
+                {tooltip}
+              </Kb.Text>
+            </View>
+          </View>
+        </Kb.Box2>
+      </Kb.Portal>
+    </>
+  )
+}
+
+export default WithTooltip
+
+const desktopStyles = Styles.styleSheetCreate(() => ({
+  container: Styles.platformStyles({
+    isElectron: {
+      borderRadius: Styles.borderRadius,
+      pointerEvents: 'none',
+    },
+  }),
+  containerMultiline: {
+    maxWidth: 320,
+    minWidth: 320,
+    width: 320,
+  },
+  text: Styles.platformStyles({
+    isElectron: {
+      color: Styles.globalColors.white,
+      wordBreak: 'break-word',
+    } as const,
+  }),
+}))
+
+const nativeStyles = Styles.styleSheetCreate(() => ({
+  container: {
+    backgroundColor: Styles.globalColors.black,
+    borderRadius: Styles.borderRadius,
+    maxWidth: 280,
+    padding: Styles.globalMargins.xtiny,
+  },
+  text: {color: Styles.globalColors.white},
+}))
diff --git a/shared/common-adapters/zoomable-image.desktop.tsx b/shared/common-adapters/zoomable-image.desktop.tsx
deleted file mode 100644
index 239e5760c851..000000000000
--- a/shared/common-adapters/zoomable-image.desktop.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react'
-import Toast from './toast.desktop'
-import {Box2} from './box'
-import Text from './text'
-import type {Props} from './zoomable-image.shared'
-const Kb = {
-  Box2,
-  Text,
-  Toast,
-}
-const normalizeSrc = (src: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(src)
-  if (src.startsWith('/') || isWindowsPath) {
-    let path = src.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) {
-      path = '/' + path
-    }
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (src.startsWith('file://') && (src.includes(' ') || src.includes('#'))) {
-    return encodeURI(src).replace(/#/g, '%23')
-  }
-  return src
-}
-
-function ZoomableImage(p: Props) {
-  const {src, onIsZoomed, onLoaded, dragPan, onChanged, onError, forceDims} = p
-  const [isZoomed, setIsZoomed] = React.useState(false)
-  const [allowPan, setAllowPan] = React.useState(true)
-  const [showToast, setShowToast] = React.useState(false)
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const imgRef = React.useRef<HTMLImageElement>(null)
-  const scaleRef = React.useRef(1)
-  const isZoomedRef = React.useRef(isZoomed)
-
-  const toggleZoom = () => {
-    const nextIsZoomed = !isZoomed
-    isZoomedRef.current = nextIsZoomed
-    setIsZoomed(s => !s)
-    setShowToast(nextIsZoomed)
-    // hide until we handle mouse move
-    imgRef.current?.classList.remove('fade-anim-enter-active')
-    onIsZoomed?.(nextIsZoomed)
-  }
-
-  React.useEffect(() => {
-    if (!showToast) {
-      return undefined
-    }
-    const id = setTimeout(() => {
-      setShowToast(false)
-    }, 3000)
-    return () => {
-      clearTimeout(id)
-    }
-  }, [showToast])
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!containerRef.current || !imgRef.current) return
-
-    if (dragPan && !allowPan) return
-
-    imgRef.current.classList.add('fade-anim-enter-active')
-
-    if (!dragPan && !isZoomedRef.current) {
-      imgRef.current.style.transform = ''
-      return
-    }
-
-    const containerRect = containerRef.current.getBoundingClientRect()
-    const imgRect = imgRef.current.getBoundingClientRect()
-    const xPercent = Math.min(1, Math.max(0, (e.clientX - containerRect.left) / containerRect.width))
-    const yPercent = Math.min(1, Math.max(0, (e.clientY - containerRect.top) / containerRect.height))
-
-    const x = Math.min(
-      // if the image is smaller then center it
-      imgRect.width < containerRect.width ? (containerRect.width - imgRect.width) / 2 : 0,
-      Math.max(
-        -(imgRect.width - containerRect.width),
-        containerRect.width * xPercent - imgRect.width * xPercent
-      )
-    )
-    const y = Math.min(
-      imgRect.height < containerRect.height ? (containerRect.height - imgRect.height) / 2 : 0,
-      Math.max(
-        -(imgRect.height - containerRect.height),
-        containerRect.height * yPercent - imgRect.height * yPercent
-      )
-    )
-
-    imgRef.current.style.transform = `translate(${x}px, ${y}px) scale(${scaleRef.current})`
-    onChanged?.({height: imgRect.height, scale: scaleRef.current, width: imgRect.width, x: -x, y: -y})
-  }
-
-  const handleWheel = (e: React.WheelEvent) => {
-    if (e.cancelable) {
-      e.preventDefault()
-    }
-
-    if (dragPan && !allowPan) return
-    if (!dragPan && !isZoomedRef.current) return
-
-    const delta = e.deltaY > 0 ? 1.02 : 0.98
-    scaleRef.current = Math.min(2.5, Math.max(0.3, scaleRef.current * delta))
-    handleMouseMove(e)
-  }
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (dragPan) {
-      setAllowPan(p => !p)
-    } else {
-      toggleZoom()
-      setTimeout(() => {
-        handleMouseMove(e)
-      }, 0)
-    }
-  }
-
-  let style: React.CSSProperties = {
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    width: '100%',
-  }
-  let imgStyle: React.CSSProperties = {
-    display: 'flex',
-    position: 'absolute',
-    transformOrigin: '0 0',
-  }
-  if (dragPan) {
-    style = {...style, cursor: allowPan ? 'move' : 'pointer'}
-  } else {
-    style = {
-      ...style,
-      cursor: isZoomed ? 'zoom-out' : 'zoom-in',
-      ...(isZoomed ? {} : {display: 'flex'}),
-    }
-    imgStyle = isZoomed
-      ? {
-          ...imgStyle,
-        }
-      : {
-          ...forceDims,
-          margin: 'auto',
-          maxHeight: '100%',
-          maxWidth: '100%',
-          objectFit: 'contain',
-        }
-  }
-
-  return (
-    <div ref={containerRef} style={style} onMouseMove={handleMouseMove} onWheel={handleWheel} onClick={handleClick}>
-      <img
-        draggable={false}
-        onLoad={onLoaded}
-        onError={onError}
-        className="fade-anim-enter fade-anim-enter-active"
-        ref={imgRef}
-        src={src ? normalizeSrc(src) : undefined}
-        style={imgStyle}
-      />
-      <Kb.Toast visible={showToast} attachTo={containerRef}>
-        <Kb.Text type="Body" negative={true}>
-          Scroll to zoom. Move to pan
-        </Kb.Text>
-      </Kb.Toast>
-    </div>
-  )
-}
-
-export default ZoomableImage
diff --git a/shared/common-adapters/zoomable-image.native.tsx b/shared/common-adapters/zoomable-image.native.tsx
deleted file mode 100644
index 23d5d0f82fcc..000000000000
--- a/shared/common-adapters/zoomable-image.native.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import type {Props} from './zoomable-image.shared'
-import * as Styles from '@/styles'
-import * as React from 'react'
-import Image from './image.native'
-import {View, type LayoutChangeEvent} from 'react-native'
-import {useSharedValue, runOnJS} from 'react-native-reanimated'
-import {
-  fitContainer,
-  ResumableZoom,
-  useImageResolution,
-  type CommonZoomState,
-  type SwipeDirection,
-} from 'react-native-zoom-toolkit'
-
-function ZoomableImage(p: Props) {
-  const {src, style, onChanged: onZoom, onSwipe: _onSwipe, onTap} = p
-  const {isFetching, resolution} = useImageResolution({uri: src})
-  const srcDims = p.srcDims?.width && p.srcDims.height ? p.srcDims : undefined
-  const imageResolution = resolution ?? srcDims
-  const imageResolutionHeight = imageResolution?.height
-  const imageResolutionWidth = imageResolution?.width
-  const currentZoomSV = useSharedValue(1)
-
-  const onUpdate = (s: CommonZoomState<number>) => {
-    'worklet'
-    currentZoomSV.set(s.scale)
-    if (onZoom && imageResolutionWidth) {
-      const actualScale = (s.scale * s.childSize.width) / imageResolutionWidth
-      const {width} = s.childSize
-      const scale = width / imageResolutionWidth
-      const scaledContainerWidth = s.containerSize.width / scale
-      const scaledContainerHeight = s.containerSize.height / scale
-
-      const left = scaledContainerWidth / 2 - s.translateX - s.containerSize.width / 2
-      const top = s.translateY - scaledContainerHeight / 2 + s.containerSize.height / 2
-      const z = {
-        height: s.childSize.height * s.scale,
-        scale: actualScale,
-        width: s.childSize.width * s.scale,
-        x: left,
-        y: top,
-      }
-      runOnJS(onZoom)(z)
-    }
-  }
-
-  const onSwipe = (dir: SwipeDirection) => {
-    if (Math.abs(currentZoomSV.get() - 1) < 0.1) {
-      switch (dir) {
-        case 'left':
-          _onSwipe?.(true)
-          break
-        case 'right':
-          _onSwipe?.(false)
-          break
-        default:
-      }
-    }
-  }
-
-  let content: React.ReactNode
-
-  const [containerSize, setContainerSize] = React.useState({height: 0, width: 0})
-  const onLayout = (event: LayoutChangeEvent) => {
-    const {width, height} = event.nativeEvent.layout
-    setContainerSize(old => {
-      if (old.width === width && old.height === height) {
-        return old
-      }
-      return {height, width}
-    })
-  }
-
-  if (
-    (!imageResolution && isFetching) ||
-    !imageResolutionHeight ||
-    !imageResolutionWidth ||
-    containerSize.width === 0 ||
-    containerSize.height === 0
-  ) {
-    content = <></>
-  } else {
-    const size = fitContainer(imageResolutionWidth / imageResolutionHeight, containerSize)
-    content = (
-      <Image
-        contentFit="fill"
-        src={src}
-        style={size}
-        showLoadingStateUntilLoaded={false}
-        allowDownscaling={false}
-      />
-    )
-  }
-
-  return (
-    <View style={[styles.container, style]} onLayout={onLayout}>
-      <ResumableZoom
-        maxScale={10}
-        extendGestures={true}
-        onTap={onTap}
-        onUpdate={onUpdate}
-        onSwipe={onSwipe}
-        panMode="clamp"
-      >
-        {content}
-      </ResumableZoom>
-    </View>
-  )
-}
-
-const styles = Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        flexGrow: 1,
-        overflow: 'hidden',
-      },
-    }) as const
-)
-
-export default ZoomableImage
diff --git a/shared/common-adapters/zoomable-image.tsx b/shared/common-adapters/zoomable-image.tsx
new file mode 100644
index 000000000000..e07534b4cea2
--- /dev/null
+++ b/shared/common-adapters/zoomable-image.tsx
@@ -0,0 +1,304 @@
+import type {Props} from './zoomable-image.shared'
+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) => {
+  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(src)
+  if (src.startsWith('/') || isWindowsPath) {
+    let path = src.replace(/\\/g, '/')
+    if (isWindowsPath && !path.startsWith('/')) {
+      path = '/' + path
+    }
+    return encodeURI(`file://${path}`).replace(/#/g, '%23')
+  }
+  if (src.startsWith('file://') && (src.includes(' ') || src.includes('#'))) {
+    return encodeURI(src).replace(/#/g, '%23')
+  }
+  return src
+}
+
+// Stub types to avoid DOM lib dependency in native tsconfig
+type DivRef = {
+  getBoundingClientRect: () => {left: number; top: number; width: number; height: number}
+}
+type ImgRef = {
+  getBoundingClientRect: () => {width: number; height: number}
+  style: {transform: string}
+  classList: {add: (cls: string) => void; remove: (cls: string) => void}
+}
+type MouseEvt = {clientX: number; clientY: number}
+type WheelEvt = MouseEvt & {deltaY: number; cancelable: boolean; preventDefault: () => void}
+
+const DesktopZoomableImage = (p: Props) => {
+  const {src, onIsZoomed, onLoaded, dragPan, onChanged, onError, forceDims} = p
+  const [isZoomed, setIsZoomed] = React.useState(false)
+  const [allowPan, setAllowPan] = React.useState(true)
+  const [showToast, setShowToast] = React.useState(false)
+  const containerRef = React.useRef<DivRef>(null)
+  const imgRef = React.useRef<ImgRef>(null)
+  const scaleRef = React.useRef(1)
+  const isZoomedRef = React.useRef(isZoomed)
+
+  const toggleZoom = () => {
+    const nextIsZoomed = !isZoomed
+    isZoomedRef.current = nextIsZoomed
+    setIsZoomed(s => !s)
+    setShowToast(nextIsZoomed)
+    imgRef.current?.classList.remove('fade-anim-enter-active')
+    onIsZoomed?.(nextIsZoomed)
+  }
+
+  React.useEffect(() => {
+    if (!showToast) {
+      return undefined
+    }
+    const id = setTimeout(() => {
+      setShowToast(false)
+    }, 3000)
+    return () => {
+      clearTimeout(id)
+    }
+  }, [showToast])
+
+  const handleMouseMove = (e: MouseEvt) => {
+    if (!containerRef.current || !imgRef.current) return
+    if (dragPan && !allowPan) return
+
+    imgRef.current.classList.add('fade-anim-enter-active')
+
+    if (!dragPan && !isZoomedRef.current) {
+      imgRef.current.style.transform = ''
+      return
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const imgRect = imgRef.current.getBoundingClientRect()
+    const xPercent = Math.min(1, Math.max(0, (e.clientX - containerRect.left) / containerRect.width))
+    const yPercent = Math.min(1, Math.max(0, (e.clientY - containerRect.top) / containerRect.height))
+
+    const x = Math.min(
+      imgRect.width < containerRect.width ? (containerRect.width - imgRect.width) / 2 : 0,
+      Math.max(
+        -(imgRect.width - containerRect.width),
+        containerRect.width * xPercent - imgRect.width * xPercent
+      )
+    )
+    const y = Math.min(
+      imgRect.height < containerRect.height ? (containerRect.height - imgRect.height) / 2 : 0,
+      Math.max(
+        -(imgRect.height - containerRect.height),
+        containerRect.height * yPercent - imgRect.height * yPercent
+      )
+    )
+
+    imgRef.current.style.transform = `translate(${x}px, ${y}px) scale(${scaleRef.current})`
+    onChanged?.({height: imgRect.height, scale: scaleRef.current, width: imgRect.width, x: -x, y: -y})
+  }
+
+  const handleWheel = (e: WheelEvt) => {
+    if (e.cancelable) {
+      e.preventDefault()
+    }
+    if (dragPan && !allowPan) return
+    if (!dragPan && !isZoomedRef.current) return
+
+    const delta = e.deltaY > 0 ? 1.02 : 0.98
+    scaleRef.current = Math.min(2.5, Math.max(0.3, scaleRef.current * delta))
+    handleMouseMove(e)
+  }
+
+  const handleClick = (e: MouseEvt) => {
+    if (dragPan) {
+      setAllowPan(prev => !prev)
+    } else {
+      toggleZoom()
+      setTimeout(() => {
+        handleMouseMove(e)
+      }, 0)
+    }
+  }
+
+  let style: React.CSSProperties = {
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%',
+  }
+  let imgStyle: React.CSSProperties = {
+    display: 'flex',
+    position: 'absolute',
+    transformOrigin: '0 0',
+  }
+  if (dragPan) {
+    style = {...style, cursor: allowPan ? 'move' : 'pointer'}
+  } else {
+    style = {
+      ...style,
+      cursor: isZoomed ? 'zoom-out' : 'zoom-in',
+      ...(isZoomed ? {} : {display: 'flex'}),
+    }
+    imgStyle = isZoomed
+      ? {...imgStyle}
+      : {
+          ...forceDims,
+          margin: 'auto',
+          maxHeight: '100%',
+          maxWidth: '100%',
+          objectFit: 'contain',
+        }
+  }
+
+  return (
+    <div
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+      style={style}
+      onMouseMove={handleMouseMove as React.MouseEventHandler}
+      onWheel={handleWheel as React.WheelEventHandler}
+      onClick={handleClick as React.MouseEventHandler}
+    >
+      <img
+        draggable={false}
+        onLoad={onLoaded}
+        onError={onError}
+        className="fade-anim-enter fade-anim-enter-active"
+        ref={imgRef as React.RefObject<HTMLImageElement>}
+        src={src ? normalizeSrc(src) : undefined}
+        style={imgStyle}
+      />
+      <Toast visible={showToast} attachTo={containerRef as React.RefObject<never>}>
+        <Text type="Body" negative={true}>
+          Scroll to zoom. Move to pan
+        </Text>
+      </Toast>
+    </div>
+  )
+}
+
+type NativeLayoutEvent = {nativeEvent: {layout: {width: number; height: number}}}
+type NativeCommonZoomState = {
+  scale: number
+  childSize: {width: number; height: number}
+  containerSize: {width: number; height: number}
+  translateX: number
+  translateY: number
+}
+type NativeSwipeDirection = 'left' | 'right' | 'up' | 'down'
+
+const NativeZoomableImage = (p: Props) => {
+  const {src, style, onChanged: onZoom, onSwipe: _onSwipe, onTap} = p
+
+  const {isFetching, resolution} = useImageResolution({uri: src})
+  const srcDims = p.srcDims?.width && p.srcDims.height ? p.srcDims : undefined
+  const imageResolution = resolution ?? srcDims
+  const imageResolutionHeight = imageResolution?.height
+  const imageResolutionWidth = imageResolution?.width
+  const currentZoomSV = useSharedValue(1)
+
+  const onUpdate = (s: NativeCommonZoomState) => {
+    'worklet'
+    currentZoomSV.set(s.scale)
+    if (onZoom && imageResolutionWidth) {
+      const actualScale = (s.scale * s.childSize.width) / imageResolutionWidth
+      const {width} = s.childSize
+      const scale = width / imageResolutionWidth
+      const scaledContainerWidth = s.containerSize.width / scale
+      const scaledContainerHeight = s.containerSize.height / scale
+
+      const left = scaledContainerWidth / 2 - s.translateX - s.containerSize.width / 2
+      const top = s.translateY - scaledContainerHeight / 2 + s.containerSize.height / 2
+      const z = {
+        height: s.childSize.height * s.scale,
+        scale: actualScale,
+        width: s.childSize.width * s.scale,
+        x: left,
+        y: top,
+      }
+      runOnJS(onZoom)(z)
+    }
+  }
+
+  const onSwipe = (dir: NativeSwipeDirection) => {
+    if (Math.abs(currentZoomSV.get() - 1) < 0.1) {
+      switch (dir) {
+        case 'left':
+          _onSwipe?.(true)
+          break
+        case 'right':
+          _onSwipe?.(false)
+          break
+        default:
+      }
+    }
+  }
+
+  const [containerSize, setContainerSize] = React.useState({height: 0, width: 0})
+  const onLayout = (event: NativeLayoutEvent) => {
+    const {width, height} = event.nativeEvent.layout
+    setContainerSize(old => {
+      if (old.width === width && old.height === height) return old
+      return {height, width}
+    })
+  }
+
+  let content: React.ReactNode
+  if (
+    (!imageResolution && isFetching) ||
+    !imageResolutionHeight ||
+    !imageResolutionWidth ||
+    containerSize.width === 0 ||
+    containerSize.height === 0
+  ) {
+    content = <></>
+  } else {
+    const size = fitContainer(imageResolutionWidth / imageResolutionHeight, containerSize)
+    content = (
+      <ImageNative
+        contentFit="fill"
+        src={src}
+        style={size}
+        showLoadingStateUntilLoaded={false}
+        allowDownscaling={false}
+      />
+    )
+  }
+
+  return (
+    <View style={Styles.collapseStyles([styles.container, style])} onLayout={onLayout}>
+      <ResumableZoom
+        maxScale={10}
+        extendGestures={true}
+        onTap={onTap}
+        onUpdate={onUpdate}
+        onSwipe={onSwipe}
+        panMode="clamp"
+      >
+        {content}
+      </ResumableZoom>
+    </View>
+  )
+}
+
+const ZoomableImage = (p: Props) => {
+  if (!isMobile) return <DesktopZoomableImage {...p} />
+  return <NativeZoomableImage {...p} />
+}
+
+const styles = Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {
+        flexGrow: 1,
+        overflow: 'hidden',
+      },
+    }) as const
+)
+
+export default ZoomableImage
diff --git a/shared/constants/chat/layout.tsx b/shared/constants/chat/layout.tsx
index 631ac0509a23..f3742cf7140d 100644
--- a/shared/constants/chat/layout.tsx
+++ b/shared/constants/chat/layout.tsx
@@ -1,4 +1,4 @@
-import {isMobile, isTablet} from '../platform'
+import {isTablet} from '../platform'
 
 // in split mode the root is the 'inbox'
 export const isSplit = !isMobile || isTablet // Whether the inbox and conversation panels are visible side-by-side.
diff --git a/shared/constants/chat/message.tsx b/shared/constants/chat/message.tsx
index 2897915cf214..62519a22807d 100644
--- a/shared/constants/chat/message.tsx
+++ b/shared/constants/chat/message.tsx
@@ -7,7 +7,6 @@ import type * as MessageTypes from '@/constants/types/chat/message'
 import type {ServiceId} from '@/util/platforms'
 import {noConversationIDKey} from '@/constants/types/chat/common'
 import invert from 'lodash/invert'
-import {isIOS, isMobile} from '@/constants/platform'
 
 const noString = new HiddenString('')
 type AccountsInfoMap = ReadonlyMap<T.RPCChat.MessageID, T.Chat.ChatRequestInfo | T.Chat.ChatPaymentInfo>
diff --git a/shared/constants/crypto.tsx b/shared/constants/crypto.tsx
index 5815510b1ad5..675bb7fded59 100644
--- a/shared/constants/crypto.tsx
+++ b/shared/constants/crypto.tsx
@@ -1,4 +1,3 @@
-import {isMobile} from './platform'
 
 export const saltpackDocumentation = 'https://saltpack.org'
 export const inputDesktopMaxHeight = {maxHeight: '30%'} as const
diff --git a/shared/constants/fs.tsx b/shared/constants/fs.tsx
index 36916c021a09..f41800018bce 100644
--- a/shared/constants/fs.tsx
+++ b/shared/constants/fs.tsx
@@ -1,5 +1,5 @@
 import * as T from '@/constants/types'
-import {isLinux, isMobile} from '@/constants/platform'
+import {isLinux} from '@/constants/platform'
 import {navigateAppend} from '@/constants/router'
 
 // Prefetch Constants
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 f8f74041aefe..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.desktop'
-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 547c241880ec..000000000000
--- a/shared/constants/init/index.native.tsx
+++ /dev/null
@@ -1,404 +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 {isAndroid} from '@/constants/platform.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/init/push-listener.native.tsx b/shared/constants/init/push-listener.native.tsx
index 36feb1b20969..a39c1764097c 100644
--- a/shared/constants/init/push-listener.native.tsx
+++ b/shared/constants/init/push-listener.native.tsx
@@ -2,7 +2,6 @@ import * as T from '@/constants/types'
 import {ignorePromise, timeoutPromise} from '@/constants/utils'
 import logger from '@/logger'
 import {emitDeepLink} from '@/router-v2/linking'
-import {isAndroid, isIOS} from '@/constants/platform'
 import {
   getRegistrationToken,
   setApplicationIconBadgeNumber,
diff --git a/shared/constants/init/shared.tsx b/shared/constants/init/shared.tsx
index 3fcba4a5e907..64470db857bf 100644
--- a/shared/constants/init/shared.tsx
+++ b/shared/constants/init/shared.tsx
@@ -23,7 +23,7 @@ import {getTBStore} from '@/stores/team-building'
 import {serviceStaticConfigToStaticConfig} from '@/constants/chat/static-config'
 import {emitDeepLink} from '@/router-v2/linking'
 import {ignorePromise} from '../utils'
-import {isMobile, isPhone, serverConfigFileName} from '../platform'
+import {isPhone, serverConfigFileName} from '../platform'
 import {useAvatarState} from '@/common-adapters/avatar/store'
 import {useInboxLayoutState} from '@/chat/inbox/layout-state'
 import {useConfigState} from '@/stores/config'
diff --git a/shared/constants/platform.desktop.tsx b/shared/constants/platform.desktop.tsx
deleted file mode 100644
index 7698886aa0e4..000000000000
--- a/shared/constants/platform.desktop.tsx
+++ /dev/null
@@ -1,158 +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 isMobile: boolean = false
-export const isPhone: boolean = false
-export const isAndroid: boolean = false
-export const isIOS: 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 isElectron: boolean = true
-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('/')
diff --git a/shared/constants/platform.native.tsx b/shared/constants/platform.native.tsx
deleted file mode 100644
index 01ed593de55c..000000000000
--- a/shared/constants/platform.native.tsx
+++ /dev/null
@@ -1,87 +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 isIOS = Platform.OS === 'ios'
-export const isAndroid = !isIOS
-export const isMobile: boolean = true
-export const isTablet = Platform.OS === 'ios' && Platform.isPad
-export const isPhone = !isTablet
-
-export const isDarwin: boolean = false
-export const isElectron: 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/constants/router.tsx b/shared/constants/router.tsx
index e07ef976d75d..562c8fe9bfb7 100644
--- a/shared/constants/router.tsx
+++ b/shared/constants/router.tsx
@@ -18,7 +18,6 @@ import type {StaticScreenProps} from '@react-navigation/core'
 import type {NavigateAppendType, RouteKeys, RootParamList as KBRootParamList} from '@/router-v2/route-params'
 import type {GetOptionsRet, RouteDef} from './types/router'
 import {isSplit, threadRouteName} from './chat/layout'
-import {isMobile} from './platform'
 import {ignorePromise, shallowEqual} from './utils'
 import {registerDebugClear} from '@/util/debug'
 import {makeUUID} from '@/util/uuid'
diff --git a/shared/constants/strings.tsx b/shared/constants/strings.tsx
index 34b3510d7f7d..87fea48c0125 100644
--- a/shared/constants/strings.tsx
+++ b/shared/constants/strings.tsx
@@ -113,9 +113,9 @@ export const waitingKeyUsersReportUser = 'users:reportUser'
 export const waitingKeyPushPermissionsRequesting = 'push:permissionsRequesting'
 
 export const defaultDevicename =
-  (Platforms.isAndroid ? 'Android Device' : undefined) ||
-  (Platforms.isIOS ? 'iOS Device' : undefined) ||
+  (isAndroid ? 'Android Device' : undefined) ||
+  (isIOS ? 'iOS Device' : undefined) ||
   (Platforms.isDarwin ? 'Mac Device' : undefined) ||
   (Platforms.isWindows ? 'Windows Device' : undefined) ||
   (Platforms.isLinux ? 'Linux Device' : undefined) ||
-  (Platforms.isMobile ? 'Mobile Device' : 'Home Computer')
+  (isMobile ? 'Mobile Device' : 'Home Computer')
diff --git a/shared/crypto/decrypt.tsx b/shared/crypto/decrypt.tsx
index 98c9e2a9116d..34d9e85107e0 100644
--- a/shared/crypto/decrypt.tsx
+++ b/shared/crypto/decrypt.tsx
@@ -32,7 +32,7 @@ const bannerMessage = Crypto.infoMessage.decrypt
 const filePrompt = 'Drop a file to decrypt'
 const inputEmptyWidth = 320
 const inputFileIcon = 'icon-file-saltpack-64' as const
-const inputPlaceholder = C.isMobile
+const inputPlaceholder = isMobile
   ? 'Enter text to decrypt'
   : 'Enter ciphertext, drop an encrypted file or folder, or'
 
@@ -143,7 +143,7 @@ export const DecryptInput = (_props: unknown) => {
   const onRun = () => {
     const f = async () => {
       const next = await controller.decrypt()
-      if (C.isMobile) {
+      if (isMobile) {
         navigateAppend({name: Crypto.decryptOutput, params: next})
       }
     }
@@ -166,7 +166,7 @@ export const DecryptInput = (_props: unknown) => {
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.KeyboardAvoidingView2>
       {contents}
       <InputActionsBar runLabel="Decrypt" onRun={onRun} />
@@ -182,9 +182,9 @@ export const DecryptOutput = ({route}: {route: {params: CommonOutputRouteParams}
   const state = route.params
   const content = (
     <>
-      {C.isMobile && state.errorMessage ? <CryptoBanner key="banner" infoMessage={bannerMessage} state={state} /> : null}
+      {isMobile && state.errorMessage ? <CryptoBanner key="banner" infoMessage={bannerMessage} state={state} /> : null}
       <CryptoSignedSender key="sender" isSelfSigned={false} state={state} />
-      {C.isMobile ? <Kb.Divider key="div" /> : null}
+      {isMobile ? <Kb.Divider key="div" /> : null}
       <CryptoOutput
         key="output"
         actionLabel="Decrypt"
@@ -197,7 +197,7 @@ export const DecryptOutput = ({route}: {route: {params: CommonOutputRouteParams}
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     content
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.outputDesktopMaxHeight}>
diff --git a/shared/crypto/encrypt.tsx b/shared/crypto/encrypt.tsx
index 1c445220d5c8..757d904bda18 100644
--- a/shared/crypto/encrypt.tsx
+++ b/shared/crypto/encrypt.tsx
@@ -32,7 +32,7 @@ const bannerMessage = Crypto.infoMessage.encrypt
 const filePrompt = 'Drop a file to encrypt'
 const inputEmptyWidth = 207
 const inputFileIcon = 'icon-file-64' as const
-const inputPlaceholder = C.isMobile ? 'Enter text to encrypt' : 'Enter text, drop a file or folder, or'
+const inputPlaceholder = isMobile ? 'Enter text to encrypt' : 'Enter text, drop a file or folder, or'
 
 const getWarningMessageForSBS = (sbsAssertion: string) =>
   `Note: Encrypted for "${sbsAssertion}" who is not yet a Keybase user. One of your devices will need to be online after they join Keybase in order for them to decrypt the message.`
@@ -348,8 +348,8 @@ const EncryptOptionsPanel = ({
     setEncryptOptions({includeSelf: newIncludeSelf, sign: newSign})
   }
 
-  const direction = Kb.Styles.isTablet ? 'horizontal' : Kb.Styles.isMobile ? 'vertical' : 'horizontal'
-  const gap = Kb.Styles.isTablet ? 'medium' : Kb.Styles.isMobile ? 'xtiny' : 'medium'
+  const direction = Kb.Styles.isTablet ? 'horizontal' : isMobile ? 'vertical' : 'horizontal'
+  const gap = Kb.Styles.isTablet ? 'medium' : isMobile ? 'xtiny' : 'medium'
 
   return (
     <Kb.Box2
@@ -405,7 +405,7 @@ const EncryptOutputBanner = ({
         outputType === 'file' ? 'file' : 'message',
         ', using ',
         {
-          onClick: () => openURL(Crypto.saltpackDocumentation),
+          onClick: () => { void openURL(Crypto.saltpackDocumentation) },
           text: 'Saltpack',
         },
         '.',
@@ -460,14 +460,14 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => {
   const onRun = () => {
     const f = async () => {
       const next = await controller.runEncrypt()
-      if (C.isMobile) {
+      if (isMobile) {
         navigateAppend({name: Crypto.encryptOutput, params: encryptToOutputParams(next)})
       }
     }
     C.ignorePromise(f())
   }
 
-  const options = C.isMobile ? (
+  const options = isMobile ? (
     <InputActionsBar runLabel="Encrypt" blurCBRef={blurCBRef} onRun={onRun}>
       <EncryptOptionsPanel
         hasRecipients={controller.state.meta.hasRecipients}
@@ -515,7 +515,7 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => {
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.KeyboardAvoidingView2>{content}</Kb.KeyboardAvoidingView2>
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
@@ -528,7 +528,7 @@ const EncryptOutputBody = ({params}: {params: EncryptOutputRouteParams}) => (
   <Kb.Box2
     direction="vertical"
     fullHeight={true}
-    style={C.isMobile ? undefined : Crypto.outputDesktopMaxHeight}
+    style={isMobile ? undefined : Crypto.outputDesktopMaxHeight}
   >
     <EncryptOutputBanner
       hasRecipients={params.hasRecipients}
@@ -538,7 +538,7 @@ const EncryptOutputBody = ({params}: {params: EncryptOutputRouteParams}) => (
       recipients={params.recipients}
     />
     <CryptoSignedSender isSelfSigned={true} state={params} />
-    {C.isMobile ? <Kb.Divider /> : null}
+    {isMobile ? <Kb.Divider /> : null}
     <CryptoOutput
       actionLabel="Encrypt"
       outputFileIcon="icon-file-saltpack-64"
@@ -602,7 +602,7 @@ export const EncryptIO = () => {
         <Kb.Box2
           direction="vertical"
           fullHeight={true}
-          style={C.isMobile ? undefined : Crypto.outputDesktopMaxHeight}
+          style={isMobile ? undefined : Crypto.outputDesktopMaxHeight}
         >
           <EncryptOutputBanner
             hasRecipients={controller.state.meta.hasRecipients}
@@ -612,7 +612,7 @@ export const EncryptIO = () => {
             recipients={controller.state.recipients}
           />
           <CryptoSignedSender isSelfSigned={true} state={controller.state} />
-          {C.isMobile ? <Kb.Divider /> : null}
+          {isMobile ? <Kb.Divider /> : null}
           <CryptoOutput
             actionLabel="Encrypt"
             outputFileIcon="icon-file-saltpack-64"
diff --git a/shared/crypto/helpers.tsx b/shared/crypto/helpers.tsx
index 9edbb8314941..b9de83185bf8 100644
--- a/shared/crypto/helpers.tsx
+++ b/shared/crypto/helpers.tsx
@@ -185,7 +185,7 @@ export function maybeAutoRunTextOperation<State extends CommonState>(
   snapshot: State,
   run: (destinationDir?: string, snapshot?: State) => Promise<unknown>
 ) {
-  if (snapshot.inputType !== 'text' || C.isMobile) return
+  if (snapshot.inputType !== 'text' || isMobile) return
   const f = async () => {
     await run('', snapshot)
   }
diff --git a/shared/crypto/input.tsx b/shared/crypto/input.tsx
index 1f11ee4002fa..10e2cf772b43 100644
--- a/shared/crypto/input.tsx
+++ b/shared/crypto/input.tsx
@@ -90,12 +90,12 @@ const TextInput = (props: TextProps) => {
     C.ignorePromise(f())
   }
 
-  const rowsMax = Kb.Styles.isMobile ? undefined : value ? undefined : 1
-  const growAndScroll = !Kb.Styles.isMobile && !!value
+  const rowsMax = isMobile ? undefined : value ? undefined : 1
+  const growAndScroll = !isMobile && !!value
   const inputStyle = Kb.Styles.collapseStyles([
     styles.input,
     value ? styles.inputFull : styles.inputEmpty,
-    !value && !Kb.Styles.isMobile && {width: emptyInputWidth},
+    !value && !isMobile && {width: emptyInputWidth},
   ])
   const inputContainerStyle = value ? styles.inputContainer : styles.inputContainerEmpty
 
@@ -116,11 +116,11 @@ const TextInput = (props: TextProps) => {
     <Kb.ClickableBox onClick={onFocusInput} style={styles.containerInputFocus}>
       <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.commonContainer}>
         <Kb.Box2
-          direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'}
+          direction={isMobile ? 'vertical' : 'horizontal'}
           alignItems="flex-start"
           alignSelf="flex-start"
-          fullWidth={Kb.Styles.isMobile || !!value}
-          fullHeight={Kb.Styles.isMobile || !!value}
+          fullWidth={isMobile || !!value}
+          fullHeight={isMobile || !!value}
           style={styles.inputAndFilePickerContainer}
         >
           <Kb.Input3
@@ -139,10 +139,10 @@ const TextInput = (props: TextProps) => {
             onChangeText={onChangeText}
             ref={inputRef}
           />
-          {!Kb.Styles.isMobile && browseButton}
+          {!isMobile && browseButton}
         </Kb.Box2>
       </Kb.Box2>
-      {!Kb.Styles.isMobile && clearButton}
+      {!isMobile && clearButton}
     </Kb.ClickableBox>
   )
 }
@@ -254,7 +254,7 @@ export const InputActionsBar = ({blurCBRef, children, onRun, runLabel}: RunActio
     }, 100)
   }
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2
       direction="vertical"
       fullWidth={true}
diff --git a/shared/crypto/output.tsx b/shared/crypto/output.tsx
index d5e48ed828b4..3effbf92e9ea 100644
--- a/shared/crypto/output.tsx
+++ b/shared/crypto/output.tsx
@@ -43,10 +43,10 @@ export const CryptoSignedSender = ({isSelfSigned, state}: SignedSenderProps) =>
   const signedByUsername = state.outputSenderUsername
   const signedByFullname = state.outputSenderFullname
 
-  const avatarSize = isSelfSigned ? 16 : Kb.Styles.isMobile ? 32 : 48
+  const avatarSize = isSelfSigned ? 16 : isMobile ? 32 : 48
   const usernameType = isSelfSigned ? 'BodySmallBold' : 'BodyBold'
 
-  const space = Kb.Styles.isMobile ? '' : ' '
+  const space = isMobile ? '' : ' '
   const signedByText = `Signed by ${isSelfSigned ? `${space}you` : ''}`
 
   if (!state.outputStatus) {
@@ -143,7 +143,7 @@ export const OutputInfoBanner = ({outputStatus, children}: OutputInfoProps) =>
       color="grey"
       style={styles.banner}
       textContainerStyle={styles.bannerContainer}
-      narrow={Kb.Styles.isMobile}
+      narrow={isMobile}
     >
       {children}
     </Kb.Banner>
@@ -188,7 +188,7 @@ export const CryptoOutputActionsBar = ({
 
   return state.outputStatus === 'success' ? (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.outputActionsBarContainer}>
-      {state.outputType === 'file' && !Kb.Styles.isMobile ? (
+      {state.outputType === 'file' && !isMobile ? (
         <Kb.ButtonBar direction="row" align="flex-start" style={styles.buttonBar}>
           <Kb.Button
             mode="Secondary"
@@ -207,7 +207,7 @@ export const CryptoOutputActionsBar = ({
               mode="Primary"
               label="Reply in chat"
               disabled={actionsDisabled}
-              fullWidth={Kb.Styles.isMobile}
+              fullWidth={isMobile}
               onClick={() => onReplyInChat(state.outputSenderUsername ?? '')}
             />
           ) : null}
@@ -217,17 +217,17 @@ export const CryptoOutputActionsBar = ({
                 Copied to clipboard
               </Kb.Text>
             </Kb.Toast>
-            {Kb.Styles.isMobile && canReplyInChat ? null : (
+            {isMobile && canReplyInChat ? null : (
               <Kb.Button
-                mode={Kb.Styles.isMobile ? 'Primary' : 'Secondary'}
+                mode={isMobile ? 'Primary' : 'Secondary'}
                 label="Copy to clipboard"
                 disabled={actionsDisabled}
-                fullWidth={Kb.Styles.isMobile}
+                fullWidth={isMobile}
                 onClick={copy}
               />
             )}
           </Kb.Box2>
-          {canSaveAsText && !Kb.Styles.isMobile && onSaveAsText ? (
+          {canSaveAsText && !isMobile && onSaveAsText ? (
             <Kb.Button
               mode="Secondary"
               label="Save as TXT"
@@ -284,7 +284,7 @@ const OutputFileDestination = ({
   )
 }
 
-const MobileScroll = Kb.Styles.isMobile ? Kb.ScrollView : React.Fragment
+const MobileScroll = isMobile ? Kb.ScrollView : React.Fragment
 
 export const CryptoOutput = ({
   actionLabel,
diff --git a/shared/crypto/routes.tsx b/shared/crypto/routes.tsx
index 4911a1156b07..4efbcd54e07c 100644
--- a/shared/crypto/routes.tsx
+++ b/shared/crypto/routes.tsx
@@ -115,7 +115,7 @@ export const newRoutes = defineRouteMap({
     screen: VerifyInputScreen,
   },
   cryptoRoot: {
-    getOptions: C.isMobile ? {title: 'Crypto'} : {title: 'Crypto tools'},
+    getOptions: isMobile ? {title: 'Crypto'} : {title: 'Crypto tools'},
     screen: React.lazy(async () => import('./sub-nav')),
   },
 })
diff --git a/shared/crypto/sign.tsx b/shared/crypto/sign.tsx
index 521d25575c16..4dca50fca60d 100644
--- a/shared/crypto/sign.tsx
+++ b/shared/crypto/sign.tsx
@@ -34,7 +34,7 @@ const bannerMessage = Crypto.infoMessage.sign
 const filePrompt = 'Drop a file to sign'
 const inputEmptyWidth = 207
 const inputFileIcon = 'icon-file-64' as const
-const inputPlaceholder = C.isMobile ? 'Enter text to sign' : 'Enter text, drop a file or folder, or'
+const inputPlaceholder = isMobile ? 'Enter text to sign' : 'Enter text, drop a file or folder, or'
 
 const onError = (state: CommonState, errorMessage: string): CommonState => ({
   ...resetOutput(state),
@@ -135,7 +135,7 @@ const SignOutputBanner = ({state}: {state: CommonOutputRouteParams}) => (
   <OutputInfoBanner outputStatus={state.outputStatus}>
     <Kb.Text type="BodySmallSemibold" center={true}>
       This is your signed {state.outputType === 'file' ? 'file' : 'message'}, using{' '}
-      <Kb.Text type="BodySecondaryLink" underline={true} onClick={() => openURL(Crypto.saltpackDocumentation)}>
+      <Kb.Text type="BodySecondaryLink" underline={true} onClick={() => { void openURL(Crypto.saltpackDocumentation) }}>
         Saltpack
       </Kb.Text>
       . Anyone who has it can verify you signed it.
@@ -155,7 +155,7 @@ export const SignInput = (_props: unknown) => {
   const onRun = () => {
     const f = async () => {
       const next = await controller.sign()
-      if (C.isMobile) {
+      if (isMobile) {
         navigateAppend({name: Crypto.signOutput, params: next})
       }
     }
@@ -176,11 +176,11 @@ export const SignInput = (_props: unknown) => {
         onSetInput={controller.setInput}
         onClearInput={controller.clearInput}
       />
-      {C.isMobile ? <InputActionsBar runLabel="Sign" blurCBRef={blurCBRef} onRun={onRun} /> : null}
+      {isMobile ? <InputActionsBar runLabel="Sign" blurCBRef={blurCBRef} onRun={onRun} /> : null}
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.KeyboardAvoidingView2>{content}</Kb.KeyboardAvoidingView2>
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
@@ -195,7 +195,7 @@ export const SignOutput = ({route}: {route: {params: CommonOutputRouteParams}})
     <>
       <SignOutputBanner state={route.params} />
       <CryptoSignedSender isSelfSigned={true} state={state} />
-      {C.isMobile ? <Kb.Divider /> : null}
+      {isMobile ? <Kb.Divider /> : null}
       <CryptoOutput
         actionLabel="Sign"
         outputFileIcon="icon-file-saltpack-64"
@@ -207,7 +207,7 @@ export const SignOutput = ({route}: {route: {params: CommonOutputRouteParams}})
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     content
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.outputDesktopMaxHeight}>
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 68%
rename from shared/crypto/sub-nav/index.desktop.tsx
rename to shared/crypto/sub-nav/index.tsx
index 4a734f2d66ee..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 Common from '@/router-v2/common.desktop'
-import LeftNav from './left-nav.desktop'
+import * as Kb from '@/common-adapters'
+import * as Common from '@/router-v2/common'
+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/crypto/sub-nav/nav-row.tsx b/shared/crypto/sub-nav/nav-row.tsx
index 166f6bd3ab5b..9b67aac9e95a 100644
--- a/shared/crypto/sub-nav/nav-row.tsx
+++ b/shared/crypto/sub-nav/nav-row.tsx
@@ -64,7 +64,7 @@ const NavRow = (props: Props) => {
       <Kb.RichButton title={title} description={description} icon={illustration} onClick={onClick} />
     ) : null
 
-  return Kb.Styles.isMobile ? mobileRow : desktopRow
+  return isMobile ? mobileRow : desktopRow
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
diff --git a/shared/crypto/verify.tsx b/shared/crypto/verify.tsx
index 3f1c5cae3c55..a0ca905b0065 100644
--- a/shared/crypto/verify.tsx
+++ b/shared/crypto/verify.tsx
@@ -32,7 +32,7 @@ const bannerMessage = Crypto.infoMessage.verify
 const filePrompt = 'Drop a file to verify'
 const inputEmptyWidth = 342
 const inputFileIcon = 'icon-file-saltpack-64' as const
-const inputPlaceholder = C.isMobile
+const inputPlaceholder = isMobile
   ? 'Enter text to verify'
   : 'Enter a signed message, drop a signed file or folder, or'
 
@@ -143,7 +143,7 @@ export const VerifyInput = (_props: unknown) => {
   const onRun = () => {
     const f = async () => {
       const next = await controller.verify()
-      if (C.isMobile) {
+      if (isMobile) {
         navigateAppend({name: Crypto.verifyOutput, params: next})
       }
     }
@@ -163,11 +163,11 @@ export const VerifyInput = (_props: unknown) => {
         onSetInput={controller.setInput}
         onClearInput={controller.clearInput}
       />
-      {C.isMobile ? <InputActionsBar runLabel="Verify" onRun={onRun} /> : null}
+      {isMobile ? <InputActionsBar runLabel="Verify" onRun={onRun} /> : null}
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     <Kb.KeyboardAvoidingView2>{content}</Kb.KeyboardAvoidingView2>
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.inputDesktopMaxHeight}>
@@ -180,9 +180,9 @@ export const VerifyOutput = ({route}: {route: {params: CommonOutputRouteParams}}
   const state = route.params
   const content = (
     <>
-      {C.isMobile && state.errorMessage ? <CryptoBanner key="banner" infoMessage={bannerMessage} state={state} /> : null}
+      {isMobile && state.errorMessage ? <CryptoBanner key="banner" infoMessage={bannerMessage} state={state} /> : null}
       <CryptoSignedSender isSelfSigned={false} state={state} />
-      {C.isMobile ? <Kb.Divider /> : null}
+      {isMobile ? <Kb.Divider /> : null}
       <CryptoOutput
         actionLabel="Verify"
         outputFileIcon="icon-file-64"
@@ -194,7 +194,7 @@ export const VerifyOutput = ({route}: {route: {params: CommonOutputRouteParams}}
     </>
   )
 
-  return C.isMobile ? (
+  return isMobile ? (
     content
   ) : (
     <Kb.Box2 direction="vertical" fullHeight={true} style={Crypto.outputDesktopMaxHeight}>
diff --git a/shared/desktop-only-modules.js b/shared/desktop-only-modules.js
new file mode 100644
index 000000000000..8ed9c8eedf72
--- /dev/null
+++ b/shared/desktop-only-modules.js
@@ -0,0 +1,11 @@
+/* global module */
+
+// Desktop-only packages with no mobile equivalent.
+// Metro stubs these to null-module.js so they never enter the iOS/Android bundle.
+// When a merged .tsx file adds a new desktop-only package in a !isMobile branch, add it here.
+module.exports = [
+  'lottie-web',
+  'react-dom',
+  '@legendapp/list/react',
+  'emoji-datasource-apple/img/apple/sheets/64.png',
+]
diff --git a/shared/desktop/app/app-events.desktop.tsx b/shared/desktop/app/app-events.desktop.tsx
index b2a3579d0837..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.desktop'
-import KB2 from '@/util/electron.desktop'
+import {allowMultipleInstances} from '@/local-debug'
+import KB2 from '@/util/electron'
 const {env} = KB2.constants
 
 const isPathSaltpack = (p: string) =>
diff --git a/shared/desktop/app/dev-tools.desktop.tsx b/shared/desktop/app/dev-tools.desktop.tsx
index 4b07707449a8..a092ae67b3a0 100644
--- a/shared/desktop/app/dev-tools.desktop.tsx
+++ b/shared/desktop/app/dev-tools.desktop.tsx
@@ -1,5 +1,5 @@
 import * as Electron from 'electron'
-import {showDevTools} from '@/local-debug.desktop'
+import {showDevTools} from '@/local-debug'
 import flags from '@/util/feature-flags'
 
 function setupOpenDevtools() {
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 6e3300faeb14..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'
@@ -17,7 +17,7 @@ import * as RPCTypes from '@/constants/rpc/rpc-gen'
 import {ensureError} from '@/util/errors'
 import type {Action} from '../app/ipctypes'
 import type {Engine} from '@/engine'
-import {showDevTools, skipSecondaryDevtools, allowMultipleInstances} from '@/local-debug.desktop'
+import {showDevTools, skipSecondaryDevtools, allowMultipleInstances} from '@/local-debug'
 
 const remoteURL = (windowComponent: string, windowParam: string) =>
   htmlURL(windowComponent, `param=${windowParam}`)
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/stubs/react-native-picker.js b/shared/desktop/stubs/react-native-picker.js
new file mode 100644
index 000000000000..0cf1d3391ef6
--- /dev/null
+++ b/shared/desktop/stubs/react-native-picker.js
@@ -0,0 +1,3 @@
+/* global module */
+// Desktop stub for @react-native-picker/picker. Never rendered on desktop.
+module.exports = {}
diff --git a/shared/desktop/stubs/react-native-safe-area-context.js b/shared/desktop/stubs/react-native-safe-area-context.js
new file mode 100644
index 000000000000..ecd2352292ee
--- /dev/null
+++ b/shared/desktop/stubs/react-native-safe-area-context.js
@@ -0,0 +1,21 @@
+/* global module, require */
+// Desktop stub for react-native-safe-area-context.
+// Desktop has no safe-area insets; all values are zero.
+// SafeAreaInsetsContext must be a real React context so @react-navigation/elements
+// can call React.use(SafeAreaInsetsContext) without throwing.
+const React = require('react')
+
+const zeroInsets = {bottom: 0, left: 0, right: 0, top: 0}
+const zeroFrame = {height: 0, width: 0, x: 0, y: 0}
+
+/* eslint-disable react/display-name */
+module.exports = {
+  SafeAreaFrameContext: React.createContext(zeroFrame),
+  SafeAreaInsetsContext: React.createContext(null),
+  SafeAreaProvider: ({children}) => children,
+  SafeAreaView: ({children}) => children,
+  initialWindowMetrics: null,
+  useSafeAreaFrame: () => zeroFrame,
+  useSafeAreaInsets: () => zeroInsets,
+}
+/* eslint-enable react/display-name */
diff --git a/shared/desktop/webpack.config.mts b/shared/desktop/webpack.config.mts
index 187ee2fd1ea8..7b2ea6fcf88e 100644
--- a/shared/desktop/webpack.config.mts
+++ b/shared/desktop/webpack.config.mts
@@ -42,6 +42,7 @@ const nullLoadedAssetDirectories = [
   path.resolve(__dirname, '../images/icons'),
 ]
 const resourceAssetDirectories = [
+  path.resolve(__dirname, '../images'),
   path.resolve(__dirname, '../images/illustrations'),
   path.resolve(__dirname, '../images/install'),
 ]
@@ -65,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
@@ -73,9 +80,16 @@ const makeAlias = (isDev: boolean): Record<string, string | false> => {
     {
       'react-native$': 'react-native-web',
       'react-native-reanimated': false,
+      'react-native/Libraries/Image/resolveAssetSource': nullModulePath,
     }
   )
 
+  // Override the null-module for packages that need a real stub on desktop.
+  // These are in native-only-modules (so Jest gets an empty stub) but webpack
+  // needs proper exports so renderer code (e.g. @react-navigation/elements) works.
+  alias['react-native-safe-area-context'] = path.resolve(__dirname, './stubs/react-native-safe-area-context.js')
+  alias['@react-native-picker/picker'] = path.resolve(__dirname, './stubs/react-native-picker.js')
+
   if (!isDev) {
     alias['@welldone-software/why-did-you-render'] = false
   }
@@ -89,6 +103,10 @@ const makeDefineValues = (isDev: boolean, isHot: boolean, isProfile: boolean, fi
   __DEV__: isDev,
   __HOT__: isHot,
   __VERSION__: isDev ? JSON.stringify('Development') : JSON.stringify(process.env['APP_VERSION']),
+  isMobile: JSON.stringify(false),
+  isElectron: JSON.stringify(true),
+  isAndroid: JSON.stringify(false),
+  isIOS: JSON.stringify(false),
 })
 
 const makeBabelLoader = (isDev: boolean, isHot: boolean, nodeThread: boolean): RuleSetRule['use'] => [
@@ -157,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),
   },
@@ -338,7 +363,12 @@ const config = (_: unknown, {mode}: {mode?: 'development' | 'none' | 'production
     cache: {
       type: 'filesystem',
       buildDependencies: {
-        config: [configPath, babelConfigPath],
+        config: [
+          configPath,
+          babelConfigPath,
+          path.resolve(rootDir, 'ignored-modules.js'),
+          path.resolve(rootDir, 'native-only-modules.js'),
+        ],
         fonts: [path.resolve(__dirname, '../fonts/.font-build-stamp')],
       },
     },
diff --git a/shared/devices/add-device.tsx b/shared/devices/add-device.tsx
index 5eb8935aaef4..66f8af6cf1f0 100644
--- a/shared/devices/add-device.tsx
+++ b/shared/devices/add-device.tsx
@@ -70,7 +70,7 @@ export default function AddDevice(ownProps: OwnProps) {
             </Kb.Text>
           </Kb.Box2>
           <Kb.Box2
-            direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'}
+            direction={isMobile ? 'vertical' : 'horizontal'}
             gap="mediumLarge"
             style={styles.deviceOptions}
             gapEnd={true}
@@ -105,7 +105,7 @@ type DeviceOptionProps = {
   onClick: () => void
   type: 'computer' | 'paper key' | 'phone'
 }
-const bigIcon = C.isLargeScreen && Kb.Styles.isMobile
+const bigIcon = C.isLargeScreen && isMobile
 const getIconType = (deviceType: DeviceOptionProps['type'], iconNumber?: number) => {
   let iconType: string
   const size = bigIcon ? 96 : 64
@@ -131,12 +131,12 @@ const DeviceOption = ({highlight, iconNumber, onClick, type}: DeviceOptionProps)
       className="hover_background_color_blueLighter2"
       style={Kb.Styles.collapseStyles([
         styles.deviceOption,
-        Kb.Styles.isMobile && highlight && styles.deviceOptionHighlighted,
+        isMobile && highlight && styles.deviceOptionHighlighted,
       ])}
       direction="vertical"
       centerChildren={true}
       gap="xtiny"
-      gapEnd={!Kb.Styles.isMobile}
+      gapEnd={!isMobile}
     >
       <Kb.ImageIcon type={getIconType(type, iconNumber)} />
       <Kb.Text type="BodySemibold">
@@ -155,7 +155,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
       borderStyle: 'solid',
       borderWidth: 1,
       padding: Kb.Styles.globalMargins.tiny,
-      width: Kb.Styles.isMobile ? 192 : 168,
+      width: isMobile ? 192 : 168,
     },
     isElectron: {
       ...Kb.Styles.transition('background-color'),
diff --git a/shared/devices/device-revoke.tsx b/shared/devices/device-revoke.tsx
index d399001202ea..fb5b08edbe93 100644
--- a/shared/devices/device-revoke.tsx
+++ b/shared/devices/device-revoke.tsx
@@ -37,24 +37,24 @@ const EndangeredTLFList = (props: {endangeredTLFs: Array<string>}) => {
 
 const ActionButtons = ({onCancel, onSubmit}: {onCancel: () => void; onSubmit: () => void}) => (
   <Kb.Box2
-    direction={Kb.Styles.isMobile ? 'vertical' : 'horizontalReverse'}
-    fullWidth={Kb.Styles.isMobile}
+    direction={isMobile ? 'vertical' : 'horizontalReverse'}
+    fullWidth={isMobile}
     gap="tiny"
   >
     <Kb.WaitingButton
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
       type="Danger"
       label="Yes, delete it"
       waitingKey={C.waitingKeyDevices}
       onClick={onSubmit}
     />
-    <Kb.Button fullWidth={Kb.Styles.isMobile} type="Dim" onClick={onCancel} label="Cancel" />
+    <Kb.Button fullWidth={isMobile} type="Dim" onClick={onCancel} label="Cancel" />
   </Kb.Box2>
 )
 
 const getIcon = (deviceType: T.Devices.DeviceType, iconNumber: T.Devices.IconNumber) => {
   let iconType: Kb.IconType
-  const size = Kb.Styles.isMobile ? 64 : 48
+  const size = isMobile ? 64 : 48
   switch (deviceType) {
     case 'backup':
       iconType = `icon-paper-key-revoke-${size}`
@@ -69,7 +69,7 @@ const getIcon = (deviceType: T.Devices.DeviceType, iconNumber: T.Devices.IconNum
   if (Kb.isValidIconType(iconType)) {
     return iconType
   }
-  return Kb.Styles.isMobile ? 'icon-computer-revoke-64' : 'icon-computer-revoke-48'
+  return isMobile ? 'icon-computer-revoke-64' : 'icon-computer-revoke-48'
 }
 
 const rpcDeviceToDevice = (d: T.RPCGen.DeviceDetail): T.Devices.Device => ({
@@ -122,7 +122,7 @@ const useRevoke = (device: T.Devices.Device) => {
             C.waitingKeyDevices
           )
           useConfigState.getState().dispatch.revoke(deviceName, wasCurrentDevice)
-          navUpToScreen(C.isMobile ? settingsDevicesTab : 'devicesRoot')
+          navUpToScreen(isMobile ? settingsDevicesTab : 'devicesRoot')
         } catch {}
       }
     }
@@ -240,7 +240,7 @@ const DeviceRevoke = (ownProps: OwnProps) => {
         )}
         ?
       </Kb.Text>
-      <Kb.Box2 direction="vertical" style={styles.endangeredTLFContainer} fullWidth={Kb.Styles.isMobile}>
+      <Kb.Box2 direction="vertical" style={styles.endangeredTLFContainer} fullWidth={isMobile}>
         {!props.waiting && <EndangeredTLFList endangeredTLFs={props.endangeredTLFs} />}
       </Kb.Box2>
       <ActionButtons onCancel={props.onCancel} onSubmit={props.onSubmit} />
diff --git a/shared/devices/index.tsx b/shared/devices/index.tsx
index c59eab679179..0f46f1265a21 100644
--- a/shared/devices/index.tsx
+++ b/shared/devices/index.tsx
@@ -79,7 +79,7 @@ function ReloadableDevices() {
   const revokedCount = devices.reduce((count, device) => (device.revokedAt ? count + 1 : count), 0)
 
   React.useEffect(() => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       return
     }
     navigation.setOptions({
@@ -142,7 +142,7 @@ function ReloadableDevices() {
 
   return (
     <Kb.Reloadable
-      onBack={C.isMobile ? onBack : undefined}
+      onBack={isMobile ? onBack : undefined}
       waitingKeys={C.waitingKeyDevices}
       onReload={loadDevices}
       reloadOnMount={true}
@@ -150,7 +150,7 @@ function ReloadableDevices() {
     >
       <NewContext value={badged}>
         <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} relative={true}>
-          {Kb.Styles.isMobile ? (
+          {isMobile ? (
             <Kb.ClickableBox onClick={() => onAddDevice()} style={headerStyles.container}>
               <Kb.Button label="Add a device or paper key" fullWidth={true} />
               {waiting ? (
@@ -196,7 +196,7 @@ const headerStyles = Kb.Styles.styleSheetCreate(() => ({
   container: {
     ...Kb.Styles.globalStyles.flexBoxRow,
     alignItems: 'center',
-    height: Kb.Styles.isMobile ? 64 : 48,
+    height: isMobile ? 64 : 48,
     justifyContent: 'center',
     paddingLeft: Kb.Styles.globalMargins.small,
     paddingRight: Kb.Styles.globalMargins.small,
@@ -209,16 +209,16 @@ const PaperKeyNudge = ({onAddDevice}: {onAddDevice: () => void}) => (
     <Kb.Box2 direction="horizontal" style={paperKeyNudgeStyles.container} fullWidth={true}>
       <Kb.Box2 direction="horizontal" gap="xsmall" alignItems="center" style={paperKeyNudgeStyles.border}>
         <Kb.IconAuto
-          type={Kb.Styles.isMobile ? 'icon-onboarding-paper-key-48' : 'icon-onboarding-paper-key-32'}
+          type={isMobile ? 'icon-onboarding-paper-key-48' : 'icon-onboarding-paper-key-32'}
         />
         <Kb.Box2 direction="vertical" flex={1}>
           <Kb.Text type="BodySemibold">Create a paper key</Kb.Text>
-          <Kb.Text type={Kb.Styles.isMobile ? 'BodySmall' : 'Body'} style={paperKeyNudgeStyles.desc}>
+          <Kb.Text type={isMobile ? 'BodySmall' : 'Body'} style={paperKeyNudgeStyles.desc}>
             A paper key can be used to access your account in case you lose all your devices. Keep one in a
             safe place (like a wallet) to keep your data safe.
           </Kb.Text>
         </Kb.Box2>
-        {!Kb.Styles.isMobile && <Kb.Text type="BodyBigLink">Create a paper key</Kb.Text>}
+        {!isMobile && <Kb.Text type="BodyBigLink">Create a paper key</Kb.Text>}
       </Kb.Box2>
     </Kb.Box2>
   </Kb.ClickableBox>
diff --git a/shared/devices/paper-key.tsx b/shared/devices/paper-key.tsx
index 3b8cc3c7d2e5..0d4987c87fc0 100644
--- a/shared/devices/paper-key.tsx
+++ b/shared/devices/paper-key.tsx
@@ -77,7 +77,7 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       container: {
         alignSelf: 'center',
-        maxWidth: Kb.Styles.isMobile ? undefined : 560,
+        maxWidth: isMobile ? undefined : 560,
         padding: Kb.Styles.globalMargins.medium,
       },
       intro: {textAlign: 'center'},
diff --git a/shared/devices/routes.tsx b/shared/devices/routes.tsx
index 5748b3586178..c2294725dda1 100644
--- a/shared/devices/routes.tsx
+++ b/shared/devices/routes.tsx
@@ -38,7 +38,7 @@ export const newRoutes = defineRouteMap({
     }
   ),
   devicesRoot: {
-    getOptions: C.isMobile
+    getOptions: isMobile
       ? {title: 'Devices'}
       : {
           headerRightActions: HeaderRightActions,
@@ -53,7 +53,7 @@ export const newModalRoutes = defineRouteMap({
   ...provisionNewRoutes,
   deviceAdd: C.makeScreen(React.lazy(async () => import('./add-device')), {
     getOptions: {
-      headerLeft: C.isMobile ? () => <AddDeviceCancelButton /> : undefined,
+      headerLeft: isMobile ? () => <AddDeviceCancelButton /> : undefined,
       modalStyle: {width: 620},
       title: 'Add a device',
     },
diff --git a/shared/devices/row.tsx b/shared/devices/row.tsx
index 6aadef077bf4..ba9b2b77e031 100644
--- a/shared/devices/row.tsx
+++ b/shared/devices/row.tsx
@@ -65,7 +65,7 @@ const styles = Kb.Styles.styleSheetCreate(
       icon: {opacity: 0.3},
       meta: {
         alignSelf: 'center',
-        marginLeft: Kb.Styles.isMobile ? Kb.Styles.globalMargins.xxtiny : Kb.Styles.globalMargins.xtiny,
+        marginLeft: isMobile ? Kb.Styles.globalMargins.xxtiny : Kb.Styles.globalMargins.xtiny,
       },
       text: {
         color: Kb.Styles.globalColors.black_20,
diff --git a/shared/engine/index-impl.tsx b/shared/engine/index-impl.tsx
index 7b421ec8468d..327d1b91f8bc 100644
--- a/shared/engine/index-impl.tsx
+++ b/shared/engine/index-impl.tsx
@@ -6,7 +6,6 @@ import throttle from 'lodash/throttle'
 import type {CustomResponseIncomingCallMapType, IncomingCallMapType, BatchParams} from './index.shared'
 import type {SessionIDKey, MethodKey} from './types'
 import {initEngine, initEngineListener} from './require'
-import {isMobile} from '@/constants/platform'
 import {printOutstandingRPCs} from '@/local-debug'
 import {resetClient, createClient, rpcLog, type CreateClientType, type PayloadType} from './index.platform'
 import {type RPCError, convertToError} from '@/util/errors'
diff --git a/shared/engine/index.native.tsx b/shared/engine/index.native.tsx
deleted file mode 100644
index 119d27a09943..000000000000
--- a/shared/engine/index.native.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {default, getEngine, makeEngine, Engine} from './index-impl'
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/engine/index.desktop.tsx b/shared/engine/index.tsx
similarity index 100%
rename from shared/engine/index.desktop.tsx
rename to shared/engine/index.tsx
diff --git a/shared/engine/session.native.tsx b/shared/engine/session.native.tsx
deleted file mode 100644
index 1cc4a6451cef..000000000000
--- a/shared/engine/session.native.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export {default} from './session-impl'
-export type {CancelHandlerType} from './session-impl'
diff --git a/shared/engine/session.desktop.tsx b/shared/engine/session.tsx
similarity index 100%
rename from shared/engine/session.desktop.tsx
rename to shared/engine/session.tsx
diff --git a/shared/fs/banner/reset-banner.tsx b/shared/fs/banner/reset-banner.tsx
index 7f286b475767..6f80ce1056b2 100644
--- a/shared/fs/banner/reset-banner.tsx
+++ b/shared/fs/banner/reset-banner.tsx
@@ -56,7 +56,7 @@ const ConnectedBanner = (ownProps: OwnProps) => {
       style={Kb.Styles.collapseStyles([styles.banner, fixedHeight(getHeight(resetParticipants.length))])}
     >
       <Kb.IconAuto
-        type={C.isMobile ? 'icon-skull-64' : 'icon-skull-48'}
+        type={isMobile ? 'icon-skull-64' : 'icon-skull-48'}
         style={{height: Kb.Styles.globalMargins.xlarge, margin: Kb.Styles.globalMargins.medium}}
       />
       <Kb.Box2 direction="vertical" centerChildren={true} style={styles.textIntro}>
@@ -101,7 +101,7 @@ const ConnectedBanner = (ownProps: OwnProps) => {
       </Kb.Box2>
       <Kb.Box2 direction="vertical" gap="small">
         {resetParticipants.map(p => (
-          <Kb.Box2 direction={C.isMobile ? 'vertical' : 'horizontal'} key={p} gap="tiny">
+          <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontal'} key={p} gap="tiny">
             <Kb.Button
               mode="Secondary"
               label={'View ' + p + "'s profile"}
@@ -153,10 +153,10 @@ export const asRows = (
  * layout changes.
  *
  */
-const addedHeightPerResetUser = C.isMobile
+const addedHeightPerResetUser = isMobile
   ? 2 * Kb.Styles.globalMargins.large + Kb.Styles.globalMargins.tiny + Kb.Styles.globalMargins.small
   : Kb.Styles.globalMargins.large + Kb.Styles.globalMargins.tiny
-const baseHeight = C.isMobile ? 440 : 378 // Change this when layout changes
+const baseHeight = isMobile ? 440 : 378 // Change this when layout changes
 export const getHeight = (numResetUsers: number) => baseHeight + numResetUsers * addedHeightPerResetUser
 
 const fixedHeight = (height: number) => ({
@@ -177,8 +177,8 @@ const styles = Kb.Styles.styleSheetCreate(
         isMobile: {width: Kb.Styles.globalMargins.xlarge * 5},
       }),
       listTextContainer: {
-        ...fixedHeight(C.isMobile ? Kb.Styles.globalMargins.large * 3 : Kb.Styles.globalMargins.large * 2),
-        maxWidth: C.isMobile ? 280 : 400,
+        ...fixedHeight(isMobile ? Kb.Styles.globalMargins.large * 3 : Kb.Styles.globalMargins.large * 2),
+        maxWidth: isMobile ? 280 : 400,
       },
       primaryOnRed: {backgroundColor: Kb.Styles.globalColors.white},
       primaryOnRedLabel: {color: Kb.Styles.globalColors.redDark},
diff --git a/shared/fs/browser/destination-picker.tsx b/shared/fs/browser/destination-picker.tsx
index 054744fedff4..d0de385e8141 100644
--- a/shared/fs/browser/destination-picker.tsx
+++ b/shared/fs/browser/destination-picker.tsx
@@ -18,7 +18,7 @@ type OwnProps = {
   source: T.FS.MoveOrCopySource | T.FS.IncomingShareSource
 }
 
-const canBackUp = C.isMobile
+const canBackUp = isMobile
   ? (parentPath: T.FS.Path) => T.FS.getPathLevel(parentPath) > 1
   : () => false
 
@@ -118,7 +118,7 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => {
   return (
     <>
       <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} fullWidth={true} fullHeight={true}>
-        {!Kb.Styles.isMobile && (
+        {!isMobile && (
           <Kb.Box2 direction="horizontal" fullWidth={true} centerChildren={true} style={styles.anotherHeader} justifyContent="space-between">
             <NavHeaderTitle destinationPickerSource={source} inDestinationPicker={true} path={parentPath} />
             {!!onNewFolder && <NewFolder onNewFolder={onNewFolder} />}
@@ -164,8 +164,8 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => {
         ) : (
           <Rows path={parentPath} destinationPickerSource={source} />
         )}
-        {Kb.Styles.isMobile && <Kb.Divider key="dfooter" />}
-        {(!Kb.Styles.isMobile || onNewFolder) && (
+        {isMobile && <Kb.Divider key="dfooter" />}
+        {(!isMobile || onNewFolder) && (
           <Kb.Box2
             key="footer"
             direction="horizontal"
@@ -173,7 +173,7 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => {
             fullWidth={true}
             style={styles.footer}
           >
-            {Kb.Styles.isMobile ? (
+            {isMobile ? (
               <NewFolder onNewFolder={onNewFolder} />
             ) : (
               <Kb.Button type="Dim" label="Cancel" onClick={onCancel} />
diff --git a/shared/fs/browser/index.tsx b/shared/fs/browser/index.tsx
index b8adc9fab437..b34d93e77f27 100644
--- a/shared/fs/browser/index.tsx
+++ b/shared/fs/browser/index.tsx
@@ -66,7 +66,7 @@ const SelfReset = (_: Props) => (
       />
     </Kb.Banner>
     <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexGrow} centerChildren={true}>
-      <Kb.ImageIcon type={C.isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
+      <Kb.ImageIcon type={isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
     </Kb.Box2>
   </Kb.Box2>
 )
diff --git a/shared/fs/browser/rows/rows-container.tsx b/shared/fs/browser/rows/rows-container.tsx
index d154d8a89457..c3b952d1d1f4 100644
--- a/shared/fs/browser/rows/rows-container.tsx
+++ b/shared/fs/browser/rows/rows-container.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as T from '@/constants/types'
 import * as RowTypes from './types'
 import {sortRowItems, type SortableRowItem} from './sort'
@@ -225,7 +224,7 @@ const Container = (o: OwnProps) => {
       // TODO: add `footerRows` and inject these from destination-picker, so that
       // Rows componenet don't need to worry about whether it's in
       // destinationPicker mode or not.
-      (!C.isMobile && inDestinationPicker
+      (!isMobile && inDestinationPicker
         ? [
             {key: 'empty:0', rowType: RowTypes.RowType.Empty} as RowTypes.EmptyRowItem,
             {key: 'empty:1', rowType: RowTypes.RowType.Empty} as RowTypes.EmptyRowItem,
diff --git a/shared/fs/browser/rows/tlf-type.tsx b/shared/fs/browser/rows/tlf-type.tsx
index 64198595a7c8..a16d5da4aaeb 100644
--- a/shared/fs/browser/rows/tlf-type.tsx
+++ b/shared/fs/browser/rows/tlf-type.tsx
@@ -24,7 +24,7 @@ const TLFTypeContainer = (p: OwnProps) => {
         <Kb.Text
           type={FS.pathTypeToTextType(T.FS.PathType.Folder)}
           style={rowStyles.rowText}
-          lineClamp={Kb.Styles.isMobile ? 1 : undefined}
+          lineClamp={isMobile ? 1 : undefined}
         >
           {T.FS.getPathName(path)}
         </Kb.Text>
diff --git a/shared/fs/browser/rows/tlf.tsx b/shared/fs/browser/rows/tlf.tsx
index fcfeee8e885b..512b873458d5 100644
--- a/shared/fs/browser/rows/tlf.tsx
+++ b/shared/fs/browser/rows/tlf.tsx
@@ -61,9 +61,9 @@ const TLFContainer = (p: OwnProps) => {
         onOpen={disabled ? undefined : onOpen}
         mixedMode={mixedMode}
         writingToJournal={false}
-        body={Kb.Styles.isMobile ? <Kb.Box2 direction="vertical" fullWidth={true} style={rowStyles.itemBox}>{content}</Kb.Box2> : undefined}
+        body={isMobile ? <Kb.Box2 direction="vertical" fullWidth={true} style={rowStyles.itemBox}>{content}</Kb.Box2> : undefined}
         content={
-          !Kb.Styles.isMobile ? (
+          !isMobile ? (
             <>
               {content}
               {avatar}
diff --git a/shared/fs/common/folder-view-filter.tsx b/shared/fs/common/folder-view-filter.tsx
index d37a66185b0c..9b59d9da9734 100644
--- a/shared/fs/common/folder-view-filter.tsx
+++ b/shared/fs/common/folder-view-filter.tsx
@@ -19,7 +19,7 @@ const FolderViewFilter = (props: Props) => {
       size="small"
       placeholderCentered={true}
       mobileCancelButton={true}
-      focusOnMount={Kb.Styles.isMobile}
+      focusOnMount={isMobile}
       hotkey="f"
       onCancel={props.onCancel}
       onChange={props.onChangeFilter}
diff --git a/shared/fs/common/hooks.tsx b/shared/fs/common/hooks.tsx
index b68edf93f3e6..ca916453f7bb 100644
--- a/shared/fs/common/hooks.tsx
+++ b/shared/fs/common/hooks.tsx
@@ -1212,7 +1212,7 @@ export const useFsFileContext = (
   }
 }
 
-export const useFsWatchDownloadForMobile = C.isMobile
+export const useFsWatchDownloadForMobile = isMobile
   ? (downloadID: string, downloadIntent?: T.FS.DownloadIntent): boolean => {
       const dlInfo = useFsDownloadInfo(downloadID)
       const {fileContext} = useFsFileContext(dlInfo.path)
diff --git a/shared/fs/common/kbfs-path.tsx b/shared/fs/common/kbfs-path.tsx
index df7d5a51b5f7..8d3759219e72 100644
--- a/shared/fs/common/kbfs-path.tsx
+++ b/shared/fs/common/kbfs-path.tsx
@@ -50,10 +50,10 @@ const KbfsPathPopup = (props: PopupProps) => {
       attachTo={props.attachRef}
       onHidden={props.onHidden}
       position="top center"
-      propagateOutsideClicks={!Kb.Styles.isMobile}
+      propagateOutsideClicks={!isMobile}
       header={header}
       items={
-        Kb.Styles.isMobile
+        isMobile
           ? [
               'Divider',
               {
@@ -87,7 +87,7 @@ const KbfsPath = (props: Props) => {
   const popup = showing ? (
     <KbfsPathPopup attachRef={textRef} visible={showing} onHidden={() => setShowing(false)} {...props} />
   ) : null
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <>
       {text}
       {popup}
diff --git a/shared/fs/common/last-modified-line.tsx b/shared/fs/common/last-modified-line.tsx
index ce69e98be586..c488ed083b65 100644
--- a/shared/fs/common/last-modified-line.tsx
+++ b/shared/fs/common/last-modified-line.tsx
@@ -10,7 +10,7 @@ export type OwnProps = {
 }
 
 const Username = ({mode, lastWriter}: {mode: OwnProps['mode']; lastWriter: string}) =>
-  mode === 'row' && Kb.Styles.isMobile ? (
+  mode === 'row' && isMobile ? (
     <Kb.Text type="BodySmall">{lastWriter}</Kb.Text>
   ) : (
     <Kb.ConnectedUsernames
diff --git a/shared/fs/common/path-item-action/layout.tsx b/shared/fs/common/path-item-action/layout.tsx
index ec63a3a52b64..e0ce29b561ea 100644
--- a/shared/fs/common/path-item-action/layout.tsx
+++ b/shared/fs/common/path-item-action/layout.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as T from '@/constants/types'
 import * as FS from '@/constants/fs'
 
@@ -56,7 +55,7 @@ const getRawLayout = (
     case T.FS.PathKind.TlfList:
       return {
         ...empty,
-        showInSystemFileManager: !C.isMobile,
+        showInSystemFileManager: !isMobile,
       }
     case T.FS.PathKind.GroupTlf:
     case T.FS.PathKind.TeamTlf:
@@ -71,7 +70,7 @@ const getRawLayout = (
           : {}),
         archive: true,
         ignoreTlf: parsedPath.kind === T.FS.PathKind.TeamTlf || !isMyOwn(parsedPath, me),
-        showInSystemFileManager: !C.isMobile,
+        showInSystemFileManager: !isMobile,
       }
     case T.FS.PathKind.InGroupTlf:
     case T.FS.PathKind.InTeamTlf:
@@ -87,16 +86,16 @@ const getRawLayout = (
           : {}),
         archive: true,
         delete: pathItem.writable,
-        download: pathItem.type === T.FS.PathType.File && !C.isIOS,
+        download: pathItem.type === T.FS.PathType.File && !isIOS,
         moveOrCopy: true,
         rename: pathItem.writable && mode === 'row',
         saveMedia:
-          C.isMobile && pathItem.type === T.FS.PathType.File && FS.canSaveMedia(pathItem, fileContext),
-        showInSystemFileManager: !C.isMobile,
+          isMobile && pathItem.type === T.FS.PathType.File && FS.canSaveMedia(pathItem, fileContext),
+        showInSystemFileManager: !isMobile,
         // share menu items
         // eslint-disable-next-line sort-keys
         sendAttachmentToChat: pathItem.type === T.FS.PathType.File,
-        sendToOtherApp: pathItem.type === T.FS.PathType.File && C.isMobile,
+        sendToOtherApp: pathItem.type === T.FS.PathType.File && isMobile,
       }
     default:
       return empty
@@ -106,7 +105,7 @@ const getRawLayout = (
 const totalShare = (layout: Layout) => (layout.sendAttachmentToChat ? 1 : 0) + (layout.sendToOtherApp ? 1 : 0)
 
 const consolidateShares = (layout: Layout): Layout =>
-  C.isMobile && totalShare(layout) > 1
+  isMobile && totalShare(layout) > 1
     ? {
         ...layout,
         sendAttachmentToChat: false,
diff --git a/shared/fs/common/path-item-action/menu-container.tsx b/shared/fs/common/path-item-action/menu-container.tsx
index 6762ea4b28e6..53a9e07a976f 100644
--- a/shared/fs/common/path-item-action/menu-container.tsx
+++ b/shared/fs/common/path-item-action/menu-container.tsx
@@ -74,7 +74,7 @@ const Container = (op: OwnProps) => {
   const getLayout = view === T.FS.PathItemActionMenuView.Share ? getShareLayout : getRootLayout
   const layout = getLayout(mode, path, pathItem, fileContext, username)
   const cancel = () => {
-    if (C.isMobile && downloadID) {
+    if (isMobile && downloadID) {
       cancelDownload(downloadID)
     }
   }
@@ -133,7 +133,7 @@ const Container = (op: OwnProps) => {
       : []
 
   const fileContextLoading =
-    C.isMobile && pathItem.type === T.FS.PathType.File && fileContext === FS.emptyFileContext
+    isMobile && pathItem.type === T.FS.PathType.File && fileContext === FS.emptyFileContext
   const itemSave = (() => {
     if (!layout.saveMedia && !fileContextLoading) return []
     if (saving || fileContextLoading) {
diff --git a/shared/fs/common/pie-slice.tsx b/shared/fs/common/pie-slice.tsx
index da52293a3d7b..e1f9592cb15b 100644
--- a/shared/fs/common/pie-slice.tsx
+++ b/shared/fs/common/pie-slice.tsx
@@ -47,8 +47,8 @@ const PieSlice = (props: Props) => {
     <Slice degrees={props.degrees} style={props.style} negative={props.negative} />
   )
 }
-const pieSize = Kb.Styles.isMobile ? 16 : 12
-const pieHalfSize = Kb.Styles.isMobile ? 8 : 6
+const pieSize = isMobile ? 16 : 12
+const pieHalfSize = isMobile ? 8 : 6
 const stylePieHalf = {
   height: pieSize,
   position: 'absolute' as const,
diff --git a/shared/fs/common/tlf-info-line.tsx b/shared/fs/common/tlf-info-line.tsx
index 1e212cf5124e..9b02b37427df 100644
--- a/shared/fs/common/tlf-info-line.tsx
+++ b/shared/fs/common/tlf-info-line.tsx
@@ -45,7 +45,7 @@ const resetText = (props: Props) => {
     <Kb.Text
       type="BodySmallError"
       style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-      lineClamp={props.mode === 'row' && Kb.Styles.isMobile ? 1 : undefined}
+      lineClamp={props.mode === 'row' && isMobile ? 1 : undefined}
     >
       {text}
     </Kb.Text>
@@ -58,7 +58,7 @@ const getPrefixText = (props: Props) =>
       <Kb.Text
         type="BodySmall"
         style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-        lineClamp={props.mode === 'row' && Kb.Styles.isMobile ? 1 : undefined}
+        lineClamp={props.mode === 'row' && isMobile ? 1 : undefined}
       >
         {props.tlfType}/
       </Kb.Text>
@@ -70,14 +70,14 @@ const timeText = (props: Props) =>
     <Kb.Text
       type="BodySmall"
       style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-      lineClamp={props.mode === 'row' && Kb.Styles.isMobile ? 1 : undefined}
+      lineClamp={props.mode === 'row' && isMobile ? 1 : undefined}
     >
       {formatTimeForFS(props.tlfMtime, props.mode !== 'row')}
     </Kb.Text>
   ) : null
 
 const getText = (props: Props) => {
-  if (Kb.Styles.isMobile && props.mixedMode) {
+  if (isMobile && props.mixedMode) {
     // on mobile in fs root, don't show reset text, and only show time text
     // if reset badge isn't shown, i.e. not self reset
     return props.reset !== true ? timeText(props) : null
@@ -98,7 +98,7 @@ const TlfInfoLine = (props: Props) => {
     <Kb.Text
       type="BodySmall"
       style={props.mode === 'default' ? styles.textDefault : styles.textRow}
-      lineClamp={props.mode === 'row' && Kb.Styles.isMobile ? 1 : undefined}
+      lineClamp={props.mode === 'row' && isMobile ? 1 : undefined}
     >
       •&nbsp;
     </Kb.Text>
diff --git a/shared/fs/common/upload-button.tsx b/shared/fs/common/upload-button.tsx
index 23010a90e967..0f43bc94e854 100644
--- a/shared/fs/common/upload-button.tsx
+++ b/shared/fs/common/upload-button.tsx
@@ -61,7 +61,7 @@ const UploadButton = (props: UploadButtonProps) => {
   // On non-darwin desktop, show menu for file vs directory.
   return (
     <>
-      {C.isMobile ? (
+      {isMobile ? (
         <Kb.Icon type="iconfont-upload" padding="tiny" onClick={showPopup} />
       ) : (
         <Kb.Button onClick={showPopup} label="Upload" ref={popupAnchor} style={props.style} />
@@ -98,7 +98,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const openAndUploadDirectory = C.isElectron && !C.isDarwin ? _openAndUploadDirectory : undefined
+  const openAndUploadDirectory = isElectron && !C.isDarwin ? _openAndUploadDirectory : undefined
   const _openAndUploadFile = () => {
     const f = async () => {
       try {
@@ -110,7 +110,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const openAndUploadFile = C.isElectron && !C.isDarwin ? _openAndUploadFile : undefined
+  const openAndUploadFile = isElectron && !C.isDarwin ? _openAndUploadFile : undefined
   const _pickAndUploadMixed = () => {
     const f = async () => {
       try {
@@ -121,7 +121,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const pickAndUploadMixed = C.isMobile ? _pickAndUploadMixed : undefined
+  const pickAndUploadMixed = isMobile ? _pickAndUploadMixed : undefined
   const _pickAndUploadPhoto = () => {
     const f = async () => {
       try {
@@ -132,7 +132,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const pickAndUploadPhoto = C.isAndroid ? _pickAndUploadPhoto : undefined
+  const pickAndUploadPhoto = isAndroid ? _pickAndUploadPhoto : undefined
   const _pickAndUploadVideo = () => {
     const f = async () => {
       try {
@@ -143,7 +143,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const pickAndUploadVideo = C.isAndroid ? _pickAndUploadVideo : undefined
+  const pickAndUploadVideo = isAndroid ? _pickAndUploadVideo : undefined
   const _pickAndUploadFileMobile = () => {
     const f = async () => {
       try {
@@ -154,7 +154,7 @@ const Container = (ownProps: OwnProps) => {
     }
     C.ignorePromise(f())
   }
-  const pickAndUploadFileMobile = C.isMobile ? _pickAndUploadFileMobile : undefined
+  const pickAndUploadFileMobile = isMobile ? _pickAndUploadFileMobile : undefined
 
   const props = {
     canUpload: _pathItem.type === T.FS.PathType.Folder && _pathItem.writable,
@@ -162,7 +162,7 @@ const Container = (ownProps: OwnProps) => {
     openAndUploadDirectory,
     openAndUploadFile,
     pickAndUploadFile: pickAndUploadFileMobile,
-    pickAndUploadMixed: C.isIOS ? pickAndUploadMixed : undefined,
+    pickAndUploadMixed: isIOS ? pickAndUploadMixed : undefined,
     pickAndUploadPhoto,
     pickAndUploadVideo,
     style: ownProps.style,
diff --git a/shared/fs/common/use-open.tsx b/shared/fs/common/use-open.tsx
index 4c9000c1bad0..85c922c12a81 100644
--- a/shared/fs/common/use-open.tsx
+++ b/shared/fs/common/use-open.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as T from '@/constants/types'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {useFsPathItem} from './hooks'
@@ -16,7 +15,7 @@ export const useOpen = (props: Props) => {
     const knownType = pathItem.type !== T.FS.PathType.Unknown ? pathItem.type : undefined
     const knownTimestamp = pathItem.type === T.FS.PathType.File ? pathItem.lastModifiedTimestamp : undefined
     return () => {
-      if (C.isMobile && knownType === T.FS.PathType.File) {
+      if (isMobile && knownType === T.FS.PathType.File) {
         nav.safeNavigateAppend({
           name: 'fsFilePreview',
           params: {initialLastModifiedTimestamp: knownTimestamp, path: props.path},
diff --git a/shared/fs/filepreview/default-view.tsx b/shared/fs/filepreview/default-view.tsx
index ebfd8ee1f16a..84abf5d41b88 100644
--- a/shared/fs/filepreview/default-view.tsx
+++ b/shared/fs/filepreview/default-view.tsx
@@ -47,13 +47,13 @@ const Container = (ownProps: OwnProps) => {
           {pathItem.name}
         </Kb.Text>
         <Kb.Text type="BodySmall">{FS.humanReadableFileSize(pathItem.size)}</Kb.Text>
-        {C.isMobile && <LastModifiedLine path={path} mode="default" />}
+        {isMobile && <LastModifiedLine path={path} mode="default" />}
         {pathItem.type === T.FS.PathType.Symlink && (
           <Kb.Text type="BodySmall" style={styles.symlink}>
             {'This is a symlink' + (pathItem.linkTarget ? ` to: ${pathItem.linkTarget}.` : '.')}
           </Kb.Text>
         )}
-        {C.isMobile && (
+        {isMobile && (
           <Kb.Text center={true} type="BodySmall" style={styles.noOpenMobile}>
             This document can not be opened on mobile. You can still interact with it using the ••• menu.
           </Kb.Text>
@@ -75,7 +75,7 @@ const Container = (ownProps: OwnProps) => {
             </>
           )
         }
-        {!C.isIOS &&
+        {!isIOS &&
           (sfmiEnabled ? (
             <Kb.Button
               key="open"
diff --git a/shared/fs/filepreview/pdf-view.desktop.tsx b/shared/fs/filepreview/pdf-view.desktop.tsx
deleted file mode 100644
index 3826a7d2003b..000000000000
--- a/shared/fs/filepreview/pdf-view.desktop.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './pdf-view.shared'
-
-const PDFView = (props: Props) => {
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
-      <embed src={props.url} width="100%" height="100%" />
-    </Kb.Box2>
-  )
-}
-export default PDFView
diff --git a/shared/fs/filepreview/pdf-view.native.tsx b/shared/fs/filepreview/pdf-view.tsx
similarity index 53%
rename from shared/fs/filepreview/pdf-view.native.tsx
rename to shared/fs/filepreview/pdf-view.tsx
index 9be348e1b1f1..3342b0a5cc85 100644
--- a/shared/fs/filepreview/pdf-view.native.tsx
+++ b/shared/fs/filepreview/pdf-view.tsx
@@ -1,8 +1,13 @@
-import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import type {Props} from './pdf-view.shared'
 
-const PdfView = (props: Props) => (
+const PDFViewDesktop = (props: Props) => (
+  <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+    <embed src={props.url} width="100%" height="100%" />
+  </Kb.Box2>
+)
+
+const PdfViewNative = (props: Props) => (
   <Kb.Box2 fullHeight={true} fullWidth={true} direction="vertical">
     <Kb.WebView
       url={props.url}
@@ -15,11 +20,7 @@ const PdfView = (props: Props) => (
 )
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  webview: {
-    height: '100%',
-    width: '100%',
-  },
+  webview: {height: '100%', width: '100%'},
 }))
 
-// Only supported on iOS for now.
-export default C.isIOS ? PdfView : () => null
+export default isMobile ? (isIOS ? PdfViewNative : () => null) : PDFViewDesktop
diff --git a/shared/fs/filepreview/text-view.native.tsx b/shared/fs/filepreview/text-view.native.tsx
deleted file mode 100644
index 820b4f645e84..000000000000
--- a/shared/fs/filepreview/text-view.native.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './text-view.shared'
-import {colors, darkColors} from '@/styles/colors'
-
-const TextView = (props: Props) => (
-  <Kb.Box2 fullHeight={true} fullWidth={true} direction="vertical">
-    <Kb.WebView
-      url={props.url}
-      pinnedURLMode={true}
-      style={styles.webview}
-      injections={injections}
-      onError={props.onUrlError}
-      showLoadingStateUntilLoaded={true}
-    />
-  </Kb.Box2>
-)
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      webview: {
-        backgroundColor: Kb.Styles.globalColors.white,
-        height: '100%',
-        width: '100%',
-      },
-    }) as const
-)
-
-// We need to do the spacing in the guest content of the webView rather than
-// the component's styles, to make it feel like the whole "view" is
-// scrollable".  The <body> element has the actual content, while <html>
-// provides the top and bottom margin that blends with the rest of the app.
-// need color/darkColor since this is css and not dynamicColors
-const webviewCSS = `
-html{
-  background-color: ${colors.blueLighter3};
-  padding-top: ${Kb.Styles.globalMargins.mediumLarge};
-  padding-bottom: ${Kb.Styles.globalMargins.mediumLarge};
-  margin: 0;
-}
-body{
-  background-color: ${colors.white};
-  padding: ${Kb.Styles.globalMargins.medium};
-  margin: 0;
-  color: ${colors.black};
-  font-size: 15;
-  line-height: 1.6;
-}
-@media (prefers-color-scheme: dark) {
-  html{
-    background-color: ${darkColors.blueLighter3};
-  }
-  body{
-    background-color: ${darkColors.white};
-    color: ${darkColors.black};
-  }
-}
-pre{
-  font-family: "${Kb.Styles.globalStyles.fontTerminal.fontFamily}", monospace;
-}
-`
-
-const injections = {
-  css: webviewCSS,
-}
-
-export default TextView
diff --git a/shared/fs/filepreview/text-view.desktop.tsx b/shared/fs/filepreview/text-view.tsx
similarity index 52%
rename from shared/fs/filepreview/text-view.desktop.tsx
rename to shared/fs/filepreview/text-view.tsx
index c35467bf56c3..8f60de683b34 100644
--- a/shared/fs/filepreview/text-view.desktop.tsx
+++ b/shared/fs/filepreview/text-view.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import type {Props} from './text-view.shared'
+import {colors, darkColors} from '@/styles/colors'
 
 const TextView = (props: Props) => {
   const {onUrlError, url} = props
+
   const [content, setContent] = React.useState('')
   React.useEffect(() => {
+    if (isMobile) return
     const req = new XMLHttpRequest()
     req.onreadystatechange = () => {
       try {
@@ -21,13 +24,29 @@ const TextView = (props: Props) => {
       req.send()
     } catch {}
   }, [onUrlError, url])
-  return (
-    <Kb.Box2 fullWidth={true} fullHeight={true} direction="vertical" style={styles.container}>
-      <Kb.Box2 style={styles.innerContainer} direction="horizontal" alignItems="flex-start">
-        <Kb.Text type="Terminal" selectable={true} style={styles.text}>
-          {content}
-        </Kb.Text>
+
+  if (!isMobile) {
+    return (
+      <Kb.Box2 fullWidth={true} fullHeight={true} direction="vertical" style={styles.container}>
+        <Kb.Box2 style={styles.innerContainer} direction="horizontal" alignItems="flex-start">
+          <Kb.Text type="Terminal" selectable={true} style={styles.text}>
+            {content}
+          </Kb.Text>
+        </Kb.Box2>
       </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2 fullHeight={true} fullWidth={true} direction="vertical">
+      <Kb.WebView
+        url={url}
+        pinnedURLMode={true}
+        style={styles.webview}
+        injections={injections}
+        onError={onUrlError}
+        showLoadingStateUntilLoaded={true}
+      />
     </Kb.Box2>
   )
 }
@@ -60,7 +79,45 @@ const styles = Kb.Styles.styleSheetCreate(
           whiteSpace: 'pre',
         },
       }),
+      webview: {
+        backgroundColor: Kb.Styles.globalColors.white,
+        height: '100%',
+        width: '100%',
+      },
     }) as const
 )
 
+const webviewCSS = `
+html{
+  background-color: ${colors.blueLighter3};
+  padding-top: ${Kb.Styles.globalMargins.mediumLarge};
+  padding-bottom: ${Kb.Styles.globalMargins.mediumLarge};
+  margin: 0;
+}
+body{
+  background-color: ${colors.white};
+  padding: ${Kb.Styles.globalMargins.medium};
+  margin: 0;
+  color: ${colors.black};
+  font-size: 15;
+  line-height: 1.6;
+}
+@media (prefers-color-scheme: dark) {
+  html{
+    background-color: ${darkColors.blueLighter3};
+  }
+  body{
+    background-color: ${darkColors.white};
+    color: ${darkColors.black};
+  }
+}
+pre{
+  font-family: "${Kb.Styles.globalStyles.fontTerminal.fontFamily}", monospace;
+}
+`
+
+const injections = {
+  css: webviewCSS,
+}
+
 export default TextView
diff --git a/shared/fs/filepreview/view.tsx b/shared/fs/filepreview/view.tsx
index 2ba065ce5ec4..8494546d2392 100644
--- a/shared/fs/filepreview/view.tsx
+++ b/shared/fs/filepreview/view.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as Chat from '@/constants/chat'
 import * as React from 'react'
 import * as T from '@/constants/types'
@@ -70,7 +69,7 @@ const FilePreviewViewContent = ({path, onUrlError}: Props) => {
   switch (viewType) {
     case T.RPCGen.GUIViewType.default: {
       // mobile client only supports heic now
-      if (C.isIOS && Chat.isPathHEIC(pathItem.name)) {
+      if (isIOS && Chat.isPathHEIC(pathItem.name)) {
         return (
           <>
             {reloadBanner}
@@ -111,7 +110,7 @@ const FilePreviewViewContent = ({path, onUrlError}: Props) => {
         </>
       )
     case T.RPCGen.GUIViewType.pdf:
-      return !C.isAndroid ? (
+      return !isAndroid ? (
         <>
           {reloadBanner}
           <PdfView url={url} onUrlError={onUrlError} />
diff --git a/shared/fs/footer/download-wrapper.desktop.tsx b/shared/fs/footer/download-wrapper.desktop.tsx
deleted file mode 100644
index 4e563e8b2a91..000000000000
--- a/shared/fs/footer/download-wrapper.desktop.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import type {Props} from './download-wrapper.shared'
-const DownloadWrapper = (props: Props): React.ReactNode => props.children
-export default DownloadWrapper
diff --git a/shared/fs/footer/download-wrapper.native.tsx b/shared/fs/footer/download-wrapper.tsx
similarity index 75%
rename from shared/fs/footer/download-wrapper.native.tsx
rename to shared/fs/footer/download-wrapper.tsx
index 63c3ea360896..68780c85e538 100644
--- a/shared/fs/footer/download-wrapper.native.tsx
+++ b/shared/fs/footer/download-wrapper.tsx
@@ -2,10 +2,9 @@ import * as React from 'react'
 import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
 import type {Props} from './download-wrapper.shared'
 
-const DownloadNativeWrapper: React.FC<Props> = props => {
-  const [opacity] = React.useState(new NativeAnimated.Value(1))
+const DownloadWrapper = (props: Props): React.ReactNode => {
+  const [opacity] = React.useState(() => new NativeAnimated.Value(1))
   const started = React.useRef(false)
-
   const opacityAnimation = React.useRef(
     NativeAnimated.timing(opacity, {
       duration: 3000,
@@ -16,35 +15,35 @@ const DownloadNativeWrapper: React.FC<Props> = props => {
   ).current
 
   const ensureStarted = () => {
-    if (started.current) {
-      return
-    }
+    if (started.current) return
     started.current = true
     opacityAnimation.start(({finished}) => finished && props.dismiss())
   }
 
   const ensureStopped = () => {
-    if (!started.current) {
-      return
-    }
+    if (!started.current) return
     opacityAnimation.stop()
     opacity.setValue(1)
     started.current = false
   }
 
   React.useEffect(() => {
+    if (!isMobile) return
     if (props.isFirst && props.done) {
       ensureStarted()
     } else {
       ensureStopped()
     }
-
     return () => {
       ensureStopped()
     }
   })
 
+  if (!isMobile) {
+    return props.children
+  }
+
   return <NativeAnimated.View style={{opacity}}>{props.children}</NativeAnimated.View>
 }
 
-export default DownloadNativeWrapper
+export default DownloadWrapper
diff --git a/shared/fs/footer/download.tsx b/shared/fs/footer/download.tsx
index d10ae003bf7e..f4eeb8a4f25b 100644
--- a/shared/fs/footer/download.tsx
+++ b/shared/fs/footer/download.tsx
@@ -1,6 +1,5 @@
 import * as Kb from '@/common-adapters'
 import * as Kbfs from '../common'
-import * as C from '@/constants'
 import * as T from '@/constants/types'
 import DownloadWrapper from './download-wrapper'
 import {formatDurationFromNowTo} from '@/util/timestamp'
@@ -61,9 +60,9 @@ const Download = (props: Props) => {
         <Kb.Box2 direction="vertical" flex={1} style={styles.nameAndProgress}>
           <Kb.Text
             type="BodySmallSemibold"
-            onClick={C.isMobile ? undefined : open}
+            onClick={isMobile ? undefined : open}
             style={styles.filename}
-            lineClamp={C.isMobile ? 1 : undefined}
+            lineClamp={isMobile ? 1 : undefined}
           >
             {dlInfo.filename}
           </Kb.Text>
diff --git a/shared/fs/footer/downloads.tsx b/shared/fs/footer/downloads.tsx
index fabe84f0e1f8..6ea0027609d0 100644
--- a/shared/fs/footer/downloads.tsx
+++ b/shared/fs/footer/downloads.tsx
@@ -91,4 +91,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default Kb.Styles.isMobile ? Mobile : Desktop
+export default isMobile ? Mobile : Desktop
diff --git a/shared/fs/footer/upload.desktop.tsx b/shared/fs/footer/upload.desktop.tsx
deleted file mode 100644
index 411236ed3e84..000000000000
--- a/shared/fs/footer/upload.desktop.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {UploadProps} from './upload.shared'
-import capitalize from 'lodash/capitalize'
-import './upload.css'
-
-type DrawState = 'showing' | 'hiding' | 'hidden'
-type AnimationState = {
-  hideComplete: boolean
-  lastShowing: boolean
-}
-
-const Upload = (props: UploadProps) => {
-  const {smallMode, showing, files, fileName, totalSyncingBytes, timeLeft, debugToggleShow} = props
-  const [animationState, setAnimationState] = React.useState<AnimationState>(() => ({
-    hideComplete: !showing,
-    lastShowing: showing,
-  }))
-  let hideComplete = animationState.hideComplete
-  if (animationState.lastShowing !== showing) {
-    hideComplete = false
-    setAnimationState({hideComplete, lastShowing: showing})
-  }
-  const drawState: DrawState = showing ? 'showing' : hideComplete ? 'hidden' : 'hiding'
-
-  const height = 40
-
-  React.useEffect(() => {
-    if (showing || hideComplete) {
-      return
-    }
-    const id = setTimeout(() => {
-      setAnimationState(s => (s.lastShowing === showing ? {...s, hideComplete: true} : s))
-    }, 300)
-    return () => {
-      clearTimeout(id)
-    }
-  }, [hideComplete, showing])
-
-  // this is due to the fact that the parent container has a marginTop of -13 on darwin
-  const offset = smallMode && C.isDarwin ? 13 : 0
-
-  return (
-    <>
-      {!!debugToggleShow && (
-        <Kb.Button
-          onClick={debugToggleShow}
-          label="Toggle"
-          style={Kb.Styles.collapseStyles([styles.toggleButton, {bottom: height}])}
-        />
-      )}
-      {drawState !== 'hidden' && (
-        <Kb.Box2
-          direction="vertical"
-          centerChildren={true}
-          className="upload-animation-loop upload-bg"
-          fullWidth={true}
-          style={Kb.Styles.collapseStyles([
-            styles.stylesBox,
-            {bottom: showing ? offset : offset - height, height, maxHeight: height},
-          ])}
-        >
-          {smallMode ? (
-            <Kb.Text key="files" type="BodySemibold" style={styles.textOverflow} lineClamp={1}>
-              {files
-                ? fileName
-                  ? `Encrypting ${fileName}.`
-                  : `Encrypting ${files} items.`
-                : totalSyncingBytes
-                  ? 'Encrypting items.'
-                  : 'Done!'}
-              {timeLeft ? ` ${capitalize(timeLeft)} left` : ''}
-            </Kb.Text>
-          ) : (
-            <>
-              <Kb.Text key="files" type="BodySemibold" style={styles.textOverflow}>
-                {files
-                  ? fileName
-                    ? `Encrypting and updating ${fileName}...`
-                    : `Encrypting and updating ${files} items...`
-                  : totalSyncingBytes
-                    ? 'Encrypting and updating items...'
-                    : 'Done!'}
-              </Kb.Text>
-              {!!timeLeft.length && (
-                <Kb.Text key="left" type="BodySmall" style={styles.stylesText}>{`${timeLeft} left`}</Kb.Text>
-              )}
-            </>
-          )}
-        </Kb.Box2>
-      )}
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      stylesBox: Kb.Styles.platformStyles({
-        isElectron: {
-          flexShrink: 0, // need this to be whole in menubar
-          paddingLeft: Kb.Styles.globalMargins.medium,
-          paddingRight: Kb.Styles.globalMargins.medium,
-          position: 'absolute',
-        },
-      }),
-      stylesText: {
-        color: Kb.Styles.globalColors.whiteOrWhite,
-      },
-      textOverflow: Kb.Styles.platformStyles({
-        isElectron: {
-          color: Kb.Styles.globalColors.whiteOrWhite,
-          maxWidth: '100%',
-          overflow: 'hidden',
-          textAlign: 'center',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        },
-      }),
-      toggleButton: {position: 'absolute'},
-    }) as const
-)
-
-export default Upload
diff --git a/shared/fs/footer/upload.native.tsx b/shared/fs/footer/upload.native.tsx
deleted file mode 100644
index daa9919b9624..000000000000
--- a/shared/fs/footer/upload.native.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {UploadProps} from './upload.shared'
-import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native'
-import {useColorScheme} from 'react-native'
-
-const lightPatternImage = require('../../images/upload-pattern-80.png') as number
-const darkPatternImage = require('../../images/dark-upload-pattern-80.png') as number
-
-const easing = NativeEasing.bezier(0.13, 0.72, 0.31, 0.95)
-
-const Upload = (props: UploadProps) => {
-  const {showing: _showing, files, totalSyncingBytes, timeLeft, debugToggleShow} = props
-  const [backgroundTop] = React.useState(new NativeAnimated.Value(0))
-  const [uploadTop] = React.useState(new NativeAnimated.Value(48))
-  const [showing, setShowing] = React.useState(false)
-  const animationsRef = React.useRef({
-    in: undefined as NativeAnimated.CompositeAnimation | undefined,
-    loop: undefined as NativeAnimated.CompositeAnimation | undefined,
-    out: undefined as NativeAnimated.CompositeAnimation | undefined,
-  })
-  const mountedRef = React.useRef(false)
-
-  React.useEffect(() => {
-    mountedRef.current = true
-    const stopAnimation = (animation: keyof typeof animationsRef.current) => {
-      const a = animationsRef.current[animation]
-      if (!a) return
-      a.stop()
-      animationsRef.current[animation] = undefined
-    }
-    const stopAllAnimations = () => {
-      stopAnimation('out')
-      stopAnimation('loop')
-      stopAnimation('in')
-    }
-    const startAnimationLoop = () => {
-      const loop = NativeAnimated.loop(
-        NativeAnimated.timing(backgroundTop, {
-          duration: 2000,
-          easing: NativeEasing.linear,
-          toValue: -80,
-          useNativeDriver: false,
-        })
-      )
-      animationsRef.current.loop = loop
-      loop.start()
-    }
-    const startAnimationIn = () => {
-      const ain = NativeAnimated.timing(uploadTop, {
-        duration: 300,
-        easing,
-        toValue: 0,
-        useNativeDriver: false,
-      })
-      animationsRef.current.in = ain
-      ain.start()
-    }
-    const startAnimationOut = (cbIfFinish: () => void) => {
-      const out = NativeAnimated.timing(uploadTop, {
-        duration: 300,
-        easing,
-        toValue: 48,
-        useNativeDriver: false,
-      })
-      animationsRef.current.out = out
-      out.start(({finished}) => finished && cbIfFinish())
-    }
-    const enter = () => {
-      stopAllAnimations()
-      setShowing(true)
-      startAnimationIn()
-      startAnimationLoop()
-    }
-    const exit = () => {
-      stopAnimation('in')
-      startAnimationOut(() => {
-        stopAnimation('loop')
-        if (mountedRef.current) setShowing(false)
-      })
-    }
-
-    if (_showing) {
-      enter()
-    } else {
-      exit()
-    }
-    return () => {
-      stopAllAnimations()
-      mountedRef.current = false
-    }
-  }, [_showing, backgroundTop, uploadTop])
-
-  const isDarkMode = useColorScheme() === 'dark'
-  return (
-    <>
-      {!!debugToggleShow && <Kb.Button onClick={debugToggleShow} label="Toggle" />}
-      {showing && (
-        <NativeAnimated.View style={{position: 'relative', top: uploadTop}}>
-          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.backgroundBox}>
-            <NativeAnimated.Image
-              resizeMode="repeat"
-              source={isDarkMode ? darkPatternImage : lightPatternImage}
-              style={{...styles.backgroundImage, marginTop: backgroundTop}}
-            />
-          </Kb.Box2>
-          <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.box}>
-            <Kb.Text key="files" type="BodySmallSemibold" style={styles.text}>
-              {files
-                ? `Encrypting and uploading ${files} files...`
-                : totalSyncingBytes
-                  ? 'Encrypting and uploading...'
-                  : 'Done!'}
-            </Kb.Text>
-            {!!timeLeft.length && (
-              <Kb.Text key="left" type="BodyTiny" style={styles.text}>{`${timeLeft} left`}</Kb.Text>
-            )}
-          </Kb.Box2>
-        </NativeAnimated.View>
-      )}
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      backgroundBox: Kb.Styles.platformStyles({
-        common: {
-          height: 48,
-          overflow: 'hidden',
-        },
-      }),
-      backgroundImage: {
-        height: 160,
-        width: '100%',
-      },
-      box: {
-        height: 48,
-        marginTop: -48,
-      },
-      text: {
-        color: Kb.Styles.globalColors.whiteOrWhite,
-      },
-    }) as const
-)
-
-export default Upload
diff --git a/shared/fs/footer/upload.tsx b/shared/fs/footer/upload.tsx
new file mode 100644
index 000000000000..2cf90f93c9b2
--- /dev/null
+++ b/shared/fs/footer/upload.tsx
@@ -0,0 +1,260 @@
+import * as C from '@/constants'
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import type {UploadProps} from './upload.shared'
+import {Animated as NativeAnimated, Easing as NativeEasing, useColorScheme} from 'react-native'
+import capitalize from 'lodash/capitalize'
+import './upload.css'
+
+type DrawState = 'showing' | 'hiding' | 'hidden'
+type AnimationState = {
+  hideComplete: boolean
+  lastShowing: boolean
+}
+
+const easing = NativeEasing.bezier(0.13, 0.72, 0.31, 0.95)
+
+const Upload = (props: UploadProps) => {
+  const {smallMode, showing: _showing, files, fileName, totalSyncingBytes, timeLeft, debugToggleShow} = props
+
+  // Desktop animation state
+  const [animationState, setAnimationState] = React.useState<AnimationState>(() => ({
+    hideComplete: !_showing,
+    lastShowing: _showing,
+  }))
+
+  // Native animation state
+  const [backgroundTop] = React.useState(new NativeAnimated.Value(0))
+  const [uploadTop] = React.useState(new NativeAnimated.Value(48))
+  const [nativeShowing, setNativeShowing] = React.useState(false)
+  const animationsRef = React.useRef({
+    in: undefined as NativeAnimated.CompositeAnimation | undefined,
+    loop: undefined as NativeAnimated.CompositeAnimation | undefined,
+    out: undefined as NativeAnimated.CompositeAnimation | undefined,
+  })
+  const mountedRef = React.useRef(false)
+  const isDarkMode = useColorScheme() === 'dark'
+
+  // Derive desktop draw state; update on showing change (setState-during-render pattern)
+  let desktopHideComplete = animationState.hideComplete
+  if (!isMobile && animationState.lastShowing !== _showing) {
+    desktopHideComplete = false
+    setAnimationState({hideComplete: false, lastShowing: _showing})
+  }
+
+  // Desktop: delay hiding until animation completes
+  React.useEffect(() => {
+    if (isMobile || _showing || desktopHideComplete) return
+    const id = setTimeout(() => {
+      setAnimationState(s => (s.lastShowing === _showing ? {...s, hideComplete: true} : s))
+    }, 300)
+    return () => clearTimeout(id)
+  }, [desktopHideComplete, _showing])
+
+  // Native: show/hide animation
+  React.useEffect(() => {
+    if (!isMobile) return
+    mountedRef.current = true
+    const stopAnimation = (animation: keyof typeof animationsRef.current) => {
+      const a = animationsRef.current[animation]
+      if (!a) return
+      a.stop()
+      animationsRef.current[animation] = undefined
+    }
+    const stopAllAnimations = () => {
+      stopAnimation('out')
+      stopAnimation('loop')
+      stopAnimation('in')
+    }
+    const startAnimationLoop = () => {
+      const loop = NativeAnimated.loop(
+        NativeAnimated.timing(backgroundTop, {
+          duration: 2000,
+          easing: NativeEasing.linear,
+          toValue: -80,
+          useNativeDriver: false,
+        })
+      )
+      animationsRef.current.loop = loop
+      loop.start()
+    }
+    const startAnimationIn = () => {
+      const ain = NativeAnimated.timing(uploadTop, {
+        duration: 300,
+        easing,
+        toValue: 0,
+        useNativeDriver: false,
+      })
+      animationsRef.current.in = ain
+      ain.start()
+    }
+    const startAnimationOut = (cbIfFinish: () => void) => {
+      const out = NativeAnimated.timing(uploadTop, {
+        duration: 300,
+        easing,
+        toValue: 48,
+        useNativeDriver: false,
+      })
+      animationsRef.current.out = out
+      out.start(({finished}) => finished && cbIfFinish())
+    }
+    const enter = () => {
+      stopAllAnimations()
+      setNativeShowing(true)
+      startAnimationIn()
+      startAnimationLoop()
+    }
+    const exit = () => {
+      stopAnimation('in')
+      startAnimationOut(() => {
+        stopAnimation('loop')
+        if (mountedRef.current) setNativeShowing(false)
+      })
+    }
+    if (_showing) {
+      enter()
+    } else {
+      exit()
+    }
+    return () => {
+      stopAllAnimations()
+      mountedRef.current = false
+    }
+  }, [_showing, backgroundTop, uploadTop])
+
+  if (!isMobile) {
+    const drawState: DrawState = _showing ? 'showing' : desktopHideComplete ? 'hidden' : 'hiding'
+    const height = 40
+    const offset = smallMode && C.isDarwin ? 13 : 0
+
+    return (
+      <>
+        {!!debugToggleShow && (
+          <Kb.Button
+            onClick={debugToggleShow}
+            label="Toggle"
+            style={Kb.Styles.collapseStyles([styles.toggleButton, {bottom: height}])}
+          />
+        )}
+        {drawState !== 'hidden' && (
+          <Kb.Box2
+            direction="vertical"
+            centerChildren={true}
+            className="upload-animation-loop upload-bg"
+            fullWidth={true}
+            style={Kb.Styles.collapseStyles([
+              styles.stylesBox,
+              {bottom: _showing ? offset : offset - height, height, maxHeight: height},
+            ])}
+          >
+            {smallMode ? (
+              <Kb.Text key="files" type="BodySemibold" style={styles.textOverflow} lineClamp={1}>
+                {files
+                  ? fileName
+                    ? `Encrypting ${fileName}.`
+                    : `Encrypting ${files} items.`
+                  : totalSyncingBytes
+                    ? 'Encrypting items.'
+                    : 'Done!'}
+                {timeLeft ? ` ${capitalize(timeLeft)} left` : ''}
+              </Kb.Text>
+            ) : (
+              <>
+                <Kb.Text key="files" type="BodySemibold" style={styles.textOverflow}>
+                  {files
+                    ? fileName
+                      ? `Encrypting and updating ${fileName}...`
+                      : `Encrypting and updating ${files} items...`
+                    : totalSyncingBytes
+                      ? 'Encrypting and updating items...'
+                      : 'Done!'}
+                </Kb.Text>
+                {!!timeLeft.length && (
+                  <Kb.Text key="left" type="BodySmall" style={styles.stylesText}>{`${timeLeft} left`}</Kb.Text>
+                )}
+              </>
+            )}
+          </Kb.Box2>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {!!debugToggleShow && <Kb.Button onClick={debugToggleShow} label="Toggle" />}
+      {nativeShowing && (
+        <NativeAnimated.View style={{position: 'relative', top: uploadTop}}>
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.backgroundBox}>
+            <NativeAnimated.Image
+              resizeMode="repeat"
+              source={isDarkMode
+                ? (require('../../images/dark-upload-pattern-80.png') as number)
+                : (require('../../images/upload-pattern-80.png') as number)}
+              style={{...styles.backgroundImage, marginTop: backgroundTop}}
+            />
+          </Kb.Box2>
+          <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.box}>
+            <Kb.Text key="files" type="BodySmallSemibold" style={styles.text}>
+              {files
+                ? `Encrypting and uploading ${files} files...`
+                : totalSyncingBytes
+                  ? 'Encrypting and uploading...'
+                  : 'Done!'}
+            </Kb.Text>
+            {!!timeLeft.length && (
+              <Kb.Text key="left" type="BodyTiny" style={styles.text}>{`${timeLeft} left`}</Kb.Text>
+            )}
+          </Kb.Box2>
+        </NativeAnimated.View>
+      )}
+    </>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      backgroundBox: Kb.Styles.platformStyles({
+        common: {
+          height: 48,
+          overflow: 'hidden',
+        },
+      }),
+      backgroundImage: {
+        height: 160,
+        width: '100%',
+      },
+      box: {
+        height: 48,
+        marginTop: -48,
+      },
+      stylesBox: Kb.Styles.platformStyles({
+        isElectron: {
+          flexShrink: 0,
+          paddingLeft: Kb.Styles.globalMargins.medium,
+          paddingRight: Kb.Styles.globalMargins.medium,
+          position: 'absolute',
+        },
+      }),
+      stylesText: {
+        color: Kb.Styles.globalColors.whiteOrWhite,
+      },
+      text: {
+        color: Kb.Styles.globalColors.whiteOrWhite,
+      },
+      textOverflow: Kb.Styles.platformStyles({
+        isElectron: {
+          color: Kb.Styles.globalColors.whiteOrWhite,
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textAlign: 'center',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        },
+      }),
+      toggleButton: {position: 'absolute'},
+    }) as const
+)
+
+export default Upload
diff --git a/shared/fs/nav-header/actions.tsx b/shared/fs/nav-header/actions.tsx
index 0cf77fa73de6..3df8a8f58413 100644
--- a/shared/fs/nav-header/actions.tsx
+++ b/shared/fs/nav-header/actions.tsx
@@ -21,7 +21,7 @@ const FsNavHeaderRightActionsInner = (props: Props) => {
   Kbfs.useFsScreenCoordinator(props.path)
   const hasSoftError = !!Kbfs.useFsSoftError(props.path)
   React.useEffect(() => {
-    if (!Kb.Styles.isMobile) {
+    if (!isMobile) {
       setFolderViewFilter() // mobile is handled in mobile-header.tsx
     }
   }, [setFolderViewFilter, props.path]) // clear if path changes or it's a new layer of mount
@@ -29,7 +29,7 @@ const FsNavHeaderRightActionsInner = (props: Props) => {
   return !hasSoftError ? (
     <Kb.Box2 direction="horizontal" style={styles.container} centerChildren={true}>
       <Kbfs.UploadButton path={props.path} style={styles.uploadButton} />
-      {Kb.Styles.isMobile ? (
+      {isMobile ? (
         <Kbfs.FolderViewFilterIcon path={props.path} onClick={props.onTriggerFilterMobile} />
       ) : (
         <Kbfs.FolderViewFilter
diff --git a/shared/fs/nav-header/main-banner.tsx b/shared/fs/nav-header/main-banner.tsx
index e076edd420cd..9f71a709ef4f 100644
--- a/shared/fs/nav-header/main-banner.tsx
+++ b/shared/fs/nav-header/main-banner.tsx
@@ -33,7 +33,7 @@ const Banner = (props: Props) => {
             bannerColor="red"
             content={[
               'Your ',
-              Kb.Styles.isMobile ? 'phone' : 'computer',
+              isMobile ? 'phone' : 'computer',
               ' is out of space and some folders could not be properly synced. Make some space and ',
               {onClick: props.onRetry, text: 'retry the sync'},
               '.',
diff --git a/shared/fs/routes.tsx b/shared/fs/routes.tsx
index 0a49411bb179..7b54556639ca 100644
--- a/shared/fs/routes.tsx
+++ b/shared/fs/routes.tsx
@@ -14,7 +14,7 @@ const FsFilePreview = React.lazy(async () => import('./filepreview/file-preview-
 const DestPickerHeaderLeft = ({source}: {source: T.FS.MoveOrCopySource | T.FS.IncomingShareSource}) => {
   const clearModals = C.Router2.clearModals
   const navigateUp = C.Router2.navigateUp
-  if (!Kb.Styles.isMobile) return null
+  if (!isMobile) return null
   if (source.type === T.FS.DestinationPickerSource.IncomingShare) {
     return (
       <Kb.Text type="BodyBigLink" onClick={navigateUp}>
@@ -40,7 +40,7 @@ const DestPickerHeaderTitle = (props: {
 }) => {
   const {parentPath, source} = props
   const targetName = FS.getDestinationPickerPathName(source)
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true}>
         <Filename type="BodyTiny" filename={targetName} />
@@ -72,7 +72,7 @@ export const newRoutes = defineRouteMap({
   fsFilePreview: C.makeScreen(FsFilePreview, {
     getOptions: (ownProps?) => {
       const path = ownProps?.route.params.path ?? FS.defaultPath
-      return C.isMobile
+      return isMobile
         ? {header: () => <MobileHeader path={path} />}
         : {
             headerTitle: () => <Title path={path} />,
@@ -85,7 +85,7 @@ export const newRoutes = defineRouteMap({
       // strange edge case where the root can actually have no params
       const params = ownProps?.route.params
       const path = params?.path ?? FS.defaultPath
-      return C.isMobile
+      return isMobile
         ? {
             header: () => <MobileHeader path={path} />,
           }
diff --git a/shared/fs/simple-screens/oops.tsx b/shared/fs/simple-screens/oops.tsx
index 71261a5e1075..e737552700c8 100644
--- a/shared/fs/simple-screens/oops.tsx
+++ b/shared/fs/simple-screens/oops.tsx
@@ -1,5 +1,4 @@
 import * as T from '@/constants/types'
-import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import {useSafeNavigation} from '@/util/safe-navigation'
 
@@ -51,7 +50,7 @@ const NoAccess = (props: Props) => (
   <Kb.Box2 direction="vertical" style={styles.container} fullWidth={true} fullHeight={true}>
     <Kb.Box2 direction="vertical" style={styles.main} fullWidth={true} centerChildren={true}>
       <Kb.IconAuto
-        type={C.isMobile ? 'icon-fancy-no-access-mobile-128-125' : 'icon-fancy-no-access-desktop-96-94'}
+        type={isMobile ? 'icon-fancy-no-access-mobile-128-125' : 'icon-fancy-no-access-desktop-96-94'}
       />
       <Kb.Text type="Header" style={styles.textYouDontHave}>
         {"You don't have access to this folder or file."}
@@ -73,7 +72,7 @@ const NonExistent = (props: Props) => (
     <Kb.Box2 direction="vertical" style={styles.main} fullWidth={true} centerChildren={true}>
       <Kb.IconAuto
         type={
-          C.isMobile
+          isMobile
             ? 'icon-fancy-folder-file-inexistant-mobile-188-120'
             : 'icon-fancy-folder-file-inexistant-desktop-153-94'
         }
diff --git a/shared/fs/top-bar/index.tsx b/shared/fs/top-bar/index.tsx
index 8fad6f0f1d1d..0b6b4de2f4b1 100644
--- a/shared/fs/top-bar/index.tsx
+++ b/shared/fs/top-bar/index.tsx
@@ -20,14 +20,14 @@ const TopBar = (props: Props) => (
     gapEnd={true}
     alignItems="center"
   >
-    {!Kb.Styles.isMobile && <Sort path={props.path} />}
+    {!isMobile && <Sort path={props.path} />}
     <Loading path={props.path} />
     <Kb.Box2 direction="horizontal" flex={1} />
     {T.FS.getPathLevel(props.path) === 3 && <SyncToggle tlfPath={props.path} />}
   </Kb.Box2>
 )
 
-const height = Kb.Styles.isMobile ? 40 : 32
+const height = isMobile ? 40 : 32
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
diff --git a/shared/fs/top-bar/sort.tsx b/shared/fs/top-bar/sort.tsx
index bea1c15af82c..5e16b979e38e 100644
--- a/shared/fs/top-bar/sort.tsx
+++ b/shared/fs/top-bar/sort.tsx
@@ -81,7 +81,7 @@ const Container = (ownProps: OwnProps) => {
   return shownSortSetting ? (
     <>
       <Kb.ClickableBox onClick={showPopup} ref={popupAnchor}>
-        <Kb.Box2 direction="horizontal" fullWidth={true} gap="xxtiny" centerChildren={Kb.Styles.isMobile}>
+        <Kb.Box2 direction="horizontal" fullWidth={true} gap="xxtiny" centerChildren={isMobile}>
           <Kb.Icon type="iconfont-arrow-full-down" padding="xtiny" sizeType="Small" />
           <Kb.Text type="BodySmallSemibold" style={styles.sortText}>
             {getTextFromSortSetting(shownSortSetting)}
diff --git a/shared/fs/top-bar/sync-toggle.tsx b/shared/fs/top-bar/sync-toggle.tsx
index a0de1a967df8..983d059c50ec 100644
--- a/shared/fs/top-bar/sync-toggle.tsx
+++ b/shared/fs/top-bar/sync-toggle.tsx
@@ -62,7 +62,7 @@ const Container = (ownProps: OwnProps) => {
         containerStyle={styles.floating}
         header={<Confirm waiting={waiting} disableSync={disableSync} showPopup={showPopup} />}
         items={
-          Kb.Styles.isMobile
+          isMobile
             ? [
                 {
                   danger: true,
@@ -113,7 +113,7 @@ const Confirm = (props: {showPopup: () => void; disableSync: () => void; waiting
       <Kb.Text key="explain" type="BodySmall" center={true} style={styles.explainText}>
         This will delete your local copies of all the files in this folder.
       </Kb.Text>
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Box2
           direction="horizontal"
           style={styles.popupButtonContainer}
diff --git a/shared/git/delete-repo.tsx b/shared/git/delete-repo.tsx
index 17ce11a82b2e..714d3c968e49 100644
--- a/shared/git/delete-repo.tsx
+++ b/shared/git/delete-repo.tsx
@@ -133,7 +133,7 @@ const Container = (ownProps: OwnProps) => {
             <Kb.WaitingButton
               type="Danger"
               onClick={onSubmit}
-              label={Kb.Styles.isMobile ? 'Delete' : 'Delete this repository'}
+              label={isMobile ? 'Delete' : 'Delete this repository'}
               disabled={!matchesName()}
               waitingKey={waitingKey}
             />
diff --git a/shared/git/index.tsx b/shared/git/index.tsx
index a509ce241df3..f68ad4d73df6 100644
--- a/shared/git/index.tsx
+++ b/shared/git/index.tsx
@@ -192,7 +192,7 @@ const Container = (ownProps: OwnProps) => {
     <Kb.Reloadable waitingKeys={C.waitingKeyGitLoading} onBack={undefined} onReload={load}>
       <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} relative={true}>
         {!!error && <Kb.Banner color="red">{error.message}</Kb.Banner>}
-        {Kb.Styles.isMobile && (
+        {isMobile && (
           <Kb.ClickableBox ref={popupAnchor} style={styles.header} onClick={showPopup}>
             <Kb.Icon
               type="iconfont-new"
diff --git a/shared/git/new-repo.tsx b/shared/git/new-repo.tsx
index 8182e92f09e2..15c352da6711 100644
--- a/shared/git/new-repo.tsx
+++ b/shared/git/new-repo.tsx
@@ -212,7 +212,7 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           flex: 1,
           height: '100%',
-          padding: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
+          padding: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
         },
         isElectron: {maxWidth: 400},
         isTablet: {
diff --git a/shared/git/routes.tsx b/shared/git/routes.tsx
index f2f655a2d272..22d5571baa4f 100644
--- a/shared/git/routes.tsx
+++ b/shared/git/routes.tsx
@@ -7,7 +7,7 @@ export const newRoutes = defineRouteMap({
   gitRoot: C.makeScreen(
     React.lazy(async () => import('.')),
     {
-      getOptions: C.isMobile
+      getOptions: isMobile
         ? {title: 'Git'}
         : () => {
             const {HeaderTitle, HeaderRightActions} = require('./nav-header') as typeof NavHeader
diff --git a/shared/git/row.tsx b/shared/git/row.tsx
index a43f39cd0cfd..93db5666a493 100644
--- a/shared/git/row.tsx
+++ b/shared/git/row.tsx
@@ -94,7 +94,7 @@ function ConnectedRow(ownProps: OwnProps) {
 
   const onClickDevice = () => {
     if (lastEditUser) {
-      openURL(`https://keybase.io/${lastEditUser}/devices`)
+      void openURL(`https://keybase.io/${lastEditUser}/devices`)
     }
   }
 
@@ -123,7 +123,7 @@ function ConnectedRow(ownProps: OwnProps) {
           <Kb.ClickableBox
             onClick={onToggleExpand}
             style={expanded ? styles.rowClickExpanded : styles.rowClick}
-            hoverColor={Kb.Styles.isMobile ? undefined : Kb.Styles.globalColors.transparent}
+            hoverColor={isMobile ? undefined : Kb.Styles.globalColors.transparent}
             underlayColor={Kb.Styles.globalColors.transparent}
           >
             <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowTop}>
@@ -133,7 +133,7 @@ function ConnectedRow(ownProps: OwnProps) {
                 sizeType="Tiny"
               />
               <Kb.Avatar
-                size={Kb.Styles.isMobile ? 48 : 32}
+                size={isMobile ? 48 : 32}
                 isTeam={!!teamname}
                 teamname={teamname}
                 username={teamname ? undefined : you}
@@ -180,7 +180,7 @@ function ConnectedRow(ownProps: OwnProps) {
                   <Kb.Avatar
                     username={lastEditUser}
                     size={16}
-                    style={{marginLeft: Kb.Styles.isMobile ? 0 : 4}}
+                    style={{marginLeft: isMobile ? 0 : 4}}
                   />
                 )}
                 {!!teamname && !!lastEditUser && (
@@ -194,10 +194,10 @@ function ConnectedRow(ownProps: OwnProps) {
                     />
                   </Kb.Box2>
                 )}
-                {Kb.Styles.isMobile && <Kb.Text type="BodySmall">. </Kb.Text>}
+                {isMobile && <Kb.Text type="BodySmall">. </Kb.Text>}
                 <Kb.Text type="BodySmall">
                   <Kb.Text type="BodySmall">
-                    {Kb.Styles.isMobile
+                    {isMobile
                       ? 'Signed and encrypted using device'
                       : ', signed and encrypted using device'}
                   </Kb.Text>
diff --git a/shared/git/select-channel.tsx b/shared/git/select-channel.tsx
index 1af560d58309..33296989c875 100644
--- a/shared/git/select-channel.tsx
+++ b/shared/git/select-channel.tsx
@@ -81,7 +81,7 @@ const SelectChannel = (ownProps: OwnProps) => {
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: {
-    width: Kb.Styles.isMobile ? '100%' : 300,
+    width: isMobile ? '100%' : 300,
   },
   innerContainer: {
     paddingBottom: Kb.Styles.globalMargins.xtiny,
diff --git a/shared/globals.d.ts b/shared/globals.d.ts
index e8a16291bf2a..98d849b1973a 100644
--- a/shared/globals.d.ts
+++ b/shared/globals.d.ts
@@ -41,4 +41,10 @@ declare global {
   var rpcOnJs: undefined | ((objs: unknown, count: number) => void)
   // RN
   var __turboModuleProxy: unknown
+  // Platform globals — injected by webpack DefinePlugin / Metro Babel plugin.
+  // No import needed; use these identifiers directly.
+  var isMobile: boolean
+  var isElectron: boolean
+  var isAndroid: boolean
+  var isIOS: boolean
 }
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/ignored-modules.js b/shared/ignored-modules.js
index e3830e0cbb39..a84b6d7f8d32 100644
--- a/shared/ignored-modules.js
+++ b/shared/ignored-modules.js
@@ -1,3 +1,12 @@
-/* global module */
+/* global module, require */
 
-module.exports = ['net', 'tls', 'msgpack', 'process', 'purepack', '@khanacademy/perseus-core']
+// Packages that must not be bundled by webpack on desktop.
+// Each entry maps to nullModulePath in webpack makeAlias.
+//
+// Node built-ins / legacy non-RN packages (webpack-only, not stubbed in Jest):
+const webpackOnly = ['net', 'tls', 'msgpack', 'process', 'purepack', '@khanacademy/perseus-core']
+
+// Native-only RN packages — also stubbed in Jest via jest.config.js + native-only-modules.js:
+const nativeOnly = require('./native-only-modules')
+
+module.exports = [...webpackOnly, ...nativeOnly]
diff --git a/shared/incoming-share/index.tsx b/shared/incoming-share/index.tsx
index 1186e3acd4c9..6f9fe076797d 100644
--- a/shared/incoming-share/index.tsx
+++ b/shared/incoming-share/index.tsx
@@ -291,7 +291,7 @@ const useIncomingShareItems = () => {
   // iOS
   const rpc = C.useRPC(T.RPCGen.incomingShareGetIncomingShareItemsRpcPromise)
   React.useEffect(() => {
-    if (!C.isIOS) {
+    if (!isIOS) {
       return
     }
 
@@ -305,7 +305,7 @@ const useIncomingShareItems = () => {
   // Android
   const androidShare = useConfigState(s => s.androidShare)
   const androidShareItems =
-    C.isAndroid && androidShare
+    isAndroid && androidShare
       ? androidShare.type === T.RPCGen.IncomingShareType.file
         ? androidShare.urls.map(u => ({originalPath: u, type: T.RPCGen.IncomingShareType.file}))
         : [{content: androidShare.text, type: T.RPCGen.IncomingShareType.text}]
diff --git a/shared/jest.config.js b/shared/jest.config.js
index f67cec4f2e12..785152bf4b99 100644
--- a/shared/jest.config.js
+++ b/shared/jest.config.js
@@ -1,4 +1,13 @@
-/* global module */
+/* global module, require */
+
+// Native-only packages stubbed in desktop/test environments.
+// The same list is used by webpack (ignored-modules.js → null-module.js).
+// Add new native packages to native-only-modules.js, not here.
+const nativeOnlyModules = require('./native-only-modules')
+const nativeModuleStub = '<rootDir>/test/mocks/native-module.js'
+const nativeModuleMapper = Object.fromEntries(
+  nativeOnlyModules.map(name => [`^${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`, nativeModuleStub])
+)
 
 module.exports = {
   moduleFileExtensions: [
@@ -14,6 +23,7 @@ module.exports = {
     'node',
   ],
   moduleNameMapper: {
+    ...nativeModuleMapper,
     '\\.(css)$': '<rootDir>/test/mocks/style.js',
     '\\.(png|jpe?g|gif|svg)$': '<rootDir>/test/mocks/file.js',
     '^@/(.*)$': '<rootDir>/$1',
@@ -40,6 +50,6 @@ module.exports = {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|@react-native|@react-native-community|@react-navigation)/)',
+    'node_modules/(?!(react-native|@react-native|@react-native-community|@react-navigation|expo(-[a-z-]+)?|lottie-react-native|react-native-safe-area-context|react-native-screens|react-native-webview|react-native-keyboard-controller|react-native-zoom-toolkit|react-native-kb|@gorhom|@callstack|@legendapp|sf-symbols-typescript)/)',
   ],
 }
diff --git a/shared/jest.setup.js b/shared/jest.setup.js
index 3e97586b09e4..e03a3d10a6cb 100644
--- a/shared/jest.setup.js
+++ b/shared/jest.setup.js
@@ -15,6 +15,10 @@ global.__HOT__ = false
 global.__PROFILE__ = false
 global.__STORYBOOK__ = false
 global.__VERSION__ = 'test'
+global.isMobile = false
+global.isElectron = true
+global.isAndroid = false
+global.isIOS = false
 
 global._fromPreload = {
   constants: {
diff --git a/shared/local-debug.desktop.tsx b/shared/local-debug.desktop.tsx
deleted file mode 100644
index 70f89254c27e..000000000000
--- a/shared/local-debug.desktop.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import noop from 'lodash/noop'
-import KB2 from './util/electron.desktop'
-import {debugWarning} from '@/util/debug-warning'
-
-let config = {
-  // Set this to true if you want to turn off most console logging so you can profile easier
-  PERF: false,
-  allowMultipleInstances: false, // let more run
-  featureFlagsOverride: '' as string | undefined, // Override feature flags
-  forceImmediateLogging: false, // Don't wait for idle to log
-  ignoreDisconnectOverlay: false, // Let you use the app even in a disconnected state
-  isDevApplePushToken: false,
-  printOutstandingRPCs: false, // Periodically print rpcs we're waiting for
-  printOutstandingTimerListeners: false, // Periodically print listeners to the second clock
-  printRPC: false, // Print rpc traffic
-  printRPCBytes: false, // Print raw bytes going over the wire
-  printRPCStats: false, // Print more detailed stats about rpcs
-  printRPCWaitingSession: false, // session / waiting info
-  showDevTools: false,
-  skipAppFocusActions: false, // dont emit actions when going foreground/background, helpful while working on other actions stuff
-  skipSecondaryDevtools: true,
-}
-
-// Developer settings
-if (__DEV__) {
-  config.printOutstandingRPCs = true
-  config.printOutstandingTimerListeners = true
-  config.printRPC = true
-  config.printRPCStats = true
-  config.printRPCWaitingSession = false
-  config.showDevTools = true
-  config.skipSecondaryDevtools = true
-}
-
-config = {
-  ...config,
-  ...KB2.constants.configOverload,
-}
-
-// If performance testing
-if (config.PERF) {
-  debugWarning('local debug config.PERF is ONNNNNn')
-
-  const c = console
-  c.log = noop
-  c.warn = noop
-  c.error = noop
-  c.info = noop
-
-  config.forceImmediateLogging = false
-  config.ignoreDisconnectOverlay = false
-  config.printOutstandingRPCs = false
-  config.printOutstandingTimerListeners = false
-  config.printRPC = false
-}
-
-export const {
-  allowMultipleInstances,
-  featureFlagsOverride,
-  forceImmediateLogging,
-  ignoreDisconnectOverlay,
-  isDevApplePushToken,
-  printOutstandingRPCs,
-  printOutstandingTimerListeners,
-  printRPC,
-  printRPCBytes,
-  printRPCStats,
-  printRPCWaitingSession,
-  showDevTools,
-  skipAppFocusActions,
-  skipSecondaryDevtools,
-} = config
diff --git a/shared/local-debug.native.tsx b/shared/local-debug.native.tsx
deleted file mode 100644
index 54a688ed39fe..000000000000
--- a/shared/local-debug.native.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * File to stash local debug changes to. Never check this in with changes
- */
-import {LogBox} from 'react-native'
-import {serverConfig} from 'react-native-kb'
-import noop from 'lodash/noop'
-
-// Toggle this to disable yellowboxes
-LogBox.ignoreAllLogs()
-
-// uncomment this to watch the RN bridge traffic: https://github.com/facebook/react-native/commit/77e48f17824870d30144a583be77ec5c9cf9f8c5
-// require('react-native/Libraries/BatchedBridge/MessageQueue').spy(msg => {
-//   if (msg.module !== 'WebSocketModule') {
-//     console._log('queuespy: ', msg, JSON.stringify(msg).length)
-//   }
-// })
-// uncomment this to watch for event loop stalls: https://github.com/facebook/react-native/blob/0.59-stable/Libraries/Interaction/BridgeSpyStallHandler.js
-// require('react-native/Libraries/Interaction/InteractionStallDebugger').install({thresholdMS: 100})
-
-// Set this to true if you want to turn off most console logging so you can profile easier
-const PERF = false as boolean
-
-const config = {
-  allowMultipleInstances: false,
-  featureFlagsOverride: '', // Override feature flags
-  forceImmediateLogging: false, // Don't wait for idle to log
-  ignoreDisconnectOverlay: false,
-  isDevApplePushToken: false, // Use a dev push token
-  printOutstandingRPCs: false, // Periodically print rpcs we're waiting for
-  printOutstandingTimerListeners: false, // Periodically print listeners to the second clock
-  printRPC: false, // Print rpc traffic
-  printRPCBytes: false, // Print raw b64-encoded bytes going over the wire
-  printRPCStats: false, // print detailed info on stats
-  printRPCWaitingSession: false,
-  showDevTools: false,
-  skipAppFocusActions: false,
-  skipSecondaryDevtools: true,
-}
-
-// Developer settings
-if (__DEV__) {
-  // Move this outside the if statement to get notifications working
-  // with a "Profile" build on a phone.
-  config.isDevApplePushToken = true
-  config.printOutstandingRPCs = false
-  config.printOutstandingTimerListeners = false
-  config.printRPCWaitingSession = false
-  config.printRPC = false
-  // TODO is this even used?
-  config.printRPCStats = false
-
-  // uncomment this to watch the RN bridge traffic: https://github.com/facebook/react-native/commit/77e48f17824870d30144a583be77ec5c9cf9f8c5
-  // MessageQueue.spy(msg => console._log('queuespy: ', msg, JSON.stringify(msg).length))
-}
-
-// uncomment if doing local archive builds
-// const debuggingOnLocalArchiveBuild = true
-// if (debuggingOnLocalArchiveBuild) {
-//   for (let i = 0; i < 50; ++i) {
-//     console.log('TEMP dev push token!')
-//   }
-//   config.isDevApplePushToken = true
-// }
-
-// const debuggingReleaseBuild = false
-// if (debuggingReleaseBuild) {
-//   for (let i = 0; i < 50; ++i) {
-//     console.log('TEMP debug release build one')
-//   }
-//   // in release we don't get console logs on ios, so instead use native logger and edit the objc side
-//   window.console.log = (...a) => NativeModules.NativeLogger.log([['e', a.join(' ')]])
-//   window.console.warn = window.console.log
-//   window.console.error = window.console.log
-//   window.console.info = window.console.log
-// }
-
-if (PERF) {
-  console.warn('\n\n\nlocal debug PERF is ONNNNNn!!!!!1!!!11!!!!\nAll console.logs disabled!\n\n\n')
-
-  console.log = noop
-  console.warn = noop
-  console.error = noop
-  console.info = noop
-
-  config.forceImmediateLogging = false
-  config.printOutstandingRPCs = false
-  config.printOutstandingTimerListeners = false
-  config.printRPC = false
-}
-
-if (serverConfig) {
-  try {
-    const sc = JSON.parse(serverConfig) as undefined | {[key: string]: unknown}
-    if (sc?.['lastLoggedInUser']) {
-      const lastLoggedInUser = sc['lastLoggedInUser']
-      if (typeof lastLoggedInUser === 'string') {
-        const userConfig = sc[lastLoggedInUser] as {[key: string]: unknown}
-        if (typeof userConfig === 'object' && userConfig['printRPCStats']) {
-          config.printRPCStats = true
-        }
-      }
-    }
-  } catch {}
-}
-
-export const {
-  allowMultipleInstances,
-  featureFlagsOverride,
-  forceImmediateLogging,
-  ignoreDisconnectOverlay,
-  isDevApplePushToken,
-  printOutstandingRPCs,
-  printOutstandingTimerListeners,
-  printRPC,
-  printRPCBytes,
-  printRPCStats,
-  printRPCWaitingSession,
-  showDevTools,
-  skipSecondaryDevtools,
-} = config
diff --git a/shared/local-debug.tsx b/shared/local-debug.tsx
new file mode 100644
index 000000000000..eeb8ff7030c5
--- /dev/null
+++ b/shared/local-debug.tsx
@@ -0,0 +1,104 @@
+/*
+ * File to stash local debug changes to. Never check this in with changes
+ */
+import noop from 'lodash/noop'
+
+// Mobile-only side effects (disabled yellow box warnings)
+if (isMobile) {
+  const {LogBox} = require('react-native') as {LogBox: {ignoreAllLogs: () => void}}
+  LogBox.ignoreAllLogs()
+}
+
+const PERF = false as boolean
+
+let config = {
+  allowMultipleInstances: false,
+  featureFlagsOverride: '' as string | undefined,
+  forceImmediateLogging: false,
+  ignoreDisconnectOverlay: false,
+  isDevApplePushToken: false,
+  printOutstandingRPCs: false,
+  printOutstandingTimerListeners: false,
+  printRPC: false,
+  printRPCBytes: false,
+  printRPCStats: false,
+  printRPCWaitingSession: false,
+  showDevTools: false,
+  skipAppFocusActions: false,
+  skipSecondaryDevtools: true,
+}
+
+if (__DEV__) {
+  if (isMobile) {
+    config.isDevApplePushToken = true
+    config.printOutstandingRPCs = false
+    config.printOutstandingTimerListeners = false
+    config.printRPCWaitingSession = false
+    config.printRPC = false
+    config.printRPCStats = false
+  } else {
+    config.printOutstandingRPCs = true
+    config.printOutstandingTimerListeners = true
+    config.printRPC = true
+    config.printRPCStats = true
+    config.printRPCWaitingSession = false
+    config.showDevTools = true
+    config.skipSecondaryDevtools = true
+  }
+}
+
+if (!isMobile) {
+  const KB2 = require('./util/electron').default as {
+    constants: {configOverload?: Partial<typeof config>}
+  }
+  config = {...config, ...KB2.constants.configOverload}
+}
+
+if (isMobile) {
+  const rnkb = require('react-native-kb') as {serverConfig?: string}
+  if (rnkb.serverConfig) {
+    try {
+      const sc = JSON.parse(rnkb.serverConfig) as undefined | {[key: string]: unknown}
+      if (sc?.['lastLoggedInUser']) {
+        const lastLoggedInUser = sc['lastLoggedInUser']
+        if (typeof lastLoggedInUser === 'string') {
+          const userConfig = sc[lastLoggedInUser] as {[key: string]: unknown}
+          if (typeof userConfig === 'object' && userConfig['printRPCStats']) {
+            config.printRPCStats = true
+          }
+        }
+      }
+    } catch {}
+  }
+}
+
+if (PERF) {
+  console.warn('\n\n\nlocal debug PERF is ONNNNNn!!!!!1!!!11!!!!\nAll console.logs disabled!\n\n\n')
+
+  console.log = noop
+  console.warn = noop
+  console.error = noop
+  console.info = noop
+
+  config.forceImmediateLogging = false
+  config.printOutstandingRPCs = false
+  config.printOutstandingTimerListeners = false
+  config.printRPC = false
+}
+
+export const {
+  allowMultipleInstances,
+  featureFlagsOverride,
+  forceImmediateLogging,
+  ignoreDisconnectOverlay,
+  isDevApplePushToken,
+  printOutstandingRPCs,
+  printOutstandingTimerListeners,
+  printRPC,
+  printRPCBytes,
+  printRPCStats,
+  printRPCWaitingSession,
+  showDevTools,
+  skipAppFocusActions,
+  skipSecondaryDevtools,
+} = config
diff --git a/shared/logger/index.tsx b/shared/logger/index.tsx
index 6d078fb0b970..edcaac101975 100644
--- a/shared/logger/index.tsx
+++ b/shared/logger/index.tsx
@@ -2,7 +2,6 @@ import * as T from '@/constants/types'
 import Logger from './ring-logger'
 import noop from 'lodash/noop'
 import type {hasEngine as HasEngineType} from '../engine/require'
-import {isMobile} from '@/constants/platform'
 import {requestIdleCallback} from '@/util/idle-callback'
 
 export type Timestamp = number
diff --git a/shared/login/forms/container.desktop.tsx b/shared/login/forms/container.desktop.tsx
deleted file mode 100644
index 07fe4b0b8495..000000000000
--- a/shared/login/forms/container.desktop.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type {Props} from './container.shared'
-import * as Kb from '@/common-adapters'
-
-const Container = ({children, style, outerStyle}: Props) => {
-  return (
-    <div style={Kb.Styles.castStyleDesktop({...styles.container, ...outerStyle})}>
-      <div style={Kb.Styles.castStyleDesktop({...styles.innerContainer, ...style})}>{children}</div>
-    </div>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignItems: 'flex-start',
-        flex: 1,
-        justifyContent: 'flex-start',
-        padding: 64,
-      },
-      innerContainer: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        alignSelf: 'stretch',
-        height: '100%',
-        width: '100%',
-      },
-    }) as const
-)
-export default Container
diff --git a/shared/login/forms/container.native.tsx b/shared/login/forms/container.native.tsx
deleted file mode 100644
index d474b2947a48..000000000000
--- a/shared/login/forms/container.native.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type {Props} from './container.shared'
-import * as Kb from '@/common-adapters'
-import NativeScrollView from '@/common-adapters/scroll-view.native'
-
-const Container = ({children, style, outerStyle}: Props) => {
-  return (
-    <NativeScrollView style={{...styles.container, ...outerStyle}}>
-      <Kb.Box2 direction="vertical" fullWidth={true} flex={1} style={{...styles.innerContainer, ...style}}>{children}</Kb.Box2>
-    </NativeScrollView>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        ...Kb.Styles.globalStyles.flexBoxColumn,
-        flexGrow: 1,
-        paddingLeft: Kb.Styles.globalMargins.medium,
-        paddingRight: Kb.Styles.globalMargins.medium,
-      },
-      innerContainer: {
-        marginTop: Kb.Styles.globalMargins.medium,
-      },
-    }) as const
-)
-
-export default Container
diff --git a/shared/login/forms/container.tsx b/shared/login/forms/container.tsx
new file mode 100644
index 000000000000..1bb33d445f21
--- /dev/null
+++ b/shared/login/forms/container.tsx
@@ -0,0 +1,51 @@
+import type {Props} from './container.shared'
+import * as Kb from '@/common-adapters'
+
+const Container = ({children, style, outerStyle}: Props) => {
+  if (!isMobile) {
+    return (
+      <div style={Kb.Styles.castStyleDesktop({...styles.container, ...outerStyle})}>
+        <div style={Kb.Styles.castStyleDesktop({...styles.innerContainer, ...style})}>{children}</div>
+      </div>
+    )
+  }
+  return (
+    <Kb.ScrollView style={{...styles.container, ...outerStyle}}>
+      <Kb.Box2 direction="vertical" fullWidth={true} flex={1} style={{...styles.innerContainer, ...style}}>
+        {children}
+      </Kb.Box2>
+    </Kb.ScrollView>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  container: Kb.Styles.platformStyles({
+    common: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+    },
+    isElectron: {
+      alignItems: 'flex-start',
+      flex: 1,
+      justifyContent: 'flex-start',
+      padding: 64,
+    },
+    isMobile: {
+      flexGrow: 1,
+      paddingLeft: Kb.Styles.globalMargins.medium,
+      paddingRight: Kb.Styles.globalMargins.medium,
+    },
+  }),
+  innerContainer: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+      alignSelf: 'stretch',
+      height: '100%',
+      width: '100%',
+    },
+    isMobile: {
+      marginTop: Kb.Styles.globalMargins.medium,
+    },
+  }),
+}))
+
+export default Container
diff --git a/shared/login/join-or-login.tsx b/shared/login/join-or-login.tsx
index ec38d5fbaf20..7688aab82166 100644
--- a/shared/login/join-or-login.tsx
+++ b/shared/login/join-or-login.tsx
@@ -65,7 +65,7 @@ const Intro = () => {
             Join Keybase
           </Kb.Text>
         </Kb.Box2>
-        <Kb.ButtonBar direction="column" fullWidth={Kb.Styles.isMobile} style={styles.buttonBar}>
+        <Kb.ButtonBar direction="column" fullWidth={isMobile} style={styles.buttonBar}>
           <Kb.Button label="Create account" onClick={onSignup} fullWidth={true} />
           <Kb.Button label="Log in" mode="Secondary" onClick={onLogin} fullWidth={true} />
           {isOnline ? null : (
diff --git a/shared/login/loading.tsx b/shared/login/loading.tsx
index 26dc83ad97cf..e4dcf75204b5 100644
--- a/shared/login/loading.tsx
+++ b/shared/login/loading.tsx
@@ -23,7 +23,7 @@ const SplashContainer = () => {
     status = `Loading...  (still trying${failedText})`
   }
 
-  const onFeedback = C.isMobile
+  const onFeedback = isMobile
     ? () => {
         navigateAppend({name: 'feedback', params: {}})
       }
diff --git a/shared/login/recover-password/paper-key.tsx b/shared/login/recover-password/paper-key.tsx
index c86d203609e7..ae75829bbdb3 100644
--- a/shared/login/recover-password/paper-key.tsx
+++ b/shared/login/recover-password/paper-key.tsx
@@ -39,8 +39,8 @@ const PaperKey = ({route}: Props) => {
           fullWidth={true}
           flex={1}
           style={styles.contents}
-          centerChildren={!Kb.Styles.isAndroid /* android keyboardAvoiding doesnt work well */}
-          gap={Kb.Styles.isMobile ? 'tiny' : 'medium'}
+          centerChildren={!isAndroid /* android keyboardAvoiding doesnt work well */}
+          gap={isMobile ? 'tiny' : 'medium'}
         >
           <Kb.Box2 direction="vertical" gap="tiny" centerChildren={true} gapEnd={true}>
             <Kb.ImageIcon type="icon-paper-key-96" />
@@ -68,7 +68,7 @@ const PaperKey = ({route}: Props) => {
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   contents: {
-    maxWidth: Kb.Styles.isMobile ? '100%' : 460,
+    maxWidth: isMobile ? '100%' : 460,
     width: '100%',
   },
   inputContainer: {
diff --git a/shared/login/relogin/dropdown.native.tsx b/shared/login/relogin/dropdown.native.tsx
index 6c09c0ebbc42..73e81cfd56ce 100644
--- a/shared/login/relogin/dropdown.native.tsx
+++ b/shared/login/relogin/dropdown.native.tsx
@@ -64,7 +64,7 @@ const Dropdown = (props: Props) => {
       <Kb.Text key="text" type="Header" style={styles.orangeText}>
         {label(value)}
       </Kb.Text>
-      {Kb.Styles.isAndroid ? null : (
+      {isAndroid ? null : (
         <Kb.Icon key="icon" type="iconfont-caret-down" style={styles.icon} sizeType="Tiny" />
       )}
     </>
@@ -84,7 +84,7 @@ const Dropdown = (props: Props) => {
 
   // on android we immediately choose, on ios you have to close the modal to choose
   React.useEffect(() => {
-    if (Kb.Styles.isAndroid) {
+    if (isAndroid) {
       selected(value)
     }
   }, [value, selected])
@@ -97,7 +97,7 @@ const Dropdown = (props: Props) => {
     </Picker>
   )
 
-  if (Kb.Styles.isIOS) {
+  if (isIOS) {
     return (
       <TouchableWithoutFeedback onPress={() => showModal(true)}>
         <View style={styles.container}>
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 1ace269dea4a..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 NativeScrollView from '@/common-adapters/scroll-view.native'
-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 && C.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}
-    >
-      <NativeScrollView style={styles.scrollView} contentContainerStyle={{minHeight: scrollViewHeight}}>
-        <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" flex={1} style={styles.container}>
-          {C.isAndroid && !C.isDeviceSecureAndroid && !C.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>
-      </NativeScrollView>
-    </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/login/reset/modal.tsx b/shared/login/reset/modal.tsx
index 5aa4518717a8..612895c73231 100644
--- a/shared/login/reset/modal.tsx
+++ b/shared/login/reset/modal.tsx
@@ -67,7 +67,7 @@ const ResetModalImpl = ({endTime}: {endTime: number}) => {
           style={Kb.Styles.globalStyles.flexOne}
         >
           <Kb.Box2 direction="horizontal" style={Kb.Styles.globalStyles.flexOne} />
-          <Kb.Text type={Kb.Styles.isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
+          <Kb.Text type={isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
             Account reset initiated
           </Kb.Text>
           <Kb.Box2 direction="horizontal" style={Kb.Styles.globalStyles.flexOne} />
@@ -87,7 +87,7 @@ const ResetModalImpl = ({endTime}: {endTime: number}) => {
           centerChildren={true}
         >
           <Kb.ImageIcon
-            type={Kb.Styles.isMobile ? 'icon-skull-64' : 'icon-skull-48'}
+            type={isMobile ? 'icon-skull-64' : 'icon-skull-48'}
             style={styles.skullIcon}
           />
           <Kb.Text type="Body" center={true}>
@@ -111,7 +111,7 @@ const ResetModalImpl = ({endTime}: {endTime: number}) => {
     </>
   )
 
-  if (!Kb.Styles.isMobile) {
+  if (!isMobile) {
     return (
       <Kb.Popup onHidden={() => {}} style={styles.desktopCover}>
         <Kb.Box2 direction="vertical" style={styles.desktopModal}>
diff --git a/shared/login/signup/common.tsx b/shared/login/signup/common.tsx
index e08faa9a7f7c..38129f534c12 100644
--- a/shared/login/signup/common.tsx
+++ b/shared/login/signup/common.tsx
@@ -15,7 +15,7 @@ export const Wrapper = (props: Props) => (
       fullHeight={true}
       centerChildren={true}
       style={styles.wrapper}
-      gap={Kb.Styles.isMobile ? 'xtiny' : 'small'}
+      gap={isMobile ? 'xtiny' : 'small'}
     >
       {props.children}
     </Kb.Box2>
diff --git a/shared/login/user-card/index.desktop.tsx b/shared/login/user-card/index.desktop.tsx
deleted file mode 100644
index 7d1c9e72fb2d..000000000000
--- a/shared/login/user-card/index.desktop.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-
-const UserCard = (p: Props) => {
-  const {avatarSize = 128, outerStyle, onAvatarClicked, username, style, children} = p
-  return (
-    <div style={Kb.Styles.collapseStyles([styles.container, outerStyle]) as React.CSSProperties}>
-      <Kb.Avatar
-        size={avatarSize}
-        onClick={onAvatarClicked}
-        username={username}
-      />
-      <div
-        style={
-          Kb.Styles.collapseStyles([
-            styles.inside,
-            {
-              marginTop: -avatarSize / 2,
-              paddingTop: 30 + avatarSize / 2,
-            },
-            style,
-          ]) as React.CSSProperties
-        }
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
-    height: 430,
-    width: 410,
-  },
-  inside: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
-    alignSelf: 'stretch',
-    backgroundColor: Kb.Styles.globalColors.white,
-    borderRadius: 4,
-    padding: 30,
-  },
-}))
-
-export default UserCard
diff --git a/shared/login/user-card/index.native.tsx b/shared/login/user-card/index.native.tsx
deleted file mode 100644
index 6353e9d9266f..000000000000
--- a/shared/login/user-card/index.native.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-
-const UserCard = (p: Props) => {
-  const {avatarBackgroundStyle, avatarSize = 96, outerStyle, onAvatarClicked} = p
-  const {username, style, children} = p
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={Kb.Styles.collapseStyles([styles.container, outerStyle])}>
-      <Kb.Box2 direction="vertical" alignItems="center" alignSelf="stretch" style={styles.avatar}>
-        <Kb.Box2
-          direction="vertical"
-          style={Kb.Styles.collapseStyles([
-            styles.avatarBackground,
-            {
-              height: avatarSize / 2,
-              top: avatarSize / 2,
-            },
-            avatarBackgroundStyle,
-          ])}
-        />
-        <Kb.Avatar
-          size={avatarSize}
-          onClick={onAvatarClicked}
-          username={username}
-        />
-      </Kb.Box2>
-      <Kb.Box2 direction="vertical" fullWidth={true} style={Kb.Styles.collapseStyles([styles.inside, style])}>{children}</Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  avatar: {
-    marginTop: 0,
-  },
-  avatarBackground: {
-    left: 0,
-    position: 'absolute',
-    right: 0,
-  },
-  container: Kb.Styles.platformStyles({
-    common: {
-    },
-    isTablet: {
-      maxWidth: 410,
-    },
-  }),
-  inside: {
-    justifyContent: 'flex-start',
-    padding: 16,
-  },
-}))
-
-export default UserCard
diff --git a/shared/login/user-card/index.tsx b/shared/login/user-card/index.tsx
new file mode 100644
index 000000000000..4e0668518923
--- /dev/null
+++ b/shared/login/user-card/index.tsx
@@ -0,0 +1,95 @@
+import * as Kb from '@/common-adapters'
+import type {Props} from './index.shared'
+
+const UserCard = (p: Props) => {
+  const {outerStyle, onAvatarClicked, username, style, children} = p
+
+  if (!isMobile) {
+    const {avatarSize = 128} = p
+    return (
+      <div style={Kb.Styles.collapseStyles([styles.container, outerStyle]) as React.CSSProperties}>
+        <Kb.Avatar size={avatarSize} onClick={onAvatarClicked} username={username} />
+        <div
+          style={
+            Kb.Styles.collapseStyles([
+              styles.inside,
+              {
+                marginTop: -avatarSize / 2,
+                paddingTop: 30 + avatarSize / 2,
+              },
+              style,
+            ]) as React.CSSProperties
+          }
+        >
+          {children}
+        </div>
+      </div>
+    )
+  }
+
+  const {avatarBackgroundStyle, avatarSize = 96} = p
+  return (
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      style={Kb.Styles.collapseStyles([styles.container, outerStyle])}
+    >
+      <Kb.Box2 direction="vertical" alignItems="center" alignSelf="stretch" style={styles.avatar}>
+        <Kb.Box2
+          direction="vertical"
+          style={Kb.Styles.collapseStyles([
+            styles.avatarBackground,
+            {height: avatarSize / 2, top: avatarSize / 2},
+            avatarBackgroundStyle,
+          ])}
+        />
+        <Kb.Avatar size={avatarSize} onClick={onAvatarClicked} username={username} />
+      </Kb.Box2>
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        style={Kb.Styles.collapseStyles([styles.inside, style])}
+      >
+        {children}
+      </Kb.Box2>
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  avatar: {
+    marginTop: 0,
+  },
+  avatarBackground: {
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+  container: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+      alignItems: 'center',
+      height: 430,
+      width: 410,
+    },
+    isTablet: {
+      maxWidth: 410,
+    },
+  }),
+  inside: Kb.Styles.platformStyles({
+    isElectron: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      backgroundColor: Kb.Styles.globalColors.white,
+      borderRadius: 4,
+      padding: 30,
+    },
+    isMobile: {
+      justifyContent: 'flex-start',
+      padding: 16,
+    },
+  }),
+}))
+
+export default UserCard
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/metro.config.js b/shared/metro.config.js
index 819886abcf1a..d0978b7af53c 100644
--- a/shared/metro.config.js
+++ b/shared/metro.config.js
@@ -1,20 +1,28 @@
 const {getDefaultConfig} = require('expo/metro-config')
 const path = require('path')
 const ignoredModules = require('./ignored-modules')
+const desktopOnlyModules = require('./desktop-only-modules')
 
 const root = path.resolve(__dirname, '.')
 const nullModule = path.join(root, 'null-module.js')
 
 const config = getDefaultConfig(__dirname)
 
+const desktopOnlySet = new Set(desktopOnlyModules)
+
 config.resolver = {
   ...config.resolver,
-  assetExts: [...config.resolver.assetExts, 'css'],
-  sourceExts: [...config.resolver.sourceExts, 'css'],
   extraNodeModules: ignoredModules.reduce((acc, name) => {
     acc[name] = nullModule
     return acc
   }, {}),
+  resolveRequest: (context, moduleName, platform) => {
+    // Null out desktop-only packages, explicit .desktop platform imports, and CSS (desktop-only)
+    if (desktopOnlySet.has(moduleName) || moduleName.endsWith('.desktop') || moduleName.endsWith('.css')) {
+      return {type: 'sourceFile', filePath: nullModule}
+    }
+    return context.resolveRequest(context, moduleName, platform)
+  },
 }
 
 module.exports = config
diff --git a/shared/native-only-modules.js b/shared/native-only-modules.js
new file mode 100644
index 000000000000..c4ded355f953
--- /dev/null
+++ b/shared/native-only-modules.js
@@ -0,0 +1,36 @@
+/* global module */
+
+// Native-only React Native packages with no desktop equivalent.
+// Used in two places:
+//   1. ignored-modules.js → webpack aliases them to null-module.js
+//   2. jest.config.js → Jest stubs them with test/mocks/native-module.js
+//
+// When a merged .tsx file adds a new native-only package in an isMobile branch, add it here.
+module.exports = [
+  'lottie-react-native',
+  'expo-audio',
+  'expo-location',
+  'expo-video',
+  'react-native-zoom-toolkit',
+  '@gorhom/bottom-sheet',
+  'react-native-keyboard-controller',
+  'react-native-screens',
+  'react-native-safe-area-context',
+  'expo-modules-core',
+  'react-native-kb',
+  'react-native-reanimated',
+  'react-native-worklets',
+  'expo',
+  'expo-video',
+  'expo-image-picker',
+  '@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/package.json b/shared/package.json
index 9ff3a50a49d8..393ef4b01b61 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -68,7 +68,7 @@
     "android-logs-dump": "adb logcat -d --pid=$(adb shell pidof io.keybase.ossifrage)",
     "android-log-clear": "adb logcat -b all -c",
     "clean-and-install": "rm -rf node_modules ; yarn pod-clean ; yarn modules ; yarn pod-install",
-    "coverage": "rm -rf coverage-ts; npx typescript-coverage-report",
+    "coverage": "rm -rf coverage-ts; npx typescript-coverage-report@0.8.0",
     "sync-kb-modules": "yarn run _helper sync-local-rnmodules",
     "maestro-test": "MAESTRO_CLI_NO_ANALYTICS=1 ./perf/run-maestro.sh",
     "maestro-test-perf-inbox": "MAESTRO_CLI_NO_ANALYTICS=1 ./perf/run-maestro.sh --flow performance/perf-inbox-scroll.yaml",
diff --git a/shared/patches/@react-navigation+bottom-tabs+8.0.0-alpha.28.patch b/shared/patches/@react-navigation+bottom-tabs+8.0.0-alpha.28.patch
deleted file mode 100644
index 0b2d0848d949..000000000000
--- a/shared/patches/@react-navigation+bottom-tabs+8.0.0-alpha.28.patch
+++ /dev/null
@@ -1,59 +0,0 @@
-diff --git a/node_modules/@react-navigation/bottom-tabs/lib/module/views/BottomTabViewNativeImpl.js b/node_modules/@react-navigation/bottom-tabs/lib/module/views/BottomTabViewNativeImpl.js
-index 8c6a647..bc2aea8 100644
---- a/node_modules/@react-navigation/bottom-tabs/lib/module/views/BottomTabViewNativeImpl.js
-+++ b/node_modules/@react-navigation/bottom-tabs/lib/module/views/BottomTabViewNativeImpl.js
-@@ -36,6 +36,10 @@ export function BottomTabViewNative({
-   }
-   const [pendingNavigation, setPendingNavigation] = React.useState(null);
-   const previousRouteKeyRef = React.useRef(focusedRouteKey);
-+  const [navStateRequest, setNavStateRequest] = React.useState(() => ({
-+    selectedScreenKey: state.routes[state.index].key,
-+    baseProvenance: 0,
-+  }));
-   React.useEffect(() => {
-     const previousRouteKey = previousRouteKeyRef.current;
-     if (previousRouteKey !== focusedRouteKey && descriptors[previousRouteKey]?.options.popToTopOnBlur) {
-@@ -147,9 +151,11 @@ export function BottomTabViewNative({
-     },
-     children: [tabBarPosition === 'top' || tabBarPosition === 'left' ? tabBarElement : null, /*#__PURE__*/_jsx(Tabs.Host, {
-       tabBarHidden: hasCustomTabBar || shouldHideTabBar,
--      bottomAccessory: bottomAccessory ? environment => bottomAccessory({
--        placement: environment
--      }) : undefined,
-+      ios: {
-+        bottomAccessory: bottomAccessory ? environment => bottomAccessory({
-+          placement: environment
-+        }) : undefined,
-+      },
-       tabBarItemLabelVisibilityMode: currentOptions?.tabBarLabelVisibilityMode,
-       tabBarControllerMode: tabBarControllerMode,
-       tabBarMinimizeBehavior: tabBarMinimizeBehavior,
-@@ -168,9 +174,14 @@ export function BottomTabViewNative({
-       tabBarItemActiveIndicatorEnabled: currentOptions?.tabBarActiveIndicatorEnabled,
-       tabBarItemRippleColor: currentOptions?.tabBarRippleColor,
-       experimentalControlNavigationStateInJS: false,
--      onNativeFocusChange: e => {
--        const route = state.routes.find(route => route.key === e.nativeEvent.tabKey);
-+      navStateRequest: navStateRequest,
-+      onTabSelected: e => {
-+        const route = state.routes.find(route => route.key === e.nativeEvent.selectedScreenKey);
-         if (route) {
-+          setNavStateRequest({
-+            selectedScreenKey: e.nativeEvent.selectedScreenKey,
-+            baseProvenance: e.nativeEvent.provenance,
-+          });
-           const event = navigation.emit({
-             type: 'tabPress',
-             target: route.key,
-@@ -271,9 +282,8 @@ export function BottomTabViewNative({
-           onDidAppear: () => onTransitionEnd({
-             route
-           }),
--          tabKey: route.key,
--          icon: icon,
--          selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared,
-+          screenKey: route.key,
-+          ios: {icon: icon?.ios, selectedIcon: selectedIcon?.ios ?? selectedIcon?.shared},
-           tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-           tabBarItemBadgeTextColor: badgeTextColor,
-           tabBarItemAccessibilityLabel: tabBarAccessibilityLabel,
diff --git a/shared/patches/react-native-screens+4.25.0-beta.3.patch b/shared/patches/react-native-screens+4.25.0-beta.3.patch
deleted file mode 100644
index 1ad5f4e45b39..000000000000
--- a/shared/patches/react-native-screens+4.25.0-beta.3.patch
+++ /dev/null
@@ -1,14 +0,0 @@
-diff --git a/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm b/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm
-index d7afe44..c9816ee 100644
---- a/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm
-+++ b/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm
-@@ -85,7 +85,8 @@ - (void)initState
-   [self resetProps];
- 
-   _controller = [[RNSTabBarController alloc] initWithTabsHostComponentView:self];
--  RCTAssert([_controller addNavigationStateObserver:self],
-+  BOOL observerRegistered = [_controller addNavigationStateObserver:self];
-+  RCTAssert(observerRegistered,
-             @"[RNScreens] Failed to register RNSTabsHostComponentView as navigation state observer");
- 
-   _reactSubviews = [NSMutableArray new];
diff --git a/shared/people/announcement.tsx b/shared/people/announcement.tsx
index 90a069c49df9..6af7d038eae7 100644
--- a/shared/people/announcement.tsx
+++ b/shared/people/announcement.tsx
@@ -25,7 +25,7 @@ const Container = (ownProps: OwnProps) => {
   const navigateToInbox = C.Router2.navigateToInbox
   const onConfirm = () => {
     if (url) {
-      openURL(url)
+      void openURL(url)
     }
 
     switch (appLink) {
@@ -35,26 +35,26 @@ const Container = (ownProps: OwnProps) => {
         navigateToInbox()
         break
       case T.RPCGen.AppLinkType.files:
-        switchTab(C.isMobile ? C.Tabs.settingsTab : C.Tabs.fsTab)
-        if (C.isMobile) {
+        switchTab(isMobile ? C.Tabs.settingsTab : C.Tabs.fsTab)
+        if (isMobile) {
           navigateAppend({name: Settings.settingsFsTab, params: {}})
         }
         break
       case T.RPCGen.AppLinkType.wallet:
         switchTab(C.Tabs.settingsTab)
-        if (C.isMobile) {
+        if (isMobile) {
           navigateAppend({name: Settings.settingsWalletsTab, params: {}})
         }
         break
       case T.RPCGen.AppLinkType.git:
-        switchTab(C.isMobile ? C.Tabs.settingsTab : C.Tabs.gitTab)
-        if (C.isMobile) {
+        switchTab(isMobile ? C.Tabs.settingsTab : C.Tabs.gitTab)
+        if (isMobile) {
           navigateAppend({name: Settings.settingsGitTab, params: {}})
         }
         break
       case T.RPCGen.AppLinkType.devices:
-        switchTab(C.isMobile ? C.Tabs.settingsTab : C.Tabs.devicesTab)
-        if (C.isMobile) {
+        switchTab(isMobile ? C.Tabs.settingsTab : C.Tabs.devicesTab)
+        if (isMobile) {
           navigateAppend({name: Settings.settingsDevicesTab, params: {}})
         }
         break
diff --git a/shared/people/container.tsx b/shared/people/container.tsx
index 7ed5d1c796b6..d1854766d417 100644
--- a/shared/people/container.tsx
+++ b/shared/people/container.tsx
@@ -4,7 +4,6 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import type {IconType} from '@/common-adapters/icon.constants-gen' // do NOT pull in all of common-adapters
 import {useNavigation} from '@react-navigation/native'
-import {isMobile} from '@/constants/platform'
 import type {DebouncedFunc} from 'lodash'
 import debounce from 'lodash/debounce'
 import invert from 'lodash/invert'
@@ -126,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/people/follow-notification.tsx b/shared/people/follow-notification.tsx
index f358458d4e2f..297c88e8b598 100644
--- a/shared/people/follow-notification.tsx
+++ b/shared/people/follow-notification.tsx
@@ -60,7 +60,7 @@ const FollowNotification = (props: Props) => {
               ]
             : undefined
         }
-        icon={<Kb.Avatar username={username} onClick={onClick} size={Kb.Styles.isMobile ? 48 : 32} />}
+        icon={<Kb.Avatar username={username} onClick={onClick} size={isMobile ? 48 : 32} />}
         iconContainerStyle={styles.iconContainer}
         when={props.notificationTime}
         contentStyle={styles.peopleItem}
@@ -109,7 +109,7 @@ function MultiFollowNotification(props: Props) {
         </Kb.Text>
       )}
       <Kb.ScrollView
-        {...(Kb.Styles.isMobile ? {alwaysBounceHorizontal: false, horizontal: true} : {})} // Causes error on desktop
+        {...(isMobile ? {alwaysBounceHorizontal: false, horizontal: true} : {})} // Causes error on desktop
         contentContainerStyle={styles.scrollViewContainer}
       >
         {usernames.map(username => (
diff --git a/shared/people/follow-suggestions.tsx b/shared/people/follow-suggestions.tsx
index 65cd2b3201b2..ef99279c9c75 100644
--- a/shared/people/follow-suggestions.tsx
+++ b/shared/people/follow-suggestions.tsx
@@ -13,7 +13,7 @@ const FollowSuggestions = (props: Props) => (
       Consider following...
     </Kb.Text>
     <Kb.ScrollView
-      {...(Kb.Styles.isMobile ? {alwaysBounceHorizontal: false, horizontal: true} : {})} // Causes error on desktop
+      {...(isMobile ? {alwaysBounceHorizontal: false, horizontal: true} : {})} // Causes error on desktop
       contentContainerStyle={styles.scrollViewContainer}
     >
       {props.suggestions.map(suggestion => (
diff --git a/shared/people/index.native.tsx b/shared/people/index.native.tsx
deleted file mode 100644
index c2896817a3fb..000000000000
--- a/shared/people/index.native.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as Kb from '@/common-adapters'
-import {PeoplePageList} from './index.shared'
-import type {WrapProps} from './index.shared'
-import {RefreshControl} from 'react-native'
-
-function People(props: WrapProps) {
-  const {waiting, ...rest} = props
-  return (
-    <>
-      <Kb.ScrollView
-        style={styles.scrollView}
-        refreshControl={<RefreshControl refreshing={waiting} onRefresh={() => props.getData(false, true)} />}
-      >
-        <PeoplePageList {...rest} />
-      </Kb.ScrollView>
-    </>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  scrollView: {...Kb.Styles.globalStyles.fullHeight},
-}))
-
-export default People
diff --git a/shared/people/index.desktop.tsx b/shared/people/index.tsx
similarity index 53%
rename from shared/people/index.desktop.tsx
rename to shared/people/index.tsx
index 9b37de12ddac..ed69966a57e6 100644
--- a/shared/people/index.desktop.tsx
+++ b/shared/people/index.tsx
@@ -1,21 +1,27 @@
 import * as Kb from '@/common-adapters'
 import {PeoplePageList} from './index.shared'
 import type {WrapProps} from './index.shared'
+import {RefreshControl} from 'react-native'
 
 function People(props: WrapProps) {
   const {waiting, ...rest} = props
   return (
-    <Kb.ScrollView style={styles.container}>
-      {waiting && <Kb.ProgressIndicator style={styles.progress} />}
+    <Kb.ScrollView
+      style={styles.container}
+      refreshControl={
+        isMobile
+          ? <RefreshControl refreshing={waiting} onRefresh={() => props.getData(false, true)} />
+          : undefined
+      }
+    >
+      {!isMobile && waiting && <Kb.ProgressIndicator style={styles.progress} />}
       <PeoplePageList {...rest} />
     </Kb.ScrollView>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  container: {
-    ...Kb.Styles.globalStyles.fullHeight,
-  },
+  container: {...Kb.Styles.globalStyles.fullHeight},
   progress: {
     height: 24,
     left: 40,
diff --git a/shared/people/routes.tsx b/shared/people/routes.tsx
index 779d67f09eed..1fec36744521 100644
--- a/shared/people/routes.tsx
+++ b/shared/people/routes.tsx
@@ -17,7 +17,7 @@ const HeaderAvatar = () => {
 export const newRoutes = defineRouteMap({
   peopleRoot: {
     getOptions: {
-      headerRight: Kb.Styles.isMobile ? () => <HeaderAvatar /> : undefined,
+      headerRight: isMobile ? () => <HeaderAvatar /> : undefined,
       headerTitle: () => <ProfileSearch />,
     },
     screen: React.lazy(async () => import('./container')),
diff --git a/shared/people/todo.tsx b/shared/people/todo.tsx
index 5758c129d84e..2783104ceeb5 100644
--- a/shared/people/todo.tsx
+++ b/shared/people/todo.tsx
@@ -157,7 +157,7 @@ const OpenURLTask = ({
   url,
   ...props
 }: TodoOwnProps & {dismissTodoType?: T.People.TodoType; url: string}) => (
-  <BasicTask {...props} dismissTodoType={dismissTodoType} onConfirm={() => openURL(url)} />
+  <BasicTask {...props} dismissTodoType={dismissTodoType} onConfirm={() => { void openURL(url) }} />
 )
 
 const FollowTask = (props: TodoOwnProps) => {
@@ -188,7 +188,7 @@ const TeamTask = (props: TodoOwnProps) => {
 const GitRepoTask = (props: TodoOwnProps) => {
   const {navigateAppend, switchTab} = useRouterNavigation()
   const onConfirm = (isTeam: boolean) => {
-    if (C.isMobile) {
+    if (isMobile) {
       navigateAppend({name: settingsGitTab, params: {}})
     } else {
       switchTab(C.Tabs.gitTab)
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/add-to-team.tsx b/shared/profile/add-to-team.tsx
index bbb671d1ec8b..94292a29aafc 100644
--- a/shared/profile/add-to-team.tsx
+++ b/shared/profile/add-to-team.tsx
@@ -250,7 +250,7 @@ const AddToTeam = (ownProps: OwnProps) => {
             isTeam={false}
             size={16}
             style={{
-              marginLeft: Kb.Styles.isMobile ? Kb.Styles.globalMargins.xxtiny : Kb.Styles.globalMargins.tiny,
+              marginLeft: isMobile ? Kb.Styles.globalMargins.xxtiny : Kb.Styles.globalMargins.tiny,
               marginRight: Kb.Styles.globalMargins.tiny,
             }}
             username={them}
@@ -314,10 +314,10 @@ const AddToTeam = (ownProps: OwnProps) => {
       </Kb.Box2>
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
         <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          {!Kb.Styles.isMobile && <Kb.Button type="Dim" onClick={onBack} label="Cancel" />}
+          {!isMobile && <Kb.Button type="Dim" onClick={onBack} label="Cancel" />}
           <Kb.WaitingButton
             disabled={selectedTeamCount === 0}
-            fullWidth={Kb.Styles.isMobile}
+            fullWidth={isMobile}
             style={styles.addButton}
             onClick={onSave}
             label={selectedTeamCount <= 1 ? 'Add to team' : `Add to ${selectedTeamCount} teams`}
@@ -347,7 +347,7 @@ const TeamRow = (props: RowProps) => {
         <Kb.Box2 direction="vertical" relative={true} style={{display: 'flex'}}>
           <Kb.Avatar
             isTeam={true}
-            size={Kb.Styles.isMobile ? 48 : 32}
+            size={isMobile ? 48 : 32}
             style={{marginRight: Kb.Styles.globalMargins.tiny}}
             teamname={props.name}
           />
@@ -371,7 +371,7 @@ const TeamRow = (props: RowProps) => {
           </Kb.Box2>
         </Kb.Box2>
       </Kb.Box2>
-      {!Kb.Styles.isMobile && <Kb.Divider style={styles.divider} />}
+      {!isMobile && <Kb.Divider style={styles.divider} />}
     </Kb.ClickableBox>
   )
 }
diff --git a/shared/profile/edit-avatar/hooks.tsx b/shared/profile/edit-avatar/hooks.tsx
index 46fce355e46a..af2c3201cc6d 100644
--- a/shared/profile/edit-avatar/hooks.tsx
+++ b/shared/profile/edit-avatar/hooks.tsx
@@ -3,7 +3,7 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import type {Props} from './index.shared'
-import type {ImageInfo} from '@/util/expo-image-picker.native'
+import type {ImageInfo} from '@/util/expo-image-picker'
 import {fixCrop} from '@/util/crop'
 import {getNextRouteAfterAvatar} from '@/teams/new-team/wizard/state'
 import {useLoadedTeam} from '@/teams/team/use-loaded-team'
diff --git a/shared/profile/edit-avatar/index.desktop.tsx b/shared/profile/edit-avatar/index.desktop.tsx
deleted file mode 100644
index 8bd1dd5e1daf..000000000000
--- a/shared/profile/edit-avatar/index.desktop.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
-import KB2 from '@/util/electron.desktop'
-import './edit-avatar.css'
-import useHooks from './hooks'
-const {isDirectory, getPathForFile} = KB2.functions
-
-const AVATAR_CONTAINER_SIZE = 300
-
-const validDrag = (e: React.DragEvent) => {
-  return Array.from(e.dataTransfer.types)
-    .map(t => t)
-    .includes('Files')
-}
-
-const getFile = async (fileList: FileList | undefined): Promise<string> => {
-  const paths = fileList?.length ? Array.from(fileList) : undefined
-  const file = paths?.[0]
-  if (!file) {
-    return ''
-  }
-  const path = getPathForFile?.(file) ?? ''
-  if (!path) {
-    return ''
-  }
-  try {
-    const isDir = await (isDirectory?.(path) ?? Promise.resolve(false))
-    if (isDir) {
-      return ''
-    }
-  } catch {}
-  return path
-}
-
-type Crop = {
-  height: number
-  width: number
-  x: number
-  y: number
-  scale: number
-}
-const getCropCoordinates = (c: Crop) => {
-  const {x, y, scale, width, height} = c
-  const maxX = width / scale
-  const maxY = height / scale
-  const windowScaled = Math.round(AVATAR_CONTAINER_SIZE / scale)
-  let x0 = x / scale
-  x0 = Math.min(Math.max(Math.round(x0), 0), maxX)
-  const x1 = Math.min(x0 + windowScaled, maxX)
-  let y0 = y / scale
-  y0 = Math.min(Math.max(Math.round(y0), 0), maxY)
-  const y1 = Math.min(y0 + windowScaled, maxY)
-  return {x0, x1, y0, y1}
-}
-
-type Loading = undefined | 'loading' | 'loaded'
-const EditAvatar = (_p: Props) => {
-  const p = useHooks(_p)
-  const {wizard, type, error, createdTeam, teamname} = p
-  const [serror, setSerror] = React.useState(false)
-  const [dropping, setDropping] = React.useState(false)
-  const [loading, setLoading] = React.useState<Loading>()
-  const [imageSource, setImageSource] = React.useState('')
-
-  const fileRef = React.useRef<HTMLInputElement>(null)
-
-  const onSave = () => {
-    const crop = getCropCoordinates(cropRef.current)
-    p.onSave(imageSource, crop)
-  }
-  const cropRef = React.useRef({height: 0, scale: 0, width: 0, x: 0, y: 0})
-  const onChanged = (e: Crop) => {
-    cropRef.current = e
-  }
-
-  const onImageLoad = () => {
-    setLoading('loaded')
-  }
-  const onDrop = (e: React.DragEvent) => {
-    const f = async () => {
-      if (!validDrag(e)) {
-        return
-      }
-      setDropping(false)
-      setSerror(false)
-      setLoading('loading')
-      const img = await getFile(e.dataTransfer.files)
-      if (img) {
-        setImageSource(img)
-      }
-    }
-    void f()
-  }
-  const filePickerOpen = () => {
-    fileRef.current?.click()
-  }
-  const pickFile = () => {
-    const f = async () => {
-      setSerror(false)
-      setLoading('loading')
-      const img = await getFile(fileRef.current?.files ?? undefined)
-      if (img) {
-        setImageSource(img)
-      }
-      if (fileRef.current) {
-        fileRef.current.value = ''
-      }
-    }
-    void f()
-  }
-
-  return (
-    <>
-      {error ? (
-        <Kb.Banner color="red" key="propsError">
-          {error}
-        </Kb.Banner>
-      ) : null}
-      {serror ? (
-        <Kb.Banner color="red" key="stateError">
-          The image you uploaded could not be read. Try again with a valid PNG, JPG or GIF.
-        </Kb.Banner>
-      ) : null}
-      <div
-        className={Kb.Styles.classNames({dropping: dropping})}
-        onDrop={onDrop}
-        style={Kb.Styles.collapseStylesDesktop([
-          styles.container,
-          createdTeam && styles.paddingTopForCreatedTeam,
-        ])}
-      >
-        {type === 'team' && createdTeam && !wizard && (
-          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.createdBanner}>
-            <Kb.Text type="BodySmallSemibold" negative={true}>
-              Hoorah! Your team {teamname} was created.
-            </Kb.Text>
-          </Kb.Box2>
-        )}
-        <Kb.Text center={true} type="Body" style={styles.instructions}>
-          Drag and drop a {type} avatar or{' '}
-          <Kb.Text type="BodyPrimaryLink" className="hover-underline" onClick={filePickerOpen}>
-            browse your computer
-          </Kb.Text>{' '}
-          for one.
-        </Kb.Text>
-        <Kb.ClickableBox
-          className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})}
-          onClick={!loading ? filePickerOpen : undefined}
-          style={{
-            borderRadius: type === 'team' ? 32 : AVATAR_CONTAINER_SIZE,
-            ...hoverStyles.hoverContainer,
-          }}
-        >
-          <input
-            accept="image/gif,image/jpeg,image/png"
-            multiple={false}
-            onChange={pickFile}
-            ref={fileRef}
-            style={styles.hidden}
-            type="file"
-          />
-          <Kb.ZoomableImage
-            dragPan={true}
-            src={imageSource}
-            onChanged={onChanged}
-            onLoaded={onImageLoad}
-            boxCacheKey="avatar"
-          />
-          {!loading && (
-            <Kb.Icon
-              className="icon"
-              color={Kb.Styles.globalColors.greyDark}
-              fontSize={48}
-              style={styles.icon}
-              type="iconfont-camera"
-            />
-          )}
-        </Kb.ClickableBox>
-        {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null}
-      </div>
-      <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
-        <Kb.WaitingButton
-          fullWidth={true}
-          label={wizard ? 'Continue' : 'Save'}
-          onClick={onSave}
-          disabled={loading !== 'loaded'}
-          waitingKey={p.waitingKey}
-        />
-      </Kb.Box2>
-    </>
-  )
-}
-
-const hoverStyles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      hoverContainer: Kb.Styles.platformStyles({
-        common: {
-          alignItems: 'flex-start',
-          height: AVATAR_CONTAINER_SIZE,
-          marginBottom: Kb.Styles.globalMargins.small,
-          marginTop: Kb.Styles.globalMargins.medium,
-          outlineStyle: 'dotted',
-          outlineWidth: 4,
-          overflow: 'hidden',
-          position: 'relative',
-          width: AVATAR_CONTAINER_SIZE,
-        },
-        isElectron: {
-          cursor: 'pointer',
-        },
-      }),
-    }) as const
-)
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  container: {
-    ...Kb.Styles.globalStyles.flexBoxColumn,
-    alignItems: 'center',
-    flexGrow: 1,
-    paddingTop: Kb.Styles.globalMargins.small,
-  },
-  createdBanner: {
-    backgroundColor: Kb.Styles.globalColors.green,
-    borderTopLeftRadius: 4,
-    borderTopRightRadius: 4,
-    marginBottom: Kb.Styles.globalMargins.large,
-    paddingBottom: Kb.Styles.globalMargins.xsmall,
-    paddingTop: Kb.Styles.globalMargins.xsmall,
-    textAlign: 'center',
-    width: '100%',
-  },
-  hidden: {display: 'none'},
-  icon: {
-    left: '50%',
-    marginLeft: -24,
-    marginTop: -21,
-    position: 'absolute',
-    top: '50%',
-  },
-  instructions: {maxWidth: 200},
-  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,
-    },
-    isElectron: {
-      borderBottomLeftRadius: Kb.Styles.borderRadius,
-      borderBottomRightRadius: Kb.Styles.borderRadius,
-      overflow: 'hidden',
-    },
-  }),
-  paddingTopForCreatedTeam: {paddingTop: Kb.Styles.globalMargins.xlarge},
-}))
-
-export default EditAvatar
diff --git a/shared/profile/edit-avatar/index.native.tsx b/shared/profile/edit-avatar/index.native.tsx
deleted file mode 100644
index 5c3b03e53285..000000000000
--- a/shared/profile/edit-avatar/index.native.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {type Props} from './index.shared'
-import {useNavigation} from '@react-navigation/native'
-import {launchImageLibraryAsync, type ImageInfo} from '@/util/expo-image-picker.native'
-import {useSafeNavigation} from '@/util/safe-navigation'
-import {CropZoom, type CropZoomRefType} from 'react-native-zoom-toolkit'
-import {ModalTitle} from '@/teams/common'
-import useHooks from './hooks'
-
-const AvatarUploadWrapper = (p: Props) => {
-  const {newTeamWizard} = p
-  const props = useHooks(p)
-  const {image, error: _error, onSave: _onSave, teamID, type, wizard, waitingKey} = props
-  const [selectedImage, setSelectedImage] = React.useState(image)
-  const [imageError, setImageError] = React.useState('')
-  const nav = useSafeNavigation()
-  const navigation = useNavigation()
-  const navUp = () => nav.safeNavigateUp()
-
-  const onChooseNewAvatar = () => {
-    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) {
-          setSelectedImage(first)
-        } else if (!props.wizard) {
-          navUp()
-        }
-      } catch (error) {
-        setImageError(String(error))
-      }
-    }
-    C.ignorePromise(f())
-  }
-
-  const noImage = !image
-  React.useEffect(() => {
-    if (!wizard && noImage) {
-      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) {
-            setSelectedImage(first)
-          } else {
-            nav.safeNavigateUp()
-          }
-        } catch (error) {
-          setImageError(String(error))
-        }
-      }
-      C.ignorePromise(f())
-    }
-  }, [noImage, wizard, nav])
-
-  const error = _error || imageError
-
-  const _zoomRef = React.useRef<AvatarZoomRef>(null)
-
-  const avatar_size = () => {
-    const margin = type === 'team' ? Kb.Styles.globalMargins.large : Kb.Styles.globalMargins.medium
-    const big = Kb.Styles.dimensionWidth - margin * 2
-    if (C.isTablet) {
-      return Math.min(500, big)
-    } else {
-      return big
-    }
-  }
-
-  const onSave = () => {
-    if (!selectedImage) {
-      throw new Error('Missing image when saving avatar')
-    }
-    const rect = _zoomRef.current?.getRect()
-    if (rect) {
-      const xy = {
-        x0: Math.floor(rect.x),
-        x1: Math.floor(rect.x + rect.width),
-        y0: Math.floor(rect.y),
-        y1: Math.floor(rect.y + rect.height),
-      }
-      _onSave(selectedImage.uri, xy)
-    } else {
-      _onSave(selectedImage.uri)
-    }
-  }
-
-  const getImageStyle = (): Kb.Styles.StylesCrossPlatform => ({
-    borderRadius: type === 'team' ? 32 : avatar_size(),
-    height: avatar_size(),
-    width: avatar_size(),
-  })
-
-  const renderImageZoomer = () => {
-    if (type === 'team' && !selectedImage) {
-      return (
-        <Kb.ClickableBox
-          style={Kb.Styles.collapseStyles([styles.placeholder, getImageStyle()])}
-          onClick={onChooseNewAvatar}
-        >
-          <Kb.Icon type="iconfont-camera" sizeType="Huge" color={Kb.Styles.globalColors.black_10} />
-        </Kb.ClickableBox>
-      )
-    }
-    return selectedImage ? (
-      <AvatarZoom
-        src={selectedImage.uri}
-        width={selectedImage.width}
-        height={selectedImage.height}
-        ref={_zoomRef}
-      />
-    ) : null
-  }
-
-  React.useEffect(() => {
-    const hasImage = !!selectedImage
-    navigation.setOptions({
-      headerTitle: () => {
-        if (teamID) {
-          const title = hasImage && C.isIOS ? 'Zoom and pan' : wizard ? 'Upload avatar' : 'Change avatar'
-          if (Kb.Styles.isMobile) {
-            return <ModalTitle teamID={teamID} title={title} newTeamWizard={newTeamWizard} />
-          }
-          return <Kb.Text type="BodyBig">{title}</Kb.Text>
-        }
-        return <Kb.Text type="BodyBig">Upload an avatar</Kb.Text>
-      },
-    })
-  }, [navigation, newTeamWizard, selectedImage, teamID, wizard])
-
-  if (type === 'team') {
-    return (
-      <>
-        {error ? (
-          <Kb.Banner key="err" color="red">
-            <Kb.Text type="Body">{error}</Kb.Text>
-          </Kb.Banner>
-        ) : null}
-        <Kb.Box2 direction="vertical" style={styles.wizardContainer} gap="small">
-          {renderImageZoomer()}
-          <Kb.Box2 direction="vertical" style={styles.flexReallyGrow} />
-          <Kb.Button
-            label={selectedImage ? 'Pick a new avatar' : 'Pick an avatar'}
-            mode="Secondary"
-            onClick={onChooseNewAvatar}
-          />
-        </Kb.Box2>
-        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
-          <Kb.WaitingButton
-            fullWidth={true}
-            label={wizard ? 'Continue' : 'Save'}
-            onClick={onSave}
-            disabled={!selectedImage}
-            waitingKey={waitingKey}
-          />
-        </Kb.Box2>
-      </>
-    )
-  }
-  return (
-    <>
-      {error ? (
-        <Kb.Banner color="red">
-          <Kb.Text type="Body">{error}</Kb.Text>
-        </Kb.Banner>
-      ) : null}
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
-        <Kb.Box2 direction="vertical">{renderImageZoomer()}</Kb.Box2>
-        <Kb.ButtonBar direction="column">
-          <Kb.WaitingButton
-            fullWidth={true}
-            label="Save"
-            onClick={onSave}
-            style={styles.button}
-            waitingKey={waitingKey}
-          />
-        </Kb.ButtonBar>
-      </Kb.Box2>
-    </>
-  )
-}
-
-const avatarSize = 256
-const cropSize = {height: avatarSize, width: avatarSize}
-
-type AvatarZoomRef = {
-  getRect: () => {width: number; height: number; x: number; y: number} | undefined
-}
-
-function AvatarZoom(p: {src?: string; width: number; height: number; ref?: React.Ref<AvatarZoomRef>}) {
-  const {src, width, height, ref} = p
-  const resolution = {height, width}
-
-  React.useImperativeHandle(ref, () => {
-    // we don't use this in mobile for now, and likely never
-    return {
-      getRect: () => {
-        const c = czref.current?.crop(avatarSize)
-        if (c) {
-          const rescale = width / (c.resize?.width ?? 1)
-          const {originX: x, originY: y, width: cw, height: ch} = c.crop
-          return {
-            height: ch * rescale,
-            width: cw * rescale,
-            x: x * rescale,
-            y: y * rescale,
-          }
-        }
-        return
-      },
-    }
-  }, [width])
-  const czref = React.useRef<CropZoomRefType>(null)
-
-  const imageAspectRatio = resolution.width / resolution.height
-  const isWider = imageAspectRatio > 1
-
-  const imageStyle = isWider
-    ? {
-        height: avatarSize,
-        width: avatarSize * imageAspectRatio,
-      }
-    : {
-        height: avatarSize / imageAspectRatio,
-        width: avatarSize,
-      }
-
-  return (
-    <Kb.Box2
-      direction="vertical"
-      overflow="hidden"
-      style={{
-        borderRadius: avatarSize / 2,
-        height: avatarSize,
-        width: avatarSize,
-      }}
-    >
-      {src ? (
-        <CropZoom cropSize={cropSize} resolution={resolution} ref={czref} panMode="clamp" minScale={1}>
-          <Kb.Image src={src} style={imageStyle} />
-        </CropZoom>
-      ) : null}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      button: {
-        marginTop: Kb.Styles.globalMargins.tiny,
-        width: '100%',
-      },
-      container: {
-        ...Kb.Styles.padding(0, Kb.Styles.globalMargins.medium),
-        marginBottom: Kb.Styles.globalMargins.small,
-        marginTop: Kb.Styles.globalMargins.small,
-      },
-      flexReallyGrow: {
-        flexGrow: 1000,
-      },
-      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,
-        },
-        isElectron: {
-          borderBottomLeftRadius: Kb.Styles.borderRadius,
-          borderBottomRightRadius: Kb.Styles.borderRadius,
-          overflow: 'hidden',
-        },
-      }),
-      placeholder: {
-        alignItems: 'center',
-        backgroundColor: Kb.Styles.globalColors.black_05,
-        borderColor: Kb.Styles.globalColors.black_50,
-        borderStyle: 'dotted',
-        borderWidth: 4,
-        display: 'flex',
-        justifyContent: 'center',
-      },
-      wizardContainer: {
-        ...Kb.Styles.padding(64, Kb.Styles.globalMargins.large),
-        backgroundColor: Kb.Styles.globalColors.blueGrey,
-        flex: 1,
-      },
-    }) as const
-)
-
-export default AvatarUploadWrapper
diff --git a/shared/profile/edit-avatar/index.shared.tsx b/shared/profile/edit-avatar/index.shared.tsx
index 8c2b95ad2169..a82dfff6e438 100644
--- a/shared/profile/edit-avatar/index.shared.tsx
+++ b/shared/profile/edit-avatar/index.shared.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import type {ImageInfo} from '@/util/expo-image-picker.native'
+import type {ImageInfo} from '@/util/expo-image-picker'
 import type * as T from '@/constants/types'
 
 export type Props = {
diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx
new file mode 100644
index 000000000000..02fd265a9580
--- /dev/null
+++ b/shared/profile/edit-avatar/index.tsx
@@ -0,0 +1,560 @@
+import * as C from '@/constants'
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import type {Props} from './index.shared'
+import {useNavigation} from '@react-navigation/native'
+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'
+
+const desktopFns = isMobile ? ({} as typeof KB2.functions) : KB2.functions
+
+const AVATAR_CONTAINER_SIZE = 300
+
+// Local type stubs for DOM APIs (native tsconfig lacks dom lib)
+type FileLike = {name?: string; size?: number; type?: string}
+type FileListLike = {length?: number; [key: number]: FileLike; [Symbol.iterator]?: () => Iterator<FileLike>}
+type FileInputRef = {click?: () => void; files?: FileListLike | null; value?: string}
+
+// Desktop helpers
+const validDrag = (e: React.DragEvent) => {
+  return Array.from(e.dataTransfer.types)
+    .map(t => t)
+    .includes('Files')
+}
+
+const getFile = async (fileList: FileListLike | undefined): Promise<string> => {
+  const {isDirectory, getPathForFile} = desktopFns
+  const paths = fileList?.length ? Array.from(fileList as unknown as Iterable<FileLike>) : undefined
+  const file = paths?.[0]
+  if (!file) {
+    return ''
+  }
+  const path = getPathForFile?.(file as unknown as File) ?? ''
+  if (!path) {
+    return ''
+  }
+  try {
+    const isDir = await (isDirectory?.(path) ?? Promise.resolve(false))
+    if (isDir) {
+      return ''
+    }
+  } catch {}
+  return path
+}
+
+type Crop = {
+  height: number
+  width: number
+  x: number
+  y: number
+  scale: number
+}
+const getCropCoordinates = (c: Crop) => {
+  const {x, y, scale, width, height} = c
+  const maxX = width / scale
+  const maxY = height / scale
+  const windowScaled = Math.round(AVATAR_CONTAINER_SIZE / scale)
+  let x0 = x / scale
+  x0 = Math.min(Math.max(Math.round(x0), 0), maxX)
+  const x1 = Math.min(x0 + windowScaled, maxX)
+  let y0 = y / scale
+  y0 = Math.min(Math.max(Math.round(y0), 0), maxY)
+  const y1 = Math.min(y0 + windowScaled, maxY)
+  return {x0, x1, y0, y1}
+}
+
+// Desktop implementation
+type Loading = undefined | 'loading' | 'loaded'
+const DesktopEditAvatar = (_p: Props) => {
+  const p = useHooks(_p)
+  const {wizard, type, error, createdTeam, teamname} = p
+  const [serror, setSerror] = React.useState(false)
+  const [dropping, setDropping] = React.useState(false)
+  const [loading, setLoading] = React.useState<Loading>()
+  const [imageSource, setImageSource] = React.useState('')
+
+  const fileRef = React.useRef<FileInputRef>(null)
+
+  const onSave = () => {
+    const crop = getCropCoordinates(cropRef.current)
+    p.onSave(imageSource, crop)
+  }
+  const cropRef = React.useRef({height: 0, scale: 0, width: 0, x: 0, y: 0})
+  const onChanged = (e: Crop) => {
+    cropRef.current = e
+  }
+
+  const onImageLoad = () => {
+    setLoading('loaded')
+  }
+  const onDrop = (e: React.DragEvent) => {
+    const f = async () => {
+      if (!validDrag(e)) {
+        return
+      }
+      setDropping(false)
+      setSerror(false)
+      setLoading('loading')
+      const img = await getFile(e.dataTransfer.files as unknown as FileListLike)
+      if (img) {
+        setImageSource(img)
+      }
+    }
+    void f()
+  }
+  const filePickerOpen = () => {
+    fileRef.current?.click?.()
+  }
+  const pickFile = () => {
+    const f = async () => {
+      setSerror(false)
+      setLoading('loading')
+      const img = await getFile(fileRef.current?.files ?? undefined)
+      if (img) {
+        setImageSource(img)
+      }
+      if (fileRef.current) {
+        fileRef.current.value = ''
+      }
+    }
+    void f()
+  }
+
+  return (
+    <>
+      {error ? (
+        <Kb.Banner color="red" key="propsError">
+          {error}
+        </Kb.Banner>
+      ) : null}
+      {serror ? (
+        <Kb.Banner color="red" key="stateError">
+          The image you uploaded could not be read. Try again with a valid PNG, JPG or GIF.
+        </Kb.Banner>
+      ) : null}
+      <div
+        className={Kb.Styles.classNames({dropping: dropping})}
+        onDrop={onDrop}
+        style={Kb.Styles.castStyleDesktop(Kb.Styles.collapseStyles([
+          styles.container,
+          createdTeam && styles.paddingTopForCreatedTeam,
+        ]))}
+      >
+        {type === 'team' && createdTeam && !wizard && (
+          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.createdBanner}>
+            <Kb.Text type="BodySmallSemibold" negative={true}>
+              Hoorah! Your team {teamname} was created.
+            </Kb.Text>
+          </Kb.Box2>
+        )}
+        <Kb.Text center={true} type="Body" style={styles.instructions}>
+          Drag and drop a {type} avatar or{' '}
+          <Kb.Text type="BodyPrimaryLink" className="hover-underline" onClick={filePickerOpen}>
+            browse your computer
+          </Kb.Text>{' '}
+          for one.
+        </Kb.Text>
+        <Kb.ClickableBox
+          className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})}
+          onClick={!loading ? filePickerOpen : undefined}
+          style={{
+            borderRadius: type === 'team' ? 32 : AVATAR_CONTAINER_SIZE,
+            ...hoverStyles.hoverContainer,
+          }}
+        >
+          <input
+            accept="image/gif,image/jpeg,image/png"
+            multiple={false}
+            onChange={pickFile}
+            ref={fileRef as React.RefObject<HTMLInputElement>}
+            style={styles.hidden}
+            type="file"
+          />
+          <Kb.ZoomableImage
+            dragPan={true}
+            src={imageSource}
+            onChanged={onChanged}
+            onLoaded={onImageLoad}
+            boxCacheKey="avatar"
+          />
+          {!loading && (
+            <Kb.Icon
+              className="icon"
+              color={Kb.Styles.globalColors.greyDark}
+              fontSize={48}
+              style={styles.icon}
+              type="iconfont-camera"
+            />
+          )}
+        </Kb.ClickableBox>
+        {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null}
+      </div>
+      <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
+        <Kb.WaitingButton
+          fullWidth={true}
+          label={wizard ? 'Continue' : 'Save'}
+          onClick={onSave}
+          disabled={loading !== 'loaded'}
+          waitingKey={p.waitingKey}
+        />
+      </Kb.Box2>
+    </>
+  )
+}
+
+// Native implementation
+type ImageInfo = {uri: string; width: number; height: number; type?: 'image' | 'video'}
+type AvatarZoomRef = {
+  getRect: () => {width: number; height: number; x: number; y: number} | undefined
+}
+
+const NativeAvatarUploadWrapper = (p: Props) => {
+  const {newTeamWizard} = p
+  const props = useHooks(p)
+  const {image, error: _error, onSave: _onSave, teamID, type, wizard, waitingKey} = props
+  const [selectedImage, setSelectedImage] = React.useState(image)
+  const [imageError, setImageError] = React.useState('')
+  const nav = useSafeNavigation()
+  const navigation = useNavigation()
+  const navUp = () => nav.safeNavigateUp()
+
+  const onChooseNewAvatar = () => {
+    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) {
+          setSelectedImage(first)
+        } else if (!props.wizard) {
+          navUp()
+        }
+      } catch (error) {
+        setImageError(String(error))
+      }
+    }
+    C.ignorePromise(f())
+  }
+
+  const noImage = !image
+  React.useEffect(() => {
+    if (!wizard && noImage) {
+      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) {
+            setSelectedImage(first)
+          } else {
+            nav.safeNavigateUp()
+          }
+        } catch (error) {
+          setImageError(String(error))
+        }
+      }
+      C.ignorePromise(f())
+    }
+  }, [noImage, wizard, nav])
+
+  const error = _error || imageError
+
+  const _zoomRef = React.useRef<AvatarZoomRef>(null)
+
+  const avatar_size = () => {
+    const margin = type === 'team' ? Kb.Styles.globalMargins.large : Kb.Styles.globalMargins.medium
+    const big = Kb.Styles.dimensionWidth - margin * 2
+    if (C.isTablet) {
+      return Math.min(500, big)
+    } else {
+      return big
+    }
+  }
+
+  const onSave = () => {
+    if (!selectedImage) {
+      throw new Error('Missing image when saving avatar')
+    }
+    const rect = _zoomRef.current?.getRect()
+    if (rect) {
+      const xy = {
+        x0: Math.floor(rect.x),
+        x1: Math.floor(rect.x + rect.width),
+        y0: Math.floor(rect.y),
+        y1: Math.floor(rect.y + rect.height),
+      }
+      _onSave(selectedImage.uri, xy)
+    } else {
+      _onSave(selectedImage.uri)
+    }
+  }
+
+  const getImageStyle = (): Kb.Styles.StylesCrossPlatform => ({
+    borderRadius: type === 'team' ? 32 : avatar_size(),
+    height: avatar_size(),
+    width: avatar_size(),
+  })
+
+  const renderImageZoomer = () => {
+    if (type === 'team' && !selectedImage) {
+      return (
+        <Kb.ClickableBox
+          style={Kb.Styles.collapseStyles([styles.placeholder, getImageStyle()])}
+          onClick={onChooseNewAvatar}
+        >
+          <Kb.Icon type="iconfont-camera" sizeType="Huge" color={Kb.Styles.globalColors.black_10} />
+        </Kb.ClickableBox>
+      )
+    }
+    return selectedImage ? (
+      <NativeAvatarZoom
+        src={selectedImage.uri}
+        width={selectedImage.width}
+        height={selectedImage.height}
+        ref={_zoomRef}
+      />
+    ) : null
+  }
+
+  React.useEffect(() => {
+    const hasImage = !!selectedImage
+    navigation.setOptions({
+      headerTitle: () => {
+        if (teamID) {
+          const title = hasImage && isIOS ? 'Zoom and pan' : wizard ? 'Upload avatar' : 'Change avatar'
+          if (isMobile) {
+            return <ModalTitle teamID={teamID} title={title} newTeamWizard={newTeamWizard} />
+          }
+          return <Kb.Text type="BodyBig">{title}</Kb.Text>
+        }
+        return <Kb.Text type="BodyBig">Upload an avatar</Kb.Text>
+      },
+    })
+  }, [navigation, newTeamWizard, selectedImage, teamID, wizard])
+
+  if (type === 'team') {
+    return (
+      <>
+        {error ? (
+          <Kb.Banner key="err" color="red">
+            <Kb.Text type="Body">{error}</Kb.Text>
+          </Kb.Banner>
+        ) : null}
+        <Kb.Box2 direction="vertical" style={styles.wizardContainer} gap="small">
+          {renderImageZoomer()}
+          <Kb.Box2 direction="vertical" style={styles.flexReallyGrow} />
+          <Kb.Button
+            label={selectedImage ? 'Pick a new avatar' : 'Pick an avatar'}
+            mode="Secondary"
+            onClick={onChooseNewAvatar}
+          />
+        </Kb.Box2>
+        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
+          <Kb.WaitingButton
+            fullWidth={true}
+            label={wizard ? 'Continue' : 'Save'}
+            onClick={onSave}
+            disabled={!selectedImage}
+            waitingKey={waitingKey}
+          />
+        </Kb.Box2>
+      </>
+    )
+  }
+  return (
+    <>
+      {error ? (
+        <Kb.Banner color="red">
+          <Kb.Text type="Body">{error}</Kb.Text>
+        </Kb.Banner>
+      ) : null}
+      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+        <Kb.Box2 direction="vertical">{renderImageZoomer()}</Kb.Box2>
+        <Kb.ButtonBar direction="column">
+          <Kb.WaitingButton
+            fullWidth={true}
+            label="Save"
+            onClick={onSave}
+            style={styles.button}
+            waitingKey={waitingKey}
+          />
+        </Kb.ButtonBar>
+      </Kb.Box2>
+    </>
+  )
+}
+
+const avatarSize = 256
+const cropSize = {height: avatarSize, width: avatarSize}
+
+function NativeAvatarZoom(p: {src?: string; width: number; height: number; ref?: React.Ref<AvatarZoomRef>}) {
+  const {src, width, height, ref} = p
+  const resolution = {height, width}
+
+
+  React.useImperativeHandle(ref, () => {
+    return {
+      getRect: () => {
+        const c = czref.current?.crop(avatarSize)
+        if (c) {
+          const rescale = width / (c.resize?.width ?? 1)
+          const {originX: x, originY: y, width: cw, height: ch} = c.crop
+          return {
+            height: ch * rescale,
+            width: cw * rescale,
+            x: x * rescale,
+            y: y * rescale,
+          }
+        }
+        return
+      },
+    }
+  }, [width])
+  const czref = React.useRef<CropZoomRefType>(null)
+
+  const imageAspectRatio = resolution.width / resolution.height
+  const isWider = imageAspectRatio > 1
+
+  const imageStyle = isWider
+    ? {
+        height: avatarSize,
+        width: avatarSize * imageAspectRatio,
+      }
+    : {
+        height: avatarSize / imageAspectRatio,
+        width: avatarSize,
+      }
+
+  return (
+    <Kb.Box2
+      direction="vertical"
+      overflow="hidden"
+      style={{
+        borderRadius: avatarSize / 2,
+        height: avatarSize,
+        width: avatarSize,
+      }}
+    >
+      {src ? (
+        <CropZoom cropSize={cropSize} resolution={resolution} ref={czref} panMode="clamp" minScale={1}>
+          <Kb.Image src={src} style={imageStyle} />
+        </CropZoom>
+      ) : null}
+    </Kb.Box2>
+  )
+}
+
+const AvatarUploadWrapper = (p: Props) => {
+  if (!isMobile) return <DesktopEditAvatar {...p} />
+  return <NativeAvatarUploadWrapper {...p} />
+}
+
+const hoverStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      hoverContainer: Kb.Styles.platformStyles({
+        common: {
+          alignItems: 'flex-start',
+          height: AVATAR_CONTAINER_SIZE,
+          marginBottom: Kb.Styles.globalMargins.small,
+          marginTop: Kb.Styles.globalMargins.medium,
+          outlineStyle: 'dotted',
+          outlineWidth: 4,
+          overflow: 'hidden',
+          position: 'relative',
+          width: AVATAR_CONTAINER_SIZE,
+        },
+        isElectron: {
+          cursor: 'pointer',
+        },
+      }),
+    }) as const
+)
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  button: {
+    marginTop: Kb.Styles.globalMargins.tiny,
+    width: '100%',
+  },
+  container: Kb.Styles.platformStyles({
+    common: {
+      ...Kb.Styles.globalStyles.flexBoxColumn,
+      alignItems: 'center',
+      flexGrow: 1,
+    },
+    isMobile: {
+      ...Kb.Styles.padding(0, Kb.Styles.globalMargins.medium),
+      marginBottom: Kb.Styles.globalMargins.small,
+      marginTop: Kb.Styles.globalMargins.small,
+    },
+    isElectron: {
+      paddingTop: Kb.Styles.globalMargins.small,
+    },
+  }),
+  createdBanner: {
+    backgroundColor: Kb.Styles.globalColors.green,
+    borderTopLeftRadius: 4,
+    borderTopRightRadius: 4,
+    marginBottom: Kb.Styles.globalMargins.large,
+    paddingBottom: Kb.Styles.globalMargins.xsmall,
+    paddingTop: Kb.Styles.globalMargins.xsmall,
+    textAlign: 'center',
+    width: '100%',
+  },
+  flexReallyGrow: {
+    flexGrow: 1000,
+  },
+  hidden: {display: 'none'},
+  icon: {
+    left: '50%',
+    marginLeft: -24,
+    marginTop: -21,
+    position: 'absolute',
+    top: '50%',
+  },
+  instructions: {maxWidth: 200},
+  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,
+    },
+    isElectron: {
+      borderBottomLeftRadius: Kb.Styles.borderRadius,
+      borderBottomRightRadius: Kb.Styles.borderRadius,
+      overflow: 'hidden',
+    },
+  }),
+  paddingTopForCreatedTeam: {paddingTop: Kb.Styles.globalMargins.xlarge},
+  placeholder: {
+    alignItems: 'center',
+    backgroundColor: Kb.Styles.globalColors.black_05,
+    borderColor: Kb.Styles.globalColors.black_50,
+    borderStyle: 'dotted',
+    borderWidth: 4,
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  wizardContainer: {
+    ...Kb.Styles.padding(64, Kb.Styles.globalMargins.large),
+    backgroundColor: Kb.Styles.globalColors.blueGrey,
+    flex: 1,
+  },
+}))
+
+export default AvatarUploadWrapper
diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx
index 44f2a06468fa..c7ce3d11e9bb 100644
--- a/shared/profile/generic/proofs-list.tsx
+++ b/shared/profile/generic/proofs-list.tsx
@@ -304,7 +304,7 @@ const Container = ({platform, reason = 'profile'}: Props) => {
                     service: genericService ?? '',
                     username: currentUsernameRef.current,
                   })
-                  openUrl(proof)
+                  void openUrl(proof)
                   afterCheckProofRef.current()
                 }
               },
@@ -547,7 +547,7 @@ const Container = ({platform, reason = 'profile'}: Props) => {
             onCancel={closeModal}
             onSubmit={username => {
               if (step.proofUrl) {
-                openUrl(step.proofUrl)
+                void openUrl(step.proofUrl)
                 return
               }
               currentUsernameRef.current = username
@@ -580,7 +580,7 @@ const ProviderPicker = ({
 }) => {
   const [filter, setFilter] = React.useState('')
   const itemHeight = {
-    height: Kb.Styles.isMobile ? 56 : 48,
+    height: isMobile ? 56 : 48,
     type: 'fixed',
   } as const
   const filterRegexp = makeInsertMatcher(filter)
@@ -642,7 +642,7 @@ const ProviderPicker = ({
                     </Kb.Box2>
                     <Kb.Icon
                       color={Kb.Styles.globalColors.black_50}
-                      fontSize={Kb.Styles.isMobile ? 20 : 16}
+                      fontSize={isMobile ? 20 : 16}
                       style={styles.iconArrow}
                       type="iconfont-arrow-right"
                     />
@@ -718,7 +718,7 @@ const EnterUsername = ({
         </Kb.Box2>
       )}
       <Kb.Box2 direction="vertical" fullWidth={true} gap="small">
-        {C.isMobile ? null : (
+        {isMobile ? null : (
           <Kb.Text center={true} type="Header">
             {pt.headerText}
           </Kb.Text>
@@ -780,7 +780,7 @@ const GenericEnterUsername = ({
   const unreachable = !!step.proofUrl
   return (
     <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.container}>
-      {!unreachable && !Kb.Styles.isMobile && <Kb.BackButton onClick={onCancel} style={styles.backButton} />}
+      {!unreachable && !isMobile && <Kb.BackButton onClick={onCancel} style={styles.backButton} />}
       <Kb.Box2 alignItems="center" direction="vertical" gap="xtiny" style={styles.serviceIconHeaderContainer}>
         <Kb.Box2 direction="vertical" relative={true}>
           <SiteIcon set={step.genericParams.logoFull} full={true} style={styles.serviceIconFull} />
@@ -849,7 +849,7 @@ const GenericEnterUsername = ({
           </Kb.Text>
         )}
         <Kb.ButtonBar direction="row" fullWidth={true} style={styles.buttonBar}>
-          {!Kb.Styles.isMobile && !unreachable && (
+          {!isMobile && !unreachable && (
             <Kb.Button type="Dim" onClick={onCancel} label="Cancel" style={styles.buttonSmall} />
           )}
           {unreachable ? (
@@ -965,7 +965,7 @@ const PostProof = ({
               {noteText}
             </Kb.Text>
           )}
-          <Kb.Box2 direction={Kb.Styles.isMobile ? 'verticalReverse' : 'horizontal'} gap="small">
+          <Kb.Box2 direction={isMobile ? 'verticalReverse' : 'horizontal'} gap="small">
             <Kb.Button type="Dim" onClick={onCancel} label="Cancel" />
             {showSubmit ? (
               <Kb.WaitingButton
@@ -978,7 +978,7 @@ const PostProof = ({
                 onClick={() => {
                   setShowSubmit(true)
                   if (url) {
-                    openUrl(url)
+                    void openUrl(url)
                   }
                 }}
                 label={proofActionText}
@@ -1106,7 +1106,7 @@ const Unreachable = ({
     gap="xtiny"
     alignItems="flex-start"
     style={Kb.Styles.collapseStyles([styles.inputBox, styles.unreachableBox])}
-    fullWidth={Kb.Styles.isMobile}
+    fullWidth={isMobile}
   >
     <SiteIcon
       set={serviceIcon}
@@ -1141,7 +1141,7 @@ const UsernameTips = ({platform}: {platform: T.More.PlatformsExpandedType}) =>
   ) : null
 
 const standardText = (name: string) => ({
-  headerText: C.isMobile ? `Prove ${name}` : `Prove your ${name} identity`,
+  headerText: isMobile ? `Prove ${name}` : `Prove your ${name} identity`,
   hintText: `Your ${name} username`,
 })
 
@@ -1318,7 +1318,7 @@ const styles = Kb.Styles.styleSheetCreate(
         alignItems: 'center',
         display: 'flex',
         flexDirection: 'row',
-        height: Kb.Styles.isMobile ? 56 : 48,
+        height: isMobile ? 56 : 48,
         justifyContent: 'flex-start',
       },
       description: {...rightColumnStyle},
diff --git a/shared/profile/generic/shared.tsx b/shared/profile/generic/shared.tsx
index e457d9fc21be..3a15d9140152 100644
--- a/shared/profile/generic/shared.tsx
+++ b/shared/profile/generic/shared.tsx
@@ -18,7 +18,7 @@ type SiteIconProps = {
 
 export const SiteIcon = (props: SiteIconProps) => {
   const style = props.full ? siteIconStyles.siteIconFull : siteIconStyles.siteIcon
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Image
       src={siteIconToNativeSrcSet(props.set)}
       style={Kb.Styles.collapseStyles([style, props.style])}
diff --git a/shared/profile/modal.tsx b/shared/profile/modal.tsx
index 75c7ef093cca..609a1698b35d 100644
--- a/shared/profile/modal.tsx
+++ b/shared/profile/modal.tsx
@@ -28,12 +28,12 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       buttonBar: {
         flexShrink: 0,
-        padding: Kb.Styles.isMobile ? undefined : Kb.Styles.globalMargins.medium,
+        padding: isMobile ? undefined : Kb.Styles.globalMargins.medium,
       },
       container: {
-        minHeight: Kb.Styles.isMobile ? undefined : 450,
-        padding: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.medium,
-        width: Kb.Styles.isMobile ? undefined : 560,
+        minHeight: isMobile ? undefined : 450,
+        padding: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.medium,
+        width: isMobile ? undefined : 560,
       },
     }) as const
 )
diff --git a/shared/profile/pgp/choice/index.native.tsx b/shared/profile/pgp/choice/index.native.tsx
deleted file mode 100644
index 285719e5340e..000000000000
--- a/shared/profile/pgp/choice/index.native.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from '../no-pgp.native'
diff --git a/shared/profile/pgp/choice/index.desktop.tsx b/shared/profile/pgp/choice/index.tsx
similarity index 92%
rename from shared/profile/pgp/choice/index.desktop.tsx
rename to shared/profile/pgp/choice/index.tsx
index 73a84d794a43..a51dc253846b 100644
--- a/shared/profile/pgp/choice/index.desktop.tsx
+++ b/shared/profile/pgp/choice/index.tsx
@@ -28,7 +28,7 @@ const makeInitialForm = (): GeneratePgpArgs => ({
 })
 
 export default function Choice() {
-  const {clearModals, navigateAppend} = C.Router2
+  const {clearModals, navigateAppend, navigateUp} = C.Router2
   const mountedRef = React.useRef(true)
   const cancelCurrentRef = React.useRef<undefined | (() => void)>(undefined)
   const finishCurrentRef = React.useRef<undefined | ((shouldStoreKeyOnServer: boolean) => void)>(undefined)
@@ -46,6 +46,20 @@ export default function Choice() {
     }
   }, [])
 
+  if (isMobile) {
+    const onCancel = () => navigateUp()
+    return (
+      <Modal onCancel={onCancel}>
+        <Kb.Box2 direction="vertical" gap="small" gapEnd={true}>
+          <Kb.Text center={true} type="Header">
+            Add a PGP key
+          </Kb.Text>
+          <Kb.Text type="Body">For now, please use our desktop app to create PGP keys.</Kb.Text>
+        </Kb.Box2>
+      </Modal>
+    )
+  }
+
   const setStepSafe = (next: Step) => {
     if (mountedRef.current) {
       setStep(next)
@@ -267,10 +281,11 @@ const Finished = (props: {
       <Kb.PlatformIcon platform="pgp" overlay="icon-proof-success" />
       <Kb.Text type="Header">Here is your unique public key!</Kb.Text>
       <Kb.Text type="Body">
-        Your private key has been written to Keybase’s local keychain. You can learn to use it with `keybase
-        pgp help` from your terminal. If you have GPG installed, it has also been written to GPG’s keychain.
+        {'Your private key has been written to Keybase\'s local keychain. You can learn to use it with `keybase pgp help` from your terminal. If you have GPG installed, it has also been written to GPG\'s keychain.'}
       </Kb.Text>
-      <textarea style={Kb.Styles.castStyleDesktop(styles.pgpKeyString)} readOnly={true} value={props.pgpKeyString} />
+      {isMobile ? null : (
+        <textarea style={Kb.Styles.castStyleDesktop(styles.pgpKeyString)} readOnly={true} value={props.pgpKeyString} />
+      )}
       {props.promptShouldStoreKeyOnServer && (
         <Kb.Box2 direction="vertical">
           <Kb.Checkbox
diff --git a/shared/profile/pgp/import/index.native.tsx b/shared/profile/pgp/import/index.native.tsx
deleted file mode 100644
index 285719e5340e..000000000000
--- a/shared/profile/pgp/import/index.native.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from '../no-pgp.native'
diff --git a/shared/profile/pgp/import/index.desktop.tsx b/shared/profile/pgp/import/index.tsx
similarity index 80%
rename from shared/profile/pgp/import/index.desktop.tsx
rename to shared/profile/pgp/import/index.tsx
index 85574114fbef..6650c1cd4cb6 100644
--- a/shared/profile/pgp/import/index.desktop.tsx
+++ b/shared/profile/pgp/import/index.tsx
@@ -7,6 +7,20 @@ export default function Import() {
   const onCancel = () => {
     navigateUp()
   }
+
+  if (isMobile) {
+    return (
+      <Modal onCancel={onCancel}>
+        <Kb.Box2 direction="vertical" gap="small" gapEnd={true}>
+          <Kb.Text center={true} type="Header">
+            Add a PGP key
+          </Kb.Text>
+          <Kb.Text type="Body">For now, please use our desktop app to create PGP keys.</Kb.Text>
+        </Kb.Box2>
+      </Modal>
+    )
+  }
+
   return (
     <Modal onCancel={onCancel}>
       <Kb.ImageIcon type="icon-pgp-key-import-48" />
diff --git a/shared/profile/revoke.tsx b/shared/profile/revoke.tsx
index a3689556e082..18ab547e10c0 100644
--- a/shared/profile/revoke.tsx
+++ b/shared/profile/revoke.tsx
@@ -61,7 +61,7 @@ const RevokeProof = (ownProps: OwnProps) => {
           justifyContent="center"
           style={styles.errorBanner}
         >
-          <Kb.Text center={!Kb.Styles.isMobile} style={styles.errorBannerText} type="BodySemibold">
+          <Kb.Text center={!isMobile} style={styles.errorBannerText} type="BodySemibold">
             {errorMessage}
           </Kb.Text>
         </Kb.Box2>
@@ -71,7 +71,7 @@ const RevokeProof = (ownProps: OwnProps) => {
           <SiteIcon set={icon} full={true} style={styles.siteIcon} />
           <Kb.ImageIcon type="icon-proof-broken" style={styles.revokeIcon} />
         </Kb.Box2>
-        <Kb.Text center={!Kb.Styles.isMobile} style={styles.platformUsername} type="Header">
+        <Kb.Text center={!isMobile} style={styles.platformUsername} type="Header">
           {platformHandle}
         </Kb.Text>
         {!!platformHandleSubtitle && (
@@ -79,10 +79,10 @@ const RevokeProof = (ownProps: OwnProps) => {
             {platformHandleSubtitle}
           </Kb.Text>
         )}
-        <Kb.Text center={!Kb.Styles.isMobile} style={styles.descriptionText} type="Header">
+        <Kb.Text center={!isMobile} style={styles.descriptionText} type="Header">
           {formatMessage(platform)}
         </Kb.Text>
-        <Kb.Text center={!Kb.Styles.isMobile} style={styles.reminderText} type="Body">
+        <Kb.Text center={!isMobile} style={styles.reminderText} type="Body">
           You can add it again later, if you change your mind.
         </Kb.Text>
         <Kb.ButtonBar>
@@ -103,9 +103,9 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       contentContainer: {
-        margin: Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
+        margin: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
         maxWidth: 512,
-        textAlign: Kb.Styles.isMobile ? undefined : 'center',
+        textAlign: isMobile ? undefined : 'center',
       },
       descriptionText: {marginTop: Kb.Styles.globalMargins.medium},
       errorBanner: {
@@ -133,7 +133,7 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       reminderText: {marginTop: Kb.Styles.globalMargins.tiny},
       revokeIcon: {bottom: -8, position: 'absolute', right: -10},
-      siteIcon: Kb.Styles.isMobile ? {height: 64, width: 64} : {height: 48, width: 48},
+      siteIcon: isMobile ? {height: 64, width: 64} : {height: 48, width: 48},
     }) as const
 )
 
diff --git a/shared/profile/routes.tsx b/shared/profile/routes.tsx
index 64f9f6956f2a..41afc8f28b34 100644
--- a/shared/profile/routes.tsx
+++ b/shared/profile/routes.tsx
@@ -13,7 +13,7 @@ const Title = React.lazy(async () => import('./search'))
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      overlay: {width: Kb.Styles.isMobile ? undefined : 500},
+      overlay: {width: isMobile ? undefined : 500},
     }) as const
 )
 
@@ -51,7 +51,7 @@ const EditAvatarHeaderRight = ({
     navigateAppend(getNextRouteAfterAvatar(wizardState, parentTeamMemberCount))
   }
   if (!wizard) return null
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return <Kb.Text type="BodyBigLink" onClick={onSkip}>Skip</Kb.Text>
   }
   return <Kb.Button label="Skip" mode="Secondary" onClick={onSkip} style={skipButtonStyle} type="Default" />
@@ -70,8 +70,8 @@ const EditAvatarHeaderTitle = ({
   wizard?: boolean
 }) => {
   if (teamID) {
-    const title = hasImage && C.isIOS ? 'Zoom and pan' : wizard ? 'Upload avatar' : 'Change avatar'
-    if (Kb.Styles.isMobile) {
+    const title = hasImage && isIOS ? 'Zoom and pan' : wizard ? 'Upload avatar' : 'Change avatar'
+    if (isMobile) {
       return <ModalTitle teamID={teamID} title={title} newTeamWizard={newTeamWizard} />
     }
     return <Kb.Text type="BodyBig">{title}</Kb.Text>
diff --git a/shared/profile/search.tsx b/shared/profile/search.tsx
index e5a065e560f7..9f5ff1ba1bb9 100644
--- a/shared/profile/search.tsx
+++ b/shared/profile/search.tsx
@@ -9,9 +9,9 @@ const ProfileSearch = () => {
       <Kb.SearchFilter
         hotkey="k"
         icon="iconfont-search"
-        onFocus={Kb.Styles.isMobile ? undefined : onSearch}
-        onClick={!Kb.Styles.isMobile ? undefined : onSearch}
-        placeholderText={Kb.Styles.isMobile ? 'Search' : 'Search people'}
+        onFocus={isMobile ? undefined : onSearch}
+        onClick={!isMobile ? undefined : onSearch}
+        placeholderText={isMobile ? 'Search' : 'Search people'}
         size="full-width"
         style={styles.filter}
       />
diff --git a/shared/profile/showcase-team-offer.tsx b/shared/profile/showcase-team-offer.tsx
index 5fbe578609e0..edd51b76a0ac 100644
--- a/shared/profile/showcase-team-offer.tsx
+++ b/shared/profile/showcase-team-offer.tsx
@@ -24,9 +24,9 @@ const Container = () => {
   return (
     <>
       <Kb.Box2 direction="vertical" style={styles.container}>
-        {!Kb.Styles.isMobile && <ShowcaseTeamOfferHeader />}
+        {!isMobile && <ShowcaseTeamOfferHeader />}
         <Kb.ScrollView>
-          {Kb.Styles.isMobile && <ShowcaseTeamOfferHeader />}
+          {isMobile && <ShowcaseTeamOfferHeader />}
           {sortedTeams.map(teamMeta => (
             <TeamRow
               key={teamMeta.id}
@@ -64,7 +64,7 @@ const TeamRow = (p: RowProps) => {
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
       <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamRowContainer}>
-        <Kb.Avatar isTeam={true} size={Kb.Styles.isMobile ? 48 : 32} teamname={name} />
+        <Kb.Avatar isTeam={true} size={isMobile ? 48 : 32} teamname={name} />
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.teamNameContainer}>
           <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamText}>
             <Kb.Text type="BodySemibold" lineClamp={1}>
@@ -99,7 +99,7 @@ const TeamRow = (p: RowProps) => {
           </Kb.Box2>
         )}
       </Kb.Box2>
-      {!Kb.Styles.isMobile && <Kb.Divider style={{marginLeft: 48}} />}
+      {!isMobile && <Kb.Divider style={{marginLeft: 48}} />}
     </Kb.Box2>
   )
 }
@@ -158,7 +158,7 @@ const styles = Kb.Styles.styleSheetCreate(
           paddingRight: Kb.Styles.globalMargins.small,
           paddingTop: Kb.Styles.globalMargins.tiny,
         },
-        isMobile: {minHeight: Kb.Styles.isMobile ? 64 : 48},
+        isMobile: {minHeight: isMobile ? 64 : 48},
       }),
       teamText: {alignSelf: 'flex-start'},
     }) as const
diff --git a/shared/profile/user/actions/follow-button.tsx b/shared/profile/user/actions/follow-button.tsx
index b528ed50c760..f80cf9201d30 100644
--- a/shared/profile/user/actions/follow-button.tsx
+++ b/shared/profile/user/actions/follow-button.tsx
@@ -34,7 +34,7 @@ const FollowButton = (props: Props) => {
         {...otherProps}
       />
     )
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       return button
     }
     return (
diff --git a/shared/profile/user/friend.tsx b/shared/profile/user/friend.tsx
index cea96345c6f3..d4366fc0cd78 100644
--- a/shared/profile/user/friend.tsx
+++ b/shared/profile/user/friend.tsx
@@ -35,7 +35,7 @@ const Container = (ownProps: OwnProps) => {
           {!!followIconType && <Kb.ImageIcon type={followIconType} style={followSizeToStyle[64]} />}
         </Kb.Avatar>
         <Kb.ConnectedUsernames
-          type={Kb.Styles.isMobile ? 'BodySmallBold' : 'BodyBold'}
+          type={isMobile ? 'BodySmallBold' : 'BodyBold'}
           usernames={username}
           onUsernameClicked="profile"
           colorBroken={true}
diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx
index fdda93d37797..909d4ba5b1c2 100644
--- a/shared/profile/user/index.tsx
+++ b/shared/profile/user/index.tsx
@@ -236,7 +236,7 @@ const Tabs = (p: TabsProps) => {
 }
 
 const widthToDimensions = (width: number) => {
-  const singleItemWidth = Kb.Styles.isMobile ? 134 : 120
+  const singleItemWidth = isMobile ? 134 : 120
   const itemsInARow = Math.floor(Math.max(1, width / singleItemWidth))
   const itemWidth = Math.floor(width / itemsInARow)
   return {itemWidth, itemsInARow}
@@ -300,7 +300,7 @@ const BioTeamProofs = (props: BioTeamProofsProps) => {
       />
     </Kb.ButtonBar>
   ) : null
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="space-around" style={styles.bioAndProofs}>
       {!!props.reason && (
         <Kb.Text
@@ -412,7 +412,7 @@ const User = (props: {username: string}) => {
   }, [selectedTab, p.following, p.followers, width, itemsInARow, itemWidth, p.userIsYou, p.username])
 
   const containerStyle = {
-    paddingTop: (Kb.Styles.isAndroid ? 56 : Kb.Styles.isTablet ? 80 : Kb.Styles.isIOS ? 46 : 80) + insetTop,
+    paddingTop: (isAndroid ? 56 : Kb.Styles.isTablet ? 80 : isIOS ? 46 : 80) + insetTop,
   }
 
   const loadingFollowing = p.following === undefined
diff --git a/shared/provision/code-page/container.tsx b/shared/provision/code-page/container.tsx
index 4c34c8fe0df4..ca6d256d737f 100644
--- a/shared/provision/code-page/container.tsx
+++ b/shared/provision/code-page/container.tsx
@@ -119,7 +119,7 @@ const CodePageContainer = () => {
             style={currentDeviceAlreadyProvisioned ? styles.backgroundOnLeft : styles.backgroundOnRight}
           />
         </Kb.Box2>
-        {!currentDeviceAlreadyProvisioned && !Kb.Styles.isMobile && (
+        {!currentDeviceAlreadyProvisioned && !isMobile && (
           <>
             <Kb.BackButton
               onClick={onBack}
@@ -176,7 +176,7 @@ const CodePageContainer = () => {
         <Kb.Box2
           alignItems="center"
           direction="vertical"
-          gap={Kb.Styles.isMobile ? 'medium' : 'small'}
+          gap={isMobile ? 'medium' : 'small'}
           gapEnd={!showHeyWaitInFooter}
           fullWidth={true}
         >
@@ -192,7 +192,7 @@ const CodePageContainer = () => {
               waitingKey={C.waitingKeyProvision}
             />
           )}
-          {tab !== 'enterText' && inModal() && !Kb.Styles.isMobile && (
+          {tab !== 'enterText' && inModal() && !isMobile && (
             <Kb.WaitingButton
               fullWidth={true}
               type={buttonType()}
@@ -242,7 +242,7 @@ const CodePageContainer = () => {
 
   // Workaround for no modals while logged out: display just the troubleshooting modal if we're on mobile and it's open;
   // When we're on desktop being newly provisioned, it's in this._body()
-  if (Kb.Styles.isMobile && troubleshooting) {
+  if (isMobile && troubleshooting) {
     return troubleshootingContent()
   }
   const content = body()
@@ -261,7 +261,7 @@ const CodePageContainer = () => {
 export type DeviceType = 'mobile' | 'desktop'
 export type Tab = 'QR' | 'enterText' | 'viewText'
 
-const currentDeviceType: DeviceType = Kb.Styles.isMobile ? 'mobile' : 'desktop'
+const currentDeviceType: DeviceType = isMobile ? 'mobile' : 'desktop'
 
 const textType = 'BodySemibold'
 
@@ -281,7 +281,7 @@ const SwitchTab = (props: {
   if (props.selected === 'QR') {
     label = 'Type secret instead'
     if (currentDeviceType === 'mobile' && props.otherDevice.type === 'mobile') {
-      tab = (props.currentDeviceAlreadyProvisioned ? Kb.Styles.isMobile : !Kb.Styles.isMobile)
+      tab = (props.currentDeviceAlreadyProvisioned ? isMobile : !isMobile)
         ? 'viewText'
         : 'enterText'
     } else if (currentDeviceType === 'mobile') {
@@ -532,12 +532,12 @@ const styles = Kb.Styles.styleSheetCreate(
       enterTextButton: {
         marginLeft: Kb.Styles.globalMargins.small,
         marginRight: Kb.Styles.globalMargins.small,
-        maxWidth: Kb.Styles.isMobile ? undefined : 460,
+        maxWidth: isMobile ? undefined : 460,
         width: '90%',
       },
       enterTextColor: {color: Kb.Styles.globalColors.greenDark},
       enterTextContainer: {
-        alignItems: Kb.Styles.isMobile ? 'stretch' : 'center',
+        alignItems: isMobile ? 'stretch' : 'center',
         alignSelf: 'stretch',
       },
       enterTextContainer2: Kb.Styles.platformStyles({
@@ -606,7 +606,7 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           // MUST be white, else darkmode messes up the qr code
           backgroundColor: Kb.Styles.globalColors.whiteOrWhite,
-          borderRadius: C.isAndroid ? 0 : 8, // If this is set to ANYTHING other than 0 android DOESN"T WORK!!!!!! The qr scanner totally breaks
+          borderRadius: isAndroid ? 0 : 8, // If this is set to ANYTHING other than 0 android DOESN"T WORK!!!!!! The qr scanner totally breaks
           flexDirection: 'column',
           padding: 4,
         },
diff --git a/shared/provision/code-page/qr-scan/index.desktop.tsx b/shared/provision/code-page/qr-scan/index.desktop.tsx
deleted file mode 100644
index f286a3a03bd8..000000000000
--- a/shared/provision/code-page/qr-scan/index.desktop.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as Kb from '@/common-adapters'
-import QRLines from './lines'
-import useQR from './hooks'
-
-// Basically only used for storybook
-
-const QRScan = () => {
-  const {waiting} = useQR()
-  return (
-    <Kb.Box2 direction="vertical" justifyContent="center" relative={true} style={styles.container}>
-      <QRLines canScan={true} />
-      {waiting && <Kb.ProgressIndicator style={styles.waiting} type="Large" white={true} />}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      container: {
-        alignSelf: 'stretch',
-        backgroundColor: Kb.Styles.globalColors.black,
-        height: 200,
-      },
-      waiting: {
-        alignSelf: 'center',
-      },
-    }) as const
-)
-
-export default QRScan
diff --git a/shared/provision/code-page/qr-scan/index.native.tsx b/shared/provision/code-page/qr-scan/index.native.tsx
deleted file mode 100644
index c7cf73d7d132..000000000000
--- a/shared/provision/code-page/qr-scan/index.native.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as Kb from '@/common-adapters'
-import QRLines from './lines'
-import QRNotAuthorized from './not-authorized'
-import QRScanner from './scanner.native'
-import useQR from './hooks'
-
-const QRScan = () => {
-  const {waiting, onSubmitTextCode} = useQR()
-  return (
-    <Kb.Box2 direction="vertical" relative={true} overflow="hidden" style={styles.container}>
-      {!waiting && (
-        <QRScanner
-          notAuthorizedView={<QRNotAuthorized />}
-          onBarCodeRead={data => onSubmitTextCode(data)}
-          style={styles.camera}
-        />
-      )}
-      {!waiting && <QRLines canScan={true} />}
-      {waiting && <Kb.ProgressIndicator style={styles.waiting} type="Large" white={true} />}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  camera: {
-    flexGrow: 1,
-  },
-  container: {
-    alignSelf: 'stretch',
-    backgroundColor: Kb.Styles.globalColors.black,
-    height: 160,
-  },
-  waiting: {
-    ...Kb.Styles.globalStyles.fillAbsolute,
-  },
-}))
-
-export default QRScan
diff --git a/shared/provision/code-page/qr-scan/index.tsx b/shared/provision/code-page/qr-scan/index.tsx
new file mode 100644
index 000000000000..6472832c4e83
--- /dev/null
+++ b/shared/provision/code-page/qr-scan/index.tsx
@@ -0,0 +1,52 @@
+import * as Kb from '@/common-adapters'
+import QRLines from './lines'
+import QRNotAuthorized from './not-authorized'
+import QRScanner from './scanner'
+import useQR from './hooks'
+
+const QRScan = () => {
+  const {waiting, onSubmitTextCode} = useQR()
+
+  if (!isMobile) {
+    return (
+      <Kb.Box2 direction="vertical" justifyContent="center" relative={true} style={styles.container}>
+        <QRLines canScan={true} />
+        {waiting && <Kb.ProgressIndicator style={styles.waiting} type="Large" white={true} />}
+      </Kb.Box2>
+    )
+  }
+
+  return (
+    <Kb.Box2 direction="vertical" relative={true} overflow="hidden" style={styles.container}>
+      {!waiting && (
+        <QRScanner
+          notAuthorizedView={<QRNotAuthorized />}
+          onBarCodeRead={(data: string) => onSubmitTextCode(data)}
+          style={styles.camera}
+        />
+      )}
+      {!waiting && <QRLines canScan={true} />}
+      {waiting && <Kb.ProgressIndicator style={styles.waiting} type="Large" white={true} />}
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  camera: {
+    flexGrow: 1,
+  },
+  container: Kb.Styles.platformStyles({
+    common: {
+      alignSelf: 'stretch',
+      backgroundColor: Kb.Styles.globalColors.black,
+    },
+    isElectron: {height: 200},
+    isMobile: {height: 160},
+  }),
+  waiting: Kb.Styles.platformStyles({
+    isElectron: {alignSelf: 'center'},
+    isMobile: {...Kb.Styles.globalStyles.fillAbsolute},
+  }),
+}))
+
+export default QRScan
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/provision/error.tsx b/shared/provision/error.tsx
index 92f57392b43c..9b7c58582938 100644
--- a/shared/provision/error.tsx
+++ b/shared/provision/error.tsx
@@ -16,7 +16,7 @@ const Wrapper = (p: {onBack: () => void; children: React.ReactNode}) => (
     <Kb.Box2 direction="vertical" gap="small" gapStart={true} gapEnd={true} style={styles.container}>
       {p.children}
     </Kb.Box2>
-    {Kb.Styles.isMobile && <Kb.Button label="Close" onClick={p.onBack} />}
+    {isMobile && <Kb.Button label="Close" onClick={p.onBack} />}
   </LoginContainer>
 )
 
@@ -49,10 +49,10 @@ const RenderError = ({route}: Props) => {
     navigateUp()
   }
   const onKBHome = () => {
-    openURL('https://keybase.io/')
+    void openURL('https://keybase.io/')
   }
   const onPasswordReset = () => {
-    openURL('https://keybase.io/#password-reset')
+    void openURL('https://keybase.io/#password-reset')
   }
   const onAccountReset = () => _onAccountReset(username)
 
@@ -156,7 +156,7 @@ const RenderError = ({route}: Props) => {
                 {' - Use '}
                 <Kb.Text type="TerminalInline">keybase login</Kb.Text> on the command line to log in
               </Kb.Text>
-              {!Kb.Styles.isMobile && (
+              {!isMobile && (
                 <Kb.Text center={true} type="Body">
                   {' - Install GPG on this machine and import your PGP private key into it'}
                 </Kb.Text>
@@ -225,7 +225,7 @@ const RenderError = ({route}: Props) => {
               <Kb.Text type="TerminalInline">keybase login</Kb.Text> on the device with the corresponding PGP
               private key
             </Kb.Text>
-            {!Kb.Styles.isMobile && (
+            {!isMobile && (
               <Kb.Text center={true} type="Body">
                 {' - Install GPG, put your PGP private key on this machine and try again'}
               </Kb.Text>
diff --git a/shared/provision/forgot-username.tsx b/shared/provision/forgot-username.tsx
index 4957cfecb811..d57eae726cef 100644
--- a/shared/provision/forgot-username.tsx
+++ b/shared/provision/forgot-username.tsx
@@ -55,7 +55,7 @@ const ForgotUsername = () => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       banners={
         <>
           {errorBanner(error)}
diff --git a/shared/provision/paper-key.tsx b/shared/provision/paper-key.tsx
index 1b58217e1185..1f3c039c9d06 100644
--- a/shared/provision/paper-key.tsx
+++ b/shared/provision/paper-key.tsx
@@ -40,7 +40,7 @@ export const PaperKey = (props: Props) => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       banners={errorBanner(props.error)}
       buttons={[
         {
@@ -53,13 +53,13 @@ export const PaperKey = (props: Props) => {
       ]}
       noBackground={true}
       onBack={props.onBack}
-      title={C.isMobile ? 'Enter paper key' : 'Enter your paper key'}
+      title={isMobile ? 'Enter paper key' : 'Enter your paper key'}
     >
       <Kb.Box2
         direction="vertical"
         style={styles.contents}
-        centerChildren={!Kb.Styles.isAndroid /* android keyboardAvoiding doesnt work well */}
-        gap={Kb.Styles.isMobile ? 'tiny' : 'medium'}
+        centerChildren={!isAndroid /* android keyboardAvoiding doesnt work well */}
+        gap={isMobile ? 'tiny' : 'medium'}
       >
         <Kb.Box2 direction="vertical" gap="tiny" centerChildren={true} gapEnd={true}>
           <Kb.ImageIcon type="icon-paper-key-64" />
diff --git a/shared/provision/password.tsx b/shared/provision/password.tsx
index 00e51b80f05e..643922f20129 100644
--- a/shared/provision/password.tsx
+++ b/shared/provision/password.tsx
@@ -25,7 +25,7 @@ const Password = () => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       banners={
         <>
           {resetEmailSent ? (
@@ -49,7 +49,7 @@ const Password = () => {
         },
       ]}
       onBack={onBack}
-      title={C.isMobile ? 'Enter password' : 'Enter your password'}
+      title={isMobile ? 'Enter password' : 'Enter your password'}
       contentContainerStyle={styles.contentContainer}
     >
       <Kb.ScrollView
diff --git a/shared/provision/routes-sub.tsx b/shared/provision/routes-sub.tsx
index 5bb4b3d5f52d..03e287010d87 100644
--- a/shared/provision/routes-sub.tsx
+++ b/shared/provision/routes-sub.tsx
@@ -9,7 +9,7 @@ import {useCurrentUserState} from '@/stores/current-user'
 const CodePageHeaderLeft = () => {
   const currentDeviceAlreadyProvisioned = useCurrentUserState(s => !!s.deviceName)
   const navigateUp = C.Router2.navigateUp
-  if (!Kb.Styles.isMobile) return null
+  if (!isMobile) return null
   return (
     <Kb.Text type="BodyBig" onClick={navigateUp}>
       {currentDeviceAlreadyProvisioned ? 'Back' : 'Cancel'}
@@ -60,7 +60,7 @@ export const newRoutes = {
   },
   username: C.makeScreen(React.lazy(async () => import('./username-or-email')), {
     getOptions: {
-      ...(!Kb.Styles.isMobile ? {headerRight: () => <UsernameHeaderRight />} : {}),
+      ...(!isMobile ? {headerRight: () => <UsernameHeaderRight />} : {}),
       title: 'Log in',
     },
   }),
diff --git a/shared/provision/select-other-device.tsx b/shared/provision/select-other-device.tsx
index 6f04dd771846..e5e3bce48610 100644
--- a/shared/provision/select-other-device.tsx
+++ b/shared/provision/select-other-device.tsx
@@ -13,11 +13,11 @@ type Props = {
 
 type Item = {type: 'header'} | {device: Device; type: 'device'} | {type: 'reset'}
 
-const deviceSmallHeight = Kb.Styles.isMobile ? 56 : 48
+const deviceSmallHeight = isMobile ? 56 : 48
 // "or" text with padding (~36) + ListItem Small
 const resetHeight = 36 + deviceSmallHeight
 // Header text with padding
-const headerHeight = Kb.Styles.isMobile ? 80 : 90
+const headerHeight = isMobile ? 80 : 90
 
 const getItemHeight = (item: Item | undefined): number => {
   switch (item?.type) {
@@ -61,7 +61,7 @@ const SelectOtherDevice = (props: Props) => {
             {!passwordRecovery && (
               <Kb.Text center={true} type="Body">
                 For security reasons, you need to authorize this{' '}
-                {Kb.Styles.isMobile ? 'phone' : 'computer'} with another device or a paper key.
+                {isMobile ? 'phone' : 'computer'} with another device or a paper key.
               </Kb.Text>
             )}
             <Kb.Text center={true} type="Body">
@@ -115,11 +115,11 @@ const SelectOtherDevice = (props: Props) => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       noBackground={true}
       onBack={onBack}
       title={
-        passwordRecovery ? 'Recover password' : `Authorize this ${Kb.Styles.isMobile ? 'device' : 'computer'}`
+        passwordRecovery ? 'Recover password' : `Authorize this ${isMobile ? 'device' : 'computer'}`
       }
       contentContainerStyle={Kb.Styles.padding(0)}
     >
diff --git a/shared/provision/set-public-name.tsx b/shared/provision/set-public-name.tsx
index 7c4580d9d18a..c135a5c02314 100644
--- a/shared/provision/set-public-name.tsx
+++ b/shared/provision/set-public-name.tsx
@@ -20,7 +20,7 @@ const SetPublicName = () => {
     }
   }
   const iconNumbers = T.Devices.nextDeviceIconNumbers(devices)
-  const deviceIconNumber = C.isMobile ? iconNumbers.mobile : iconNumbers.desktop
+  const deviceIconNumber = isMobile ? iconNumbers.mobile : iconNumbers.desktop
 
   const [deviceName, setDeviceName] = React.useState(C.defaultDevicename)
   const [readyToShowError, setReadyToShowError] = React.useState(false)
@@ -42,13 +42,13 @@ const SetPublicName = () => {
     debouncedSetReadyToShowError(true)
   }
 
-  const maybeIcon = Kb.Styles.isMobile
+  const maybeIcon = isMobile
     ? C.isLargeScreen
       ? `icon-phone-background-${deviceIconNumber}-96`
       : `icon-phone-background-${deviceIconNumber}-64`
     : `icon-computer-background-${deviceIconNumber}-96`
 
-  const defaultIcon = Kb.Styles.isMobile
+  const defaultIcon = isMobile
     ? C.isLargeScreen
       ? `icon-phone-96`
       : `icon-phone-64`
@@ -56,7 +56,7 @@ const SetPublicName = () => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       banners={errorBanner(error)}
       buttons={[
         {
@@ -68,7 +68,7 @@ const SetPublicName = () => {
         },
       ]}
       onBack={ponBack}
-      title={Kb.Styles.isMobile ? 'Name this device' : 'Name this computer'}
+      title={isMobile ? 'Name this device' : 'Name this computer'}
     >
       <Kb.Box2 direction="vertical" style={styles.contents} centerChildren={true} gap="medium">
         <Kb.ImageIcon type={Kb.isValidIconType(maybeIcon) ? maybeIcon : defaultIcon} />
diff --git a/shared/provision/troubleshooting.tsx b/shared/provision/troubleshooting.tsx
index 3cd0df03b8a3..e7ace74d6e9f 100644
--- a/shared/provision/troubleshooting.tsx
+++ b/shared/provision/troubleshooting.tsx
@@ -19,7 +19,7 @@ type BigButtonProps = {
 const BigButton = ({onClick, icon, mainText, subText, waiting}: BigButtonProps) => (
   <Kb.ClickableBox onClick={waiting ? undefined : onClick}>
     <Kb.Box2
-      direction={Kb.Styles.isMobile ? 'horizontal' : 'vertical'}
+      direction={isMobile ? 'horizontal' : 'vertical'}
       style={styles.bigButton}
       className="hover_background_color_blueLighter2"
     >
@@ -72,13 +72,13 @@ const Troubleshooting = (props: Props) => {
           style={Kb.Styles.globalStyles.flexOne}
         >
           <Kb.Box2 direction="horizontal" style={styles.headerSide}>
-            {Kb.Styles.isMobile ? (
+            {isMobile ? (
               <Kb.Text type="BodySemiboldLink" onClick={onBack}>
                 Back
               </Kb.Text>
             ) : null}
           </Kb.Box2>
-          <Kb.Text type={Kb.Styles.isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
+          <Kb.Text type={isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
             Troubleshooting
           </Kb.Text>
           <Kb.Box2 direction="horizontal" style={styles.headerSide} />
@@ -87,7 +87,7 @@ const Troubleshooting = (props: Props) => {
       <Kb.Box2 direction="vertical" gap="small" alignItems="center">
         <Kb.Box2 direction="vertical" style={styles.bodyMargins}>
           <Kb.Text type="Body" center={true}>
-            This appears to be a new {Kb.Styles.isMobile ? 'phone' : 'computer'}. Perhaps you restored from a
+            This appears to be a new {isMobile ? 'phone' : 'computer'}. Perhaps you restored from a
             {
               "backup or uninstalled Keybase. Either way, Keybase keys aren't backed up, so this is now a totally"
             }
@@ -98,7 +98,7 @@ const Troubleshooting = (props: Props) => {
           </Kb.Text>
         </Kb.Box2>
         <Kb.Box2
-          direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'}
+          direction={isMobile ? 'vertical' : 'horizontal'}
           style={styles.buttonBar}
           gap="xsmall"
         >
@@ -118,7 +118,7 @@ const Troubleshooting = (props: Props) => {
           />
         </Kb.Box2>
       </Kb.Box2>
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Box2
           direction="vertical"
           centerChildren={true}
diff --git a/shared/provision/username-or-email.tsx b/shared/provision/username-or-email.tsx
index f2893b90d4b6..6d2ce41c8c76 100644
--- a/shared/provision/username-or-email.tsx
+++ b/shared/provision/username-or-email.tsx
@@ -70,7 +70,7 @@ const UsernameOrEmailContainer = (op: OwnProps) => {
 
   return (
     <SignupScreen
-      hideDesktopHeader={!Kb.Styles.isMobile}
+      hideDesktopHeader={!isMobile}
       onRightAction={onGoToSignup}
       rightActionLabel="Create account"
       banners={
diff --git a/shared/router-v2/account-switcher/index.tsx b/shared/router-v2/account-switcher/index.tsx
index 320ca25895c3..887dff8015c1 100644
--- a/shared/router-v2/account-switcher/index.tsx
+++ b/shared/router-v2/account-switcher/index.tsx
@@ -62,16 +62,16 @@ const Container = () => {
     <>
       <Kb.ScrollView alwaysBounceVertical={false}>
         <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true}>
-          {Kb.Styles.isMobile && <MobileHeader {...props} />}
+          {isMobile && <MobileHeader {...props} />}
           <Kb.Divider style={styles.divider} />
-          {Kb.Styles.isMobile ? (
+          {isMobile ? (
             <AccountsRows {...props} />
           ) : (
             <Kb.ScrollView style={styles.desktopScrollview} className="accountSwitcherScrollView">
               <AccountsRows {...props} />
             </Kb.ScrollView>
           )}
-          {props.accountRows.length > 0 && !Kb.Styles.isMobile && <Kb.Divider style={styles.divider} />}
+          {props.accountRows.length > 0 && !isMobile && <Kb.Divider style={styles.divider} />}
         </Kb.Box2>
       </Kb.ScrollView>
     </>
@@ -152,8 +152,8 @@ const AccountRow = (props: AccountRowProps) => {
       }
   return (
     <Kb.ListItem
-      type={Kb.Styles.isMobile ? 'Large' : 'Small'}
-      icon={<Kb.Avatar size={Kb.Styles.isMobile ? 48 : 32} username={props.entry.account.username} />}
+      type={isMobile ? 'Large' : 'Small'}
+      icon={<Kb.Avatar size={isMobile ? 48 : 32} username={props.entry.account.username} />}
       firstItem={true}
       body={
         <Kb.Box2 direction="vertical" fullWidth={true} style={waiting ? styles.waiting : undefined}>
diff --git a/shared/router-v2/common.desktop.tsx b/shared/router-v2/common.desktop.tsx
deleted file mode 100644
index 2bf5a0ec5d4f..000000000000
--- a/shared/router-v2/common.desktop.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import Header from './header/index.desktop'
-import {HeaderLeftButton} from '@/common-adapters/header-buttons'
-import {TabActions} from '@react-navigation/core'
-import type {useSubnavTabAction as useSubnavTabActionType} from './common.shared'
-
-export const headerDefaultStyle = {}
-export const tabBarStyle = {
-  get backgroundColor() {
-    return Kb.Styles.globalColors.blueDarkOrGreyDarkest
-  },
-}
-const actionWidth = 64
-export const defaultNavigationOptions = {
-  header: (p: object) => <Header {...(p as any)} />,
-  headerBackTitle: 'temp',
-  headerBackVisible: true,
-  headerLeft: (p: object) => <HeaderLeftButton {...p} />,
-  headerLeftContainerStyle: {
-    paddingLeft: 8,
-    width: actionWidth,
-  },
-  headerRightContainerStyle: {paddingRight: 8},
-  headerStyle: headerDefaultStyle,
-  headerTitle: (hp: {children: React.ReactNode}) => (
-    <Kb.Text type="Header" style={styles.headerTitle} lineClamp={1} center={true}>
-      {hp.children}
-    </Kb.Text>
-  ),
-  headerTitleContainerStyle: {
-    alignItems: 'stretch' as const,
-    flexGrow: 1,
-  },
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  headerTitle: {
-    alignSelf: 'center',
-    color: Kb.Styles.globalColors.black,
-    marginLeft: Kb.Styles.globalMargins.xsmall,
-  },
-}))
-
-export const useSubnavTabAction: useSubnavTabActionType = (navigation, state) => {
-  const routesRef = React.useRef(state?.routes)
-  const stateKeyRef = React.useRef(state?.key)
-  React.useEffect(() => {
-    routesRef.current = state?.routes
-    stateKeyRef.current = state?.key
-  }, [state])
-
-  const navRef = React.useRef(navigation)
-  React.useEffect(() => {
-    navRef.current = navigation
-  }, [navigation])
-
-  const onSelectTab = (tab: string) => {
-    const r = routesRef.current?.find((r: {name?: string; key?: string}) => {
-      return r.name === tab
-    })
-
-    const key = r?.key ?? ''
-    const event = key
-      ? navRef.current.emit({
-          canPreventDefault: true,
-          target: key,
-          // @ts-expect-error tabPress is valid but not in the emit type
-          type: 'tabPress',
-        })
-      : {defaultPrevented: false}
-
-    if (!event.defaultPrevented) {
-      navRef.current.dispatch({
-        ...TabActions.jumpTo(tab),
-        target: stateKeyRef.current,
-      })
-    }
-  }
-
-  return onSelectTab
-}
diff --git a/shared/router-v2/common.native.tsx b/shared/router-v2/common.native.tsx
deleted file mode 100644
index 00c9aec6c5e9..000000000000
--- a/shared/router-v2/common.native.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-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'
-import type {HeaderOptions} from '@react-navigation/elements'
-import {HeaderLeftButton} from '@/common-adapters/header-buttons'
-import type {NavState} from '@/constants/router'
-
-export const headerDefaultStyle = {
-  get backgroundColor() {
-    return Kb.Styles.isIOS ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.white
-  },
-  borderBottomColor: Kb.Styles.globalColors.black_10,
-  borderBottomWidth: Kb.Styles.hairlineWidth,
-  height: 44,
-}
-
-export const tabBarStyle = {
-  get backgroundColor() {
-    return Kb.Styles.globalColors.blueDarkOrGreyDarkest
-  },
-} as const
-
-export const tabBarBlurEffect = 'systemDefault' as const
-export const tabBarMinimizeBehavior = 'onScrollDown' as const
-
-const actionWidth = 64
-const DEBUGCOLORS = __DEV__ && (false as boolean)
-
-type HeaderLeftProps = Parameters<NonNullable<HeaderOptions['headerLeft']>>[0]
-
-// Options used by default on all navigators
-export const defaultNavigationOptions = {
-  headerBackButtonDisplayMode: 'minimal',
-  headerBackTitle: '',
-  headerBackVisible: false,
-  headerBackgroundContainerStyle: {
-    flexShrink: 0,
-    ...(DEBUGCOLORS ? {backgroundColor: 'pink'} : {}),
-  },
-  headerLeft: ({tintColor}: HeaderLeftProps) => {
-    return <HeaderLeftButton autoDetectCanGoBack={true} tintColor={tintColor} />
-  },
-  headerLeftContainerStyle: {
-    flexGrow: 0,
-    flexShrink: 0,
-    maxWidth: actionWidth,
-    minWidth: actionWidth,
-    paddingLeft: 8,
-    width: actionWidth,
-    ...(DEBUGCOLORS ? {backgroundColor: 'yellow'} : {}),
-  },
-  headerRightContainerStyle: {
-    flexGrow: 0,
-    flexShrink: 0,
-    maxWidth: actionWidth,
-    minWidth: actionWidth,
-    paddingRight: 8,
-    width: actionWidth,
-    ...(DEBUGCOLORS ? {backgroundColor: 'orange'} : {}),
-  },
-  headerStyle: headerDefaultStyle,
-  headerTintColor: Kb.Styles.globalColors.black_50,
-  headerTitle: (hp: {children: React.ReactNode}) => (
-    <Kb.Text type="BodyBig" style={styles.headerTitle} lineClamp={1} center={true}>
-      {hp.children}
-    </Kb.Text>
-  ),
-  headerTitleAlign: Kb.Styles.isAndroid ? 'center' : undefined,
-  headerTitleContainerStyle: {
-    alignItems: 'stretch',
-    flexGrow: 1,
-    flexShrink: 0,
-    // https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/Header/Header.tsx#L254
-    // doesn't take into account custom sizes
-    maxWidth: Kb.Styles.dimensionWidth - 16 * 2 - actionWidth * 2,
-    minHeight: 44,
-    ...(DEBUGCOLORS ? {backgroundColor: 'cyan'} : {}),
-  },
-} as const
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  headerTitle: {
-    color: Kb.Styles.globalColors.black,
-    ...(DEBUGCOLORS ? {backgroundColor: 'pink'} : {}),
-  },
-}))
-
-type SubnavNavigation = Pick<NavigationContainerRef<ParamListBase>, 'dispatch' | 'emit'>
-
-export const useSubnavTabAction = (navigation: SubnavNavigation, state: NavState) => {
-  const onSelectTab = (tab: string) => {
-    const routes = state && 'routes' in state ? state.routes : undefined
-    const route = routes?.find((r: {name?: string; key?: string}) => r.name === tab)
-    const event = route
-      ? navigation.emit({
-          canPreventDefault: true,
-          target: route.key,
-          // @ts-expect-error tabPress is valid but not in the emit type
-          type: 'tabPress',
-        })
-      : {defaultPrevented: false}
-
-    if (!event.defaultPrevented) {
-      navigation.dispatch({
-        ...TabActions.jumpTo(tab),
-        target: state?.key,
-      })
-    }
-  }
-  return onSelectTab
-}
diff --git a/shared/router-v2/common.tsx b/shared/router-v2/common.tsx
new file mode 100644
index 000000000000..6b331bdc0f00
--- /dev/null
+++ b/shared/router-v2/common.tsx
@@ -0,0 +1,171 @@
+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'
+import type {HeaderOptions} from '@react-navigation/elements'
+import type {NativeStackHeaderProps} from '@react-navigation/native-stack'
+import {HeaderLeftButton} from '@/common-adapters/header-buttons'
+import type {NavState} from '@/constants/router'
+import Header from './header/index'
+
+export const headerDefaultStyle = isMobile
+  ? {
+      get backgroundColor() {
+        return isIOS ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.white
+      },
+      borderBottomColor: Kb.Styles.globalColors.black_10,
+      borderBottomWidth: Kb.Styles.hairlineWidth,
+      height: 44,
+    }
+  : {}
+
+export const tabBarStyle = {
+  get backgroundColor() {
+    return Kb.Styles.globalColors.blueDarkOrGreyDarkest
+  },
+} as const
+
+export const tabBarBlurEffect = isMobile ? ('systemDefault' as const) : undefined
+export const tabBarMinimizeBehavior = isMobile ? ('onScrollDown' as const) : undefined
+
+const actionWidth = 64
+const DEBUGCOLORS = __DEV__ && (false as boolean)
+
+type HeaderLeftProps = Parameters<NonNullable<HeaderOptions['headerLeft']>>[0]
+
+export const defaultNavigationOptions = isMobile
+  ? ({
+      headerBackButtonDisplayMode: 'minimal',
+      headerBackTitle: '',
+      headerBackVisible: false,
+      headerBackgroundContainerStyle: {
+        flexShrink: 0,
+        ...(DEBUGCOLORS ? {backgroundColor: 'pink'} : {}),
+      },
+      headerLeft: ({tintColor}: HeaderLeftProps) => {
+        return <HeaderLeftButton autoDetectCanGoBack={true} tintColor={tintColor} />
+      },
+      headerLeftContainerStyle: {
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: actionWidth,
+        minWidth: actionWidth,
+        paddingLeft: 8,
+        width: actionWidth,
+        ...(DEBUGCOLORS ? {backgroundColor: 'yellow'} : {}),
+      },
+      headerRightContainerStyle: {
+        flexGrow: 0,
+        flexShrink: 0,
+        maxWidth: actionWidth,
+        minWidth: actionWidth,
+        paddingRight: 8,
+        width: actionWidth,
+        ...(DEBUGCOLORS ? {backgroundColor: 'orange'} : {}),
+      },
+      headerStyle: headerDefaultStyle,
+      headerTintColor: Kb.Styles.globalColors.black_50,
+      headerTitle: (hp: {children: React.ReactNode}) => (
+        <Kb.Text type="BodyBig" style={styles.headerTitle} lineClamp={1} center={true}>
+          {hp.children}
+        </Kb.Text>
+      ),
+      headerTitleAlign: isAndroid ? 'center' : undefined,
+      headerTitleContainerStyle: {
+        alignItems: 'stretch',
+        flexGrow: 1,
+        flexShrink: 0,
+        maxWidth: Kb.Styles.dimensionWidth - 16 * 2 - actionWidth * 2,
+        minHeight: 44,
+        ...(DEBUGCOLORS ? {backgroundColor: 'cyan'} : {}),
+      },
+    } as const)
+  : {
+      header: (p: NativeStackHeaderProps) => <Header {...(p as any)} />,
+      headerBackTitle: 'temp',
+      headerBackVisible: true,
+      headerLeft: (p: object) => <HeaderLeftButton {...p} />,
+      headerLeftContainerStyle: {
+        paddingLeft: 8,
+        width: actionWidth,
+      },
+      headerRightContainerStyle: {paddingRight: 8},
+      headerStyle: headerDefaultStyle,
+      headerTitle: (hp: {children: React.ReactNode}) => (
+        <Kb.Text type="Header" style={styles.headerTitle} lineClamp={1} center={true}>
+          {hp.children}
+        </Kb.Text>
+      ),
+      headerTitleContainerStyle: {
+        alignItems: 'stretch' as const,
+        flexGrow: 1,
+      },
+    }
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  headerTitle: Kb.Styles.platformStyles({
+    common: {color: Kb.Styles.globalColors.black},
+    isElectron: {
+      alignSelf: 'center',
+      marginLeft: Kb.Styles.globalMargins.xsmall,
+    },
+    isMobile: {
+      ...(DEBUGCOLORS ? {backgroundColor: 'pink'} : {}),
+    },
+  }),
+}))
+
+type SubnavNavigation = Pick<NavigationContainerRef<ParamListBase>, 'dispatch' | 'emit'>
+
+export const useSubnavTabAction = (navigation: SubnavNavigation, state: NavState) => {
+  if (!isMobile) {
+    const routesRef = {current: state?.routes}
+    const stateKeyRef = {current: state?.key}
+    const navRef = {current: navigation}
+
+    const onSelectTab = (tab: string) => {
+      const r = routesRef.current?.find((r: {name?: string; key?: string}) => {
+        return r.name === tab
+      })
+
+      const key = r?.key ?? ''
+      const event = key
+        ? navRef.current.emit({
+            canPreventDefault: true,
+            target: key,
+            // @ts-expect-error tabPress is valid but not in the emit type
+            type: 'tabPress',
+          })
+        : {defaultPrevented: false}
+
+      if (!event.defaultPrevented) {
+        navRef.current.dispatch({
+          ...TabActions.jumpTo(tab),
+          target: stateKeyRef.current,
+        })
+      }
+    }
+    return onSelectTab
+  }
+
+  const onSelectTab = (tab: string) => {
+    const routes = state && 'routes' in state ? state.routes : undefined
+    const route = routes?.find((r: {name?: string; key?: string}) => r.name === tab)
+    const event = route
+      ? navigation.emit({
+          canPreventDefault: true,
+          target: route.key,
+          // @ts-expect-error tabPress is valid but not in the emit type
+          type: 'tabPress',
+        })
+      : {defaultPrevented: false}
+
+    if (!event.defaultPrevented) {
+      navigation.dispatch({
+        ...TabActions.jumpTo(tab),
+        target: state?.key,
+      })
+    }
+  }
+  return onSelectTab
+}
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/header/index.tsx b/shared/router-v2/header/index.tsx
new file mode 100644
index 000000000000..f9f262f34b53
--- /dev/null
+++ b/shared/router-v2/header/index.tsx
@@ -0,0 +1,2 @@
+const Header = () => null
+export default Header
diff --git a/shared/router-v2/hooks.native.tsx b/shared/router-v2/hooks.native.tsx
index b1782aacb84e..e86b7b8389a6 100644
--- a/shared/router-v2/hooks.native.tsx
+++ b/shared/router-v2/hooks.native.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as React from 'react'
 import {useColorScheme} from 'react-native'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -17,6 +16,6 @@ export const useRootKey = () => {
       setNavKey(username)
     }
   }, [username])
-  const darkSuffix = C.isAndroid ? (isDarkMode ? '-dark' : '-light') : ''
+  const darkSuffix = isAndroid ? (isDarkMode ? '-dark' : '-light') : ''
   return navKey ? `${navKey}${darkSuffix}` : ''
 }
diff --git a/shared/router-v2/linking.tsx b/shared/router-v2/linking.tsx
index a5ea7992bfee..e33aab16ff99 100644
--- a/shared/router-v2/linking.tsx
+++ b/shared/router-v2/linking.tsx
@@ -1,11 +1,11 @@
 import * as Tabs from '@/constants/tabs'
 import {isSplit} from '@/constants/chat/layout'
 import {isValidConversationIDKey} from '@/constants/types/chat/common'
-import {isMobile} from '@/constants/platform'
 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 ----
 
@@ -255,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 {}
     }
 
@@ -343,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 34bca0e3f1db..000000000000
--- a/shared/router-v2/router.desktop.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import * as Common from './common.desktop'
-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 dd4bd2046a71..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.native'
-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,
-    },
-    ...(C.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 52%
rename from shared/router-v2/screen-layout.native.tsx
rename to shared/router-v2/screen-layout.tsx
index ae0abbcd42d6..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 {isTablet} from '@/constants/platform'
 import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
-import {isTablet, isIOS, isAndroid} from '@/constants/platform'
+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 67c69d82a2ff..1b932e531734 100644
--- a/shared/router-v2/tab-bar.desktop.tsx
+++ b/shared/router-v2/tab-bar.desktop.tsx
@@ -6,12 +6,12 @@ import * as Platforms from '@/constants/platform'
 import * as T from '@/constants/types'
 import * as React from 'react'
 import * as Tabs from '@/constants/tabs'
-import * as Common from './common.desktop'
+import * as Common from './common'
 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/about.tsx b/shared/settings/about.tsx
index accd890cad7f..844431d49b93 100644
--- a/shared/settings/about.tsx
+++ b/shared/settings/about.tsx
@@ -8,20 +8,20 @@ const terms = 'https://keybase.io/_/webview/terms'
 const About = () => {
   const navigateAppend = C.Router2.navigateAppend
   const onShowPrivacyPolicy = () => {
-    if (C.isMobile) {
+    if (isMobile) {
       navigateAppend({
         name: 'webLinks',
         params: {title: 'Privacy Policy', url: privacyPolicy},
       })
     } else {
-      openUrl(privacyPolicy)
+      void openUrl(privacyPolicy)
     }
   }
   const onShowTerms = () => {
-    if (C.isMobile) {
+    if (isMobile) {
       navigateAppend({name: 'webLinks', params: {title: 'Terms', url: terms}})
     } else {
-      openUrl(terms)
+      void openUrl(terms)
     }
   }
 
diff --git a/shared/settings/account/add-modals.tsx b/shared/settings/account/add-modals.tsx
index 2feee672ace7..3551a6860e8a 100644
--- a/shared/settings/account/add-modals.tsx
+++ b/shared/settings/account/add-modals.tsx
@@ -69,7 +69,7 @@ export const Email = () => {
           onChangeSearchable={onChangeSearchable}
           onContinue={onContinue}
           iconType={
-            Kb.Styles.isMobile
+            isMobile
               ? C.isLargeScreen
                 ? 'icon-email-add-96'
                 : 'icon-email-add-64'
@@ -84,7 +84,7 @@ export const Email = () => {
         style={Kb.Styles.collapseStyles([styles.modalFooter, styles.footer])}
       >
         <Kb.ButtonBar style={styles.buttonBar} fullWidth={true}>
-          {!Kb.Styles.isMobile && (
+          {!isMobile && (
             <Kb.Button type="Dim" label="Cancel" fullWidth={true} onClick={onClose} disabled={waiting} />
           )}
           <Kb.Button
@@ -157,7 +157,7 @@ export const Phone = () => {
           searchable={searchable}
           onChangeSearchable={onChangeSearchable}
           iconType={
-            Kb.Styles.isMobile
+            isMobile
               ? C.isLargeScreen
                 ? 'icon-phone-number-add-96'
                 : 'icon-phone-number-add-64'
@@ -167,7 +167,7 @@ export const Phone = () => {
       </Kb.Box2>
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={Kb.Styles.collapseStyles([styles.modalFooter, styles.footer])}>
           <Kb.ButtonBar style={styles.buttonBar} fullWidth={true}>
-            {!Kb.Styles.isMobile && (
+            {!isMobile && (
               <Kb.Button type="Dim" label="Cancel" fullWidth={true} onClick={onClose} disabled={waiting} />
             )}
             <Kb.Button
@@ -267,7 +267,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       body: {
         ...Kb.Styles.padding(
-          Kb.Styles.isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.xlarge,
+          isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.xlarge,
           Kb.Styles.globalMargins.small,
           0
         ),
diff --git a/shared/settings/account/confirm-delete.tsx b/shared/settings/account/confirm-delete.tsx
index d2a5a7bb2e51..9012de11cd82 100644
--- a/shared/settings/account/confirm-delete.tsx
+++ b/shared/settings/account/confirm-delete.tsx
@@ -47,10 +47,10 @@ const DeleteModal = (props: OwnProps) => {
 
   const icon =
     itemType === 'email'
-      ? Kb.Styles.isMobile
+      ? isMobile
         ? 'icon-email-remove-96'
         : 'icon-email-remove-64'
-      : Kb.Styles.isMobile
+      : isMobile
         ? 'icon-phone-number-remove-96'
         : 'icon-phone-number-remove-64'
 
diff --git a/shared/settings/account/email-phone-row.tsx b/shared/settings/account/email-phone-row.tsx
index c06bdfc56f58..7232edfef755 100644
--- a/shared/settings/account/email-phone-row.tsx
+++ b/shared/settings/account/email-phone-row.tsx
@@ -53,7 +53,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai
         onClick: onToggleSearchable,
         subTitle: searchable
           ? `Don't let friends find you by this ${copyType}.`
-          : `${Kb.Styles.isMobile ? '' : '(Recommended) '}Let friends find you by this ${copyType}.`,
+          : `${isMobile ? '' : '(Recommended) '}Let friends find you by this ${copyType}.`,
         title: searchable ? 'Make unsearchable' : 'Make searchable',
       })
     }
@@ -90,7 +90,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai
         closeText="Cancel"
         visible={true}
         position="bottom right"
-        header={Kb.Styles.isMobile ? header : undefined}
+        header={isMobile ? header : undefined}
         onHidden={hidePopup}
         items={menuItems}
         closeOnSelect={true}
@@ -111,7 +111,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai
 
   let subtitle = ''
 
-  if (C.isMobile && hasRecentVerifyEmail && !verified) {
+  if (isMobile && hasRecentVerifyEmail && !verified) {
     subtitle = 'Check your inbox'
   } else {
     if (hasRecentVerifyEmail && !verified) {
@@ -167,9 +167,9 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       badge: {
-        borderRadius: Kb.Styles.isMobile ? 5 : 4,
-        height: Kb.Styles.isMobile ? 10 : 8,
-        width: Kb.Styles.isMobile ? 10 : 8,
+        borderRadius: isMobile ? 5 : 4,
+        height: isMobile ? 10 : 8,
+        width: isMobile ? 10 : 8,
       },
       badgeGearIcon: {
         position: 'absolute',
@@ -181,7 +181,7 @@ const styles = Kb.Styles.styleSheetCreate(
         marginLeft: 'auto',
       },
       container: {
-        height: Kb.Styles.isMobile ? 48 : 40,
+        height: isMobile ? 48 : 40,
       },
       gearIcon: Kb.Styles.platformStyles({
         isElectron: {...Kb.Styles.desktopStyles.clickable},
diff --git a/shared/settings/account/index.tsx b/shared/settings/account/index.tsx
index 828e64988f5d..f071fd8c37f7 100644
--- a/shared/settings/account/index.tsx
+++ b/shared/settings/account/index.tsx
@@ -91,7 +91,7 @@ const Password = ({randomPW}: {randomPW?: boolean}) => {
   const hasPassword = !randomPW
   let passwordLabel: string
   if (hasPassword) {
-    passwordLabel = Kb.Styles.isMobile ? 'Change' : 'Change password'
+    passwordLabel = isMobile ? 'Change' : 'Change password'
   } else {
     passwordLabel = 'Set a password'
   }
@@ -121,7 +121,7 @@ const WebAuthTokenLogin = () => {
     generateWebAuthToken(
       [undefined],
       link => {
-        openURL(link)
+        void openURL(link)
       },
       () => {}
     )
diff --git a/shared/settings/advanced.tsx b/shared/settings/advanced.tsx
index fad99aa86046..019ad2837cbf 100644
--- a/shared/settings/advanced.tsx
+++ b/shared/settings/advanced.tsx
@@ -84,7 +84,7 @@ const UseNativeFrame = () => {
       initialUseNativeFrame = useNativeFrame
     }
   }, [useNativeFrame])
-  return C.isMobile ? null : (
+  return isMobile ? null : (
     <>
       <Kb.Checkbox
         checked={!useNativeFrame}
@@ -266,10 +266,10 @@ const Advanced = () => {
               />
             )}
             {C.isLinux ? <UseNativeFrame /> : null}
-            {!C.isMobile && (
+            {!isMobile && (
               <Kb.Checkbox label="Open Keybase on startup" checked={openAtLogin} onCheck={onSetOpenAtLogin} />
             )}
-            {!C.isMobile && (
+            {!isMobile && (
               <Kb.Checkbox
                 label={
                   'Disable spellchecking' +
@@ -366,7 +366,7 @@ const Developer = () => {
       </Kb.Text>
       <Kb.Divider style={styles.divider} />
       <Kb.Button style={styles.developerButtons} type="Danger" label="DB Nuke" onClick={onDBNuke} />
-      {Kb.Styles.isIOS ? (
+      {isIOS ? (
         <Kb.Button
           style={styles.developerButtons}
           mode="Secondary"
diff --git a/shared/settings/archive/index.tsx b/shared/settings/archive/index.tsx
index 411143e22b7f..7a7fd058e160 100644
--- a/shared/settings/archive/index.tsx
+++ b/shared/settings/archive/index.tsx
@@ -126,7 +126,7 @@ function ChatJob(p: {index: number; job: ChatArchiveJob; loadChat: () => Promise
 
   const {started, progress, outPath, context, status} = job
   const done = status === T.RPCChat.ArchiveChatJobStatus.complete
-  const sub = Kb.Styles.isMobile ? (
+  const sub = isMobile ? (
     <Kb.Text type="BodyBold" lineClamp={1}>
       {context}
     </Kb.Text>
@@ -141,7 +141,7 @@ function ChatJob(p: {index: number; job: ChatArchiveJob; loadChat: () => Promise
     actions = (
       <Kb.Box2 direction="vertical" style={styles.action}>
         <Kb.Text type="BodySmall">{started}</Kb.Text>
-        {Kb.Styles.isMobile ? (
+        {isMobile ? (
           <Kb.Text type="BodyPrimaryLink" onClick={onShare}>
             Share
           </Kb.Text>
@@ -160,13 +160,13 @@ function ChatJob(p: {index: number; job: ChatArchiveJob; loadChat: () => Promise
 
     let pauseOrResume: React.ReactNode
     if (isPaused || isErr) {
-      pauseOrResume = Kb.Styles.isMobile ? (
+      pauseOrResume = isMobile ? (
         <Kb.Icon type="iconfont-play" onClick={onResume} />
       ) : (
         <Kb.Button label={isPaused ? 'Resume' : 'Retry'} onClick={onResume} small={true} />
       )
     } else if (job.status === T.RPCChat.ArchiveChatJobStatus.running) {
-      pauseOrResume = Kb.Styles.isMobile ? (
+      pauseOrResume = isMobile ? (
         <Kb.Icon type="iconfont-pause" onClick={onPause} />
       ) : (
         <Kb.Button label="Pause" onClick={onPause} small={true} />
@@ -176,7 +176,7 @@ function ChatJob(p: {index: number; job: ChatArchiveJob; loadChat: () => Promise
     actions = (
       <Kb.Box2 direction="horizontal" style={styles.action} gap="tiny">
         {pauseOrResume}
-        {Kb.Styles.isMobile ? (
+        {isMobile ? (
           <Kb.Icon color={Kb.Styles.globalColors.red} type="iconfont-remove" onClick={onCancel} />
         ) : (
           <Kb.Button type="Danger" label="Cancel" onClick={onCancel} small={true} />
@@ -191,7 +191,7 @@ function ChatJob(p: {index: number; job: ChatArchiveJob; loadChat: () => Promise
       type="Small"
       body={
         <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" gap="tiny">
-          <Kb.Box2 direction="vertical" style={{padding: Kb.Styles.isMobile ? 4 : 8, width: 32}}>
+          <Kb.Box2 direction="vertical" style={{padding: isMobile ? 4 : 8, width: 32}}>
             <Kb.Icon type="iconfont-chat" />
           </Kb.Box2>
           <Kb.Box2 direction="vertical" fullWidth={true} flex={1} style={styles.jobLeft} gap="xtiny">
@@ -227,14 +227,14 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) {
   })
 
   const onShowFinder = () => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       return
     }
     openLocalPathInSystemFileManagerDesktop(job.zipFilePath)
   }
 
   const onShare = () => {
-    if (!Kb.Styles.isMobile) {
+    if (!isMobile) {
       return
     }
     showShareActionSheet({filePath: job.zipFilePath, mimeType: 'application/zip'})
@@ -299,12 +299,12 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) {
               <Kb.Text type="BodyBold" lineClamp={1} style={{flexShrink: 1}} ellipsizeMode="head">
                 {job.gitRepo ?? job.kbfsPath}
               </Kb.Text>
-              {C.isMobile ? null : <Kb.Box2 direction="horizontal" style={{flex: 1}} />}
-              {C.isMobile ? null : job.bytesTotal ? (
+              {isMobile ? null : <Kb.Box2 direction="horizontal" style={{flex: 1}} />}
+              {isMobile ? null : job.bytesTotal ? (
                 <Kb.Text type="BodySmall">{FS.humanReadableFileSize(job.bytesTotal)}</Kb.Text>
               ) : null}
               <Kb.Text type="BodySmall" style={{flexShrink: 0}}>
-                {C.isMobile
+                {isMobile
                   ? formatTimeForConversationList(job.started.getTime())
                   : formatTimeForChat(job.started.getTime())}
               </Kb.Text>
@@ -324,7 +324,7 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) {
                   <Kb.Icon type="iconfont-exclamation" color={Kb.Styles.globalColors.red} fontSize={14} />
                 </Kb.WithTooltip>
               )}
-              {!C.isMobile && revisionBehindStr && (
+              {!isMobile && revisionBehindStr && (
                 <Kb.WithTooltip tooltip={revisionBehindStr}>
                   <Kb.Icon
                     type="iconfont-exclamation"
@@ -337,7 +337,7 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) {
             </Kb.Box2>
           </Kb.Box2>
           <Kb.Box2 direction="vertical" alignItems="flex-end" style={styles.kbfsJobRight}>
-            {C.isMobile ? (
+            {isMobile ? (
               <Kb.Box2 direction="horizontal" alignItems="center" style={{padding: 8}}>
                 {job.phase === 'Done' ? (
                   <Kb.Icon onClick={showPopup} type="iconfont-ellipsis" />
@@ -407,7 +407,7 @@ const Archive = () => {
             job.status === T.RPCChat.ArchiveChatJobStatus.complete
               ? [
                   T.RPCChat.localArchiveChatDeleteRpcPromise({
-                    deleteOutputPath: C.isMobile,
+                    deleteOutputPath: isMobile,
                     identifyBehavior: T.RPCGen.TLFIdentifyBehavior.unset,
                     jobID: job.id,
                   }),
@@ -442,7 +442,7 @@ const Archive = () => {
     <Kb.ScrollView style={styles.scroll}>
       <Kb.Box2 direction="vertical" fullWidth={true} gap="medium" style={styles.container}>
         <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
-          {Kb.Styles.isMobile ? null : <Kb.Text type="Header">Archive</Kb.Text>}
+          {isMobile ? null : <Kb.Text type="Header">Archive</Kb.Text>}
           <Kb.Box2 direction="vertical" flex={1} style={styles.jobs} fullWidth={true} alignItems="center">
             <Kb.Text type="BodySmall" style={{alignSelf: 'center'}}>
               {
@@ -450,21 +450,21 @@ const Archive = () => {
               }
             </Kb.Text>
           </Kb.Box2>
-          {C.isMobile ? (
+          {isMobile ? (
             <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" gap="xtiny">
               <Kb.Box2 direction="horizontal" alignSelf="center" gap="xtiny">
-                <Kb.Button small={C.isMobile} label="Backup all chat" onClick={archiveChat} />
-                <Kb.Button small={C.isMobile} label="Backup all files" onClick={archiveFS} />
+                <Kb.Button small={isMobile} label="Backup all chat" onClick={archiveChat} />
+                <Kb.Button small={isMobile} label="Backup all files" onClick={archiveFS} />
               </Kb.Box2>
               <Kb.Box2 direction="horizontal" alignSelf="center">
-                <Kb.Button small={C.isMobile} label="Backup all Git repos" onClick={archiveGit} />
+                <Kb.Button small={isMobile} label="Backup all Git repos" onClick={archiveGit} />
               </Kb.Box2>
             </Kb.Box2>
           ) : (
             <Kb.Box2 direction="horizontal" alignSelf="center" gap="xtiny">
-              <Kb.Button small={C.isMobile} label="Backup all chat" onClick={archiveChat} />
-              <Kb.Button small={C.isMobile} label="Backup all files" onClick={archiveFS} />
-              <Kb.Button small={C.isMobile} label="Backup all Git repos" onClick={archiveGit} />
+              <Kb.Button small={isMobile} label="Backup all chat" onClick={archiveChat} />
+              <Kb.Button small={isMobile} label="Backup all files" onClick={archiveFS} />
+              <Kb.Button small={isMobile} label="Backup all Git repos" onClick={archiveGit} />
             </Kb.Box2>
           )}
         </Kb.Box2>
@@ -501,7 +501,7 @@ const Archive = () => {
 const styles = Kb.Styles.styleSheetCreate(() => ({
   action: {flexShrink: 0},
   clear: {alignSelf: 'flex-start', marginTop: 16},
-  container: {padding: Kb.Styles.isMobile ? 8 : 16},
+  container: {padding: isMobile ? 8 : 16},
   errorTip: {justifyContent: 'center'},
   jobLeft: {flexShrink: 1},
   jobs: {
diff --git a/shared/settings/archive/modal.tsx b/shared/settings/archive/modal.tsx
index ba2d4d22fe02..6e6a5bf96fcc 100644
--- a/shared/settings/archive/modal.tsx
+++ b/shared/settings/archive/modal.tsx
@@ -3,7 +3,7 @@ import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import * as T from '@/constants/types'
 import {pathToRPCPath} from '@/constants/fs'
-import {fsCacheDir, isAndroid} from '@/constants/platform'
+import {fsCacheDir} from '@/constants/platform'
 import {pickSave} from '@/util/misc'
 import * as FsCommon from '@/fs/common'
 import {settingsArchiveTab} from '@/constants/settings'
@@ -61,7 +61,7 @@ const ArchiveModal = (p: Props) => {
   const displayname = p.type === 'chatID' ? chatIDToDisplayname(p.conversationIDKey) : ''
 
   let defaultPath = ''
-  if (C.isElectron) {
+  if (isElectron) {
     defaultPath = `${C.downloadFolder}/kb-archive-`
     switch (type) {
       case 'chatID':
@@ -101,7 +101,7 @@ const ArchiveModal = (p: Props) => {
   const navigateUp = C.Router2.navigateUp
   const switchTab = C.Router2.switchTab
 
-  const canStart = !!((C.isMobile || outpath) && !started)
+  const canStart = !!((isMobile || outpath) && !started)
 
   const onStart = () => {
     if (!canStart) return
@@ -326,7 +326,7 @@ const ArchiveModal = (p: Props) => {
       break
   }
 
-  const output = Kb.Styles.isMobile ? null : (
+  const output = isMobile ? null : (
     <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center">
       <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
         <Kb.Text type="Body">Save To</Kb.Text>
@@ -347,7 +347,7 @@ const ArchiveModal = (p: Props) => {
     <>
       <Kb.ScrollView alwaysBounceVertical={false} style={Kb.Styles.globalStyles.flexOne}>
         <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} gap="small" style={styles.container}>
-          {Kb.Styles.isMobile ? (
+          {isMobile ? (
             <Kb.Text type="Body">Share a copy of your content to another app</Kb.Text>
           ) : (
             <Kb.Text type="Body">Save a copy of your content to your local drive</Kb.Text>
@@ -372,7 +372,7 @@ const ArchiveModal = (p: Props) => {
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  container: {padding: Kb.Styles.isMobile ? 8 : 16},
+  container: {padding: isMobile ? 8 : 16},
   contentContainer: {
     maxWidth: 400,
   },
diff --git a/shared/settings/chat.tsx b/shared/settings/chat.tsx
index 550b8c52cead..b1b3ad04f37e 100644
--- a/shared/settings/chat.tsx
+++ b/shared/settings/chat.tsx
@@ -231,8 +231,8 @@ const Security = ({allowEdit, groups, refresh, toggle}: NotificationSettingsStat
               <Kb.Box2
                 direction="vertical"
                 fullWidth={true}
-                gap={Kb.Styles.isMobile ? 'small' : undefined}
-                gapStart={Kb.Styles.isMobile}
+                gap={isMobile ? 'small' : undefined}
+                gapStart={isMobile}
                 style={styles.checkboxIndented}
               >
                 <Kb.Checkbox label="You follow them, or..." checked={true} disabled={true} />
@@ -253,7 +253,7 @@ const Security = ({allowEdit, groups, refresh, toggle}: NotificationSettingsStat
                 <Kb.Box2
                   direction="vertical"
                   fullWidth={true}
-                  gap={Kb.Styles.isMobile ? 'small' : undefined}
+                  gap={isMobile ? 'small' : undefined}
                   gapStart={false}
                   gapEnd={true}
                 >
@@ -437,7 +437,7 @@ const Sound = ({allowEdit, groups, toggle}: NotificationSettingsState) => {
       sound: s.notifySound,
     }))
   )
-  const showDesktopSound = !C.isMobile && !C.isLinux
+  const showDesktopSound = !isMobile && !C.isLinux
   const showMobileSound = !!groups.get('sound')?.settings.length
   if (!showDesktopSound && !showMobileSound) return null
   return (
@@ -465,7 +465,7 @@ const Sound = ({allowEdit, groups, toggle}: NotificationSettingsState) => {
 }
 
 const Misc = ({allowEdit, groups, toggle}: NotificationSettingsState) => {
-  const showMisc = C.isMac || C.isIOS
+  const showMisc = C.isMac || isIOS
   if (!showMisc) return null
   return (
     <>
@@ -511,7 +511,7 @@ const TeamRow = (p: {checked: boolean; isOpen: boolean; name: string; onCheck: (
     <Kb.Box2 direction="vertical" fullWidth={true}>
       <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamRowContainer}>
         <Kb.Checkbox checked={checked} onCheck={checked => onCheck(checked)} style={styles.teamCheckbox} />
-        <Kb.Avatar isTeam={true} size={Kb.Styles.isMobile ? 32 : 24} teamname={name} />
+        <Kb.Avatar isTeam={true} size={isMobile ? 32 : 24} teamname={name} />
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.teamNameContainer}>
           <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamText}>
             <Kb.Text type="BodySemibold" lineClamp={1}>
@@ -573,7 +573,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
   teamRowContainer: {
     paddingBottom: Kb.Styles.globalMargins.xtiny,
-    paddingLeft: Kb.Styles.isMobile ? Kb.Styles.globalMargins.large : 48,
+    paddingLeft: isMobile ? Kb.Styles.globalMargins.large : 48,
     paddingRight: Kb.Styles.globalMargins.small,
     paddingTop: Kb.Styles.globalMargins.xtiny,
   },
diff --git a/shared/settings/delete-confirm/check-passphrase.desktop.tsx b/shared/settings/delete-confirm/check-passphrase.desktop.tsx
deleted file mode 100644
index f6948ecc4e59..000000000000
--- a/shared/settings/delete-confirm/check-passphrase.desktop.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-const Noop = () => null
-export default Noop
diff --git a/shared/settings/delete-confirm/check-passphrase.native.tsx b/shared/settings/delete-confirm/check-passphrase.tsx
similarity index 73%
rename from shared/settings/delete-confirm/check-passphrase.native.tsx
rename to shared/settings/delete-confirm/check-passphrase.tsx
index daf0337a1686..17d3b0d406a2 100644
--- a/shared/settings/delete-confirm/check-passphrase.native.tsx
+++ b/shared/settings/delete-confirm/check-passphrase.tsx
@@ -4,20 +4,18 @@ import * as Kb from '@/common-adapters'
 import {useDeleteAccount} from '../use-delete-account'
 import {usePasswordCheck} from '../use-password-check'
 
-const CheckPassphraseMobile = () => {
+const CheckPassphraseImpl = () => {
   const [password, setPassword] = React.useState('')
   const [showTyping, setShowTyping] = React.useState(false)
-
   const {checkPassword, checkPasswordIsCorrect} = usePasswordCheck()
   const deleteAccountForever = useDeleteAccount()
+  const waitingKey = C.Waiting.useAnyWaiting(C.waitingKeySettingsGeneric)
 
   const onCheckPassword = checkPassword
   const deleteForever = () => {
     deleteAccountForever(password)
   }
-
-  const waitingKey = C.Waiting.useAnyWaiting(C.waitingKeySettingsGeneric)
-  const keyboardType = showTyping && Kb.Styles.isAndroid ? 'visible-password' : 'default'
+  const keyboardType = showTyping && isAndroid ? 'visible-password' : 'default'
 
   return (
     <>
@@ -65,16 +63,21 @@ const CheckPassphraseMobile = () => {
           />
         )}
       </Kb.Box2>
-      <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
-          <Kb.ButtonBar align="center" direction="column" fullWidth={true} style={styles.buttonBar}>
-            <Kb.WaitingButton
-              fullWidth={true}
-              waitingKey={C.waitingKeySettingsCheckPassword}
-              disabled={!!checkPasswordIsCorrect || !password}
-              label="Authorize"
-              onClick={() => onCheckPassword(password)}
-            />
-          </Kb.ButtonBar>
+      <Kb.Box2
+        direction="vertical"
+        centerChildren={true}
+        fullWidth={true}
+        style={styles.modalFooter}
+      >
+        <Kb.ButtonBar align="center" direction="column" fullWidth={true} style={styles.buttonBar}>
+          <Kb.WaitingButton
+            fullWidth={true}
+            waitingKey={C.waitingKeySettingsCheckPassword}
+            disabled={!!checkPasswordIsCorrect || !password}
+            label="Authorize"
+            onClick={() => onCheckPassword(password)}
+          />
+        </Kb.ButtonBar>
       </Kb.Box2>
     </>
   )
@@ -83,16 +86,9 @@ const CheckPassphraseMobile = () => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      bodyText: {
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-        textAlign: 'center',
-      },
-      buttonBar: {
-        minHeight: undefined,
-      },
-      checkbox: {
-        paddingTop: Kb.Styles.globalMargins.tiny,
-      },
+      bodyText: {paddingBottom: Kb.Styles.globalMargins.tiny, textAlign: 'center'},
+      buttonBar: {minHeight: undefined},
+      checkbox: {paddingTop: Kb.Styles.globalMargins.tiny},
       container: {
         ...Kb.Styles.padding(
           Kb.Styles.globalMargins.medium,
@@ -102,13 +98,8 @@ const styles = Kb.Styles.styleSheetCreate(
         ),
         backgroundColor: Kb.Styles.globalColors.blueGrey,
       },
-      deleteButton: {
-        marginTop: Kb.Styles.globalMargins.large,
-      },
-      headerText: {
-        marginBottom: Kb.Styles.globalMargins.small,
-        textAlign: 'center',
-      },
+      deleteButton: {marginTop: Kb.Styles.globalMargins.large},
+      headerText: {marginBottom: Kb.Styles.globalMargins.small, textAlign: 'center'},
       modalFooter: Kb.Styles.platformStyles({
         common: {
           ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
@@ -126,4 +117,5 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default CheckPassphraseMobile
+const CheckPassphrase = isMobile ? CheckPassphraseImpl : () => null
+export default CheckPassphrase
diff --git a/shared/settings/delete-confirm/index.tsx b/shared/settings/delete-confirm/index.tsx
index 5a5748695a77..91acb1c0d897 100644
--- a/shared/settings/delete-confirm/index.tsx
+++ b/shared/settings/delete-confirm/index.tsx
@@ -37,7 +37,7 @@ const Checkboxes = (props: CheckboxesProps) => (
 
 const DeleteConfirm = () => {
   const {randomPW, reload} = useRandomPWState()
-  const needsMobilePassphraseCheck = Kb.Styles.isMobile && randomPW !== true
+  const needsMobilePassphraseCheck = isMobile && randomPW !== true
   const deleteAccountForever = useDeleteAccount()
   const username = useCurrentUserState(s => s.username)
   const [checkData, setCheckData] = React.useState(false)
diff --git a/shared/settings/display.tsx b/shared/settings/display.tsx
index a4b1ac60ae6a..2a86baeeabd6 100644
--- a/shared/settings/display.tsx
+++ b/shared/settings/display.tsx
@@ -59,7 +59,7 @@ const Display = () => {
               onCheck={doToggleAnimatedEmoji}
             />
           </Kb.Box2>
-          {C.isElectron && (
+          {isElectron && (
             <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
               <Kb.Text type="Header">Navigation</Kb.Text>
               <Kb.Checkbox
diff --git a/shared/settings/feedback/container.desktop.tsx b/shared/settings/feedback/container.desktop.tsx
deleted file mode 100644
index 166f858d4f7f..000000000000
--- a/shared/settings/feedback/container.desktop.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as C from '@/constants'
-import Feedback from '.'
-import type {Props} from './container.shared'
-export type {Props} from './container.shared'
-import {useSendFeedback} from './shared'
-import {useConfigState} from '@/stores/config'
-
-const Container = (ownProps: Props) => {
-  const {sendFeedback, error} = useSendFeedback()
-  const feedback = ownProps.feedback ?? ''
-  const loggedOut = useConfigState(s => !s.loggedIn)
-  const sending = C.Waiting.useAnyWaiting(C.waitingKeySettingsSendFeedback)
-  const navigateUp = C.Router2.navigateUp
-  const onBack = () => {
-    navigateUp()
-  }
-  const onSendFeedback = sendFeedback
-  const props = {
-    feedback,
-    loggedOut,
-    onBack,
-    onFeedbackDone: () => null,
-    onSendFeedback,
-    sendError: error,
-    sending,
-    showInternalSuccessBanner: true,
-  }
-  return <Feedback {...props} />
-}
-
-export default Container
diff --git a/shared/settings/feedback/container.native.tsx b/shared/settings/feedback/container.native.tsx
deleted file mode 100644
index 404a63b7e7d4..000000000000
--- a/shared/settings/feedback/container.native.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import {useConfigState} from '@/stores/config'
-import {useCurrentUserState} from '@/stores/current-user'
-import * as Kb from '@/common-adapters'
-import * as React from 'react'
-import Feedback from '.'
-import logger from '@/logger'
-import {Platform} from 'react-native'
-import {getExtraChatLogsForLogSend} from './shared'
-import {isAndroid, version, pprofDir} from '@/constants/platform'
-import {logSend, appVersionName, appVersionCode} from 'react-native-kb'
-import type {Props as OwnProps} from './container.shared'
-import {usePushState} from '@/stores/push'
-
-export type Props = {
-  chat: object
-  feedback?: string
-  loggedOut: boolean
-  push: object
-  status: object
-}
-
-const mobileOsVersion = Platform.Version
-
-const _status = {
-  appVersionCode,
-  appVersionName,
-  mobileOsVersion,
-  platform: isAndroid ? 'android' : 'ios',
-  version,
-}
-
-const Connected = (ownProps: OwnProps) => {
-  const feedback = ownProps.feedback ?? ''
-  const chat = getExtraChatLogsForLogSend()
-  const loggedOut = useConfigState(s => !s.loggedIn)
-  const _push = usePushState(s => s.token)
-  const push = {pushToken: _push}
-  const deviceID = useCurrentUserState(s => s.deviceID)
-  const uid = useCurrentUserState(s => s.uid)
-  const username = useCurrentUserState(s => s.username)
-  const [sending, setSending] = React.useState(false)
-  const [sendError, setSendError] = React.useState('')
-  const timeoutIDRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
-
-  const status = {..._status, deviceID, uid, username}
-
-  React.useEffect(() => {
-    return () => {
-      if (timeoutIDRef.current) {
-        clearTimeout(timeoutIDRef.current)
-      }
-    }
-  }, [])
-
-  const _onSendFeedback = (feedback: string, sendLogs: boolean, sendMaxBytes: boolean) => {
-    setSending(true)
-
-    timeoutIDRef.current = setTimeout(() => {
-      const run = async () => {
-        const maybeDump = sendLogs ? logger.dump() : Promise.resolve()
-        await maybeDump
-        logger.info(`Sending ${sendLogs ? 'log' : 'feedback'} to daemon`)
-        const extra = sendLogs ? {...status, ...chat, ...push} : status
-        const traceDir = pprofDir
-        const cpuProfileDir = traceDir
-        const logSendId = await logSend(
-          JSON.stringify(extra),
-          feedback || '',
-          sendLogs,
-          sendMaxBytes,
-          traceDir,
-          cpuProfileDir
-        )
-        logger.info('logSendId is', logSendId)
-        setSendError('')
-        setSending(false)
-      }
-      run()
-        .then(() => {})
-        .catch((err: unknown) => {
-          logger.warn('err in sending logs', err)
-          setSendError(String(err))
-          setSending(false)
-        })
-    }, 0)
-  }
-
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Feedback
-        onSendFeedback={_onSendFeedback}
-        sending={sending}
-        sendError={sendError}
-        loggedOut={loggedOut}
-        showInternalSuccessBanner={true}
-        onFeedbackDone={() => null}
-        feedback={feedback}
-      />
-    </Kb.Box2>
-  )
-}
-
-export default Connected
diff --git a/shared/settings/feedback/container.tsx b/shared/settings/feedback/container.tsx
new file mode 100644
index 000000000000..e732ddea195c
--- /dev/null
+++ b/shared/settings/feedback/container.tsx
@@ -0,0 +1,113 @@
+import {useConfigState} from '@/stores/config'
+import {useCurrentUserState} from '@/stores/current-user'
+import * as C from '@/constants'
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+import Feedback from '.'
+import logger from '@/logger'
+import {Platform} from 'react-native'
+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
+
+const Connected = (ownProps: OwnProps) => {
+  const feedback = ownProps.feedback ?? ''
+  const loggedOut = useConfigState(s => !s.loggedIn)
+  const _push = usePushState(s => s.token)
+  const deviceID = useCurrentUserState(s => s.deviceID)
+  const uid = useCurrentUserState(s => s.uid)
+  const username = useCurrentUserState(s => s.username)
+  const [mobileSending, setMobileSending] = React.useState(false)
+  const [mobileSendError, setMobileSendError] = React.useState('')
+  const timeoutIDRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)
+  const {sendFeedback: desktopSendFeedback, error: desktopError} = useSendFeedback()
+  const desktopSending = C.Waiting.useAnyWaiting(C.waitingKeySettingsSendFeedback)
+  const navigateUp = C.Router2.navigateUp
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutIDRef.current) {
+        clearTimeout(timeoutIDRef.current)
+      }
+    }
+  }, [])
+
+  if (isMobile) {
+    const push = {pushToken: _push}
+    const chat = getExtraChatLogsForLogSend()
+    const _status = {
+      appVersionCode,
+      appVersionName,
+      mobileOsVersion,
+      platform: isAndroid ? 'android' : 'ios',
+      version,
+    }
+    const status = {..._status, deviceID, uid, username}
+
+    const _onSendFeedback = (f: string, sendLogs: boolean, sendMaxBytes: boolean) => {
+      setMobileSending(true)
+      timeoutIDRef.current = setTimeout(() => {
+        const run = async () => {
+          const maybeDump = sendLogs ? logger.dump() : Promise.resolve()
+          await maybeDump
+          logger.info(`Sending ${sendLogs ? 'log' : 'feedback'} to daemon`)
+          const extra = sendLogs ? {...status, ...chat, ...push} : status
+          const traceDir = pprofDir
+          const cpuProfileDir = traceDir
+          const logSendId = await logSend(
+            JSON.stringify(extra),
+            f || '',
+            sendLogs,
+            sendMaxBytes,
+            traceDir,
+            cpuProfileDir
+          )
+          logger.info('logSendId is', logSendId)
+          setMobileSendError('')
+          setMobileSending(false)
+        }
+        run()
+          .then(() => {})
+          .catch((err: unknown) => {
+            logger.warn('err in sending logs', err)
+            setMobileSendError(String(err))
+            setMobileSending(false)
+          })
+      }, 0)
+    }
+
+    return (
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Feedback
+          onSendFeedback={_onSendFeedback}
+          sending={mobileSending}
+          sendError={mobileSendError}
+          loggedOut={loggedOut}
+          showInternalSuccessBanner={true}
+          onFeedbackDone={() => null}
+          feedback={feedback}
+        />
+      </Kb.Box2>
+    )
+  }
+
+  const onBack = () => navigateUp()
+  const props = {
+    feedback,
+    loggedOut,
+    onBack,
+    onFeedbackDone: () => null,
+    onSendFeedback: desktopSendFeedback,
+    sendError: desktopError,
+    sending: desktopSending,
+    showInternalSuccessBanner: true,
+  }
+  return <Feedback {...props} />
+}
+
+export default Connected
diff --git a/shared/settings/feedback/index.tsx b/shared/settings/feedback/index.tsx
index d5a4ee57c6c7..df2f0ccbc028 100644
--- a/shared/settings/feedback/index.tsx
+++ b/shared/settings/feedback/index.tsx
@@ -86,7 +86,7 @@ const Feedback = (props: Props) => {
               onChangeText={_onChangeFeedback}
               placeholder="Please tell us what you were doing, your experience, or anything else we should know. Thanks!"
               rowsMin={4}
-              rowsMax={Kb.Styles.isMobile ? 4 : 10}
+              rowsMax={isMobile ? 4 : 10}
               value={feedback}
             />
           </Kb.Box2>
diff --git a/shared/settings/files/index.native.tsx b/shared/settings/files/index.native.tsx
deleted file mode 100644
index 1f5b9325d29a..000000000000
--- a/shared/settings/files/index.native.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import useFiles from './hooks'
-import * as FS from '@/constants/fs'
-type Props = ReturnType<typeof useFiles>
-
-export const allowedNotificationThresholds = [100 * 1024 ** 2, 1024 ** 3, 3 * 1024 ** 3, 10 * 1024 ** 3]
-export const defaultNotificationThreshold = 100 * 1024 ** 2
-
-const ThresholdDropdown = (
-  p: Pick<Props, 'spaceAvailableNotificationThreshold' | 'setSpaceAvailableNotificationThreshold'>
-) => {
-  const allowedThresholds = allowedNotificationThresholds.map(
-    i => ({label: FS.humanizeBytes(i, 0), value: i}) as const
-  )
-  const {spaceAvailableNotificationThreshold} = p
-  const [notificationThreshold, setNotificationThreshold] = React.useState(
-    spaceAvailableNotificationThreshold
-  )
-  const [visible, setVisible] = React.useState(false)
-
-  const humanizedNotificationThreshold = FS.humanizeBytes(
-    spaceAvailableNotificationThreshold || defaultNotificationThreshold,
-    0
-  )
-
-  const hide = () => setVisible(false)
-  const done = () => {
-    p.setSpaceAvailableNotificationThreshold(notificationThreshold)
-    setVisible(false)
-  }
-  const select = (selectedVal?: number) => selectedVal && setNotificationThreshold(selectedVal)
-  const toggleShowingMenu = () => setVisible(v => !v)
-
-  return (
-    <>
-      <Kb.DropdownButton
-        disabled={!spaceAvailableNotificationThreshold}
-        selected={
-          <Kb.Text type="Body" style={styles.selectedText}>
-            {humanizedNotificationThreshold}
-          </Kb.Text>
-        }
-        toggleOpen={toggleShowingMenu}
-      />
-      <Kb.FloatingPicker
-        items={allowedThresholds}
-        visible={visible}
-        selectedValue={notificationThreshold}
-        promptString="Pick a threshold"
-        prompt={
-          <Kb.Box2 direction="horizontal" fullWidth={true} gap="xtiny" centerChildren={true}>
-            <Kb.Text type="BodySmallSemibold">Pick a threshold</Kb.Text>
-          </Kb.Box2>
-        }
-        onCancel={hide}
-        onHidden={hide}
-        onDone={done}
-        onSelect={select}
-      />
-    </>
-  )
-}
-
-const Files = () => {
-  const props = useFiles()
-  const {
-    onDisableSyncNotifications,
-    onEnableSyncNotifications,
-    setSyncOnCellular,
-    spaceAvailableNotificationThreshold,
-    syncOnCellular,
-  } = props
-  const {areSettingsLoading} = props
-  const toggleSyncOnCellular = () => {
-    setSyncOnCellular(!syncOnCellular)
-  }
-  const waitingToggleSyncOnCellular = C.Waiting.useAnyWaiting(C.waitingKeyFSSetSyncOnCellular)
-  return (
-    <Kb.Box2
-      direction="vertical"
-      fullWidth={true}
-      alignItems={Kb.Styles.isTablet ? 'flex-start' : 'center'}
-      gap="small"
-    >
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.syncContent} gap="tiny">
-        <Kb.Text type="Header">Sync</Kb.Text>
-        <Kb.Switch
-          onClick={
-            spaceAvailableNotificationThreshold === 0 ? onEnableSyncNotifications : onDisableSyncNotifications
-          }
-          label="Warn when low on storage space"
-          on={spaceAvailableNotificationThreshold !== 0}
-          disabled={areSettingsLoading}
-          gapSize={Kb.Styles.globalMargins.small}
-          style={styles.switch}
-        />
-        {!!spaceAvailableNotificationThreshold && <Kb.Text type="BodySmallSemibold">Threshold:</Kb.Text>}
-        {!!spaceAvailableNotificationThreshold && (
-          <ThresholdDropdown
-            spaceAvailableNotificationThreshold={props.spaceAvailableNotificationThreshold}
-            setSpaceAvailableNotificationThreshold={props.setSpaceAvailableNotificationThreshold}
-          />
-        )}
-        <Kb.Switch
-          on={syncOnCellular}
-          onClick={toggleSyncOnCellular}
-          disabled={waitingToggleSyncOnCellular}
-          label="Sync files over mobile network"
-          labelSubtitle="Syncing over Wi-Fi is always on"
-          gapSize={Kb.Styles.globalMargins.small}
-          style={styles.switch}
-        />
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      selectedText: {
-        paddingLeft: Kb.Styles.globalMargins.xsmall,
-        width: '100%',
-      },
-      switch: {
-        marginTop: Kb.Styles.globalMargins.small,
-      },
-      syncContent: Kb.Styles.platformStyles({
-        common: {
-          paddingLeft: Kb.Styles.globalMargins.xsmall,
-          paddingRight: Kb.Styles.globalMargins.xsmall,
-          paddingTop: Kb.Styles.globalMargins.medium,
-        },
-        isTablet: {
-          maxWidth: 410,
-        },
-      }),
-    }) as const
-)
-
-export default Files
diff --git a/shared/settings/files/index.desktop.tsx b/shared/settings/files/index.tsx
similarity index 64%
rename from shared/settings/files/index.desktop.tsx
rename to shared/settings/files/index.tsx
index 5f6b34e43e0d..a0f0271c425a 100644
--- a/shared/settings/files/index.desktop.tsx
+++ b/shared/settings/files/index.tsx
@@ -1,4 +1,5 @@
 import * as C from '@/constants'
+import * as React from 'react'
 import * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import * as Platform from '@/constants/platform'
@@ -12,6 +13,7 @@ type Props = ReturnType<typeof useFiles>
 export const allowedNotificationThresholds = [100 * 1024 ** 2, 1024 ** 3, 3 * 1024 ** 3, 10 * 1024 ** 3]
 export const defaultNotificationThreshold = 100 * 1024 ** 2
 
+// Desktop: inline dropdown row
 const SyncNotificationSetting = (
   p: Pick<
     Props,
@@ -51,6 +53,7 @@ const SyncNotificationSetting = (
   )
 }
 
+// Desktop: Finder/Explorer integration section
 const FinderIntegration = () => {
   const {driverDisable, driverStatus, preferredMountDirs} = Kbfs.useSystemFileManagerIntegration()
   const navigateAppend = C.Router2.navigateAppend
@@ -122,8 +125,118 @@ const FinderIntegration = () => {
   ) : null
 }
 
+// Mobile: picker for notification threshold
+const ThresholdDropdown = (
+  p: Pick<Props, 'spaceAvailableNotificationThreshold' | 'setSpaceAvailableNotificationThreshold'>
+) => {
+  const allowedThresholds = allowedNotificationThresholds.map(
+    i => ({label: FS.humanizeBytes(i, 0), value: i}) as const
+  )
+  const {spaceAvailableNotificationThreshold} = p
+  const [notificationThreshold, setNotificationThreshold] = React.useState(
+    spaceAvailableNotificationThreshold
+  )
+  const [visible, setVisible] = React.useState(false)
+
+  const humanizedNotificationThreshold = FS.humanizeBytes(
+    spaceAvailableNotificationThreshold || defaultNotificationThreshold,
+    0
+  )
+
+  const hide = () => setVisible(false)
+  const done = () => {
+    p.setSpaceAvailableNotificationThreshold(notificationThreshold)
+    setVisible(false)
+  }
+  const select = (selectedVal?: number) => selectedVal && setNotificationThreshold(selectedVal)
+  const toggleShowingMenu = () => setVisible(v => !v)
+
+  return (
+    <>
+      <Kb.DropdownButton
+        disabled={!spaceAvailableNotificationThreshold}
+        selected={
+          <Kb.Text type="Body" style={styles.selectedText}>
+            {humanizedNotificationThreshold}
+          </Kb.Text>
+        }
+        toggleOpen={toggleShowingMenu}
+      />
+      <Kb.FloatingPicker
+        items={allowedThresholds}
+        visible={visible}
+        selectedValue={notificationThreshold}
+        promptString="Pick a threshold"
+        prompt={
+          <Kb.Box2 direction="horizontal" fullWidth={true} gap="xtiny" centerChildren={true}>
+            <Kb.Text type="BodySmallSemibold">Pick a threshold</Kb.Text>
+          </Kb.Box2>
+        }
+        onCancel={hide}
+        onHidden={hide}
+        onDone={done}
+        onSelect={select}
+      />
+    </>
+  )
+}
+
 const FilesSettings = () => {
   const props = useFiles()
+  if (isMobile) {
+    const {
+      onDisableSyncNotifications,
+      onEnableSyncNotifications,
+      setSyncOnCellular,
+      spaceAvailableNotificationThreshold,
+      syncOnCellular,
+    } = props
+    const {areSettingsLoading} = props
+    const toggleSyncOnCellular = () => {
+      setSyncOnCellular(!syncOnCellular)
+    }
+    const waitingToggleSyncOnCellular = C.Waiting.useAnyWaiting(C.waitingKeyFSSetSyncOnCellular)
+    return (
+      <Kb.Box2
+        direction="vertical"
+        fullWidth={true}
+        alignItems={Kb.Styles.isTablet ? 'flex-start' : 'center'}
+        gap="small"
+      >
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.syncContent} gap="tiny">
+          <Kb.Text type="Header">Sync</Kb.Text>
+          <Kb.Switch
+            onClick={
+              spaceAvailableNotificationThreshold === 0
+                ? onEnableSyncNotifications
+                : onDisableSyncNotifications
+            }
+            label="Warn when low on storage space"
+            on={spaceAvailableNotificationThreshold !== 0}
+            disabled={areSettingsLoading}
+            gapSize={Kb.Styles.globalMargins.small}
+            style={styles.switch}
+          />
+          {!!spaceAvailableNotificationThreshold && <Kb.Text type="BodySmallSemibold">Threshold:</Kb.Text>}
+          {!!spaceAvailableNotificationThreshold && (
+            <ThresholdDropdown
+              spaceAvailableNotificationThreshold={props.spaceAvailableNotificationThreshold}
+              setSpaceAvailableNotificationThreshold={props.setSpaceAvailableNotificationThreshold}
+            />
+          )}
+          <Kb.Switch
+            on={syncOnCellular}
+            onClick={toggleSyncOnCellular}
+            disabled={waitingToggleSyncOnCellular}
+            label="Sync files over mobile network"
+            labelSubtitle="Syncing over Wi-Fi is always on"
+            gapSize={Kb.Styles.globalMargins.small}
+            style={styles.switch}
+          />
+        </Kb.Box2>
+      </Kb.Box2>
+    )
+  }
 
   return (
     <>
@@ -180,14 +293,27 @@ const styles = Kb.Styles.styleSheetCreate(
       finderIntegrationContent: {
         padding: Kb.Styles.globalMargins.small,
       },
+      selectedText: {
+        paddingLeft: Kb.Styles.globalMargins.xsmall,
+        width: '100%',
+      },
       spinner: {
         height: 16,
         width: 16,
       },
-      syncContent: {
-        paddingLeft: Kb.Styles.globalMargins.small,
-        paddingTop: Kb.Styles.globalMargins.medium,
+      switch: {
+        marginTop: Kb.Styles.globalMargins.small,
       },
+      syncContent: Kb.Styles.platformStyles({
+        common: {
+          paddingLeft: Kb.Styles.globalMargins.xsmall,
+          paddingRight: Kb.Styles.globalMargins.xsmall,
+          paddingTop: Kb.Styles.globalMargins.medium,
+        },
+        isTablet: {
+          maxWidth: 410,
+        },
+      }),
       syncNotificationCheckbox: {
         alignItems: 'center',
       },
diff --git a/shared/settings/logout.tsx b/shared/settings/logout.tsx
index 5385049fed0d..3670fea62538 100644
--- a/shared/settings/logout.tsx
+++ b/shared/settings/logout.tsx
@@ -54,7 +54,7 @@ const LogoutContainer = () => {
     setLoggingOut(true)
   }
 
-  const keyboardType = showTyping && Kb.Styles.isAndroid ? 'visible-password' : 'default'
+  const keyboardType = showTyping && isAndroid ? 'visible-password' : 'default'
 
   return hasRandomPW === undefined ? (
     <Kb.ProgressIndicator style={styles.progress} type="Huge" />
@@ -76,7 +76,7 @@ const LogoutContainer = () => {
       ) : null}
       <Kb.ScrollView alwaysBounceVertical={false} style={Kb.Styles.globalStyles.flexOne}>
         <Kb.Box2 direction="vertical" fullHeight={true} flex={1} style={styles.container}>
-          {Kb.Styles.isMobile && (
+          {isMobile && (
             <Kb.Text style={styles.headerText} type="Header">
               Do you know your password?
             </Kb.Text>
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/settings/manage-contacts.tsx b/shared/settings/manage-contacts.tsx
index cf1255d9bab2..dcba6c614ccc 100644
--- a/shared/settings/manage-contacts.tsx
+++ b/shared/settings/manage-contacts.tsx
@@ -91,7 +91,7 @@ const ManageContactsBanner = () => {
           <Kb.BannerParagraph bannerColor="green" content={[{onClick: onStartChat, text: 'Start a chat'}]} />
         </Kb.Banner>
       )}
-      {(status === 'denied' || (Kb.Styles.isAndroid && status !== 'granted' && contactsImported)) && (
+      {(status === 'denied' || (isAndroid && status !== 'granted' && contactsImported)) && (
         <Kb.Banner color="red">
           <Kb.BannerParagraph
             bannerColor="red"
diff --git a/shared/settings/notifications/index.desktop.tsx b/shared/settings/notifications/index.desktop.tsx
deleted file mode 100644
index e4dbd2652a3e..000000000000
--- a/shared/settings/notifications/index.desktop.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {Reloadable} from '@/common-adapters'
-import * as C from '@/constants'
-import Render from './render'
-import useNotifications from './hooks'
-import useNotificationSettings from './use-notification-settings'
-import {loadSettings} from '../load-settings'
-
-const Notifications = () => {
-  const notificationSettings = useNotificationSettings()
-  const props = useNotifications(notificationSettings)
-  const onReload = () => {
-    loadSettings()
-    notificationSettings.refresh()
-  }
-  return (
-    <Reloadable
-      onBack={undefined}
-      waitingKeys={[C.refreshNotificationsWaitingKey, C.waitingKeySettingsLoadSettings]}
-      onReload={onReload}
-      reloadOnMount={true}
-    >
-      <Render {...props} />
-    </Reloadable>
-  )
-}
-
-export default Notifications
diff --git a/shared/settings/notifications/index.native.tsx b/shared/settings/notifications/index.tsx
similarity index 79%
rename from shared/settings/notifications/index.native.tsx
rename to shared/settings/notifications/index.tsx
index 00e8d0a2d13b..a3f15e5903a1 100644
--- a/shared/settings/notifications/index.native.tsx
+++ b/shared/settings/notifications/index.tsx
@@ -1,35 +1,12 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
-import Notifications from './render'
+import Render from './render'
 import useNotifications from './hooks'
 import useNotificationSettings from './use-notification-settings'
 import {Reloadable} from '@/common-adapters'
 import {loadSettings} from '../load-settings'
 import {usePushState} from '@/stores/push'
 
-const MobileNotifications = () => {
-  const notificationSettings = useNotificationSettings()
-  const props = useNotifications(notificationSettings)
-  const navigateUp = C.Router2.navigateUp
-  const onReload = () => {
-    loadSettings()
-    notificationSettings.refresh()
-  }
-  return (
-    <Reloadable
-      onBack={navigateUp}
-      waitingKeys={[C.refreshNotificationsWaitingKey, C.waitingKeySettingsLoadSettings]}
-      onReload={onReload}
-      reloadOnMount={true}
-    >
-      <Kb.ScrollView style={{...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}}>
-        <TurnOnNotifications />
-        <Notifications {...props} />
-      </Kb.ScrollView>
-    </Reloadable>
-  )
-}
-
 const TurnOnNotifications = () => {
   const mobileHasPermissions = usePushState(s => s.hasPermissions)
   const requestPermissions = usePushState(s => s.dispatch.requestPermissions)
@@ -41,10 +18,7 @@ const TurnOnNotifications = () => {
       fullWidth={true}
       relative={true}
       overflow="hidden"
-      style={{
-        backgroundColor: Kb.Styles.globalColors.red,
-        height: 330,
-      }}
+      style={{backgroundColor: Kb.Styles.globalColors.red, height: 330}}
     >
       <Kb.Box2
         direction="vertical"
@@ -69,7 +43,7 @@ const TurnOnNotifications = () => {
           right: Kb.Styles.globalMargins.small,
         }}
       >
-        You turned off native notifications for Keybase. It’s{' '}
+        You turned off native notifications for Keybase. It&apos;s{' '}
         <Kb.Text type="BodySemiboldItalic" negative={true}>
           very
         </Kb.Text>{' '}
@@ -83,4 +57,41 @@ const TurnOnNotifications = () => {
   )
 }
 
-export default MobileNotifications
+const Notifications = () => {
+  const notificationSettings = useNotificationSettings()
+  const props = useNotifications(notificationSettings)
+  const onReload = () => {
+    loadSettings()
+    notificationSettings.refresh()
+  }
+
+  if (!isMobile) {
+    return (
+      <Reloadable
+        onBack={undefined}
+        waitingKeys={[C.refreshNotificationsWaitingKey, C.waitingKeySettingsLoadSettings]}
+        onReload={onReload}
+        reloadOnMount={true}
+      >
+        <Render {...props} />
+      </Reloadable>
+    )
+  }
+
+  const navigateUp = C.Router2.navigateUp
+  return (
+    <Reloadable
+      onBack={navigateUp}
+      waitingKeys={[C.refreshNotificationsWaitingKey, C.waitingKeySettingsLoadSettings]}
+      onReload={onReload}
+      reloadOnMount={true}
+    >
+      <Kb.ScrollView style={{...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}}>
+        <TurnOnNotifications />
+        <Render {...props} />
+      </Kb.ScrollView>
+    </Reloadable>
+  )
+}
+
+export default Notifications
diff --git a/shared/settings/notifications/render.tsx b/shared/settings/notifications/render.tsx
index b8360d50fdf8..b2eff4958f95 100644
--- a/shared/settings/notifications/render.tsx
+++ b/shared/settings/notifications/render.tsx
@@ -71,7 +71,7 @@ const Notifications = (props: Props) => {
           </Kb.Text>
         </Kb.Box2>
       ) : null}
-      {(!Kb.Styles.isMobile || mobileHasPermissions) && !!props.groups.get('app_push')?.settings ? (
+      {(!isMobile || mobileHasPermissions) && !!props.groups.get('app_push')?.settings ? (
         <>
           <Kb.Divider style={styles.divider} />
           <PhoneSection {...props} />
diff --git a/shared/settings/password.tsx b/shared/settings/password.tsx
index 8e208b8a78df..16849bbcff1d 100644
--- a/shared/settings/password.tsx
+++ b/shared/settings/password.tsx
@@ -40,7 +40,7 @@ export const UpdatePassword = (props: Props) => {
 
   const canSubmit = () => !errorSaving && password.length >= 8 && password === passwordConfirm
 
-  const keyboardType = showTyping && Kb.Styles.isAndroid ? 'visible-password' : 'default'
+  const keyboardType = showTyping && isAndroid ? 'visible-password' : 'default'
   const notification = props.error
     ? props.error
     : props.hasPGPKeyOnServer
diff --git a/shared/settings/proxy.tsx b/shared/settings/proxy.tsx
index 4a088b861c10..b160e1b09ceb 100644
--- a/shared/settings/proxy.tsx
+++ b/shared/settings/proxy.tsx
@@ -238,7 +238,7 @@ const ProxySettingsPopup = (props: Props) => {
   return (
     <>
       <Kb.Box2 direction="vertical" fullWidth={true} style={styles.popupBox}>
-        {!Kb.Styles.isMobile && <Kb.BackButton onClick={props.onBack} />}
+        {!isMobile && <Kb.BackButton onClick={props.onBack} />}
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.proxySettingPopupBox}>
           <ProxySettingsComponent {...props} />
         </Kb.Box2>
diff --git a/shared/settings/root-phone.tsx b/shared/settings/root-phone.tsx
index 65bbab56a2ba..5056a538fd76 100644
--- a/shared/settings/root-phone.tsx
+++ b/shared/settings/root-phone.tsx
@@ -159,7 +159,7 @@ function SettingsNav() {
           },
           text: 'Notifications',
         },
-        ...(C.isAndroid
+        ...(isAndroid
           ? [
               {
                 onClick: () => {
diff --git a/shared/settings/routes.tsx b/shared/settings/routes.tsx
index 1d18a5c21982..4366fd26efb6 100644
--- a/shared/settings/routes.tsx
+++ b/shared/settings/routes.tsx
@@ -70,12 +70,12 @@ const VerifyPhoneHeaderLeft = () => {
 const SettingsRootDesktop = React.lazy(async () => import('./root-desktop-tablet'))
 const EmptySettingsScreen = () => <></>
 const ManageContactsScreen: React.ComponentType =
-  C.isMobile ? React.lazy(async () => import('./manage-contacts')) : EmptySettingsScreen
+  isMobile ? React.lazy(async () => import('./manage-contacts')) : EmptySettingsScreen
 const emptyFeedbackParams: FeedbackRouteParams = {}
 
 const feedback = {
   ...C.makeScreen(React.lazy(async () => import('./feedback/container')), {
-    getOptions: C.isMobile ? {headerShown: true, title: 'Feedback'} : {},
+    getOptions: isMobile ? {headerShown: true, title: 'Feedback'} : {},
   }),
   initialParams: emptyFeedbackParams,
 }
@@ -90,11 +90,11 @@ export const sharedNewRoutes = defineRouteMap({
     screen: React.lazy(async () => import('./account')),
   },
   [Settings.settingsAdvancedTab]: {
-    getOptions: C.isMobile ? {title: 'Advanced'} : undefined,
+    getOptions: isMobile ? {title: 'Advanced'} : undefined,
     screen: React.lazy(async () => import('./advanced')),
   },
   [Settings.settingsArchiveTab]: {
-    getOptions: C.isMobile ? {title: 'Backup'} : undefined,
+    getOptions: isMobile ? {title: 'Backup'} : undefined,
     screen: React.lazy(async () => import('./archive')),
   },
   [Settings.settingsChatTab]: {
@@ -102,7 +102,7 @@ export const sharedNewRoutes = defineRouteMap({
     screen: React.lazy(async () => import('./chat')),
   },
   [Settings.settingsCryptoTab]: {
-    getOptions: C.isMobile ? {title: 'Crypto'} : {title: 'Crypto tools'},
+    getOptions: isMobile ? {title: 'Crypto'} : {title: 'Crypto tools'},
     screen: React.lazy(async () => import('../crypto/sub-nav')),
   },
   [Settings.settingsDevicesTab]: devicesRoutes.devicesRoot,
@@ -112,7 +112,7 @@ export const sharedNewRoutes = defineRouteMap({
   },
   [Settings.settingsFeedbackTab]: feedback,
   [Settings.settingsFsTab]: {
-    getOptions: C.isMobile ? {title: 'Files'} : undefined,
+    getOptions: isMobile ? {title: 'Files'} : undefined,
     screen: React.lazy(async () => import('./files')),
   },
   [Settings.settingsGitTab]: gitRoutes.gitRoot,
@@ -170,7 +170,7 @@ export const settingsDesktopTabRoutes = defineRouteMap({
 
 const sharedNewModalRoutes = {
   [Settings.settingsLogOutTab]: C.makeScreen(React.lazy(async () => import('./logout')), {
-    getOptions: C.isMobile ? undefined : {title: 'Do you know your password?'},
+    getOptions: isMobile ? undefined : {title: 'Do you know your password?'},
   }),
   [Settings.settingsPasswordTab]: C.makeScreen(React.lazy(async () => import('./password')), {
     getOptions: {title: 'Password'},
@@ -184,14 +184,14 @@ const sharedNewModalRoutes = {
       const {Email} = await import('./account/add-modals')
       return {default: Email}
     }),
-    {getOptions: C.isMobile ? {title: 'Add email address'} : {title: 'Add an email address'}}
+    {getOptions: isMobile ? {title: 'Add email address'} : {title: 'Add an email address'}}
   ),
   settingsAddPhone: C.makeScreen(
     React.lazy(async () => {
       const {Phone} = await import('./account/add-modals')
       return {default: Phone}
     }),
-    {getOptions: C.isMobile ? {title: 'Add phone number'} : {title: 'Add a phone number'}}
+    {getOptions: isMobile ? {title: 'Add phone number'} : {title: 'Add a phone number'}}
   ),
   settingsDeleteAddress: C.makeScreen(React.lazy(async () => import('./account/confirm-delete'))),
   settingsVerifyPhone: C.makeScreen(
@@ -201,7 +201,7 @@ const sharedNewModalRoutes = {
     }),
     {
       getOptions: ({route}) => ({
-        headerLeft: Kb.Styles.isMobile ? () => <VerifyPhoneHeaderLeft /> : undefined,
+        headerLeft: isMobile ? () => <VerifyPhoneHeaderLeft /> : undefined,
         headerStyle: {backgroundColor: Kb.Styles.globalColors.blue},
         headerTitle: () => <VerifyPhoneHeaderTitle phoneNumber={route.params.phoneNumber} />,
       }),
@@ -212,7 +212,7 @@ const sharedNewModalRoutes = {
 const WebLinks = React.lazy(async () => import('./web-links'))
 
 export const newRoutes = defineRouteMap({
-  settingsRoot: C.isMobile
+  settingsRoot: isMobile
     ? C.isPhone
       ? {getOptions: {title: 'More'}, screen: React.lazy(async () => import('./root-phone'))}
       : {getOptions: {title: 'Settings'}, screen: SettingsRootDesktop}
@@ -238,7 +238,7 @@ export const newModalRoutes = defineRouteMap({
   ),
   modalFeedback: feedback,
   settingsContactsJoined: C.makeScreen(React.lazy(async () => import('./contacts-joined'))),
-  settingsPushPrompt: C.isMobile
+  settingsPushPrompt: isMobile
     ? C.makeScreen(React.lazy(async () => import('./notifications/push-prompt')), {
         getOptions: {
           headerLeft: () => null,
diff --git a/shared/settings/screenprotector/index.native.tsx b/shared/settings/screenprotector/index.native.tsx
deleted file mode 100644
index 15e523f9cfb4..000000000000
--- a/shared/settings/screenprotector/index.native.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as C from '@/constants'
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {isAndroid, getSecureFlagSetting, setSecureFlagSetting} from '@/constants/platform.native'
-
-const Screenprotector = () => {
-  const [secureFlag, setSecureFlag] = React.useState<undefined | boolean>(undefined)
-
-  C.useOnMountOnce(() => {
-    getSecureFlagSetting()
-      .then(secureFlag => {
-        setSecureFlag(secureFlag)
-        return undefined
-      })
-      .catch(() => {})
-  })
-
-  const changeSecureFlagOption = (nextValue: boolean) => {
-    const f = async () => {
-      setSecureFlag(nextValue)
-      const success = await setSecureFlagSetting(nextValue)
-      if (success) {
-        setSecureFlag(nextValue)
-      }
-    }
-    C.ignorePromise(f())
-  }
-
-  if (!isAndroid) {
-    return <Kb.Text type="Body">Screenprotector is only supported on Android</Kb.Text>
-  }
-
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
-        <Kb.Checkbox
-          label="Disable App switcher preview and screenshots"
-          onCheck={changeSecureFlagOption}
-          checked={!!secureFlag}
-          disabled={secureFlag === undefined}
-        />
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  container: {
-    ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
-  },
-}))
-
-export default Screenprotector
diff --git a/shared/settings/screenprotector/index.desktop.tsx b/shared/settings/screenprotector/index.tsx
similarity index 64%
rename from shared/settings/screenprotector/index.desktop.tsx
rename to shared/settings/screenprotector/index.tsx
index bfa1b76abb9b..684f63e330bc 100644
--- a/shared/settings/screenprotector/index.desktop.tsx
+++ b/shared/settings/screenprotector/index.tsx
@@ -2,15 +2,28 @@ import * as C from '@/constants'
 import * as T from '@/constants/types'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
+import {getSecureFlagSetting, setSecureFlagSetting} from '@/constants/platform'
 
 let disableScreenshotInitialValue: boolean | undefined
 
 const Screenprotector = () => {
   const [disableScreenshot, setDisableScreenshot] = React.useState<boolean | undefined>(undefined)
+  const [secureFlag, setSecureFlag] = React.useState<undefined | boolean>(undefined)
   const loadDisableScreenshot = C.useRPC(T.RPCGen.configGuiGetValueRpcPromise)
+  const submitDisableSpellcheck = C.useRPC(T.RPCGen.configGuiSetValueRpcPromise)
+
+  C.useOnMountOnce(() => {
+    if (!isMobile) return
+    getSecureFlagSetting()
+      .then(v => {
+        setSecureFlag(v)
+        return undefined
+      })
+      .catch(() => {})
+  })
 
   React.useEffect(() => {
-    // load it
+    if (isMobile) return
     if (disableScreenshot === undefined) {
       loadDisableScreenshot(
         [{path: 'ui.disableScreenshot'}],
@@ -30,7 +43,36 @@ const Screenprotector = () => {
       )
     }
   }, [disableScreenshot, loadDisableScreenshot])
-  const submitDisableSpellcheck = C.useRPC(T.RPCGen.configGuiSetValueRpcPromise)
+
+  if (isMobile) {
+    const changeSecureFlagOption = (nextValue: boolean) => {
+      const f = async () => {
+        setSecureFlag(nextValue)
+        const success = await setSecureFlagSetting(nextValue)
+        if (success) {
+          setSecureFlag(nextValue)
+        }
+      }
+      C.ignorePromise(f())
+    }
+
+    if (!isAndroid) {
+      return <Kb.Text type="Body">Screenprotector is only supported on Android</Kb.Text>
+    }
+
+    return (
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container}>
+          <Kb.Checkbox
+            label="Disable App switcher preview and screenshots"
+            onCheck={changeSecureFlagOption}
+            checked={!!secureFlag}
+            disabled={secureFlag === undefined}
+          />
+        </Kb.Box2>
+      </Kb.Box2>
+    )
+  }
 
   const onToggleDisableScreenshot = () => {
     const next = !disableScreenshot
diff --git a/shared/settings/sub-nav/left-nav.tsx b/shared/settings/sub-nav/left-nav.tsx
index ce1335f4437a..b3d015b0ad4d 100644
--- a/shared/settings/sub-nav/left-nav.tsx
+++ b/shared/settings/sub-nav/left-nav.tsx
@@ -15,7 +15,7 @@ type Props = {
 const LeftNav = (props: Props) => {
   const {navigate} = props
   const badgeNumbers = useNotifState(s => s.navBadges)
-  const badgeNotifications = usePushState(s => (C.isElectron ? 0 : !s.hasPermissions ? 1 : 0))
+  const badgeNotifications = usePushState(s => (isElectron ? 0 : !s.hasPermissions ? 1 : 0))
 
   const onSignout = () => {
     navigate(Settings.settingsLogOutTab)
diff --git a/shared/settings/sub-nav/settings-item.tsx b/shared/settings/sub-nav/settings-item.tsx
index ca308c6d3b97..2d7962ec8853 100644
--- a/shared/settings/sub-nav/settings-item.tsx
+++ b/shared/settings/sub-nav/settings-item.tsx
@@ -33,7 +33,7 @@ function SettingsItem(props: SettingsItemProps) {
           type={props.icon}
           color={Kb.Styles.globalColors.black_50}
           style={{
-            marginRight: Kb.Styles.isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.tiny,
+            marginRight: isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.tiny,
           }}
         />
       ) : null}
diff --git a/shared/settings/typography.tsx b/shared/settings/typography.tsx
index 0969e7816f30..0c5e96d63806 100644
--- a/shared/settings/typography.tsx
+++ b/shared/settings/typography.tsx
@@ -360,7 +360,7 @@ const SampleRow = ({textType, decoration, sample}: {textType: TextType; decorati
     },
   })
 
-  const onTextLayout = Kb.Styles.isMobile
+  const onTextLayout = isMobile
     ? (e: {nativeEvent: {lines: ReadonlyArray<{ascender: number; capHeight: number; descender: number; width: number; height: number; xHeight: number}>}}) => {
         const lines = e.nativeEvent.lines
         if (!lines.length) return
@@ -382,7 +382,7 @@ const SampleRow = ({textType, decoration, sample}: {textType: TextType; decorati
           onTextLayout={onTextLayout}
         >{sample}</Kb.Text>
       </Kb.Box2>
-      {Kb.Styles.isMobile && metrics ? (
+      {isMobile && metrics ? (
         <Kb.Text type="BodyTiny" style={styles.metricsText}>
           {`asc:${metrics.ascender.toFixed(1)} desc:${metrics.descender.toFixed(1)} cap:${metrics.capHeight.toFixed(1)} x:${metrics.xHeight.toFixed(1)} w:${metrics.width.toFixed(1)} h:${metrics.height.toFixed(1)} lines:${metrics.lineCount}`}
         </Kb.Text>
diff --git a/shared/settings/use-request-logout.tsx b/shared/settings/use-request-logout.tsx
index b0dc8e3971e2..52bc16fdb319 100644
--- a/shared/settings/use-request-logout.tsx
+++ b/shared/settings/use-request-logout.tsx
@@ -2,7 +2,6 @@ import * as C from '@/constants'
 import {navigateAppend, switchTab} from '@/constants/router'
 import {settingsPasswordTab} from '@/constants/settings'
 import * as T from '@/constants/types'
-import {isMobile} from '@/constants/platform'
 import * as Tabs from '@/constants/tabs'
 import {useLogoutState} from '@/stores/logout'
 
diff --git a/shared/signup/common.tsx b/shared/signup/common.tsx
index ba19dfd90fc0..aae72810070d 100644
--- a/shared/signup/common.tsx
+++ b/shared/signup/common.tsx
@@ -15,7 +15,7 @@ export const InfoIcon = (props: InfoIconProps) => {
   const navigateAppend = C.Router2.navigateAppend
   const makePopup = (p: Kb.Popup2Parms) => {
     const {attachTo, hidePopup} = p
-    const onDocumentation = () => openURL('https://book.keybase.io/docs')
+    const onDocumentation = () => { void openURL('https://book.keybase.io/docs') }
     const onFeedback = () => {
       navigateAppend({
         name: loggedIn ? 'signupSendFeedbackLoggedIn' : 'signupSendFeedbackLoggedOut',
@@ -150,7 +150,7 @@ type SignupScreenProps = {
 
 // Screens with header + body bg color (i.e. all but join-or-login)
 export const SignupScreen = (props: SignupScreenProps) => {
-  const showDesktopHeader = !Kb.Styles.isMobile && !props.hideDesktopHeader
+  const showDesktopHeader = !isMobile && !props.hideDesktopHeader
 
   return (
     <Kb.Box2
@@ -177,7 +177,7 @@ export const SignupScreen = (props: SignupScreenProps) => {
           onRightAction={props.onRightAction}
         />
       )}
-      {Kb.Styles.isMobile && props.header}
+      {isMobile && props.header}
       <Kb.Box2
         alignItems="center"
         direction="vertical"
@@ -206,7 +206,7 @@ export const SignupScreen = (props: SignupScreenProps) => {
         {!!props.buttons && (
           <Kb.ButtonBar
             direction="column"
-            fullWidth={Kb.Styles.isMobile && !Kb.Styles.isTablet}
+            fullWidth={isMobile && !Kb.Styles.isTablet}
             style={styles.buttonBar}
           >
             {props.buttons.map(b =>
@@ -261,7 +261,7 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       body: {
         ...Kb.Styles.padding(
-          Kb.Styles.isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.xlarge,
+          isMobile ? Kb.Styles.globalMargins.small : Kb.Styles.globalMargins.xlarge,
           Kb.Styles.globalMargins.small
         ),
         flex: 1,
diff --git a/shared/signup/device-name.tsx b/shared/signup/device-name.tsx
index 87ba4b56cc12..e1a6849779d7 100644
--- a/shared/signup/device-name.tsx
+++ b/shared/signup/device-name.tsx
@@ -7,7 +7,6 @@ import {usePushState} from '@/stores/push'
 import * as T from '@/constants/types'
 import {RPCError} from '@/util/errors'
 import {ignorePromise} from '@/constants/utils'
-import * as Platforms from '@/constants/platform'
 import logger from '@/logger'
 import type {StaticScreenProps} from '@react-navigation/core'
 import {
@@ -58,7 +57,7 @@ const ConnectedEnterDevicename = (p: Props) => {
           params: {
             botToken: '',
             deviceName: devicename,
-            deviceType: Platforms.isMobile ? T.RPCGen.DeviceType.mobile : T.RPCGen.DeviceType.desktop,
+            deviceType: isMobile ? T.RPCGen.DeviceType.mobile : T.RPCGen.DeviceType.desktop,
             email: '',
             genPGPBatch: false,
             genPaper: false,
@@ -141,18 +140,18 @@ const EnterDevicename = (props: EnterDevicenameProps) => {
       banners={errorBanner(props.error)}
       buttons={[{disabled, label: 'Continue', onClick: onContinue, type: 'Success', waiting: props.waiting}]}
       onBack={props.onBack}
-      title={Kb.Styles.isMobile ? 'Name this device' : 'Name this computer'}
+      title={isMobile ? 'Name this device' : 'Name this computer'}
     >
       <Kb.Box2
         alignItems="center"
         direction="vertical"
-        gap={Kb.Styles.isMobile ? 'small' : 'medium'}
+        gap={isMobile ? 'small' : 'medium'}
         fullWidth={true}
         style={Kb.Styles.globalStyles.flexOne}
       >
         <Kb.ImageIcon
           type={
-            Kb.Styles.isMobile
+            isMobile
               ? C.isLargeScreen
                 ? 'icon-phone-background-1-96'
                 : 'icon-phone-background-1-64'
diff --git a/shared/signup/email.tsx b/shared/signup/email.tsx
index c4ab01753d80..c3f0d49fd0ec 100644
--- a/shared/signup/email.tsx
+++ b/shared/signup/email.tsx
@@ -7,7 +7,7 @@ import {usePushState} from '@/stores/push'
 import {setSignupEmail} from '@/people/signup-email'
 
 const ConnectedEnterEmail = () => {
-  const _showPushPrompt = usePushState(s => C.isMobile && !s.hasPermissions && s.showPushPrompt)
+  const _showPushPrompt = usePushState(s => isMobile && !s.hasPermissions && s.showPushPrompt)
   const {error, submitEmail, waiting} = useAddEmail()
   const clearModals = C.Router2.clearModals
   const navigateAppend = C.Router2.navigateAppend
@@ -89,7 +89,7 @@ export const EnterEmailBody = (props: BodyProps) => (
     <Kb.Box2
       alignItems="center"
       direction="vertical"
-      gap={Kb.Styles.isMobile ? 'small' : 'medium'}
+      gap={isMobile ? 'small' : 'medium'}
       fullWidth={true}
       style={Kb.Styles.globalStyles.flexOne}
     >
diff --git a/shared/signup/phone-number/index.tsx b/shared/signup/phone-number/index.tsx
index 23146ee1dc5c..63d105674233 100644
--- a/shared/signup/phone-number/index.tsx
+++ b/shared/signup/phone-number/index.tsx
@@ -21,7 +21,7 @@ export const EnterPhoneNumberBody = (props: BodyProps) => {
     <Kb.Box2
       alignItems="center"
       direction="vertical"
-      gap={Kb.Styles.isMobile ? 'small' : 'medium'}
+      gap={isMobile ? 'small' : 'medium'}
       fullWidth={true}
       style={styles.container}
     >
@@ -115,7 +115,7 @@ const ConnectedEnterPhoneNumber = () => {
       showHeaderInfoicon={true}
     >
       <EnterPhoneNumberBody
-        autoFocus={!Kb.Styles.isMobile}
+        autoFocus={!isMobile}
         defaultCountry={defaultCountry}
         onChangeNumber={onChangeNumberCb}
         onContinue={onContinue}
diff --git a/shared/signup/routes.tsx b/shared/signup/routes.tsx
index 593f865c68f4..5710137588da 100644
--- a/shared/signup/routes.tsx
+++ b/shared/signup/routes.tsx
@@ -7,7 +7,7 @@ import {setSignupEmail} from '@/people/signup-email'
 import {defineRouteMap} from '@/constants/types/router'
 
 const EmailSkipButton = () => {
-  const showPushPrompt = usePushState(s => C.isMobile && !s.hasPermissions && s.showPushPrompt)
+  const showPushPrompt = usePushState(s => isMobile && !s.hasPermissions && s.showPushPrompt)
   const clearModals = C.Router2.clearModals
   const navigateAppend = C.Router2.navigateAppend
   return (
diff --git a/shared/signup/username.tsx b/shared/signup/username.tsx
index 99f38a871b29..9443c4254bc2 100644
--- a/shared/signup/username.tsx
+++ b/shared/signup/username.tsx
@@ -101,10 +101,10 @@ const EnterUsername = (props: EnterUsernameProps) => {
     props.onContinue(usernameTrimmed)
   }
   const eulaLabel = (
-    <Kb.Text type={Kb.Styles.isMobile ? 'BodySmall' : 'Body'} style={{alignSelf: 'center'}}>
+    <Kb.Text type={isMobile ? 'BodySmall' : 'Body'} style={{alignSelf: 'center'}}>
       I accept the{' '}
       <Kb.Text
-        type={Kb.Styles.isMobile ? 'BodySmallPrimaryLink' : 'BodyPrimaryLink'}
+        type={isMobile ? 'BodySmallPrimaryLink' : 'BodyPrimaryLink'}
         {...eulaUrlProps}
       >
         Keybase Acceptable Use Policy
@@ -145,14 +145,14 @@ const EnterUsername = (props: EnterUsernameProps) => {
           waiting: props.waiting,
         },
       ]}
-      footer={Kb.Styles.isMobile ? eulaBlock : undefined}
+      footer={isMobile ? eulaBlock : undefined}
       onBack={props.onBack}
       title="Create account"
     >
       <Kb.ScrollView>
         <Kb.Box2
           alignItems="center"
-          gap={Kb.Styles.isMobile ? 'small' : 'medium'}
+          gap={isMobile ? 'small' : 'medium'}
           direction="vertical"
           flex={1}
           fullWidth={true}
@@ -170,7 +170,7 @@ const EnterUsername = (props: EnterUsernameProps) => {
             />
             <Kb.Text type="BodySmall">Your username is unique and can not be changed in the future.</Kb.Text>
           </Kb.Box2>
-          {!Kb.Styles.isMobile && eulaBlock}
+          {!isMobile && eulaBlock}
         </Kb.Box2>
       </Kb.ScrollView>
     </SignupScreen>
diff --git a/shared/stores/config.tsx b/shared/stores/config.tsx
index 5deb25e5cdf1..9ff2c6ede54b 100644
--- a/shared/stores/config.tsx
+++ b/shared/stores/config.tsx
@@ -8,7 +8,6 @@ import isEqual from 'lodash/isEqual'
 import logger from '@/logger'
 import type {Tab} from '@/constants/tabs'
 import {RPCError, convertToError, isErrorTransient, niceError} from '@/util/errors'
-import {isMobile} from '@/constants/platform'
 import {type CommonResponseHandler} from '@/engine/types'
 import {invalidPasswordErrorString} from '@/constants/config'
 import {navigateAppend} from '@/constants/router'
diff --git a/shared/stores/darkmode.tsx b/shared/stores/darkmode.tsx
index f0c121615552..558064ba519b 100644
--- a/shared/stores/darkmode.tsx
+++ b/shared/stores/darkmode.tsx
@@ -1,7 +1,6 @@
 import * as T from '@/constants/types'
 import * as Z from '@/util/zustand'
 import {Appearance} from 'react-native'
-import {isMobile} from '@/constants/platform'
 
 export type DarkModePreference = 'system' | 'alwaysDark' | 'alwaysLight'
 
@@ -82,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 4e6dabddfb6b..000000000000
--- a/shared/stores/fs-platform.native.tsx
+++ /dev/null
@@ -1,143 +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 {isAndroid} from '@/constants/platform.native'
-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/provision.tsx b/shared/stores/provision.tsx
index 98dd449ad0ce..becb72294478 100644
--- a/shared/stores/provision.tsx
+++ b/shared/stores/provision.tsx
@@ -3,7 +3,6 @@ import {ignorePromise, wrapErrors} from '@/constants/utils'
 import {waitingKeyProvision} from '@/constants/strings'
 import * as Z from '@/util/zustand'
 import {RPCError} from '@/util/errors'
-import {isMobile} from '@/constants/platform'
 import {type CommonResponseHandler} from '@/engine/types'
 import isEqual from 'lodash/isEqual'
 import {rpcDeviceToDevice} from '@/constants/rpc-utils'
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 23ee41609291..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,24 +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 {isIOS} from '@/constants/platform'
-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,
@@ -33,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}`,
@@ -66,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
@@ -97,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) {
@@ -198,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)
@@ -217,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':
               {
@@ -365,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/colors.tsx b/shared/styles/colors.tsx
index 1318608778ab..4ce07b3232a1 100644
--- a/shared/styles/colors.tsx
+++ b/shared/styles/colors.tsx
@@ -1,6 +1,5 @@
 // the _on_white are precomputed colors so we can do less blending on mobile
 import {useDarkModeState} from '@/stores/darkmode'
-import {isIOS, isAndroid} from '@/constants/platform'
 import type {DynamicColorIOS as DynamicColorIOSType} from 'react-native'
 import type {Opaque} from '@/constants/types/ts'
 
diff --git a/shared/styles/index.desktop.tsx b/shared/styles/index.desktop.tsx
deleted file mode 100644
index 9a6f52e38744..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 {isMobile, isPhone, isTablet, fileUIName, isIOS, isAndroid} 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 596673739cf3..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 {isIOS, 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 {isMobile, isPhone, isTablet, fileUIName, isIOS, isAndroid} 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/styles/shared.tsx b/shared/styles/shared.tsx
index e51b7a134550..19b43ac4ab01 100644
--- a/shared/styles/shared.tsx
+++ b/shared/styles/shared.tsx
@@ -1,5 +1,5 @@
 import {themed as globalColors} from './colors'
-import {isMobile, isIOS, isAndroid, isTablet, isPhone, isElectron} from '@/constants/platform'
+import {isTablet, isPhone} from '@/constants/platform'
 import type {_StylesCrossPlatform, _StylesMobile, _StylesDesktop} from './css'
 import type {Background} from '@/common-adapters/text.shared'
 
diff --git a/shared/team-building/alphabet-index.desktop.tsx b/shared/team-building/alphabet-index.desktop.tsx
deleted file mode 100644
index cfe0e9349bc9..000000000000
--- a/shared/team-building/alphabet-index.desktop.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import type {Props} from './alphabet-index.shared'
-
-const AlphabetIndex = (_p: Props) => null
-export default AlphabetIndex
diff --git a/shared/team-building/alphabet-index.native.tsx b/shared/team-building/alphabet-index.tsx
similarity index 74%
rename from shared/team-building/alphabet-index.native.tsx
rename to shared/team-building/alphabet-index.tsx
index 5c978c4ebe5e..89caaa611d96 100644
--- a/shared/team-building/alphabet-index.native.tsx
+++ b/shared/team-building/alphabet-index.tsx
@@ -9,13 +9,11 @@ const isValidMeasure = (m: typeof initMeasureRef) => m.height >= 0 && m.pageY >=
 const updateMeasure = (m: typeof initMeasureRef, newM: typeof initMeasureRef) =>
   isValidMeasure(newM) ? newM : m
 
-const AlphabetIndex = (props: Props) => {
+const AlphabetIndexImpl = (props: Props) => {
   const topSectionRef = React.useRef<View>(null)
   const sectionMeasureRef = React.useRef(initMeasureRef)
   const currIndex = React.useRef(-1)
 
-  // This timeout is long because our ref is set before the screen transition
-  // finishes. Transition must be finished so we get accurate coords.
   const storeMeasure = Kb.useTimeout(() => {
     topSectionRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
       sectionMeasureRef.current = updateMeasure(sectionMeasureRef.current, {height, pageY})
@@ -28,21 +26,20 @@ const AlphabetIndex = (props: Props) => {
 
   const {labels, onScroll, showNumSection} = props
   const handleTouch = (evt: NativeSyntheticEvent<NativeTouchEvent>) => {
-      if (isValidMeasure(sectionMeasureRef.current)) {
-        const measure = sectionMeasureRef.current
-        const touch = evt.nativeEvent.touches[0]
-        if (!touch) return
-        const index = Math.floor((touch.pageY - measure.pageY) / measure.height)
-        if (index >= 0 && index < labels.length && index !== currIndex.current) {
-          currIndex.current = index
-          onScroll(labels[index] ?? '')
-        }
-        if (showNumSection && index >= labels.length && index < labels.length + 3) {
-          // last three are the '0 • 9'
-          onScroll('numSection')
-        }
+    if (isValidMeasure(sectionMeasureRef.current)) {
+      const measure = sectionMeasureRef.current
+      const touch = evt.nativeEvent.touches[0]
+      if (!touch) return
+      const index = Math.floor((touch.pageY - measure.pageY) / measure.height)
+      if (index >= 0 && index < labels.length && index !== currIndex.current) {
+        currIndex.current = index
+        onScroll(labels[index] ?? '')
+      }
+      if (showNumSection && index >= labels.length && index < labels.length + 3) {
+        onScroll('numSection')
       }
     }
+  }
 
   const clearTouch = () => {
     currIndex.current = -1
@@ -90,4 +87,5 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
 }))
 
+const AlphabetIndex = isMobile ? AlphabetIndexImpl : () => null
 export default AlphabetIndex
diff --git a/shared/team-building/contact-restricted.tsx b/shared/team-building/contact-restricted.tsx
index 74e721789723..a437c12d8ac1 100644
--- a/shared/team-building/contact-restricted.tsx
+++ b/shared/team-building/contact-restricted.tsx
@@ -60,8 +60,8 @@ export const ContactRestricted = (props: Props) => {
             {disallowedUsers.map((username, idx) => (
               <Kb.ListItem
                 key={username}
-                type={Kb.Styles.isMobile ? 'Large' : 'Small'}
-                icon={<Kb.Avatar size={Kb.Styles.isMobile ? 48 : 32} username={username} />}
+                type={isMobile ? 'Large' : 'Small'}
+                icon={<Kb.Avatar size={isMobile ? 48 : 32} username={username} />}
                 firstItem={idx === 0}
                 body={
                   <Kb.Box2 direction="vertical" fullWidth={true}>
diff --git a/shared/team-building/email-search.tsx b/shared/team-building/email-search.tsx
index 00534d733561..5a9a714eaaad 100644
--- a/shared/team-building/email-search.tsx
+++ b/shared/team-building/email-search.tsx
@@ -67,13 +67,13 @@ const EmailSearch = ({continueLabel, namespace, search}: EmailSearchProps) => {
         ) : (
           <Kb.Box2
             alignSelf="center"
-            centerChildren={!Kb.Styles.isMobile}
+            centerChildren={!isMobile}
             direction="vertical"
             fullWidth={true}
             gap="tiny"
             style={styles.emptyContainer}
           >
-            {!Kb.Styles.isMobile && (
+            {!isMobile && (
               <Kb.Icon color={Kb.Styles.globalColors.black_20} fontSize={48} type="iconfont-mention" />
             )}
             {namespace === 'chat' ? (
diff --git a/shared/team-building/index.tsx b/shared/team-building/index.tsx
index 8591bab70c34..6cd4cfec5858 100644
--- a/shared/team-building/index.tsx
+++ b/shared/team-building/index.tsx
@@ -51,7 +51,7 @@ const findUserById = (users: ReadonlyArray<T.TB.User> | undefined, userId: strin
   users?.find(user => user.id === userId)
 
 const shouldShowContactsBanner = (filterServices: ReadonlyArray<T.TB.ServiceIdWithContact> | undefined) =>
-  Kb.Styles.isMobile && (!filterServices || filterServices.includes('phone'))
+  isMobile && (!filterServices || filterServices.includes('phone'))
 
 const noop = () => {}
 
@@ -271,10 +271,10 @@ const TeamBuilding = ({
             onEnterKeyDown={onEnterKeyDown}
             placeholder={'Search ' + serviceIdToSearchPlaceholder(selectedService)}
             searchString={searchString}
-            focusOnMount={!Kb.Styles.isMobile || selectedService !== 'keybase'}
+            focusOnMount={!isMobile || selectedService !== 'keybase'}
             focusCounter={focusInputCounter}
           />
-          {namespace === 'people' && !Kb.Styles.isMobile && (
+          {namespace === 'people' && !isMobile && (
             <FilteredServiceTabBar
               filterServices={filterServices}
               selectedService={selectedService}
@@ -329,7 +329,7 @@ const TeamBuilding = ({
       <Kb.Box2 direction="vertical" style={styles.container} fullWidth={true}>
         {teamBox}
         {errorBanner}
-        {(namespace !== 'people' || Kb.Styles.isMobile) && (
+        {(namespace !== 'people' || isMobile) && (
           <FilteredServiceTabBar
             filterServices={filterServices}
             selectedService={selectedService}
diff --git a/shared/team-building/input.tsx b/shared/team-building/input.tsx
index 83230bda5f61..e6750191791d 100644
--- a/shared/team-building/input.tsx
+++ b/shared/team-building/input.tsx
@@ -55,7 +55,7 @@ const Input = (props: Props) => {
   const {focusCounter, onUpArrowKeyDown, onDownArrowKeyDown, onEnterKeyDown} = props
   const prevFocusCounterRef = React.useRef(focusCounter)
   React.useEffect(() => {
-    if (!Kb.Styles.isMobile && focusCounter > prevFocusCounterRef.current && ref.current) {
+    if (!isMobile && focusCounter > prevFocusCounterRef.current && ref.current) {
       ref.current.focus()
     }
     prevFocusCounterRef.current = focusCounter
diff --git a/shared/team-building/list-body.tsx b/shared/team-building/list-body.tsx
index 14dfd8b1537b..848d78c63286 100644
--- a/shared/team-building/list-body.tsx
+++ b/shared/team-building/list-body.tsx
@@ -44,13 +44,13 @@ const Suggestions = ({namespace, selectedService}: SuggestionsProps) => {
   return (
     <Kb.Box2
       alignSelf="center"
-      centerChildren={!Kb.Styles.isMobile}
+      centerChildren={!isMobile}
       direction="vertical"
       fullWidth={true}
       gap="tiny"
       style={styles.emptyContainer}
     >
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Icon
           fontSize={48}
           type={Shared.serviceIdToIconFont(selectedService)}
@@ -285,7 +285,7 @@ const useListBodyData = ({
 
   const showResults = !!searchString
   const showRecs = !searchString && !!recommendationResults && selectedService === 'keybase'
-  const showingContactsButton = C.isMobile && contactsPermissionStatus !== 'denied' && !contactsImported
+  const showingContactsButton = isMobile && contactsPermissionStatus !== 'denied' && !contactsImported
   const recommendations = showRecs
     ? sortAndSplitRecommendations(recommendationResults, showingContactsButton)
     : undefined
@@ -464,7 +464,7 @@ export const ListBody = ({
         keyboardShouldPersistTaps="handled"
         keyProperty="key"
         onEndReached={onEndReached}
-        itemHeight={{height: Kb.Styles.isMobile ? 64 : 48, type: 'fixed'}}
+        itemHeight={{height: isMobile ? 64 : 48, type: 'fixed'}}
         renderItem={(index: number, result: (typeof searchResults)[number]) => (
           <ResultRow
             key={result.username}
@@ -479,7 +479,7 @@ export const ListBody = ({
             isPreExistingTeamMember={result.isPreExistingTeamMember}
             isYou={result.isYou}
             followingState={result.followingState}
-            highlight={!Kb.Styles.isMobile && index === highlightedIndex}
+            highlight={!isMobile && index === highlightedIndex}
             userId={result.userId}
             onAdd={onAdd}
             onRemove={onRemove}
diff --git a/shared/team-building/page.tsx b/shared/team-building/page.tsx
index 969675e9fadd..81013711f994 100644
--- a/shared/team-building/page.tsx
+++ b/shared/team-building/page.tsx
@@ -19,7 +19,7 @@ const TBHeaderRight = ({
   const {enabled, onAction} = useModalHeaderState(
     C.useShallow(s => ({enabled: s.actionEnabled, onAction: s.onAction}))
   )
-  if (!Kb.Styles.isMobile) return null
+  if (!isMobile) return null
   if (namespace === 'teams') {
     return (
       <Kb.Text
@@ -60,13 +60,13 @@ const HeaderRightUpdater = ({
   const navigation = useNavigation()
   const hasTeamSoFar = useTBContext(s => s.teamSoFar.size > 0)
   React.useEffect(() => {
-    if (!Kb.Styles.isMobile) return
+    if (!isMobile) return
     if (namespace !== 'teams' && namespace !== 'chat' && namespace !== 'crypto') return
     const enabled = hasTeamSoFar && !!onFinishTeamBuilding
     if (!onFinishTeamBuilding) {
       useModalHeaderState.setState({actionEnabled: false, onAction: undefined})
     }
-    if (Kb.Styles.isIOS) {
+    if (isIOS) {
       const label = namespace === 'teams' ? 'Add' : (goButtonLabel ?? 'Start')
       navigation.setOptions({
         unstable_headerRightItems: enabled
@@ -77,7 +77,7 @@ const HeaderRightUpdater = ({
       useModalHeaderState.setState({actionEnabled: enabled, onAction: onFinishTeamBuilding})
     }
     return () => {
-      if (Kb.Styles.isIOS) {
+      if (isIOS) {
         navigation.setOptions({unstable_headerRightItems: () => []} as object)
       } else {
         useModalHeaderState.setState({actionEnabled: false, onAction: undefined})
@@ -125,7 +125,7 @@ const getOptions = ({route}: OwnProps) => {
   if (namespace === 'people') {
     return {
       ...common,
-      headerShown: Kb.Styles.isMobile,
+      headerShown: isMobile,
       modalStyle: {height: 560, width: '100%'},
       overlayAvoidTabs: true,
       overlayStyle: {
@@ -142,7 +142,7 @@ const getOptions = ({route}: OwnProps) => {
     return {
       ...common,
       // iOS: headerRight omitted; HeaderRightUpdater drives unstable_headerRightItems dynamically
-      headerRight: Kb.Styles.isIOS ? undefined : () => <TBHeaderRight namespace={namespace} />,
+      headerRight: isIOS ? undefined : () => <TBHeaderRight namespace={namespace} />,
       headerTitle: () => (
         <TeamsModalTitle teamID={route.params.teamID ?? T.Teams.noTeamID} title="Search people" />
       ),
@@ -152,7 +152,7 @@ const getOptions = ({route}: OwnProps) => {
   return {
     ...common,
     // iOS: headerRight omitted; HeaderRightUpdater drives unstable_headerRightItems dynamically
-    headerRight: Kb.Styles.isIOS
+    headerRight: isIOS
       ? undefined
       : () => <TBHeaderRight namespace={namespace} goButtonLabel={goButtonLabel} />,
   }
diff --git a/shared/team-building/phone-search.tsx b/shared/team-building/phone-search.tsx
index 691bdc9812f7..2d6f9a0782af 100644
--- a/shared/team-building/phone-search.tsx
+++ b/shared/team-building/phone-search.tsx
@@ -66,13 +66,13 @@ const PhoneSearch = (props: PhoneSearchProps) => {
           ) : (
             <Kb.Box2
               alignSelf="center"
-              centerChildren={!Kb.Styles.isMobile}
+              centerChildren={!isMobile}
               direction="vertical"
               fullWidth={true}
               gap="tiny"
               style={styles.emptyContainer}
             >
-              {!Kb.Styles.isMobile && (
+              {!isMobile && (
                 <Kb.Icon color={Kb.Styles.globalColors.black_20} fontSize={48} type="iconfont-number-pad" />
               )}
               {namespace === 'chat' ? (
diff --git a/shared/team-building/recs-and-recos.tsx b/shared/team-building/recs-and-recos.tsx
index 0b1c1ba1ab78..b3587ac7ff11 100644
--- a/shared/team-building/recs-and-recos.tsx
+++ b/shared/team-building/recs-and-recos.tsx
@@ -53,7 +53,7 @@ const TeamAlphabetIndex = ({recommendations, teamSoFar, sectionListRef}: TeamAlp
             ? recommendations.length - 1
             : recommendations.findIndex(section => section.label === label))) ||
         -1
-      if (sectionIndex >= 0 && Kb.Styles.isMobile) {
+      if (sectionIndex >= 0 && isMobile) {
         sectionListRef.current.scrollToLocation({
           animated: false,
           itemIndex: 0,
@@ -143,7 +143,7 @@ export const RecsAndRecos = (props: RecsAndRecosProps) => {
                 isYou={result.isYou}
                 followingState={result.followingState}
                 highlight={
-                  !Kb.Styles.isMobile &&
+                  !isMobile &&
                   !!highlightDetails &&
                   highlightDetails.section === section &&
                   highlightDetails.index === index
@@ -155,12 +155,12 @@ export const RecsAndRecos = (props: RecsAndRecosProps) => {
             )
           }
           renderSectionHeader={({section: {label}}) =>
-            label && (!Kb.Styles.isMobile || label !== 'Recommendations') ? (
+            label && (!isMobile || label !== 'Recommendations') ? (
               <Kb.SectionDivider label={label} />
             ) : null
           }
         />
-        {Kb.Styles.isMobile && (
+        {isMobile && (
           <TeamAlphabetIndex
             recommendations={recommendations}
             sectionListRef={sectionListRef}
diff --git a/shared/team-building/search-result/common-result.tsx b/shared/team-building/search-result/common-result.tsx
index 3577c8b55804..83f861be1a0b 100644
--- a/shared/team-building/search-result/common-result.tsx
+++ b/shared/team-building/search-result/common-result.tsx
@@ -149,7 +149,7 @@ const CommonResult = (props: CommonResultProps) => {
   )
 }
 
-const avatarSize = Kb.Styles.isMobile ? 48 : 32
+const avatarSize = isMobile ? 48 : 32
 const dotSeparator = '•'
 
 const isPreExistingTeamMemberText = (prettyName: string, username: string) =>
@@ -208,7 +208,7 @@ const ServicesIcons = (props: ServicesIconsProps) => {
   const serviceIds = serviceMapToArray(props.services)
   const firstIconNoMargin = shouldOmitFirstIconMargin(props)
   return (
-    <Kb.Box2 direction="horizontal" fullWidth={Kb.Styles.isMobile} justifyContent="flex-start">
+    <Kb.Box2 direction="horizontal" fullWidth={isMobile} justifyContent="flex-start">
       {serviceIds.map((serviceName, index) => {
         const iconStyle =
           firstIconNoMargin && index === 0
@@ -254,7 +254,7 @@ const FormatPrettyName = (props: {
   ) : null
 
 const MobileScrollView = ({children}: {children: React.ReactNode}) =>
-  Kb.Styles.isMobile ? (
+  isMobile ? (
     <Kb.ScrollView
       horizontal={true}
       showsHorizontalScrollIndicator={false}
@@ -353,7 +353,7 @@ const Username = (props: {
   )
 }
 
-export const userResultHeight = Kb.Styles.isMobile ? Kb.Styles.globalMargins.xlarge : 48
+export const userResultHeight = isMobile ? Kb.Styles.globalMargins.xlarge : 48
 const styles = Kb.Styles.styleSheetCreate(() => ({
   actionButtonsHighlighted: Kb.Styles.platformStyles({
     isElectron: {
diff --git a/shared/team-building/search-result/people-result.tsx b/shared/team-building/search-result/people-result.tsx
index 709771710431..c4024be63adc 100644
--- a/shared/team-building/search-result/people-result.tsx
+++ b/shared/team-building/search-result/people-result.tsx
@@ -81,7 +81,7 @@ const PeopleResult = function PeopleResult(props: ResultProps) {
     </Kb.WaitingButton>
   )
 
-  const rightButtons = Kb.Styles.isMobile ? [] : [chatButton, dropdown] // don't show action buttons on mobile for space reasons
+  const rightButtons = isMobile ? [] : [chatButton, dropdown] // don't show action buttons on mobile for space reasons
 
   return <CommonResult {...props} rowStyle={styles.rowContainer} rightButtons={rightButtons} />
 }
diff --git a/shared/team-building/search-result/user-result.tsx b/shared/team-building/search-result/user-result.tsx
index d1852f2aa228..5829e5a362a6 100644
--- a/shared/team-building/search-result/user-result.tsx
+++ b/shared/team-building/search-result/user-result.tsx
@@ -35,7 +35,7 @@ const UserResult = function UserResult(props: ResultProps) {
     />
   )
 }
-const actionButtonSize = Kb.Styles.isMobile ? 22 : Kb.Styles.globalMargins.small
+const actionButtonSize = isMobile ? 22 : Kb.Styles.globalMargins.small
 
 const ActionButton = (props: {
   inTeam: boolean
diff --git a/shared/team-building/service-tab-bar.desktop.tsx b/shared/team-building/service-tab-bar.desktop.tsx
deleted file mode 100644
index f7145d1bf154..000000000000
--- a/shared/team-building/service-tab-bar.desktop.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters/index'
-import {serviceIdToIconFont, serviceIdToAccentColor, serviceIdToLongLabel, serviceIdToBadge} from './shared'
-import difference from 'lodash/difference'
-import type * as T from '@/constants/types'
-import type {Props, IconProps} from './service-tab-bar.shared'
-import {useColorScheme} from 'react-native'
-
-const getDesktopServicesLayout = (
-  services: ReadonlyArray<T.TB.ServiceIdWithContact>,
-  selectedService: T.TB.ServiceIdWithContact,
-  servicesShown: number,
-  lastSelectedUnlockedService?: T.TB.ServiceIdWithContact
-) => {
-  const lockedServices = services.slice(0, servicesShown)
-  const selectedServiceIsLocked = services.indexOf(selectedService) < servicesShown
-  const frontServices = selectedServiceIsLocked
-    ? lastSelectedUnlockedService === undefined
-      ? services.slice(0, servicesShown + 1)
-      : lockedServices.concat(lastSelectedUnlockedService)
-    : lockedServices.concat(selectedService)
-
-  return {
-    frontServices,
-    moreServices: difference(services, frontServices),
-  }
-}
-
-const ServiceIcon = (props: IconProps) => {
-  const [hover, setHover] = React.useState(false)
-  const isDarkMode = useColorScheme() === 'dark'
-  const color =
-    props.isActive || hover ? serviceIdToAccentColor(props.service, isDarkMode) : Kb.Styles.globalColors.black
-  return (
-    <Kb.ClickableBox
-      onClick={() => props.onClick(props.service)}
-      onMouseOver={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      style={styles.serviceIconFlex}
-    >
-      <Kb.Box2 direction="horizontal" centerChildren={true} flex={1} style={styles.serviceIconContainer}>
-        <Kb.Box2
-          direction="vertical"
-          centerChildren={true}
-          fullHeight={true}
-          justifyContent="flex-start"
-        >
-          <Kb.Box2 direction="vertical" relative={true}>
-            {serviceIdToBadge(props.service) && (
-              <Kb.Badge
-                border={true}
-                height={9}
-                containerStyle={styles.badgeContainerStyle}
-                badgeStyle={styles.badgeStyle}
-                leftRightPadding={0}
-              />
-            )}
-            <Kb.Box2 direction="vertical" style={styles.serviceIconBox}>
-              <Kb.Icon
-                color={color}
-                fontSize={16}
-                type={serviceIdToIconFont(props.service)}
-              />
-            </Kb.Box2>
-          </Kb.Box2>
-          <Kb.Box2 direction="vertical" style={styles.label}>
-            {props.label.map((label, i) => (
-              <Kb.Text key={i} center={true} type="BodyTiny" style={{color}}>
-                {label}
-              </Kb.Text>
-            ))}
-          </Kb.Box2>
-        </Kb.Box2>
-      </Kb.Box2>
-      <Kb.Box2
-        direction="horizontal"
-        fullWidth={true}
-        style={Kb.Styles.collapseStyles([
-          props.isActive
-            ? styles.activeTabBar
-            : {...styles.inactiveTabBar, ...(props.minimalBorder ? {borderBottomWidth: 0} : undefined)},
-          props.isActive && {backgroundColor: serviceIdToAccentColor(props.service, isDarkMode)},
-        ])}
-      />
-    </Kb.ClickableBox>
-  )
-}
-
-const MoreNetworksButton = (props: {
-  services: Array<T.TB.ServiceIdWithContact>
-  onChangeService: (service: T.TB.ServiceIdWithContact) => void
-}) => {
-  const {services, onChangeService} = props
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    return (
-      <Kb.FloatingMenu
-        attachTo={attachTo}
-        closeOnSelect={true}
-        items={services.map(service => ({
-          onClick: () => onChangeService(service),
-          title: service,
-          view: <MoreNetworkItem service={service} />,
-        }))}
-        onHidden={hidePopup}
-        visible={true}
-      />
-    )
-  }
-
-  const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
-
-  return (
-    <>
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} flex={1}>
-        <Kb.Box2
-          direction="vertical"
-          style={styles.moreNetworks1}
-          fullHeight={true}
-          centerChildren={true}
-          ref={popupAnchor}
-        >
-          <Kb.WithTooltip tooltip="More networks" containerStyle={styles.moreNetworks2}>
-            <Kb.ClickableBox onClick={showPopup} style={styles.moreNetworks3}>
-              <Kb.Text type="BodyBigExtrabold" style={styles.moreText}>
-                •••
-              </Kb.Text>
-            </Kb.ClickableBox>
-          </Kb.WithTooltip>
-        </Kb.Box2>
-        <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.inactiveTabBar} />
-      </Kb.Box2>
-      {popup}
-    </>
-  )
-}
-
-const MoreNetworkItem = (props: {service: T.TB.ServiceIdWithContact}) => {
-  const isDarkMode = useColorScheme() === 'dark'
-  return (
-    <Kb.Box2 direction="horizontal" fullHeight={true} alignItems="center">
-      <Kb.Icon
-        style={styles.moreNetworkItemIcon}
-        color={serviceIdToAccentColor(props.service, isDarkMode)}
-        type={serviceIdToIconFont(props.service)}
-      />
-      <Kb.Text type="Body">{serviceIdToLongLabel(props.service).join(' ')}</Kb.Text>
-    </Kb.Box2>
-  )
-}
-
-export const ServiceTabBar = (props: Props) => {
-  const [lastSelectedUnlockedService, setLastSelectedUnlockedService] = React.useState<
-    T.TB.ServiceIdWithContact | undefined
-  >()
-  const {services, onChangeService: propsOnChangeService, servicesShown: nLocked = 3} = props
-  const onChangeService = (service: T.TB.ServiceIdWithContact) => {
-    if (services.indexOf(service) >= nLocked && service !== lastSelectedUnlockedService) {
-      setLastSelectedUnlockedService(service)
-    }
-    propsOnChangeService(service)
-  }
-
-  const {frontServices, moreServices} = getDesktopServicesLayout(
-    services,
-    props.selectedService,
-    nLocked,
-    lastSelectedUnlockedService
-  )
-
-  return (
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.tabBarContainer}>
-      {frontServices.map(service => (
-        <ServiceIcon
-          key={service}
-          service={service}
-          label={serviceIdToLongLabel(service)}
-          onClick={onChangeService}
-          isActive={props.selectedService === service}
-          minimalBorder={props.minimalBorder}
-        />
-      ))}
-      {moreServices.length > 0 && (
-        <MoreNetworksButton services={moreServices} onChangeService={onChangeService} />
-      )}
-    </Kb.Box2>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      activeTabBar: {
-        backgroundColor: Kb.Styles.globalColors.blue,
-        height: 2,
-      },
-      badgeContainerStyle: {
-        position: 'absolute',
-        right: -4,
-        top: 10,
-      },
-      badgeStyle: {backgroundColor: Kb.Styles.globalColors.blue},
-      inactiveTabBar: {height: 2},
-      label: {
-        marginTop: Kb.Styles.globalMargins.xtiny,
-        minWidth: 64,
-      },
-      moreNetworkItemIcon: {marginRight: Kb.Styles.globalMargins.tiny},
-      moreNetworks1: {
-        paddingBottom: Kb.Styles.globalMargins.tiny,
-        paddingLeft: Kb.Styles.globalMargins.xsmall,
-        paddingRight: Kb.Styles.globalMargins.xsmall,
-        paddingTop: Kb.Styles.globalMargins.tiny,
-      },
-      moreNetworks2: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'row',
-        height: '100%',
-        justifyContent: 'center',
-        maxHeight: '100%',
-        maxWidth: '100%',
-        width: '100%',
-      },
-      moreNetworks3: {
-        alignItems: 'center',
-        borderColor: Kb.Styles.globalColors.black_20,
-        borderRadius: 4,
-        borderStyle: 'solid',
-        borderWidth: 1,
-        display: 'flex',
-        flexDirection: 'row',
-        height: '100%',
-        justifyContent: 'center',
-        maxHeight: '100%',
-        maxWidth: '100%',
-        width: '100%',
-      },
-      moreText: {color: Kb.Styles.globalColors.black_50},
-      serviceIconBox: {marginTop: 14},
-      serviceIconContainer: {
-        height: 70,
-        marginLeft: Kb.Styles.globalMargins.xtiny,
-        marginRight: Kb.Styles.globalMargins.xtiny,
-        maxWidth: 72,
-        minWidth: 40,
-      },
-
-      serviceIconFlex: {
-        flex: 1,
-        maxWidth: 90,
-      },
-      tabBarContainer: {
-        borderBottomColor: Kb.Styles.globalColors.black_10,
-        borderBottomWidth: 1,
-        borderStyle: 'solid',
-        flexShrink: 0,
-        minHeight: 30,
-      },
-    }) as const
-)
-
-export default ServiceTabBar
diff --git a/shared/team-building/service-tab-bar.native.tsx b/shared/team-building/service-tab-bar.native.tsx
deleted file mode 100644
index 5337f3dd5003..000000000000
--- a/shared/team-building/service-tab-bar.native.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import * as React from 'react'
-import * as Kb from '@/common-adapters'
-import {serviceIdToIconFont, serviceIdToAccentColor, serviceIdToLongLabel, serviceIdToBadge} from './shared'
-import {ScrollView} from 'react-native'
-import type {Props, IconProps} from './service-tab-bar.shared'
-import {useColorScheme} from 'react-native'
-import {
-  useSharedValue,
-  useAnimatedStyle,
-  interpolate,
-  withSpring,
-  withDelay,
-  withTiming,
-  Extrapolation,
-  type SharedValue,
-  createAnimatedComponent,
-} from '@/common-adapters/reanimated'
-
-export const labelHeight = 34
-
-const serviceMinWidthWhenSmall = (containerWidth: number) => {
-  const minWidth = 70
-  if (containerWidth <= minWidth) {
-    return minWidth
-  }
-  const p = containerWidth / minWidth // count that would fit onscreen at ideal size
-  let n = Math.floor(p) + 0.5
-  if (p % 1 < 0.5) {
-    n -= 1
-  }
-  // n = count that will fit onscreen at returned size
-  return containerWidth / n
-}
-
-const smallWidth = serviceMinWidthWhenSmall(Kb.Styles.dimensionWidth)
-const bigWidth = Math.max(smallWidth, 92)
-const AnimatedBox2 = Kb.Box2Animated
-const AnimatedScrollView = createAnimatedComponent(ScrollView)
-
-// On tablet add an additional "service" item that is only a bottom border that extends to the end of the ScrollView
-const TabletBottomBorderExtension = function TabletBottomBorderExtension(props: {
-  offset?: SharedValue<number>
-}) {
-  'use no memo'
-  const {offset} = props
-
-  const borderColor = Kb.Styles.undynamicColor(Kb.Styles.globalColors.black_10)
-  const animatedStyles = useAnimatedStyle(() => {
-    const translateY = offset
-      ? interpolate(offset.value, [0, 100], [0, -8], {
-          extrapolateLeft: Extrapolation.CLAMP,
-          extrapolateRight: Extrapolation.CLAMP,
-        })
-      : 0
-    return {borderColor, transform: [{translateY}]}
-  })
-
-  return (
-    <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} relative={true}>
-      <AnimatedBox2
-        direction="horizontal"
-        fullWidth={true}
-        style={Kb.Styles.collapseStyles([
-          {
-            borderBottomWidth: 1,
-            bottom: 0,
-            height: 2,
-            position: 'absolute',
-          },
-          animatedStyles,
-        ])}
-      />
-    </Kb.Box2>
-  )
-}
-
-const ServiceIcon = function ServiceIcon(props: IconProps) {
-  'use no memo'
-  const {offset, isActive, service, label, onClick} = props
-
-  const isDarkMode = useColorScheme() === 'dark'
-  const color = isActive ? serviceIdToAccentColor(service, isDarkMode) : Kb.Styles.globalColors.black
-
-  const animatedWidth = useAnimatedStyle(() => {
-    const width = offset
-      ? withTiming(
-          interpolate(offset.value, [-100, 0, 100], [bigWidth + 5, bigWidth, smallWidth], {
-            extrapolateLeft: Extrapolation.CLAMP,
-            extrapolateRight: Extrapolation.CLAMP,
-          }),
-          {duration: 10}
-        )
-      : 0
-    return {width}
-  })
-  const animatedOpacity = useAnimatedStyle(() => {
-    const opacity = offset
-      ? interpolate(offset.value, [0, 40], [1, 0], {
-          extrapolateLeft: Extrapolation.CLAMP,
-          extrapolateRight: Extrapolation.CLAMP,
-        })
-      : 0
-    return {opacity}
-  })
-  const animatedTransform = useAnimatedStyle(() => {
-    const translateY = offset
-      ? interpolate(offset.value, [0, 100], [0, -8], {
-          extrapolateLeft: Extrapolation.CLAMP,
-          extrapolateRight: Extrapolation.CLAMP,
-        })
-      : 0
-    return {transform: [{translateY}]}
-  })
-
-  return (
-    <Kb.ClickableBox onClick={() => onClick(service)} style={{position: 'relative'}}>
-      <AnimatedBox2 direction="vertical" style={[styles.serviceIconContainer, animatedWidth]}>
-        <Kb.Box2 direction="vertical" relative={true}>
-          {serviceIdToBadge(service) && (
-            <Kb.Badge
-              border={true}
-              height={9}
-              containerStyle={styles.badgeContainerStyle}
-              badgeStyle={styles.badgeStyle}
-              leftRightPadding={0}
-            />
-          )}
-          <Kb.Icon fontSize={18} type={serviceIdToIconFont(service)} color={color} />
-        </Kb.Box2>
-        <AnimatedBox2 direction="vertical" style={[styles.labelContainer, animatedOpacity]}>
-          <Kb.Box2 direction="vertical" style={{height: labelHeight, width: 74}}>
-            <Kb.Box2 direction="vertical">
-              {label.map((label, i) => (
-                <Kb.Text key={i} center={true} type="BodyTiny" style={{color}}>
-                  {label}
-                </Kb.Text>
-              ))}
-            </Kb.Box2>
-          </Kb.Box2>
-        </AnimatedBox2>
-      </AnimatedBox2>
-      <AnimatedBox2
-        direction="horizontal"
-        fullWidth={true}
-        style={Kb.Styles.collapseStyles([
-          {borderColor: Kb.Styles.undynamicColor(Kb.Styles.globalColors.black_10)},
-          isActive ? styles.activeTabBar : styles.inactiveTabBar,
-          isActive && {backgroundColor: serviceIdToAccentColor(service, isDarkMode)},
-          Kb.Styles.platformStyles({isMobile: animatedTransform}),
-        ])}
-      />
-    </Kb.ClickableBox>
-  )
-}
-
-export const ServiceTabBar = (props: Props) => {
-  'use no memo'
-  const {onChangeService, offset, services, selectedService} = props
-  const bounceX = useSharedValue(40)
-
-  React.useEffect(() => {
-    bounceX.set(0)
-  }, [bounceX])
-
-  const animatedStyles = useAnimatedStyle(() => {
-    const translateX = withDelay(100, withSpring(bounceX.value, {}))
-    const translateY = offset
-      ? interpolate(offset.value, [0, 100], [0, 8], {
-          extrapolateLeft: Extrapolation.CLAMP,
-          extrapolateRight: Extrapolation.CLAMP,
-        })
-      : 0
-
-    // withTiming workaround due to https://github.com/software-mansion/react-native-reanimated/issues/1947#issuecomment-942413134
-    const height = offset
-      ? withTiming(
-          interpolate(offset.value, [0, 100], [72, 48], {
-            extrapolateLeft: Extrapolation.CLAMP,
-            extrapolateRight: Extrapolation.CLAMP,
-          }),
-          {duration: 10}
-        )
-      : 0
-    return {height, transform: [{translateX}, {translateY}]}
-  })
-
-  return (
-    <AnimatedScrollView
-      horizontal={true}
-      showsHorizontalScrollIndicator={false}
-      scrollEventThrottle={16}
-      keyboardDismissMode="on-drag"
-      keyboardShouldPersistTaps="handled"
-      contentContainerStyle={Kb.Styles.collapseStyles([
-        {height: '100%'},
-        Kb.Styles.isTablet && {width: '100%'},
-      ])}
-      style={[styles.scroll, animatedStyles]}
-    >
-      {services.map(service => (
-        <ServiceIcon
-          key={service}
-          offset={offset}
-          service={service}
-          label={serviceIdToLongLabel(service)}
-          onClick={onChangeService}
-          isActive={selectedService === service}
-        />
-      ))}
-      {Kb.Styles.isTablet ? <TabletBottomBorderExtension offset={offset} /> : null}
-    </AnimatedScrollView>
-  )
-}
-
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      activeTabBar: {
-        backgroundColor: Kb.Styles.globalColors.blue,
-        bottom: 0,
-        height: 2,
-        position: 'absolute',
-        width: '100%',
-      },
-      badgeContainerStyle: {
-        position: 'absolute',
-        right: -4,
-        top: -2,
-        zIndex: 1, // above the service icon
-      },
-      badgeStyle: {backgroundColor: Kb.Styles.globalColors.blue},
-      inactiveTabBar: {
-        borderBottomWidth: 1,
-        bottom: 0,
-        height: 2,
-        position: 'absolute',
-      },
-      labelContainer: {
-        marginTop: Kb.Styles.globalMargins.xtiny,
-        overflow: 'hidden',
-      },
-      scroll: {
-        flexGrow: 0,
-        flexShrink: 0,
-        width: '100%',
-      },
-      serviceIconContainer: {
-        alignSelf: 'center',
-        height: '100%',
-        paddingTop: Kb.Styles.globalMargins.tiny,
-        position: 'relative',
-      },
-    }) as const
-)
-
-export default ServiceTabBar
diff --git a/shared/team-building/service-tab-bar.tsx b/shared/team-building/service-tab-bar.tsx
new file mode 100644
index 000000000000..c3a75f5a9567
--- /dev/null
+++ b/shared/team-building/service-tab-bar.tsx
@@ -0,0 +1,455 @@
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import {serviceIdToIconFont, serviceIdToAccentColor, serviceIdToLongLabel, serviceIdToBadge} from './shared'
+import difference from 'lodash/difference'
+import {ScrollView} from 'react-native'
+import type * as T from '@/constants/types'
+import type {Props, IconProps} from './service-tab-bar.shared'
+import {useColorScheme} from 'react-native'
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  withSpring,
+  withDelay,
+  withTiming,
+  Extrapolation,
+  type SharedValue,
+  createAnimatedComponent,
+} from '@/common-adapters/reanimated'
+
+export const labelHeight = 34
+
+// ── Native-only helpers ──────────────────────────────────────────────────────
+
+const serviceMinWidthWhenSmall = (containerWidth: number) => {
+  const minWidth = 70
+  if (containerWidth <= minWidth) return minWidth
+  const p = containerWidth / minWidth
+  let n = Math.floor(p) + 0.5
+  if (p % 1 < 0.5) n -= 1
+  return containerWidth / n
+}
+
+const smallWidth = serviceMinWidthWhenSmall(Kb.Styles.dimensionWidth)
+const bigWidth = Math.max(smallWidth, 92)
+const AnimatedBox2 = Kb.Box2Animated
+const AnimatedScrollView = createAnimatedComponent(ScrollView)
+
+const TabletBottomBorderExtension = function TabletBottomBorderExtension(props: {
+  offset?: SharedValue<number>
+}) {
+  'use no memo'
+  const {offset} = props
+  const borderColor = Kb.Styles.undynamicColor(Kb.Styles.globalColors.black_10)
+  const animatedStyles = useAnimatedStyle(() => {
+    const translateY = offset
+      ? interpolate(offset.value, [0, 100], [0, -8], {
+          extrapolateLeft: Extrapolation.CLAMP,
+          extrapolateRight: Extrapolation.CLAMP,
+        })
+      : 0
+    return {borderColor, transform: [{translateY}]}
+  })
+  return (
+    <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} relative={true}>
+      <AnimatedBox2
+        direction="horizontal"
+        fullWidth={true}
+        style={Kb.Styles.collapseStyles([
+          {borderBottomWidth: 1, bottom: 0, height: 2, position: 'absolute'},
+          animatedStyles,
+        ])}
+      />
+    </Kb.Box2>
+  )
+}
+
+const ServiceIconNative = function ServiceIcon(props: IconProps) {
+  'use no memo'
+  const {offset, isActive, service, label, onClick} = props
+  const isDarkMode = useColorScheme() === 'dark'
+  const color = isActive ? serviceIdToAccentColor(service, isDarkMode) : Kb.Styles.globalColors.black
+
+  const animatedWidth = useAnimatedStyle(() => {
+    const width = offset
+      ? withTiming(
+          interpolate(offset.value, [-100, 0, 100], [bigWidth + 5, bigWidth, smallWidth], {
+            extrapolateLeft: Extrapolation.CLAMP,
+            extrapolateRight: Extrapolation.CLAMP,
+          }),
+          {duration: 10}
+        )
+      : 0
+    return {width}
+  })
+  const animatedOpacity = useAnimatedStyle(() => {
+    const opacity = offset
+      ? interpolate(offset.value, [0, 40], [1, 0], {
+          extrapolateLeft: Extrapolation.CLAMP,
+          extrapolateRight: Extrapolation.CLAMP,
+        })
+      : 0
+    return {opacity}
+  })
+  const animatedTransform = useAnimatedStyle(() => {
+    const translateY = offset
+      ? interpolate(offset.value, [0, 100], [0, -8], {
+          extrapolateLeft: Extrapolation.CLAMP,
+          extrapolateRight: Extrapolation.CLAMP,
+        })
+      : 0
+    return {transform: [{translateY}]}
+  })
+
+  return (
+    <Kb.ClickableBox onClick={() => onClick(service)} style={{position: 'relative'}}>
+      <AnimatedBox2 direction="vertical" style={[nativeStyles.serviceIconContainer, animatedWidth]}>
+        <Kb.Box2 direction="vertical" relative={true}>
+          {serviceIdToBadge(service) && (
+            <Kb.Badge
+              border={true}
+              height={9}
+              containerStyle={nativeStyles.badgeContainerStyle}
+              badgeStyle={nativeStyles.badgeStyle}
+              leftRightPadding={0}
+            />
+          )}
+          <Kb.Icon fontSize={18} type={serviceIdToIconFont(service)} color={color} />
+        </Kb.Box2>
+        <AnimatedBox2 direction="vertical" style={[nativeStyles.labelContainer, animatedOpacity]}>
+          <Kb.Box2 direction="vertical" style={{height: labelHeight, width: 74}}>
+            <Kb.Box2 direction="vertical">
+              {label.map((label, i) => (
+                <Kb.Text key={i} center={true} type="BodyTiny" style={{color}}>
+                  {label}
+                </Kb.Text>
+              ))}
+            </Kb.Box2>
+          </Kb.Box2>
+        </AnimatedBox2>
+      </AnimatedBox2>
+      <AnimatedBox2
+        direction="horizontal"
+        fullWidth={true}
+        style={Kb.Styles.collapseStyles([
+          {borderColor: Kb.Styles.undynamicColor(Kb.Styles.globalColors.black_10)},
+          isActive ? nativeStyles.activeTabBar : nativeStyles.inactiveTabBar,
+          isActive && {backgroundColor: serviceIdToAccentColor(service, isDarkMode)},
+          Kb.Styles.platformStyles({isMobile: animatedTransform}),
+        ])}
+      />
+    </Kb.ClickableBox>
+  )
+}
+
+const ServiceTabBarNative = (props: Props) => {
+  'use no memo'
+  const {onChangeService, offset, services, selectedService} = props
+  const bounceX = useSharedValue(40)
+
+  React.useEffect(() => {
+    bounceX.set(0)
+  }, [bounceX])
+
+  const animatedStyles = useAnimatedStyle(() => {
+    const translateX = withDelay(100, withSpring(bounceX.value, {}))
+    const translateY = offset
+      ? interpolate(offset.value, [0, 100], [0, 8], {
+          extrapolateLeft: Extrapolation.CLAMP,
+          extrapolateRight: Extrapolation.CLAMP,
+        })
+      : 0
+    const height = offset
+      ? withTiming(
+          interpolate(offset.value, [0, 100], [72, 48], {
+            extrapolateLeft: Extrapolation.CLAMP,
+            extrapolateRight: Extrapolation.CLAMP,
+          }),
+          {duration: 10}
+        )
+      : 0
+    return {height, transform: [{translateX}, {translateY}]}
+  })
+
+  return (
+    <AnimatedScrollView
+      horizontal={true}
+      showsHorizontalScrollIndicator={false}
+      scrollEventThrottle={16}
+      keyboardDismissMode="on-drag"
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={Kb.Styles.collapseStyles([
+        {height: '100%'},
+        Kb.Styles.isTablet && {width: '100%'},
+      ])}
+      style={[nativeStyles.scroll, animatedStyles]}
+    >
+      {services.map(service => (
+        <ServiceIconNative
+          key={service}
+          offset={offset}
+          service={service}
+          label={serviceIdToLongLabel(service)}
+          onClick={onChangeService}
+          isActive={selectedService === service}
+        />
+      ))}
+      {Kb.Styles.isTablet ? <TabletBottomBorderExtension offset={offset} /> : null}
+    </AnimatedScrollView>
+  )
+}
+
+// ── Desktop-only helpers ─────────────────────────────────────────────────────
+
+const getDesktopServicesLayout = (
+  services: ReadonlyArray<T.TB.ServiceIdWithContact>,
+  selectedService: T.TB.ServiceIdWithContact,
+  servicesShown: number,
+  lastSelectedUnlockedService?: T.TB.ServiceIdWithContact
+) => {
+  const lockedServices = services.slice(0, servicesShown)
+  const selectedServiceIsLocked = services.indexOf(selectedService) < servicesShown
+  const frontServices = selectedServiceIsLocked
+    ? lastSelectedUnlockedService === undefined
+      ? services.slice(0, servicesShown + 1)
+      : lockedServices.concat(lastSelectedUnlockedService)
+    : lockedServices.concat(selectedService)
+  return {frontServices, moreServices: difference(services, frontServices)}
+}
+
+const MoreNetworkItem = (props: {service: T.TB.ServiceIdWithContact}) => {
+  const isDarkMode = useColorScheme() === 'dark'
+  return (
+    <Kb.Box2 direction="horizontal" fullHeight={true} alignItems="center">
+      <Kb.Icon
+        style={desktopStyles.moreNetworkItemIcon}
+        color={serviceIdToAccentColor(props.service, isDarkMode)}
+        type={serviceIdToIconFont(props.service)}
+      />
+      <Kb.Text type="Body">{serviceIdToLongLabel(props.service).join(' ')}</Kb.Text>
+    </Kb.Box2>
+  )
+}
+
+const MoreNetworksButton = (props: {
+  services: Array<T.TB.ServiceIdWithContact>
+  onChangeService: (service: T.TB.ServiceIdWithContact) => void
+}) => {
+  const {services, onChangeService} = props
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    return (
+      <Kb.FloatingMenu
+        attachTo={attachTo}
+        closeOnSelect={true}
+        items={services.map(service => ({
+          onClick: () => onChangeService(service),
+          title: service,
+          view: <MoreNetworkItem service={service} />,
+        }))}
+        onHidden={hidePopup}
+        visible={true}
+      />
+    )
+  }
+  const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
+  return (
+    <>
+      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} flex={1}>
+        <Kb.Box2
+          direction="vertical"
+          style={desktopStyles.moreNetworks1}
+          fullHeight={true}
+          centerChildren={true}
+          ref={popupAnchor}
+        >
+          <Kb.WithTooltip tooltip="More networks" containerStyle={desktopStyles.moreNetworks2}>
+            <Kb.ClickableBox onClick={showPopup} style={desktopStyles.moreNetworks3}>
+              <Kb.Text type="BodyBigExtrabold" style={desktopStyles.moreText}>
+                •••
+              </Kb.Text>
+            </Kb.ClickableBox>
+          </Kb.WithTooltip>
+        </Kb.Box2>
+        <Kb.Box2 direction="horizontal" fullWidth={true} style={desktopStyles.inactiveTabBar} />
+      </Kb.Box2>
+      {popup}
+    </>
+  )
+}
+
+const ServiceIconDesktop = (props: IconProps) => {
+  const [hover, setHover] = React.useState(false)
+  const isDarkMode = useColorScheme() === 'dark'
+  const color =
+    props.isActive || hover ? serviceIdToAccentColor(props.service, isDarkMode) : Kb.Styles.globalColors.black
+  return (
+    <Kb.ClickableBox
+      onClick={() => props.onClick(props.service)}
+      onMouseOver={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={desktopStyles.serviceIconFlex}
+    >
+      <Kb.Box2 direction="horizontal" centerChildren={true} flex={1} style={desktopStyles.serviceIconContainer}>
+        <Kb.Box2 direction="vertical" centerChildren={true} fullHeight={true} justifyContent="flex-start">
+          <Kb.Box2 direction="vertical" relative={true}>
+            {serviceIdToBadge(props.service) && (
+              <Kb.Badge
+                border={true}
+                height={9}
+                containerStyle={desktopStyles.badgeContainerStyle}
+                badgeStyle={desktopStyles.badgeStyle}
+                leftRightPadding={0}
+              />
+            )}
+            <Kb.Box2 direction="vertical" style={desktopStyles.serviceIconBox}>
+              <Kb.Icon color={color} fontSize={16} type={serviceIdToIconFont(props.service)} />
+            </Kb.Box2>
+          </Kb.Box2>
+          <Kb.Box2 direction="vertical" style={desktopStyles.label}>
+            {props.label.map((label, i) => (
+              <Kb.Text key={i} center={true} type="BodyTiny" style={{color}}>
+                {label}
+              </Kb.Text>
+            ))}
+          </Kb.Box2>
+        </Kb.Box2>
+      </Kb.Box2>
+      <Kb.Box2
+        direction="horizontal"
+        fullWidth={true}
+        style={Kb.Styles.collapseStyles([
+          props.isActive
+            ? desktopStyles.activeTabBar
+            : {...desktopStyles.inactiveTabBar, ...(props.minimalBorder ? {borderBottomWidth: 0} : undefined)},
+          props.isActive && {backgroundColor: serviceIdToAccentColor(props.service, isDarkMode)},
+        ])}
+      />
+    </Kb.ClickableBox>
+  )
+}
+
+const ServiceTabBarDesktop = (props: Props) => {
+  const [lastSelectedUnlockedService, setLastSelectedUnlockedService] = React.useState<
+    T.TB.ServiceIdWithContact | undefined
+  >()
+  const {services, onChangeService: propsOnChangeService, servicesShown: nLocked = 3} = props
+  const onChangeService = (service: T.TB.ServiceIdWithContact) => {
+    if (services.indexOf(service) >= nLocked && service !== lastSelectedUnlockedService) {
+      setLastSelectedUnlockedService(service)
+    }
+    propsOnChangeService(service)
+  }
+  const {frontServices, moreServices} = getDesktopServicesLayout(
+    services,
+    props.selectedService,
+    nLocked,
+    lastSelectedUnlockedService
+  )
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true} style={desktopStyles.tabBarContainer}>
+      {frontServices.map(service => (
+        <ServiceIconDesktop
+          key={service}
+          service={service}
+          label={serviceIdToLongLabel(service)}
+          onClick={onChangeService}
+          isActive={props.selectedService === service}
+          minimalBorder={props.minimalBorder}
+        />
+      ))}
+      {moreServices.length > 0 && (
+        <MoreNetworksButton services={moreServices} onChangeService={onChangeService} />
+      )}
+    </Kb.Box2>
+  )
+}
+
+// ── Styles ───────────────────────────────────────────────────────────────────
+
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      activeTabBar: {
+        backgroundColor: Kb.Styles.globalColors.blue,
+        bottom: 0,
+        height: 2,
+        position: 'absolute',
+        width: '100%',
+      },
+      badgeContainerStyle: {position: 'absolute', right: -4, top: -2, zIndex: 1},
+      badgeStyle: {backgroundColor: Kb.Styles.globalColors.blue},
+      inactiveTabBar: {borderBottomWidth: 1, bottom: 0, height: 2, position: 'absolute'},
+      labelContainer: {marginTop: Kb.Styles.globalMargins.xtiny, overflow: 'hidden'},
+      scroll: {flexGrow: 0, flexShrink: 0, width: '100%'},
+      serviceIconContainer: {
+        alignSelf: 'center',
+        height: '100%',
+        paddingTop: Kb.Styles.globalMargins.tiny,
+        position: 'relative',
+      },
+    }) as const
+)
+
+const desktopStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      activeTabBar: {backgroundColor: Kb.Styles.globalColors.blue, height: 2},
+      badgeContainerStyle: {position: 'absolute', right: -4, top: 10},
+      badgeStyle: {backgroundColor: Kb.Styles.globalColors.blue},
+      inactiveTabBar: {height: 2},
+      label: {marginTop: Kb.Styles.globalMargins.xtiny, minWidth: 64},
+      moreNetworkItemIcon: {marginRight: Kb.Styles.globalMargins.tiny},
+      moreNetworks1: {
+        paddingBottom: Kb.Styles.globalMargins.tiny,
+        paddingLeft: Kb.Styles.globalMargins.xsmall,
+        paddingRight: Kb.Styles.globalMargins.xsmall,
+        paddingTop: Kb.Styles.globalMargins.tiny,
+      },
+      moreNetworks2: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        justifyContent: 'center',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        width: '100%',
+      },
+      moreNetworks3: {
+        alignItems: 'center',
+        borderColor: Kb.Styles.globalColors.black_20,
+        borderRadius: 4,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        justifyContent: 'center',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        width: '100%',
+      },
+      moreText: {color: Kb.Styles.globalColors.black_50},
+      serviceIconBox: {marginTop: 14},
+      serviceIconContainer: {
+        height: 70,
+        marginLeft: Kb.Styles.globalMargins.xtiny,
+        marginRight: Kb.Styles.globalMargins.xtiny,
+        maxWidth: 72,
+        minWidth: 40,
+      },
+      serviceIconFlex: {flex: 1, maxWidth: 90},
+      tabBarContainer: {
+        borderBottomColor: Kb.Styles.globalColors.black_10,
+        borderBottomWidth: 1,
+        borderStyle: 'solid',
+        flexShrink: 0,
+        minHeight: 30,
+      },
+    }) as const
+)
+
+export const ServiceTabBar = isMobile ? ServiceTabBarNative : ServiceTabBarDesktop
+export default ServiceTabBar
diff --git a/shared/team-building/shared.tsx b/shared/team-building/shared.tsx
index dac68d852aa8..817ede88ab0f 100644
--- a/shared/team-building/shared.tsx
+++ b/shared/team-building/shared.tsx
@@ -1,5 +1,4 @@
 import type * as T from '@/constants/types'
-import * as Kb from '@/common-adapters'
 import type {IconType} from '@/common-adapters/icon.constants-gen'
 import * as TeamBuilding from '@/stores/team-building'
 
@@ -39,13 +38,13 @@ const services: {
     searchPlaceholder: 'Hacker News',
   },
   keybase: {
-    avatarIcon: Kb.Styles.isMobile
+    avatarIcon: isMobile
       ? 'icon-placeholder-avatar-circular-48'
       : 'icon-placeholder-avatar-circular-32',
     icon: 'iconfont-contact-book',
     label: 'Keybase and contacts',
-    longLabel: Kb.Styles.isMobile ? ['Keybase &', 'Contacts'] : ['A Keybase', 'user'],
-    searchPlaceholder: Kb.Styles.isMobile ? 'Keybase & contacts' : 'Keybase',
+    longLabel: isMobile ? ['Keybase &', 'Contacts'] : ['A Keybase', 'user'],
+    searchPlaceholder: isMobile ? 'Keybase & contacts' : 'Keybase',
   },
   phone: {
     badge: true,
diff --git a/shared/team-building/team-box.tsx b/shared/team-building/team-box.tsx
index b25068a1e221..ec8638efcc76 100644
--- a/shared/team-building/team-box.tsx
+++ b/shared/team-building/team-box.tsx
@@ -71,7 +71,7 @@ const TeamBox = (props: Props) => {
     prevLastRef.current = last
   }, [prevLastRef, last])
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2 direction="horizontal" fullWidth={true}>
       <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
         <Kb.ScrollView
diff --git a/shared/team-building/user-bubble.tsx b/shared/team-building/user-bubble.tsx
index 7bad7c5544dd..32d99d260a08 100644
--- a/shared/team-building/user-bubble.tsx
+++ b/shared/team-building/user-bubble.tsx
@@ -9,7 +9,7 @@ export type Props = {
   onRemove: () => void
 }
 
-const removeSize = Kb.Styles.isMobile ? 22 : 16
+const removeSize = isMobile ? 22 : 16
 
 const UserBubble = (props: Props) => {
   const isKeybase = props.service === 'keybase'
@@ -54,7 +54,7 @@ const RemoveBubble = ({onRemove}: {onRemove: () => void}) => (
     <Kb.Icon
       type="iconfont-close"
       color={Kb.Styles.globalColors.black_50_on_white}
-      fontSize={Kb.Styles.isMobile ? 14 : 12}
+      fontSize={isMobile ? 14 : 12}
       style={styles.removeIcon}
       className="hover_color_black"
     />
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/add-members-wizard/add-email.tsx b/shared/teams/add-members-wizard/add-email.tsx
index 28342e623796..25d7f490f9d7 100644
--- a/shared/teams/add-members-wizard/add-email.tsx
+++ b/shared/teams/add-members-wizard/add-email.tsx
@@ -65,7 +65,7 @@ const AddEmail = (props: Props) => {
         direction="vertical"
         fullWidth={true}
         style={styles.body}
-        gap={Kb.Styles.isMobile ? 'tiny' : 'xsmall'}
+        gap={isMobile ? 'tiny' : 'xsmall'}
       >
         <Kb.Text type="Body">Enter one or multiple email addresses:</Kb.Text>
         <Kb.Box2 direction="vertical" gap="tiny" fullWidth={true} alignItems="flex-start">
diff --git a/shared/teams/add-members-wizard/add-from-where.tsx b/shared/teams/add-members-wizard/add-from-where.tsx
index 8de28c4fb015..7abce6486120 100644
--- a/shared/teams/add-members-wizard/add-from-where.tsx
+++ b/shared/teams/add-members-wizard/add-from-where.tsx
@@ -38,7 +38,7 @@ const AddFromWhere = ({wizard}: Props) => {
       ) : null}
       <Kb.Box2
         direction="vertical"
-        gap={Kb.Styles.isMobile ? 'tiny' : 'xsmall'}
+        gap={isMobile ? 'tiny' : 'xsmall'}
         style={styles.body}
         fullWidth={true}
       >
@@ -57,7 +57,7 @@ const AddFromWhere = ({wizard}: Props) => {
           description="Enter one or multiple email addresses."
           onClick={onContinueEmail}
         />
-        {Kb.Styles.isMobile && (
+        {isMobile && (
           <Kb.RichButton
             icon="icon-teams-add-phone-contacts-64"
             title="From your contacts"
diff --git a/shared/teams/add-members-wizard/confirm.tsx b/shared/teams/add-members-wizard/confirm.tsx
index 87d1297374cd..37aba46197bd 100644
--- a/shared/teams/add-members-wizard/confirm.tsx
+++ b/shared/teams/add-members-wizard/confirm.tsx
@@ -274,7 +274,7 @@ const AddMoreMembers = ({wizard}: {wizard: AddMembersWizard}) => {
           visible={true}
           items={[
             {onClick: onAddKeybase, title: 'From Keybase'},
-            ...(Kb.Styles.isMobile ? [{onClick: onAddContacts, title: 'From contacts'}] : []),
+            ...(isMobile ? [{onClick: onAddContacts, title: 'From contacts'}] : []),
             {onClick: onAddEmail, title: 'By email address'},
             {onClick: onAddPhone, title: 'By phone number'},
           ]}
@@ -342,17 +342,17 @@ const AddingMembers = ({
 }) => {
   const {addingMembers} = wizard
   const [expanded, setExpanded] = React.useState(false)
-  const showDivider = Kb.Styles.isMobile && addingMembers.length > 4
-  const aboveDivider = C.isMobile ? addingMembers.slice(0, 4) : addingMembers
-  const belowDivider = C.isMobile && expanded ? addingMembers.slice(4) : []
+  const showDivider = isMobile && addingMembers.length > 4
+  const aboveDivider = isMobile ? addingMembers.slice(0, 4) : addingMembers
+  const belowDivider = isMobile && expanded ? addingMembers.slice(4) : []
   const toggleExpanded = () => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       Kb.LayoutAnimation.configureNext(Kb.LayoutAnimation.Presets.easeInEaseOut)
     }
     setExpanded(!expanded)
   }
   const content = (
-    <Kb.Box2 direction="vertical" fullWidth={true} gap={Kb.Styles.isMobile ? 'tiny' : 'xtiny'}>
+    <Kb.Box2 direction="vertical" fullWidth={true} gap={isMobile ? 'tiny' : 'xtiny'}>
       {aboveDivider.map(toAdd => (
         <AddingMember
           key={toAdd.assertion}
@@ -389,7 +389,7 @@ const AddingMembers = ({
         ))}
     </Kb.Box2>
   )
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2 direction="vertical" fullWidth={true} style={styles.addingMembers}>
         {content}
diff --git a/shared/teams/channel/header.tsx b/shared/teams/channel/header.tsx
index 59758f5fd830..d8b6d45c9afa 100644
--- a/shared/teams/channel/header.tsx
+++ b/shared/teams/channel/header.tsx
@@ -115,7 +115,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
 
   const bottomDescriptorsAndButtons = (
     <>
-      <Kb.Box2 direction="vertical" alignSelf="flex-start" gap="xxtiny" gapStart={!Kb.Styles.isMobile}>
+      <Kb.Box2 direction="vertical" alignSelf="flex-start" gap="xxtiny" gapStart={!isMobile}>
         {!!description && (
           <Kb.Text type="Body" lineClamp={3}>
             {description}
@@ -135,7 +135,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
           {canEdit && (
             <Kb.Button label="Edit" onClick={onEditChannel} small={true} mode="Secondary" />
           )}
-          {!Kb.Styles.isMobile && (
+          {!isMobile && (
             <Kb.Button
               label="Add members"
               onClick={onAddMembers}
@@ -167,7 +167,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
     </Kb.Box2>
   )
 
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return (
       <Kb.Box2 alignItems="flex-start" direction="vertical" fullWidth={true} style={styles.backButton}>
         <Kb.Box2 direction="vertical" fullWidth={true} gap="xtiny" style={styles.outerBoxMobile}>
diff --git a/shared/teams/channel/index.tsx b/shared/teams/channel/index.tsx
index 0f3101b587ef..40cddb436db9 100644
--- a/shared/teams/channel/index.tsx
+++ b/shared/teams/channel/index.tsx
@@ -302,7 +302,7 @@ const ChannelBody = (props: OwnProps) => {
             renderSectionHeader={({section}) =>
               section.title ? <Kb.SectionDivider label={section.title} /> : null
             }
-            stickySectionHeadersEnabled={Kb.Styles.isMobile}
+            stickySectionHeadersEnabled={isMobile}
             sections={sections}
             contentContainerStyle={styles.listContentContainer}
           />
diff --git a/shared/teams/channel/rows.tsx b/shared/teams/channel/rows.tsx
index 22323bdb7237..5e4e0ee2ae60 100644
--- a/shared/teams/channel/rows.tsx
+++ b/shared/teams/channel/rows.tsx
@@ -274,7 +274,7 @@ const ChannelMemberRow = (props: Props) => {
       {...massActionsProps}
       action={anySelected ? null : actions}
       onlyShowActionOnHover="fade"
-      height={Kb.Styles.isMobile ? 64 : 48}
+      height={isMobile ? 64 : 48}
       type="Large"
       body={body}
       firstItem={props.firstItem}
diff --git a/shared/teams/common/activity.tsx b/shared/teams/common/activity.tsx
index c677c06985b9..61f0c99b330a 100644
--- a/shared/teams/common/activity.tsx
+++ b/shared/teams/common/activity.tsx
@@ -115,7 +115,7 @@ const Activity = (p: Props) => {
       direction="horizontal"
       gap="xtiny"
       alignItems="center"
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
       style={style}
     >
       <Kb.Icon
@@ -142,7 +142,7 @@ export const ModalTitle = ({title, teamID, newTeamWizard}: ModalTitleProps) => {
   const avatarFilepath = isNewTeamWizard ? newTeamWizard?.avatarFilename : undefined
   const avatarCrop = isNewTeamWizard ? newTeamWizard?.avatarCrop : undefined
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.Box2 direction="vertical" alignItems="center">
       {!!displayTeamname && (
         <Kb.Text type="BodyTiny" lineClamp={1} ellipsizeMode="middle">
diff --git a/shared/teams/common/channels-widget.tsx b/shared/teams/common/channels-widget.tsx
index 5f4bb967a055..68077ae44190 100644
--- a/shared/teams/common/channels-widget.tsx
+++ b/shared/teams/common/channels-widget.tsx
@@ -83,7 +83,7 @@ const ChannelInputDesktop = (props: ChannelInputProps) => {
         placeholderText="Add channels"
         icon="iconfont-search"
         onChange={setFilter}
-        size={Kb.Styles.isMobile ? 'full-width' : 'small'}
+        size={isMobile ? 'full-width' : 'small'}
         onKeyDown={onKeyDown}
         value={filter}
         valueControlled={true}
@@ -127,11 +127,11 @@ const ChannelInputMobile = (props: ChannelInputProps) => {
   )
 }
 
-const ChannelInput = Kb.Styles.isMobile ? ChannelInputMobile : ChannelInputDesktop
+const ChannelInput = isMobile ? ChannelInputMobile : ChannelInputDesktop
 
 const ChannelPill = ({channelname, onRemove}: {channelname: string; onRemove?: () => void}) => (
   <Kb.Box2 direction="horizontal" gap="tiny" alignItems="center" style={styles.pill}>
-    <Kb.Text type={Kb.Styles.isMobile ? 'Body' : 'BodySemibold'}>#{channelname}</Kb.Text>
+    <Kb.Text type={isMobile ? 'Body' : 'BodySemibold'}>#{channelname}</Kb.Text>
     {onRemove && (
       <Kb.Icon type="iconfont-remove" onClick={onRemove} color={Kb.Styles.globalColors.black_20} />
     )}
diff --git a/shared/teams/common/selection-popup.tsx b/shared/teams/common/selection-popup.tsx
index 6727c6a4bc26..a6935352ca0e 100644
--- a/shared/teams/common/selection-popup.tsx
+++ b/shared/teams/common/selection-popup.tsx
@@ -81,16 +81,16 @@ const JointSelectionPopup = (props: JointSelectionPopupProps) => {
   }
   const popup = (
     <Kb.Box2
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
       direction={Kb.Styles.isPhone ? 'vertical' : 'horizontal'}
       alignItems="center"
       style={Kb.Styles.collapseStyles([
         styles.container,
-        selectedCount && !Kb.Styles.isMobile ? styles.containerShowing : null,
+        selectedCount && !isMobile ? styles.containerShowing : null,
       ])}
       gap={Kb.Styles.isPhone ? 'tiny' : undefined}
       className="selectionPopup"
-      onLayout={Kb.Styles.isMobile ? event => setHeight(event.nativeEvent.layout.height) : undefined}
+      onLayout={isMobile ? event => setHeight(event.nativeEvent.layout.height) : undefined}
     >
       {Kb.Styles.isPhone && (
         <Kb.Text style={styles.topLink} type="BodyBigLink" onClick={onCancel}>
@@ -112,7 +112,7 @@ const JointSelectionPopup = (props: JointSelectionPopupProps) => {
       {Kb.Styles.isPhone && <Kb.Box2 direction="vertical" style={{height: bottom}} />}
     </Kb.Box2>
   )
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <>
       {<Kb.Box2 direction="vertical" style={{height: height > 48 ? height - 48 - bottom : -bottom}} />}
       <Kb.Popup>{popup}</Kb.Popup>
@@ -323,7 +323,7 @@ const TeamChannelsActions = ({teamID}: TeamActionsProps) => {
 
   return (
     <ActionsWrapper>
-      <Kb.Button label="Delete" type="Danger" onClick={onDelete} fullWidth={Kb.Styles.isMobile} />
+      <Kb.Button label="Delete" type="Danger" onClick={onDelete} fullWidth={isMobile} />
     </ActionsWrapper>
   )
 }
diff --git a/shared/teams/common/use-team-link-popup.tsx b/shared/teams/common/use-team-link-popup.tsx
index 8a7e19a7d574..cf01b4f2a86a 100644
--- a/shared/teams/common/use-team-link-popup.tsx
+++ b/shared/teams/common/use-team-link-popup.tsx
@@ -16,7 +16,7 @@ export const useTeamLinkPopup = (teamname: string) => {
             <Kb.Text type="Body">On the web:</Kb.Text>
             <Kb.CopyText text={shareURLWeb} shareSheet={true} />
           </Kb.Box2>
-          {Kb.Styles.isMobile && <Kb.Button type="Dim" label="Close" fullWidth={true} onClick={hidePopup} />}
+          {isMobile && <Kb.Button type="Dim" label="Close" fullWidth={true} onClick={hidePopup} />}
         </Kb.Box2>
       )
       return (
diff --git a/shared/teams/confirm-modals/confirm-kick-out.tsx b/shared/teams/confirm-modals/confirm-kick-out.tsx
index fd94003e9965..004a10d8b103 100644
--- a/shared/teams/confirm-modals/confirm-kick-out.tsx
+++ b/shared/teams/confirm-modals/confirm-kick-out.tsx
@@ -165,11 +165,11 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     height: 24,
     overflow: 'hidden',
     position: 'absolute',
-    right: Kb.Styles.isMobile ? -24 : 0,
+    right: isMobile ? -24 : 0,
     width: 24,
   },
   iconContainerMany: {
-    right: Kb.Styles.isMobile ? 0 : 20,
+    right: isMobile ? 0 : 20,
   },
   prompt: Kb.Styles.padding(0, Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.tiny),
 }))
diff --git a/shared/teams/confirm-modals/really-leave-team/last-owner.tsx b/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
index 4d84e334b595..1133ad32ea6d 100644
--- a/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
+++ b/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
@@ -26,7 +26,7 @@ const ReallyLeaveTeam = (props: Props) => (
           style={Kb.Styles.globalStyles.flexBoxCenter}
         >
           <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.positionRelative}>
-            <Kb.Avatar teamname={props.name} size={Kb.Styles.isMobile ? 96 : 64} />
+            <Kb.Avatar teamname={props.name} size={isMobile ? 96 : 64} />
             <Kb.Icon type="iconfont-leave" style={styles.leaveIcon} />
           </Kb.Box2>
           <Kb.Text type="Header" center={true} style={styles.headerText}>
diff --git a/shared/teams/emojis/add-alias.tsx b/shared/teams/emojis/add-alias.tsx
index 6553f719886a..592850befdbc 100644
--- a/shared/teams/emojis/add-alias.tsx
+++ b/shared/teams/emojis/add-alias.tsx
@@ -159,7 +159,7 @@ type ChooseEmojiProps = {
   conversationIDKey: T.Chat.ConversationIDKey
   onChoose: (emojiStr: string, renderableEmoji: RenderableEmoji) => void
 }
-const ChooseEmoji = Kb.Styles.isMobile
+const ChooseEmoji = isMobile
   ? (props: ChooseEmojiProps) => {
       const pickKey = 'addAlias'
       const pickedEmoji = usePickerState(s => s.pickerMap.get(pickKey))
@@ -236,14 +236,14 @@ const SelectedEmoji = (props: SelectedEmojiProps) => {
       {props.chosen ? (
         <Kb.Emoji emoji={props.chosen.renderableEmoji} showTooltip={false} size={singleEmojiWidth} />
       ) : (
-        <Kb.Icon type="iconfont-emoji" fontSize={Kb.Styles.isMobile ? 20 : 16} />
+        <Kb.Icon type="iconfont-emoji" fontSize={isMobile ? 20 : 16} />
       )}
     </Kb.Box2>
   )
 }
 
-const emojiWidthWithPadding = Kb.Styles.isMobile ? 40 : 32
-const singleEmojiWidth = Kb.Styles.isMobile ? (24 as const) : (16 as const)
+const emojiWidthWithPadding = isMobile ? 40 : 32
+const singleEmojiWidth = isMobile ? (24 as const) : (16 as const)
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   container: Kb.Styles.platformStyles({
diff --git a/shared/teams/emojis/add-emoji.tsx b/shared/teams/emojis/add-emoji.tsx
index ea492215c1a7..67705d6c754a 100644
--- a/shared/teams/emojis/add-emoji.tsx
+++ b/shared/teams/emojis/add-emoji.tsx
@@ -26,7 +26,7 @@ type RoutableProps = {
 }
 
 // don't prefill on mobile since it's always a long random string.
-const filePathToDefaultAlias = Kb.Styles.isMobile
+const filePathToDefaultAlias = isMobile
   ? () => ''
   : (path: string) => {
       const name = T.FS.getLocalPathName(path)
@@ -170,7 +170,7 @@ export const AddEmojiModal = (props: Props) => {
   const hasEmojis = emojisToAdd.length > 0
   const navigation = useNavigation()
   React.useEffect(() => {
-    if (!Kb.Styles.isMobile) return
+    if (!isMobile) return
     if (hasEmojis) {
       navigation.setOptions({
         headerLeft: () => (
@@ -193,8 +193,8 @@ export const AddEmojiModal = (props: Props) => {
     <Modal
       bannerImage="icon-illustration-emoji-add-460-96"
       desktopHeight={537}
-      footerButtonLabel={Kb.Styles.isMobile ? 'Choose Images' : undefined}
-      footerButtonOnClick={Kb.Styles.isMobile ? pick : undefined}
+      footerButtonLabel={isMobile ? 'Choose Images' : undefined}
+      footerButtonOnClick={isMobile ? pick : undefined}
     >
       <AddEmojiPrompt addFiles={addFiles} />
     </Modal>
@@ -257,7 +257,7 @@ const AddEmojiPrompt = (props: AddEmojiPromptProps) => {
       style={styles.contentContainer}
       gap="small"
     >
-      {Kb.Styles.isMobile ? (
+      {isMobile ? (
         <Kb.Text type="Body" center={true}>
           Choose images from your library
         </Kb.Text>
@@ -274,7 +274,7 @@ const AddEmojiPrompt = (props: AddEmojiPromptProps) => {
           </Kb.Text>
         </Kb.Box2>
       )}
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.Box2
           direction="vertical"
           style={Kb.Styles.collapseStyles([styles.dropArea, dragOver && styles.dropAreaDragOver])}
@@ -407,8 +407,8 @@ const AddEmojiAliasAndConfirm = (props: AddEmojiAliasAndConfirmProps) => {
   )
 }
 
-const emojiToAddRowHeightNoError = Kb.Styles.isMobile ? 48 : 40
-const emojiToAddRowHeightWithError = Kb.Styles.isMobile ? 70 : 60
+const emojiToAddRowHeightNoError = isMobile ? 48 : 40
+const emojiToAddRowHeightWithError = isMobile ? 70 : 60
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
   addEmojiIconContainer: Kb.Styles.platformStyles({
diff --git a/shared/teams/emojis/common.tsx b/shared/teams/emojis/common.tsx
index 4dad99b2e1a0..3e3bd40f76fd 100644
--- a/shared/teams/emojis/common.tsx
+++ b/shared/teams/emojis/common.tsx
@@ -29,7 +29,7 @@ export function AliasInput(props: AliasInputProps & {ref?: React.Ref<AliasRef>})
           ref={inputRef}
           error={!!error}
           disabled={disabled}
-          textType={Kb.Styles.isMobile ? 'BodySemibold' : 'Body'}
+          textType={isMobile ? 'BodySemibold' : 'Body'}
           containerStyle={Kb.Styles.collapseStyles([styles.aliasInput, !small && styles.aliasInputLarge])}
           onChangeText={onChangeAlias}
           onEnterKeyDown={onEnterKeyDown}
@@ -64,11 +64,11 @@ export const Modal = (props: ModalProps) => {
     <>
       <Kb.Box2
         direction="vertical"
-        fullHeight={Kb.Styles.isMobile}
-        fullWidth={Kb.Styles.isMobile}
+        fullHeight={isMobile}
+        fullWidth={isMobile}
         style={Kb.Styles.collapseStyles([
           styles.container,
-          !Kb.Styles.isMobile && props.desktopHeight !== undefined && {height: props.desktopHeight},
+          !isMobile && props.desktopHeight !== undefined && {height: props.desktopHeight},
         ])}
       >
         <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.bannerContainer} relative={true}>
diff --git a/shared/teams/external-team.tsx b/shared/teams/external-team.tsx
index 17db52b000c3..2cbac8ddcc74 100644
--- a/shared/teams/external-team.tsx
+++ b/shared/teams/external-team.tsx
@@ -59,7 +59,7 @@ const ExternalTeam = (props: Props) => {
       {waiting ? (
         <Kb.Box2
           direction="horizontal"
-          gap={Kb.Styles.isMobile ? 'small' : 'tiny'}
+          gap={isMobile ? 'small' : 'tiny'}
           fullWidth={true}
           alignItems="center"
         >
@@ -147,8 +147,8 @@ const Header = ({info}: ExternalTeamProps) => {
   const {popupAnchor, showPopup, popup} = useTeamLinkPopup(teamname || '')
 
   const metaInfo = (
-    <Kb.Box2 direction="vertical" alignSelf="stretch" gap={Kb.Styles.isMobile ? 'small' : 'tiny'}>
-      <Kb.Box2 direction="vertical" alignSelf="stretch" gap={Kb.Styles.isMobile ? 'xtiny' : 'xxtiny'}>
+    <Kb.Box2 direction="vertical" alignSelf="stretch" gap={isMobile ? 'small' : 'tiny'}>
+      <Kb.Box2 direction="vertical" alignSelf="stretch" gap={isMobile ? 'xtiny' : 'xxtiny'}>
         {!!info.description && <Kb.Text type="Body">{info.description}</Kb.Text>}
         <Kb.Text type="BodySmall">
           {info.numMembers.toLocaleString()} {pluralize('member', info.numMembers)}
@@ -170,13 +170,13 @@ const Header = ({info}: ExternalTeamProps) => {
         <Kb.Box2 direction="vertical" gap="xxtiny" alignSelf="flex-start">
           <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
             <Kb.Text type="Header">{teamname}</Kb.Text>
-            {!Kb.Styles.isMobile && openMeta}
+            {!isMobile && openMeta}
           </Kb.Box2>
-          {Kb.Styles.isMobile && openMeta}
-          {!Kb.Styles.isMobile && metaInfo}
+          {isMobile && openMeta}
+          {!isMobile && metaInfo}
         </Kb.Box2>
       </Kb.Box2>
-      {Kb.Styles.isMobile && metaInfo}
+      {isMobile && metaInfo}
     </Kb.Box2>
   )
 }
diff --git a/shared/teams/get-options.tsx b/shared/teams/get-options.tsx
index 86c3634218c6..99189438c9d6 100644
--- a/shared/teams/get-options.tsx
+++ b/shared/teams/get-options.tsx
@@ -59,6 +59,6 @@ const ConnectedHeaderRightActions = () => {
 }
 
 export default {
-  headerRightActions: !Kb.Styles.isMobile ? () => <TeamsFilter /> : () => <ConnectedHeaderRightActions />,
+  headerRightActions: !isMobile ? () => <TeamsFilter /> : () => <ConnectedHeaderRightActions />,
   title: 'Teams',
 }
diff --git a/shared/teams/invite-by-contact/container.desktop.tsx b/shared/teams/invite-by-contact/container.desktop.tsx
deleted file mode 100644
index f9b15bcd3706..000000000000
--- a/shared/teams/invite-by-contact/container.desktop.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-const InviteContainer = () => null
-export default InviteContainer
diff --git a/shared/teams/invite-by-contact/container.native.tsx b/shared/teams/invite-by-contact/container.native.tsx
deleted file mode 100644
index 9ec2ba6e9f1f..000000000000
--- a/shared/teams/invite-by-contact/container.native.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import TeamInviteByContact from './team-invite-by-contacts.native'
-
-type OwnProps = {teamID: string}
-const ConnectedTeamInviteByContact = (props: OwnProps) => {
-  const teamID = props.teamID
-  return <TeamInviteByContact teamID={teamID} />
-}
-
-export default ConnectedTeamInviteByContact
diff --git a/shared/teams/invite-by-contact/container.tsx b/shared/teams/invite-by-contact/container.tsx
new file mode 100644
index 000000000000..961dfa8b9391
--- /dev/null
+++ b/shared/teams/invite-by-contact/container.tsx
@@ -0,0 +1,9 @@
+import TeamInviteByContact from './team-invite-by-contacts'
+
+type OwnProps = {teamID: string}
+
+const ConnectedTeamInviteByContact = (props: OwnProps) => {
+  return <TeamInviteByContact teamID={props.teamID} />
+}
+
+export default ConnectedTeamInviteByContact
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 80cb9399a76a..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.
@@ -45,7 +62,7 @@ type Props = {
 }
 
 const malformedEmailErrorMessage = (malformed: ReadonlyArray<string>) =>
-  C.isMobile
+  isMobile
     ? `Error parsing email: ${malformed[0]}`
     : `There was an error parsing ${malformed.length} address${malformed.length > 1 ? 'es' : ''}.`
 
@@ -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/teams/invite-by-email.tsx b/shared/teams/invite-by-email.tsx
index 948a02f5c431..d1acead97783 100644
--- a/shared/teams/invite-by-email.tsx
+++ b/shared/teams/invite-by-email.tsx
@@ -9,7 +9,7 @@ import {useLoadedTeam} from './team/use-loaded-team'
 type OwnProps = {teamID: string}
 
 const malformedEmailErrorMessage = (malformed: ReadonlyArray<string>) =>
-  C.isMobile
+  isMobile
     ? `Error parsing email: ${malformed[0]}`
     : `There was an error parsing ${malformed.length} address${malformed.length > 1 ? 'es' : ''}.`
 
@@ -53,7 +53,7 @@ const Container = (ownProps: OwnProps) => {
           setErrorMessage(malformedEmailErrorMessage(malformed))
           return
         }
-        if (C.isMobile) {
+        if (isMobile) {
           navigateUp()
         } else {
           C.Router2.clearModals()
diff --git a/shared/teams/join-team/join-from-invite.tsx b/shared/teams/join-team/join-from-invite.tsx
index b3e27707c497..2a9905a60e73 100644
--- a/shared/teams/join-team/join-from-invite.tsx
+++ b/shared/teams/join-team/join-from-invite.tsx
@@ -136,7 +136,7 @@ const JoinFromInviteInner = ({inviteDetails: initialInviteDetails, inviteID = ''
             <Kb.Box2
               direction="horizontal"
               style={styles.meta}
-              fullWidth={!Kb.Styles.isMobile}
+              fullWidth={!isMobile}
               centerChildren={true}
             >
               <Kb.Meta backgroundColor={Kb.Styles.globalColors.green} title="open" size="Small" />
@@ -176,7 +176,7 @@ const JoinFromInviteInner = ({inviteDetails: initialInviteDetails, inviteID = ''
           />
           <Kb.Text type="BodySmall"> invited you.</Kb.Text>
         </Kb.Box2>
-        {Kb.Styles.isMobile && (
+        {isMobile && (
           <Kb.Box2 fullWidth={true} direction="horizontal" style={styles.laterBox}>
             <Kb.Button label="Later" type="Dim" onClick={onClose} style={styles.button} />
           </Kb.Box2>
diff --git a/shared/teams/main/banner.tsx b/shared/teams/main/banner.tsx
index d3563fb61ab9..ff6c05a1dfe2 100644
--- a/shared/teams/main/banner.tsx
+++ b/shared/teams/main/banner.tsx
@@ -6,16 +6,16 @@ export type Props = {
 }
 
 const Banner = ({onReadMore, onHideChatBanner}: Props) => (
-  <Kb.Box2 direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'} alignItems="center" fullWidth={true} style={styles.containerBanner}>
+  <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontal'} alignItems="center" fullWidth={true} style={styles.containerBanner}>
     <Kb.ImageIcon
       style={styles.illustration}
-      type={Kb.Styles.isMobile ? 'icon-illustration-teams-216' : 'icon-illustration-teams-180'}
+      type={isMobile ? 'icon-illustration-teams-216' : 'icon-illustration-teams-180'}
     />
     <Kb.Box2 direction="vertical" style={styles.containerHeader}>
       <Kb.Text negative={true} type="Header" style={styles.header}>
         Create a team on Keybase
       </Kb.Text>
-      <Kb.Text center={Kb.Styles.isMobile} negative={true} type="BodySmallSemibold" style={styles.text}>
+      <Kb.Text center={isMobile} negative={true} type="BodySmallSemibold" style={styles.text}>
         Keybase team chats are encrypted - unlike Slack - and work for any size group, from casual friends to
         large communities.
       </Kb.Text>
diff --git a/shared/teams/main/footer.tsx b/shared/teams/main/footer.tsx
index af1089858fa9..5138bd1a5776 100644
--- a/shared/teams/main/footer.tsx
+++ b/shared/teams/main/footer.tsx
@@ -20,7 +20,7 @@ const TeamsFooter = (props: {empty: boolean}) => {
             </Kb.Box2>
           )}
           <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} />
-          {(Kb.Styles.isMobile || !props.empty) && (
+          {(isMobile || !props.empty) && (
             <Kb.Text type="BodySmall" center={true}>
               Keybase team chats are encrypted – unlike Slack – and work for any size group, from casual
               friends to large communities.
diff --git a/shared/teams/main/index.tsx b/shared/teams/main/index.tsx
index c4064b2b7837..00b611de1e01 100644
--- a/shared/teams/main/index.tsx
+++ b/shared/teams/main/index.tsx
@@ -43,7 +43,7 @@ const TeamBigButtons = (props: {onCreateTeam: () => void; onJoinTeam: () => void
         <Kb.ImageIcon type="icon-illustration-teams-96" />
       </Kb.Box2>
     </Kb.ClickableBox>
-    {props.empty && !Kb.Styles.isMobile && (
+    {props.empty && !isMobile && (
       <Kb.Text type="BodySmall" style={styles.emptyNote}>
         Keybase team chats are encrypted – unlike Slack – and work for any size group, from casual friends to
         large communities.
@@ -98,7 +98,7 @@ const SortHeader = ({onChangeSort, sortOrder}: {onChangeSort: Props['onChangeSor
   )
 }
 
-const teamRowHeight = Kb.Styles.isMobile ? 72 : 48
+const teamRowHeight = isMobile ? 72 : 48
 const teamRowItemHeight = {height: teamRowHeight, type: 'fixed' as const}
 
 type TeamItem = TeamRowItem
@@ -126,7 +126,7 @@ const Teams = function Teams(p: Props) {
   const renderItem = (_index: number, item: TeamItem) => {
     return (
       <PerfProfiler id="TeamRow">
-        <TeamRowNew showChat={!Kb.Styles.isMobile} {...item} />
+        <TeamRowNew showChat={!isMobile} {...item} />
       </PerfProfiler>
     )
   }
diff --git a/shared/teams/main/team-row.tsx b/shared/teams/main/team-row.tsx
index ac5347568c5b..a86a6c59915d 100644
--- a/shared/teams/main/team-row.tsx
+++ b/shared/teams/main/team-row.tsx
@@ -57,7 +57,7 @@ const TeamRow = function TeamRow(props: Props) {
     </Kb.Box2>
   ) : null
 
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return (
       <>
         <Kb.ClickableBox onClick={onViewTeam} style={styles.clickableBox}>
@@ -179,7 +179,7 @@ const TeamRow = function TeamRow(props: Props) {
   )
 }
 
-const smallHeight = Kb.Styles.isMobile ? 56 : 48
+const smallHeight = isMobile ? 56 : 48
 const smallIconWidth = 64
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
diff --git a/shared/teams/new-team/index.tsx b/shared/teams/new-team/index.tsx
index 27d68c928beb..bb096d7dd896 100644
--- a/shared/teams/new-team/index.tsx
+++ b/shared/teams/new-team/index.tsx
@@ -7,7 +7,7 @@ import upperFirst from 'lodash/upperFirst'
 import {useLoadedTeam} from '../team/use-loaded-team'
 import {createNewTeamAndNavigate} from '@/teams/team-page-actions'
 
-const openSubteamInfo = () => openUrl('https://book.keybase.io/docs/teams/design')
+const openSubteamInfo = () => { void openUrl('https://book.keybase.io/docs/teams/design') }
 
 type Props = {
   baseTeam?: string // if set we're creating a subteam of this teamname
@@ -63,7 +63,7 @@ export const CreateNewTeam = (props: Props) => {
             maxLength={16}
             disabled={waiting}
             onEnterKeyDown={disabled ? undefined : onSubmitCb}
-            autoFocus={!Kb.Styles.isMobile /* keyboard can cover the "join subteam" box on mobile */}
+            autoFocus={!isMobile /* keyboard can cover the "join subteam" box on mobile */}
           />
           {isSubteam && (
             <Kb.Text type="BodySmall" style={!name && Kb.Styles.globalStyles.opacity0}>
diff --git a/shared/teams/new-team/wizard/add-subteam-members.tsx b/shared/teams/new-team/wizard/add-subteam-members.tsx
index 87b80447e294..cf698c824daf 100644
--- a/shared/teams/new-team/wizard/add-subteam-members.tsx
+++ b/shared/teams/new-team/wizard/add-subteam-members.tsx
@@ -103,7 +103,7 @@ const AddSubteamMembers = ({wizard: wizardState}: Props) => {
     }
   }, [doneLabel, onContinue])
 
-  const desktopFooter = !Kb.Styles.isMobile ? (
+  const desktopFooter = !isMobile ? (
     <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
       <Kb.Button label={continueLabel} onClick={onContinue} fullWidth={true} />
     </Kb.Box2>
diff --git a/shared/teams/new-team/wizard/create-channels.tsx b/shared/teams/new-team/wizard/create-channels.tsx
index 2c736a17ddca..0e8e7484c77e 100644
--- a/shared/teams/new-team/wizard/create-channels.tsx
+++ b/shared/teams/new-team/wizard/create-channels.tsx
@@ -64,7 +64,7 @@ export const CreateChannelsModal = (props: Props) => {
         fullWidth={true}
         flex={1}
         style={styles.body}
-        gap={Kb.Styles.isMobile ? 'xsmall' : 'tiny'}
+        gap={isMobile ? 'xsmall' : 'tiny'}
       >
         <Kb.Text type="BodySmall">Channels can be joined by anyone in the team, unlike subteams.</Kb.Text>
         <ChannelInput isGeneral={true} />
diff --git a/shared/teams/new-team/wizard/create-subteams.tsx b/shared/teams/new-team/wizard/create-subteams.tsx
index 182e92a0f557..4c6a443e385c 100644
--- a/shared/teams/new-team/wizard/create-subteams.tsx
+++ b/shared/teams/new-team/wizard/create-subteams.tsx
@@ -60,7 +60,7 @@ const CreateSubteams = ({wizard: wizardState}: Props) => {
         direction="vertical"
         fullWidth={true}
         style={styles.body}
-        gap={Kb.Styles.isMobile ? 'xsmall' : 'tiny'}
+        gap={isMobile ? 'xsmall' : 'tiny'}
       >
         <Kb.Text type="BodySmall">
           Subteams are cryptographically distinct, and can welcome people who aren’t elsewhere in your team
diff --git a/shared/teams/new-team/wizard/make-big-team.tsx b/shared/teams/new-team/wizard/make-big-team.tsx
index af23cfe9fbd6..87f7e7f7f474 100644
--- a/shared/teams/new-team/wizard/make-big-team.tsx
+++ b/shared/teams/new-team/wizard/make-big-team.tsx
@@ -35,7 +35,7 @@ const MakeBigTeam = ({wizard: initialWizard}: Props) => {
         direction="vertical"
         fullWidth={true}
         style={styles.body}
-        gap={Kb.Styles.isMobile ? 'xsmall' : 'tiny'}
+        gap={isMobile ? 'xsmall' : 'tiny'}
       >
         <Kb.RichButton
           description="With multiple roles and channels. Big team chats appear in the lower section in the inbox."
diff --git a/shared/teams/new-team/wizard/new-team-info.tsx b/shared/teams/new-team/wizard/new-team-info.tsx
index f58a004a3611..835a8c655f82 100644
--- a/shared/teams/new-team/wizard/new-team-info.tsx
+++ b/shared/teams/new-team/wizard/new-team-info.tsx
@@ -13,7 +13,7 @@ import {useLoadedTeam} from '../../team/use-loaded-team'
 const getTeamTakenMessage = (status: T.RPCGen.StatusCode): string => {
   switch (status) {
     case T.RPCGen.StatusCode.scteambadnamereserveddb:
-      return Kb.Styles.isMobile
+      return isMobile
         ? 'This team name is reserved by the Keybase team. Contact reservations@keybase.io to claim it.'
         : 'This team name is reserved by the Keybase team, possibly for your organization. Contact reservations@keybase.io to claim it.'
 
@@ -82,7 +82,7 @@ const NewTeamInfo = ({wizard: teamWizardState}: Props) => {
     teamWizardState.name ? teamWizardState.open : teamWizardState.teamType === 'community'
   )
   const setOpenTeam = () => {
-    if (Kb.Styles.isMobile) {
+    if (isMobile) {
       Kb.LayoutAnimation.configureNext(Kb.LayoutAnimation.Presets.easeInEaseOut)
     }
     _setOpenTeam(!openTeam)
@@ -178,7 +178,7 @@ const NewTeamInfo = ({wizard: teamWizardState}: Props) => {
             <Kb.Box2 direction="vertical" alignItems="flex-start" style={Kb.Styles.globalStyles.flexOne}>
               <Kb.Text type="Body">Make it an open team</Kb.Text>
               <Kb.Text type="BodySmall">Anyone can join without admin approval.</Kb.Text>
-              {(!Kb.Styles.isMobile || openTeam) && (
+              {(!isMobile || openTeam) && (
                 <Kb.Box2
                   direction="horizontal"
                   gap="xtiny"
diff --git a/shared/teams/new-team/wizard/team-purpose.tsx b/shared/teams/new-team/wizard/team-purpose.tsx
index e82d39c0db9f..72182c4d01ce 100644
--- a/shared/teams/new-team/wizard/team-purpose.tsx
+++ b/shared/teams/new-team/wizard/team-purpose.tsx
@@ -30,7 +30,7 @@ const TeamPurpose = ({wizard: wizardParam}: Props) => {
         direction="vertical"
         fullWidth={true}
         style={styles.body}
-        gap={Kb.Styles.isMobile ? 'xsmall' : 'tiny'}
+        gap={isMobile ? 'xsmall' : 'tiny'}
       >
         <Kb.Text type="BodySemibold">What do you need a team for?</Kb.Text>
         <Kb.RichButton
diff --git a/shared/teams/rename-team.tsx b/shared/teams/rename-team.tsx
index 3fe4c94e89de..29a3967e927f 100644
--- a/shared/teams/rename-team.tsx
+++ b/shared/teams/rename-team.tsx
@@ -67,7 +67,7 @@ const Container = (ownProps: OwnProps) => {
   return (
     <Kb.Box2 alignItems="center" direction="vertical" style={styles.container} fullWidth={true}>
       <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} gap="medium" gapStart={true}>
-        <Kb.Avatar teamname={teamname} size={Kb.Styles.isMobile ? 64 : 48} />
+        <Kb.Avatar teamname={teamname} size={isMobile ? 64 : 48} />
         <Kb.Box2 alignItems="center" direction="vertical" gap="tiny" style={styles.teamnameHeader}>
           <Kb.Text type="BodySmall" center={true}>
             Subteam of {prefix}
@@ -117,7 +117,7 @@ const Container = (ownProps: OwnProps) => {
         )}
       </Kb.Box2>
       <Kb.ButtonBar direction="row" style={styles.buttonBar}>
-        {!Kb.Styles.isMobile && (
+        {!isMobile && (
           <Kb.Button type="Dim" label="Cancel" onClick={onCancel} style={styles.button} />
         )}
         <Kb.Button
diff --git a/shared/teams/role-picker.tsx b/shared/teams/role-picker.tsx
index 8040c27717c4..a9814e1cd8ee 100644
--- a/shared/teams/role-picker.tsx
+++ b/shared/teams/role-picker.tsx
@@ -114,7 +114,7 @@ const RoleRowWrapper = (props: RoleRowWrapperProps) => {
   const roleInfo = rolesMetaInfo(role)
 
   const style = {
-    ...(Kb.Styles.isMobile ? {} : {height: selected ? 160 : 42}),
+    ...(isMobile ? {} : {height: selected ? 160 : 42}),
   }
   return (
     <Kb.ClickableBox onClick={onSelect} style={style}>
@@ -279,9 +279,9 @@ const RolePicker = <IncludeSetIndividually extends boolean>(props: Props<Include
       direction="vertical"
       alignItems="stretch"
       style={styles.container}
-      fullHeight={Kb.Styles.isMobile}
+      fullHeight={isMobile}
     >
-      {!Kb.Styles.isMobile && <Header />}
+      {!isMobile && <Header />}
       <Kb.ScrollView style={styles.innerScroll}>
         {roles.map(role => {
           const disabled = props.disabledRoles ? props.disabledRoles[role] : undefined
@@ -420,7 +420,7 @@ export function FloatingRolePicker<IncludeSetIndividually extends boolean = fals
   const popupAnchor = React.useRef<Kb.MeasureRef | null>(null)
   const {position, children, open, onCancel, ...rest} = props
   const picker = (
-    <RolePicker<IncludeSetIndividually> {...rest} onCancel={Kb.Styles.isMobile ? undefined : onCancel} />
+    <RolePicker<IncludeSetIndividually> {...rest} onCancel={isMobile ? undefined : onCancel} />
   )
   return (
     <>
@@ -436,10 +436,10 @@ export function FloatingRolePicker<IncludeSetIndividually extends boolean = fals
           <Kb.SafeAreaView>
             <Kb.Box2
               direction="vertical"
-              fullHeight={Kb.Styles.isMobile}
+              fullHeight={isMobile}
               style={styles.opaqueContainer}
             >
-              {Kb.Styles.isMobile && (
+              {isMobile && (
                 <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.popupHeader}>
                   <Kb.Text type="BodyBigLink" onClick={onCancel} style={styles.popupHeaderSide}>
                     Cancel
diff --git a/shared/teams/routes.tsx b/shared/teams/routes.tsx
index e02792c30dc4..c1d487db27fc 100644
--- a/shared/teams/routes.tsx
+++ b/shared/teams/routes.tsx
@@ -66,7 +66,7 @@ const SubteamMembersHeaderRight = () => {
   const {onAction, title} = useModalHeaderState(
     C.useShallow(s => ({onAction: s.onAction, title: s.title}))
   )
-  if (!Kb.Styles.isMobile) return null
+  if (!isMobile) return null
   return (
     <Kb.Box2 direction="horizontal" style={{width: 48}} justifyContent="flex-end">
       <Kb.Text type="BodyBigLink" onClick={onAction}>
@@ -193,7 +193,7 @@ const AddFromWhereSkip = ({wizard}: {wizard: AddMembersWizard}) => {
     }
     C.ignorePromise(f())
   }
-  if (Kb.Styles.isMobile) {
+  if (isMobile) {
     return waiting ? (
       <Kb.ProgressIndicator />
     ) : (
@@ -217,7 +217,7 @@ const AddFromWhereHeaderRight = ({wizard}: {wizard: AddMembersWizard}) => {
 
 const AddFromWhereHeaderTitle = ({wizard}: {wizard: AddMembersWizard}) => (
   <ModalTitle
-    title={Kb.Styles.isMobile ? 'Add/Invite people' : 'Add or invite people'}
+    title={isMobile ? 'Add/Invite people' : 'Add or invite people'}
     teamID={wizard.teamID}
     newTeamWizard={wizard.newTeamWizard}
   />
@@ -284,10 +284,10 @@ export const newModalRoutes = defineRouteMap({
   openTeamWarning: C.makeScreen(React.lazy(async () => import('./team/settings-tab/open-team-warning'))),
   retentionWarning: C.makeScreen(React.lazy(async () => import('./team/settings-tab/retention/warning'))),
   teamAddEmoji: C.makeScreen(React.lazy(async () => import('./emojis/add-emoji')), {
-    getOptions: {headerLeft: Kb.Styles.isMobile ? () => <HeaderLeftButton mode="cancel" /> : undefined, title: 'Add emoji'},
+    getOptions: {headerLeft: isMobile ? () => <HeaderLeftButton mode="cancel" /> : undefined, title: 'Add emoji'},
   }),
   teamAddEmojiAlias: makeChatScreen(React.lazy(async () => import('./emojis/add-alias')), {
-    getOptions: {headerLeft: Kb.Styles.isMobile ? () => <HeaderLeftButton mode="cancel" /> : undefined, title: 'Add an alias'},
+    getOptions: {headerLeft: isMobile ? () => <HeaderLeftButton mode="cancel" /> : undefined, title: 'Add an alias'},
   }),
   teamAddToChannels: C.makeScreen(React.lazy(async () => import('./team/member/add-to-channels')), {
     getOptions: ({route}) => ({
diff --git a/shared/teams/team-page-actions.tsx b/shared/teams/team-page-actions.tsx
index 1406eed4d80f..cc29774feb85 100644
--- a/shared/teams/team-page-actions.tsx
+++ b/shared/teams/team-page-actions.tsx
@@ -1,6 +1,5 @@
 import * as S from '@/constants/strings'
 import * as T from '@/constants/types'
-import {isMobile} from '@/constants/platform'
 import {clearModals, navigateAppend, navigateToInbox, previewConversation} from '@/constants/router'
 import logger from '@/logger'
 import {useConfigState} from '@/stores/config'
diff --git a/shared/teams/team/index.tsx b/shared/teams/team/index.tsx
index 4b0ad5fb8061..f2eda06c67de 100644
--- a/shared/teams/team/index.tsx
+++ b/shared/teams/team/index.tsx
@@ -242,7 +242,7 @@ const TeamBody = (props: Props) => {
       >
         <Kb.SectionList
           renderSectionHeader={renderSectionHeader}
-          stickySectionHeadersEnabled={Kb.Styles.isMobile}
+          stickySectionHeadersEnabled={isMobile}
           sections={sections}
           contentContainerStyle={styles.listContentContainer}
           style={styles.list}
diff --git a/shared/teams/team/member/add-to-channels.tsx b/shared/teams/team/member/add-to-channels.tsx
index 1920e1473717..1edf830d910f 100644
--- a/shared/teams/team/member/add-to-channels.tsx
+++ b/shared/teams/team/member/add-to-channels.tsx
@@ -126,10 +126,10 @@ const AddToChannelsBody = function AddToChannelsBody(props: Props) {
 
   const numSelected = selected.size
 
-  const rowHeight = Kb.Styles.isMobile ? (mode === 'self' ? 56 : 56) : mode === 'self' ? 48 : 48
+  const rowHeight = isMobile ? (mode === 'self' ? 56 : 56) : mode === 'self' ? 48 : 48
 
   const itemHeight = (() => {
-    const headerHeight = filtering ? 0 : Kb.Styles.isMobile ? 48 : 40
+    const headerHeight = filtering ? 0 : isMobile ? 48 : 40
     const getItemLayout = (index: number, item?: T.Unpacked<typeof items>) => {
       return item?.type === 'header'
         ? {index, length: headerHeight, offset: 0}
@@ -183,7 +183,7 @@ const AddToChannelsBody = function AddToChannelsBody(props: Props) {
   const title =
     mode === 'self' ? 'Browse all channels' : `Add${usernames.length === 1 ? ` ${usernames[0]}` : ''} to...`
   const desktopFooter =
-    !Kb.Styles.isMobile && mode !== 'self' ? (
+    !isMobile && mode !== 'self' ? (
       <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}>
         <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
           <Kb.Button
@@ -420,7 +420,7 @@ const SelfChannelActions = function SelfChannelActions(p: {
       gap="xtiny"
       fullHeight={true}
       centerChildren={true}
-      style={Kb.Styles.collapseStyles([selfMode && !Kb.Styles.isMobile && styles.channelRowSelfMode])}
+      style={Kb.Styles.collapseStyles([selfMode && !isMobile && styles.channelRowSelfMode])}
     >
       {popup}
       <Kb.Box2
@@ -496,7 +496,7 @@ const ChannelRow = function ChannelRow(p: ChannelRowProps) {
     _onSelect(conversationIDKey)
   }
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     <Kb.ClickableBox onClick={selfMode ? onPreviewChannel : onSelect} style={{height: rowHeight}}>
       <Kb.Box2
         direction="horizontal"
diff --git a/shared/teams/team/member/index.new.tsx b/shared/teams/team/member/index.new.tsx
index 47e72adbc055..89d2d9373de1 100644
--- a/shared/teams/team/member/index.new.tsx
+++ b/shared/teams/team/member/index.new.tsx
@@ -716,7 +716,7 @@ const NodeInRow = (props: NodeInRowProps) => {
                     direction="horizontal"
                     gap="tiny"
                     alignSelf="flex-start"
-                    gapEnd={Kb.Styles.isMobile}
+                    gapEnd={isMobile}
                     style={styles.paddingBottomMobile}
                   >
                     {!isSmallTeam && (
diff --git a/shared/teams/team/rows/bot-row/bot.tsx b/shared/teams/team/rows/bot-row/bot.tsx
index 0a7cdf56a54a..faf36b7caa69 100644
--- a/shared/teams/team/rows/bot-row/bot.tsx
+++ b/shared/teams/team/rows/bot-row/bot.tsx
@@ -75,7 +75,7 @@ export const TeamBotRow = (props: Props) => {
         <Kb.Box2 direction="horizontal" alignItems="center" flex={1}>
           <Kb.Avatar
             username={props.username}
-            size={Kb.Styles.isMobile ? 48 : 32}
+            size={isMobile ? 48 : 32}
             onClick={props.onOpenProfile}
           />
           <Kb.Box2 direction="vertical" style={styles.nameContainer}>
@@ -90,16 +90,16 @@ export const TeamBotRow = (props: Props) => {
             <Kb.Icon
               onClick={_onShowMenu}
               style={
-                Kb.Styles.isMobile
+                isMobile
                   ? Kb.Styles.collapseStyles([styles.menuButtonMobile, styles.menuButtonMobileSmallTop])
                   : styles.menuButtonDesktop
               }
-              fontSize={Kb.Styles.isMobile ? 20 : 16}
+              fontSize={isMobile ? 20 : 16}
               type="iconfont-ellipsis"
             />
           )}
           <BotMenu
-            attachTo={Kb.Styles.isMobile ? undefined : popupAnchor}
+            attachTo={isMobile ? undefined : popupAnchor}
             canManageBots={props.canManageBots}
             visible={showMenu}
             onEdit={props.onEdit}
@@ -126,7 +126,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   innerContainerTop: {
     ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small),
     flexShrink: 0,
-    height: Kb.Styles.isMobile ? 56 : 48,
+    height: isMobile ? 56 : 48,
   },
   menuButtonDesktop: {
     marginLeft: Kb.Styles.globalMargins.small,
diff --git a/shared/teams/team/rows/channel-row/channel.tsx b/shared/teams/team/rows/channel-row/channel.tsx
index 8073c23428ea..e6b63cbcb6c3 100644
--- a/shared/teams/team/rows/channel-row/channel.tsx
+++ b/shared/teams/team/rows/channel-row/channel.tsx
@@ -87,9 +87,9 @@ const ChannelRow = (props: ChannelRowProps) => {
       <Kb.Text type="BodySmall" lineClamp={1}>
         {channel.description}
       </Kb.Text>
-      <Kb.Box2 direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'} alignSelf="flex-start" gap="xtiny">
+      <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontal'} alignSelf="flex-start" gap="xtiny">
         <Kb.Text type="BodySmall">{membersText}</Kb.Text>
-        {!Kb.Styles.isMobile && activityLevel !== 'none' && <Kb.Text type="BodySmall">·</Kb.Text>}
+        {!isMobile && activityLevel !== 'none' && <Kb.Text type="BodySmall">·</Kb.Text>}
         <Activity level={activityLevel} />
       </Kb.Box2>
     </Kb.Box2>
@@ -152,7 +152,7 @@ const ChannelRow = (props: ChannelRowProps) => {
       {...massActionsProps}
       action={actions}
       onlyShowActionOnHover="fade"
-      height={Kb.Styles.isMobile ? 90 : 64}
+      height={isMobile ? 90 : 64}
       type="Large"
       body={body}
       firstItem={isGeneral}
diff --git a/shared/teams/team/rows/channel-row/info.tsx b/shared/teams/team/rows/channel-row/info.tsx
index 6e7e86e36efd..53c687230efb 100644
--- a/shared/teams/team/rows/channel-row/info.tsx
+++ b/shared/teams/team/rows/channel-row/info.tsx
@@ -7,9 +7,9 @@ const ChannelRow = () => (
     <Kb.InfoNote>
       <Kb.Box2 direction="vertical" fullWidth={true}>
         <Kb.Text type="BodySmall" center={true} style={styles.text}>
-          {sentence1} {Kb.Styles.isMobile && sentence2}
+          {sentence1} {isMobile && sentence2}
         </Kb.Text>
-        {!Kb.Styles.isMobile && (
+        {!isMobile && (
           <Kb.Text type="BodySmall" center={true} style={styles.text}>
             {sentence2}
           </Kb.Text>
diff --git a/shared/teams/team/rows/emoji-row/add.tsx b/shared/teams/team/rows/emoji-row/add.tsx
index 927ac32f0af7..df215937040b 100644
--- a/shared/teams/team/rows/emoji-row/add.tsx
+++ b/shared/teams/team/rows/emoji-row/add.tsx
@@ -42,7 +42,7 @@ const AddEmoji = ({teamID, convID, filter, setFilter}: OwnProps) => {
           style={styles.headerButton}
         />
       </Kb.Box2>
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.SearchFilter
           size="small"
           placeholderText="Filter"
diff --git a/shared/teams/team/rows/emoji-row/item.tsx b/shared/teams/team/rows/emoji-row/item.tsx
index 3bf4f9d3d6d7..2a6a6ebd77ea 100644
--- a/shared/teams/team/rows/emoji-row/item.tsx
+++ b/shared/teams/team/rows/emoji-row/item.tsx
@@ -82,15 +82,15 @@ const ItemRow = ({conversationIDKey, emoji, firstItem, teamID}: OwnProps) => {
             <Kb.Emoji
               emojiData={RPCToEmojiData(emoji, false)}
               showTooltip={false}
-              size={Kb.Styles.isMobile ? 32 : 26}
+              size={isMobile ? 32 : 26}
             />
             <Kb.Text type="Body" style={styles.alias}>{`:${emoji.alias}:`}</Kb.Text>
-            {!Kb.Styles.isMobile && emoji.creationInfo && (
+            {!isMobile && emoji.creationInfo && (
               <Kb.Text type="Body" style={styles.date}>
                 {dateFns.format(emoji.creationInfo.time, 'EEE d MMM yyyy')}
               </Kb.Text>
             )}
-            {!Kb.Styles.isMobile && emoji.creationInfo && (
+            {!isMobile && emoji.creationInfo && (
               <Kb.NameWithIcon
                 colorFollowing={true}
                 colorBroken={true}
@@ -119,7 +119,7 @@ const ItemRow = ({conversationIDKey, emoji, firstItem, teamID}: OwnProps) => {
         }
         firstItem={firstItem}
         fullDivider={true}
-        height={Kb.Styles.isMobile ? 48 : 42}
+        height={isMobile ? 48 : 42}
       />
     </Kb.Box2>
   )
diff --git a/shared/teams/team/rows/empty-row.tsx b/shared/teams/team/rows/empty-row.tsx
index 3c2d71501c66..d9b344c83178 100644
--- a/shared/teams/team/rows/empty-row.tsx
+++ b/shared/teams/team/rows/empty-row.tsx
@@ -158,7 +158,7 @@ const EmptyRow = (props: Props) => {
           .istanbul, ...
         </Kb.Text>
       )}
-      <Kb.Box2 direction={Kb.Styles.isMobile ? 'vertical' : 'horizontal'} gap="tiny">
+      <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontal'} gap="tiny">
         {props.type === 'members' && notIn && (
           <Kb.Button small={true} mode="Primary" label="Add yourself" onClick={onAddSelf} waiting={waiting} />
         )}
diff --git a/shared/teams/team/rows/index.tsx b/shared/teams/team/rows/index.tsx
index c32a0b5fd896..6c749fc07d76 100644
--- a/shared/teams/team/rows/index.tsx
+++ b/shared/teams/team/rows/index.tsx
@@ -3,7 +3,7 @@ import * as Meta from '@/constants/chat/meta'
 import {isBigTeam} from '@/constants/chat/helpers'
 import {useInboxLayoutState} from '@/chat/inbox/layout-state'
 import * as T from '@/constants/types'
-import * as Kb from '@/common-adapters'
+import type * as Kb from '@/common-adapters'
 import * as React from 'react'
 import EmptyRow from './empty-row'
 import LoadingRow from './loading'
@@ -168,7 +168,7 @@ export const useInvitesSections = (
         item.type === 'invite-requests' ? (
           <RequestRow {...item} teamID={teamID} firstItem={index === 0} />
         ) : null,
-      title: Kb.Styles.isMobile ? `Requests (${details.requests.size})` : undefined,
+      title: isMobile ? `Requests (${details.requests.size})` : undefined,
     } satisfies Section
     sections.push(requestsSection)
   }
@@ -383,7 +383,7 @@ export const useEmojiSections = (teamID: T.Teams.TeamID, shouldActuallyLoad: boo
   } as const)
 
   if (customEmoji.length) {
-    if (!Kb.Styles.isMobile) {
+    if (!isMobile) {
       sections.push({
         data: [{type: 'emoji-header'}],
         renderItem: () => <EmojiHeader />,
diff --git a/shared/teams/team/rows/invite-row/request.tsx b/shared/teams/team/rows/invite-row/request.tsx
index 533af6818369..2e1d1cd6a0cf 100644
--- a/shared/teams/team/rows/invite-row/request.tsx
+++ b/shared/teams/team/rows/invite-row/request.tsx
@@ -97,7 +97,7 @@ export const TeamRequestRow = (props: Props) => {
                 style={styleCharm}
                 backgroundColor={reset ? Kb.Styles.globalColors.red : Kb.Styles.globalColors.orange}
               />
-              {Kb.Styles.isMobile ? (
+              {isMobile ? (
                 C.isLargeScreen && (
                   <Kb.Text type="BodySmall" ellipsizeMode="tail" lineClamp={1} style={styles.newFullName}>
                     {fullName !== '' && `${fullName}`}
diff --git a/shared/teams/team/rows/member-row.tsx b/shared/teams/team/rows/member-row.tsx
index 2741e50ddd07..8c9b794bfd59 100644
--- a/shared/teams/team/rows/member-row.tsx
+++ b/shared/teams/team/rows/member-row.tsx
@@ -246,7 +246,7 @@ export const TeamMemberRow = (props: Props) => {
       {...massActionsProps}
       action={anySelected ? null : actions}
       onlyShowActionOnHover="fade"
-      height={Kb.Styles.isMobile ? 56 : 48}
+      height={isMobile ? 56 : 48}
       type="Large"
       body={body}
       firstItem={props.firstItem}
diff --git a/shared/teams/team/rows/subteam-row/add.tsx b/shared/teams/team/rows/subteam-row/add.tsx
index 4b9831a90e55..2f86dfdf07d2 100644
--- a/shared/teams/team/rows/subteam-row/add.tsx
+++ b/shared/teams/team/rows/subteam-row/add.tsx
@@ -28,7 +28,7 @@ const AddSubteam = ({setSubteamFilter, subteamFilter, teamID}: Props) => {
   return (
     <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.containerNew} justifyContent="space-between">
       <Kb.Button mode="Secondary" label="Create subteam" onClick={onCreateSubteam} small={true} />
-      {!Kb.Styles.isMobile && (
+      {!isMobile && (
         <Kb.SearchFilter
           size="small"
           placeholderText="Filter"
diff --git a/shared/teams/team/settings-tab/index.tsx b/shared/teams/team/settings-tab/index.tsx
index 03fa3d90d140..a6f9727328a9 100644
--- a/shared/teams/team/settings-tab/index.tsx
+++ b/shared/teams/team/settings-tab/index.tsx
@@ -131,8 +131,8 @@ const OpenTeam = (props: {
           <Kb.Box2 direction="vertical" fullWidth={true} style={styles.openTeam}>
             <Kb.Text type="Body">Make this an open team</Kb.Text>
             <Kb.Box2
-              direction={C.isMobile ? 'vertical' : 'horizontal'}
-              alignItems={C.isMobile ? 'flex-start' : 'center'}
+              direction={isMobile ? 'vertical' : 'horizontal'}
+              alignItems={isMobile ? 'flex-start' : 'center'}
               alignSelf="flex-start"
             >
               <Kb.Text style={styles.joinAs} type="BodySmall">
diff --git a/shared/teams/team/settings-tab/open-team-warning.tsx b/shared/teams/team/settings-tab/open-team-warning.tsx
index 5a46d5ed70eb..f43e9a878afb 100644
--- a/shared/teams/team/settings-tab/open-team-warning.tsx
+++ b/shared/teams/team/settings-tab/open-team-warning.tsx
@@ -54,7 +54,7 @@ const OpenTeamWarning = (props: Props) => {
         <Kb.Button
           type="Danger"
           onClick={onConfirm}
-          label={Kb.Styles.isMobile ? 'Confirm' : `Yes, set to ${isOpenTeam ? 'Open' : 'Private'}`}
+          label={isMobile ? 'Confirm' : `Yes, set to ${isOpenTeam ? 'Open' : 'Private'}`}
           disabled={!enabled}
         />
       </Kb.ButtonBar>
diff --git a/shared/teams/team/settings-tab/retention/index.tsx b/shared/teams/team/settings-tab/retention/index.tsx
index cd68df25242a..4b2b08877fcb 100644
--- a/shared/teams/team/settings-tab/retention/index.tsx
+++ b/shared/teams/team/settings-tab/retention/index.tsx
@@ -229,7 +229,7 @@ const styles = Kb.Styles.styleSheetCreate(
         marginBottom: Kb.Styles.globalMargins.tiny,
       },
       label: {
-        minHeight: Kb.Styles.isMobile ? 40 : 32,
+        minHeight: isMobile ? 40 : 32,
         paddingLeft: Kb.Styles.globalMargins.xsmall,
       },
       progressIndicator: {
diff --git a/shared/teams/team/settings-tab/retention/warning.tsx b/shared/teams/team/settings-tab/retention/warning.tsx
index b4aef053c81e..f06442bdbe95 100644
--- a/shared/teams/team/settings-tab/retention/warning.tsx
+++ b/shared/teams/team/settings-tab/retention/warning.tsx
@@ -62,7 +62,7 @@ const RetentionWarning = (props: Props) => {
         <Kb.Button
           type="Danger"
           onClick={props.onConfirm}
-          label={Kb.Styles.isMobile ? 'Confirm' : `Yes, set to ${props.timePeriod}`}
+          label={isMobile ? 'Confirm' : `Yes, set to ${props.timePeriod}`}
           disabled={!enabled}
         />
       </Kb.ButtonBar>
diff --git a/shared/teams/team/tabs.tsx b/shared/teams/team/tabs.tsx
index e74e4eb10278..d28e443a9b16 100644
--- a/shared/teams/team/tabs.tsx
+++ b/shared/teams/team/tabs.tsx
@@ -41,7 +41,7 @@ const TeamTabs = (props: TeamTabsProps) => {
   return (
     <Kb.Box2 direction="vertical" fullWidth={true}>
       <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
-        {Kb.Styles.isMobile ? (
+        {isMobile ? (
           <Kb.ScrollView
             horizontal={true}
             contentContainerStyle={{minWidth: '100%'}}
diff --git a/shared/test/mocks/native-module.js b/shared/test/mocks/native-module.js
new file mode 100644
index 000000000000..e6abe6fa90b9
--- /dev/null
+++ b/shared/test/mocks/native-module.js
@@ -0,0 +1,7 @@
+/* global module */
+// Stub for native-only packages in desktop/test environments.
+// These packages are only used inside isMobile branches that are never executed in tests.
+module.exports = {
+  requireNativeModule: () => ({}),
+  requireOptionalNativeModule: () => null,
+}
diff --git a/shared/test/mocks/react-native.js b/shared/test/mocks/react-native.js
index d79c5df83846..d5772bd2a6e1 100644
--- a/shared/test/mocks/react-native.js
+++ b/shared/test/mocks/react-native.js
@@ -16,4 +16,23 @@ exports.StyleSheet = {
 }
 
 exports.NativeModules = {}
+exports.TurboModuleRegistry = {get: () => null, getEnforcing: () => ({})}
 exports.findNodeHandle = () => null
+
+// Minimal Animated stub — needed by @react-navigation/elements which calls
+// Animated.createAnimatedComponent at module load time.
+exports.Animated = {
+  Value: function Value() {},
+  createAnimatedComponent: Component => Component,
+  event: () => () => {},
+  spring: () => ({start: () => {}}),
+  timing: () => ({start: () => {}}),
+}
+
+// Minimal component stubs needed by @react-navigation/elements at load time.
+/* eslint-disable react/display-name */
+exports.Pressable = () => null
+exports.Text = () => null
+exports.TouchableOpacity = () => null
+exports.View = () => null
+/* eslint-enable react/display-name */
diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx
index 9cc4d7f372e2..af8ed8898903 100644
--- a/shared/tracker/assertion.tsx
+++ b/shared/tracker/assertion.tsx
@@ -64,10 +64,10 @@ const Container = (ownProps: OwnProps) => {
   const onCreateProof = notAUser ? undefined : isSuggestion ? _onCreateProof : undefined
 
   const openProof = () => {
-    openUrl(proofURL)
+    void openUrl(proofURL)
   }
   const openSite = () => {
-    openUrl(siteURL)
+    void openUrl(siteURL)
   }
 
   const onShowProof = notAUser || !proofURL ? undefined : openProof
@@ -375,7 +375,7 @@ const StellarValue = (p: {value: string; color: T.Tracker.AssertionColor}) => {
   const label = (
     <Kb.Text
       type="BodyPrimaryLink"
-      onClick={Kb.Styles.isMobile ? undefined : showPopup}
+      onClick={isMobile ? undefined : showPopup}
       tooltip={popup ? undefined : 'Stellar Federation Address'}
       style={Kb.Styles.collapseStyles([styles.username, {color: assertionColorToTextColor(color)}])}
     >
@@ -383,7 +383,7 @@ const StellarValue = (p: {value: string; color: T.Tracker.AssertionColor}) => {
     </Kb.Text>
   )
 
-  return Kb.Styles.isMobile ? (
+  return isMobile ? (
     label
   ) : (
     <Kb.Box2 direction="vertical" ref={popupAnchor} style={styles.tooltip}>
@@ -478,7 +478,7 @@ const AssertionSiteIcon = (p: SIProps) => {
   if (full) {
     return child
   }
-  if (!Kb.Styles.isMobile && isSuggestion) {
+  if (!isMobile && isSuggestion) {
     child = <HoverOpacity>{child}</HoverOpacity>
   }
   return (
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/debug-warning.tsx b/shared/util/debug-warning.tsx
index 9a4033545f61..f70efb5f49e2 100644
--- a/shared/util/debug-warning.tsx
+++ b/shared/util/debug-warning.tsx
@@ -1,4 +1,3 @@
-import {isMobile} from '@/constants/platform'
 export const debugWarning = (s: string, ...w: Array<unknown>) => {
   if (isMobile) {
     for (let i = 0; i < 10; ++i) {
diff --git a/shared/util/electron.native.tsx b/shared/util/electron.native.tsx
deleted file mode 100644
index b3f722939cac..000000000000
--- a/shared/util/electron.native.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-const None = {
-  functions: {} as {
-    darwinCopyToChatTempUploadFile?: (dst: string, originalFilePath: string) => Promise<void>
-    getPathForFile?: (file: File) => string
-    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.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/feature-flags.native.tsx b/shared/util/feature-flags.native.tsx
deleted file mode 100644
index 9f2f7e31f5d3..000000000000
--- a/shared/util/feature-flags.native.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {FeatureFlags} from './feature-flags.shared'
-import {featureFlagsOverride} from '@/local-debug.native'
-
-const features = featureFlagsOverride.split(',')
-
-const featureOn = (key: keyof FeatureFlags) => features.includes(key)
-
-const ff: FeatureFlags = {
-  admin: __DEV__,
-}
-
-// load overrides
-Object.keys(ff).forEach(_k => {
-  const k = _k as keyof FeatureFlags
-  ff[k] = featureOn(k) || ff[k] || false
-})
-
-if (__DEV__) {
-  console.log('Features', ff)
-}
-
-export default ff
diff --git a/shared/util/feature-flags.desktop.tsx b/shared/util/feature-flags.tsx
similarity index 59%
rename from shared/util/feature-flags.desktop.tsx
rename to shared/util/feature-flags.tsx
index 8ce32aef4a14..8f44a8b6e28f 100644
--- a/shared/util/feature-flags.desktop.tsx
+++ b/shared/util/feature-flags.tsx
@@ -1,12 +1,12 @@
-import {featureFlagsOverride} from '@/local-debug.desktop'
 import type {FeatureFlags} from './feature-flags.shared'
+import {featureFlagsOverride} from '@/local-debug'
 
-const features = featureFlagsOverride?.split(',') || []
+const features = (featureFlagsOverride as string | undefined)?.split(',') ?? []
 
 const featureOn = (key: keyof FeatureFlags) => features.includes(key)
 
 const ff: FeatureFlags = {
-  admin: false,
+  admin: isMobile ? __DEV__ : false,
 }
 
 const inAdmin: {[K in keyof FeatureFlags]?: boolean} = {}
@@ -14,7 +14,7 @@ const inAdmin: {[K in keyof FeatureFlags]?: boolean} = {}
 // load overrides
 Object.keys(ff).forEach(_k => {
   const k = _k as keyof FeatureFlags
-  ff[k] = featureOn(k) || ff[k] || (featureOn('admin') && !!inAdmin[k])
+  ff[k] = featureOn(k) || ff[k] || (!isMobile && featureOn('admin') && !!inAdmin[k])
 })
 
 if (__DEV__) {
diff --git a/shared/util/idle-callback.tsx b/shared/util/idle-callback.tsx
index 1df0c7010e14..709c241c129f 100644
--- a/shared/util/idle-callback.tsx
+++ b/shared/util/idle-callback.tsx
@@ -1,5 +1,5 @@
 import {forceImmediateLogging} from '@/local-debug'
-import {isMobile, isDebuggingInChrome} from '@/constants/platform'
+import {isDebuggingInChrome} from '@/constants/platform'
 
 type TimeoutInfo = {
   didTimeout: boolean
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 361151919e84..000000000000
--- a/shared/util/misc.native.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import {navigateAppend} from '@/constants/router'
-import {isIOS} from '@/constants/platform.native'
-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/phone-numbers/index.tsx b/shared/util/phone-numbers/index.tsx
index 0918a30a0fb8..6853e65db4c5 100644
--- a/shared/util/phone-numbers/index.tsx
+++ b/shared/util/phone-numbers/index.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as React from 'react'
 import * as T from '@/constants/types'
 import libphonenumber from 'google-libphonenumber'
@@ -61,7 +60,7 @@ const load = () => {
         example: phoneUtil.format(phoneUtil.getExampleNumber(curr.alpha2), PNF.NATIONAL),
         name: curr.name,
         pickerText:
-          (C.isMobile ? `${curr.emoji} ` : '') +
+          (isMobile ? `${curr.emoji} ` : '') +
           `${curr.name} ${curr.countryCallingCodes[0]?.replace(' ', '\xa0') ?? ''}`,
       }
 
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 3c4c83fac6e6..2ddebb84e151 100644
--- a/shared/util/platform-specific/index.native.tsx
+++ b/shared/util/platform-specific/index.tsx
@@ -1,14 +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 {isIOS, isAndroid} from '@/constants/platform.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'))
@@ -16,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) {
@@ -37,6 +41,8 @@ export const requestLocationPermission = async (mode: T.RPCChat.UIWatchPositionP
         }
         break
       }
+      default:
+        break
     }
   } else if (isAndroid) {
     const androidBGPerms = await ExpoLocation.requestForegroundPermissionsAsync()
@@ -47,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] '
@@ -81,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 {
@@ -110,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 9afdc02fbc46..a02c35af0efb 100644
--- a/shared/util/storeless-actions.native.tsx
+++ b/shared/util/storeless-actions.tsx
@@ -1,31 +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 {isAndroid} from '@/constants/platform.native'
+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
@@ -38,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({
@@ -52,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}
@@ -92,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 = []
diff --git a/shared/wallets/account-page-header.tsx b/shared/wallets/account-page-header.tsx
index ac30a95021a6..7a06267f02ab 100644
--- a/shared/wallets/account-page-header.tsx
+++ b/shared/wallets/account-page-header.tsx
@@ -13,7 +13,7 @@ type Props = {
 const AccountPageHeader = (props: Props) => (
   <Kb.Box2 direction="horizontal" centerChildren={true} flex={1}>
     <Kb.Box2 direction="vertical">
-      {Kb.Styles.isMobile && !!props.accountName && (
+      {isMobile && !!props.accountName && (
         <Kb.Text center={true} type="BodySmallSemibold">
           {props.accountName}
         </Kb.Text>
diff --git a/shared/wallets/index.tsx b/shared/wallets/index.tsx
index ea7eba2f7268..b5bd8d986d65 100644
--- a/shared/wallets/index.tsx
+++ b/shared/wallets/index.tsx
@@ -40,7 +40,7 @@ const Row = (p: {account: Account}) => {
       alignSelf="flex-start"
       alignItems="flex-start"
       style={styles.row}
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
     >
       <Kb.Text type="BodyBold">
         {name}
@@ -56,7 +56,7 @@ const Row = (p: {account: Account}) => {
         <Kb.Box2
           direction="horizontal"
           alignItems="center"
-          gap={Kb.Styles.isMobile ? undefined : 'tiny'}
+          gap={isMobile ? undefined : 'tiny'}
           style={styles.idContainer}
         >
           <Kb.Text type="Body" title={accountID} lineClamp={1} style={styles.accountID}>
@@ -189,15 +189,15 @@ const styles = Kb.Styles.styleSheetCreate(
       idContainer: {
         alignSelf: 'flex-start',
         flexGrow: 1,
-        maxWidth: Kb.Styles.isMobile ? undefined : 400,
+        maxWidth: isMobile ? undefined : 400,
         width: '100%',
       },
       idCopy: {height: 40},
       label: {flexShrink: 0},
       remove: {alignSelf: 'flex-end'},
       reveal: {
-        maxWidth: Kb.Styles.isMobile ? undefined : 400,
-        width: Kb.Styles.isMobile ? undefined : '100%',
+        maxWidth: isMobile ? undefined : 400,
+        width: isMobile ? undefined : '100%',
       },
       row: Kb.Styles.platformStyles({
         common: {
diff --git a/shared/wallets/really-remove-account.tsx b/shared/wallets/really-remove-account.tsx
index 3f2357c3f689..1679fb7af4cc 100644
--- a/shared/wallets/really-remove-account.tsx
+++ b/shared/wallets/really-remove-account.tsx
@@ -56,7 +56,7 @@ const ReallyRemoveAccountPopup = (props: OwnProps) => {
       containerStyle={styles.background}
       bottomButtons={[
         <Kb.Button
-          fullWidth={Kb.Styles.isMobile}
+          fullWidth={isMobile}
           key={0}
           label="Copy secret key"
           onClick={onCopy}
@@ -66,7 +66,7 @@ const ReallyRemoveAccountPopup = (props: OwnProps) => {
           disabled={waiting}
         />,
         <Kb.Button
-          fullWidth={Kb.Styles.isMobile}
+          fullWidth={isMobile}
           key={1}
           label="Finish"
           onClick={onFinish}
@@ -80,7 +80,7 @@ const ReallyRemoveAccountPopup = (props: OwnProps) => {
     >
       <Kb.Box2 centerChildren={true} direction="vertical" flex={1} fullWidth={true}>
         <Kb.ImageIcon
-          type={Kb.Styles.isMobile ? 'icon-wallet-secret-key-64' : 'icon-wallet-secret-key-48'}
+          type={isMobile ? 'icon-wallet-secret-key-64' : 'icon-wallet-secret-key-48'}
           style={styles.icon}
         />
         <Kb.Box2 direction="vertical">
@@ -100,7 +100,7 @@ const ReallyRemoveAccountPopup = (props: OwnProps) => {
         </Kb.Text>
 
         <Kb.Toast visible={showingToast} attachTo={attachmentRef} position="top center">
-          {Kb.Styles.isMobile && <Kb.Icon type="iconfont-clipboard" color="white" />}
+          {isMobile && <Kb.Icon type="iconfont-clipboard" color="white" />}
           <Kb.Text center={true} type="BodySmall" style={styles.toastText}>
             Copied to clipboard
           </Kb.Text>
diff --git a/shared/wallets/remove-account.tsx b/shared/wallets/remove-account.tsx
index 8772bfecfa20..ff9e6a14f2cb 100644
--- a/shared/wallets/remove-account.tsx
+++ b/shared/wallets/remove-account.tsx
@@ -24,9 +24,9 @@ const Container = (ownProps: OwnProps) => {
   }
 
   const buttons = [
-    <Kb.Button fullWidth={Kb.Styles.isMobile} key={0} label="Cancel" onClick={onClose} type="Dim" />,
+    <Kb.Button fullWidth={isMobile} key={0} label="Cancel" onClick={onClose} type="Dim" />,
     <Kb.Button
-      fullWidth={Kb.Styles.isMobile}
+      fullWidth={isMobile}
       key={1}
       label="Yes, remove"
       onClick={onDelete}
@@ -36,11 +36,11 @@ const Container = (ownProps: OwnProps) => {
 
   return (
     <WalletPopup
-      bottomButtons={Kb.Styles.isMobile ? buttons.reverse() : buttons}
+      bottomButtons={isMobile ? buttons.reverse() : buttons}
     >
       <Kb.Box2 centerChildren={true} direction="vertical" flex={1} fullWidth={true}>
         <Kb.IconAuto
-          type={Kb.Styles.isMobile ? 'icon-wallet-remove-64' : 'icon-wallet-remove-48'}
+          type={isMobile ? 'icon-wallet-remove-64' : 'icon-wallet-remove-48'}
           style={styles.icon}
         />
         <Kb.Text center={true} style={styles.warningText} type="Header">
diff --git a/shared/wallets/wallet-popup.tsx b/shared/wallets/wallet-popup.tsx
index deacfd83b49b..096e6966a29a 100644
--- a/shared/wallets/wallet-popup.tsx
+++ b/shared/wallets/wallet-popup.tsx
@@ -18,7 +18,7 @@ type WalletPopupProps = {
 const WalletPopup = (props: WalletPopupProps) => {
   return (
     <>
-      {!!props.safeAreaViewTopStyle && Kb.Styles.isMobile && (
+      {!!props.safeAreaViewTopStyle && isMobile && (
         <Kb.SafeAreaViewTop style={props.safeAreaViewTopStyle} />
       )}
       <Kb.Box2 direction="vertical" style={styles.outerContainer}>
@@ -29,7 +29,7 @@ const WalletPopup = (props: WalletPopupProps) => {
         >
           <Kb.Box2
             direction="vertical"
-            fullHeight={!Kb.Styles.isMobile}
+            fullHeight={!isMobile}
             fullWidth={true}
             centerChildren={true}
             style={Kb.Styles.collapseStyles([styles.container, props.containerStyle])}
@@ -38,8 +38,8 @@ const WalletPopup = (props: WalletPopupProps) => {
             {props.bottomButtons && props.bottomButtons.length > 0 && (
               <Kb.Box2 direction="vertical" style={styles.buttonBarContainer} fullWidth={true}>
                 <Kb.ButtonBar
-                  direction={props.buttonBarDirection || (Kb.Styles.isMobile ? 'column' : 'row')}
-                  fullWidth={Kb.Styles.isMobile}
+                  direction={props.buttonBarDirection || (isMobile ? 'column' : 'row')}
+                  fullWidth={isMobile}
                   style={Kb.Styles.collapseStyles([styles.buttonBar, props.buttonBarStyle])}
                 >
                   {props.bottomButtons}
@@ -49,7 +49,7 @@ const WalletPopup = (props: WalletPopupProps) => {
           </Kb.Box2>
         </Kb.ScrollView>
       </Kb.Box2>
-      {!!props.safeAreaViewBottomStyle && Kb.Styles.isMobile && (
+      {!!props.safeAreaViewBottomStyle && isMobile && (
         <Kb.SafeAreaView style={props.safeAreaViewBottomStyle} />
       )}
     </>
diff --git a/skill/prod-bundles/SKILL.md b/skill/prod-bundles/SKILL.md
new file mode 100644
index 000000000000..6263efc97c76
--- /dev/null
+++ b/skill/prod-bundles/SKILL.md
@@ -0,0 +1,63 @@
+---
+name: prod-bundles
+description: Use when the user asks to build production bundles, check bundle sizes, audit tree-shaking, or verify mobile/desktop code separation. Covers both the desktop webpack prod build and the iOS/Android Metro bundle.
+---
+
+Build production bundles for both platforms and analyze them for correct tree-shaking.
+
+## Build Commands
+
+**Desktop (webpack):**
+```bash
+# From shared/
+yarn build-prod
+```
+Output lands in `shared/desktop/dist/`. Prod bundles have no `.dev` or `.profile` suffix — filter with:
+```bash
+ls shared/desktop/dist/*.bundle.js | grep -v '\.dev\.' | grep -v '\.profile\.'
+```
+
+**iOS (Metro):**
+```bash
+# From shared/
+yarn rn-jsbuild-ios
+```
+Output: `shared/ios/dist/main.jsbundle`
+
+**Android (Metro):**
+```bash
+# From shared/
+yarn rn-jsbuild-android
+```
+Output: `shared/android/dist/main.jsbundle`
+
+## Tree-Shaking Audit
+
+**Desktop — check mobile-only modules are absent:**
+```bash
+DIST=shared/desktop/dist
+PROD=$(ls "$DIST"/*.bundle.js | grep -v '\.dev\.' | grep -v '\.profile\.')
+for mod in expo-audio expo-location expo-video react-native-kb @gorhom/bottom-sheet lottie-react-native react-native-safe-area-context; do
+  hits=$(echo "$PROD" | xargs grep -l "$mod" 2>/dev/null | wc -l | tr -d ' ')
+  echo "$mod: $hits files"
+done
+```
+
+**iOS bundle — check bare `isMobile`/`isElectron` are inlined as literals (Babel plugin):**
+```bash
+# Should report 0 occurrences — bare globals replaced with true/false at transform time
+python3 -c "
+import re
+bundle = open('shared/ios/dist/main.jsbundle').read()
+for name in ['isMobile', 'isElectron', 'isAndroid', 'isIOS']:
+    real = [m for m in re.finditer(r'(?<![.\w{,])' + name + r'(?![:\w])', bundle)]
+    print(f'{name} not as property/key: {len(real)} occurrences')
+"
+```
+
+## Key Facts
+
+- **Webpack (desktop)**: `DefinePlugin` replaces bare globals (`isMobile`, `isElectron`, etc.) with literals. Terser DCEs dead branches. Works cross-module.
+- **Metro (iOS/Android)**: The `makePlatformPlugin` Babel plugin in `babel.config.js` inlines the same globals at transform time, enabling Metro's `constant-folding-plugin` to DCE dead branches.
+- **Native-only module aliasing** (desktop): packages in `shared/native-only-modules.js` are aliased to `shared/null-module.js` by webpack. Changes to that file require clearing the webpack cache: `rm -rf shared/node_modules/.cache/webpack`.
+- **Webpack cache invalidation**: `shared/desktop/webpack.config.mts` lists `buildDependencies` — if you add a new file that affects the build, add it there so cache auto-invalidates.