Route scroll restoration POC

src/Navigation.tsx

@@ -26,7 +26,7 @@ import {BottomBar} from './view/shell/bottom-bar/BottomBar'
 import {buildStateObject} from 'lib/routes/helpers'
 import {State, RouteParams} from 'lib/routes/types'
 import {colors} from 'lib/styles'
-import {isNative} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -385,6 +385,9 @@ function MyProfileTabNavigator() {
   )
 }
 
+const webScrollPositions = new Map()
+let webFocusedScreen = null
+
 /**
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
@@ -396,6 +399,20 @@ const FlatNavigator = () => {
   const title = (page: string) => bskyTitle(page, numUnread)
   return (
     <Flat.Navigator
+      screenListeners={{
+        beforeRemove(e) {
+          if (isWeb) {
+            webScrollPositions.delete(e.target)
+          }
+        },
+        focus(e) {
+          if (isWeb) {
+            const scrollY = webScrollPositions.get(e.target) ?? 0
+            window.scrollTo(0, scrollY)
+            webFocusedScreen = e.target
+          }
+        },
+      }}
       screenOptions={{
         gestureEnabled: true,
         fullScreenGestureEnabled: true,
@@ -498,6 +515,16 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       onReady={() => {
         logModuleInitTime()
         onReady()
+
+        if (isWeb) {
+          history.scrollRestoration = 'manual'
+          // TODO: Clean up?
+          navigationRef.current?.addListener('__unsafe_action__', e => {
+            if (webFocusedScreen) {
+              webScrollPositions.set(webFocusedScreen, window.scrollY)
+            }
+          })
+        }
       }}>
       {children}
     </NavigationContainer>