6 files changed, 89 insertions, 4 deletions
diff --git a/src/lib/batchedUpdates.web.ts b/src/lib/batchedUpdates.web.ts
index 03147ed67..ba82549b5 100644
--- a/src/lib/batchedUpdates.web.ts
+++ b/src/lib/batchedUpdates.web.ts
@@ -1,2 +1 @@
-// @ts-ignore
 export {unstable_batchedUpdates as batchedUpdates} from 'react-dom'
diff --git a/src/lib/country-codes.ts b/src/lib/country-codes.ts
index ecfeb8eae..ae0152876 100644
--- a/src/lib/country-codes.ts
+++ b/src/lib/country-codes.ts
@@ -236,7 +236,10 @@ export const COUNTRY_CODES: CountryCodeMap[] = [
   {code2: 'UG', name: 'Uganda (+256)'},
   {code2: 'UA', name: 'Ukraine (+380)'},
   {code2: 'AE', name: 'United Arab Emirates (+971)'},
-  {code2: 'GB', name: 'United Kingdom of Great Britain and Northern Ireland (+44)'},
+  {
+    code2: 'GB',
+    name: 'United Kingdom of Great Britain and Northern Ireland (+44)',
+  },
   {code2: 'US', name: 'United States of America (+1)'},
   {code2: 'UY', name: 'Uruguay (+598)'},
   {code2: 'UZ', name: 'Uzbekistan (+998)'},
diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts
new file mode 100644
index 000000000..585f193f1
--- /dev/null
+++ b/src/lib/hooks/useWebBodyScrollLock.ts
@@ -0,0 +1,28 @@
+import {useEffect} from 'react'
+import {isWeb} from '#/platform/detection'
+
+let refCount = 0
+
+function incrementRefCount() {
+  if (refCount === 0) {
+    document.body.style.overflow = 'hidden'
+  }
+  refCount++
+}
+
+function decrementRefCount() {
+  refCount--
+  if (refCount === 0) {
+    document.body.style.overflow = ''
+  }
+}
+
+export function useWebBodyScrollLock(isLockActive: boolean) {
+  useEffect(() => {
+    if (!isWeb || !isLockActive) {
+      return
+    }
+    incrementRefCount()
+    return () => decrementRefCount()
+  })
+}
diff --git a/src/lib/hooks/useWebScrollRestoration.native.ts b/src/lib/hooks/useWebScrollRestoration.native.ts
new file mode 100644
index 000000000..c7d96607f
--- /dev/null
+++ b/src/lib/hooks/useWebScrollRestoration.native.ts
@@ -0,0 +1,3 @@
+export function useWebScrollRestoration() {
+  return undefined
+}
diff --git a/src/lib/hooks/useWebScrollRestoration.ts b/src/lib/hooks/useWebScrollRestoration.ts
new file mode 100644
index 000000000..f68fbf0f2
--- /dev/null
+++ b/src/lib/hooks/useWebScrollRestoration.ts
@@ -0,0 +1,52 @@
+import {useMemo, useState, useEffect} from 'react'
+import {EventArg, useNavigation} from '@react-navigation/core'
+
+if ('scrollRestoration' in history) {
+  // Tell the brower not to mess with the scroll.
+  // We're doing that manually below.
+  history.scrollRestoration = 'manual'
+}
+
+function createInitialScrollState() {
+  return {
+    scrollYs: new Map(),
+    focusedKey: null as string | null,
+  }
+}
+
+export function useWebScrollRestoration() {
+  const [state] = useState(createInitialScrollState)
+  const navigation = useNavigation()
+
+  useEffect(() => {
+    function onDispatch() {
+      if (state.focusedKey) {
+        // Remember where we were for later.
+        state.scrollYs.set(state.focusedKey, window.scrollY)
+        // TODO: Strictly speaking, this is a leak. We never clean up.
+        // This is because I'm not sure when it's appropriate to clean it up.
+        // It doesn't seem like popstate is enough because it can still Forward-Back again.
+        // Maybe we should use sessionStorage. Or check what Next.js is doing?
+      }
+    }
+    // We want to intercept any push/pop/replace *before* the re-render.
+    // There is no official way to do this yet, but this works okay for now.
+    // https://twitter.com/satya164/status/1737301243519725803
+    navigation.addListener('__unsafe_action__' as any, onDispatch)
+    return () => {
+      navigation.removeListener('__unsafe_action__' as any, onDispatch)
+    }
+  }, [state, navigation])
+
+  const screenListeners = useMemo(
+    () => ({
+      focus(e: EventArg<'focus', boolean | undefined, unknown>) {
+        const scrollY = state.scrollYs.get(e.target) ?? 0
+        window.scrollTo(0, scrollY)
+        state.focusedKey = e.target ?? null
+      },
+    }),
+    [state],
+  )
+  return screenListeners
+}
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
index 5a10fea86..df9b49260 100644
--- a/src/lib/styles.ts
+++ b/src/lib/styles.ts
@@ -1,6 +1,6 @@
 import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
 import {Theme, TypographyVariant} from './ThemeContext'
-import {isMobileWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
 export const colors = {
@@ -175,7 +175,7 @@ export const s = StyleSheet.create({
   // dimensions
   w100pct: {width: '100%'},
   h100pct: {height: '100%'},
-  hContentRegion: isMobileWeb ? {flex: 1} : {height: '100%'},
+  hContentRegion: isWeb ? {minHeight: '100%'} : {height: '100%'},
   window: {
     width: Dimensions.get('window').width,
     height: Dimensions.get('window').height,