Cleanup

package.json

@@ -198,6 +198,7 @@
     "@types/lodash.shuffle": "^4.2.7",
     "@types/psl": "^1.1.1",
     "@types/react-avatar-editor": "^13.0.0",
+    "@types/react-dom": "^18.2.18",
     "@types/react-responsive": "^8.0.5",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",

src/Navigation.tsx

@@ -393,8 +393,9 @@ function MyProfileTabNavigator() {
 const FlatNavigator = () => {
   const pal = usePalette('default')
   const numUnread = useUnreadNotifications()
-  const title = (page: string) => bskyTitle(page, numUnread)
   const screenListeners = useWebScrollRestoration()
+  const title = (page: string) => bskyTitle(page, numUnread)
+
   return (
     <Flat.Navigator
       screenListeners={screenListeners}

src/lib/batchedUpdates.web.ts

@@ -1,2 +1 @@
-// @ts-ignore
 export {unstable_batchedUpdates as batchedUpdates} from 'react-dom'

src/view/com/pager/Pager.web.tsx

@@ -6,6 +6,7 @@ import {s} from 'lib/styles'
 export interface RenderTabBarFnProps {
   selectedPage: number
   onSelect?: (index: number) => void
+  tabBarAnchor?: JSX.Element
 }
 export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
 
@@ -28,7 +29,7 @@ export const Pager = React.forwardRef(function PagerImpl(
   ref,
 ) {
   const [selectedPage, setSelectedPage] = React.useState(initialPage)
-  const scrollYs = React.useRef([])
+  const scrollYs = React.useRef<Array<number | null>>([])
   const anchorRef = React.useRef(null)
 
   React.useImperativeHandle(ref, () => ({
@@ -38,10 +39,15 @@ export const Pager = React.forwardRef(function PagerImpl(
   const onTabBarSelect = React.useCallback(
     (index: number) => {
       const scrollY = window.scrollY
+      // We want to determine if the tabbar is already "sticking" at the top (in which
+      // case we should preserve and restore scroll), or if it is somewhere below in the
+      // viewport (in which case a scroll jump would be jarring). We determine this by
+      // measuring where the "anchor"" element is (which we place just above the tabbar).
       let anchorTop = anchorRef.current
-        ? anchorRef.current.getBoundingClientRect().top
+        ? (anchorRef.current as Element).getBoundingClientRect().top
-        : -scrollY
+        : -scrollY // If there's no anchor, treat the top of the page as one.
-      const isSticking = anchorTop <= 5
+      const isSticking = anchorTop <= 5 // This would be 0 if browser scrollTo() was reliable.
+
       if (isSticking) {
         scrollYs.current[selectedPage] = window.scrollY
       } else {
@@ -53,8 +59,9 @@ export const Pager = React.forwardRef(function PagerImpl(
         onPageSelecting?.(index)
       })
       if (isSticking) {
-        if (scrollYs.current[index]) {
+        const restoredScrollY = scrollYs.current[index]
-          window.scrollTo(0, scrollYs.current[index])
+        if (restoredScrollY != null) {
+          window.scrollTo(0, restoredScrollY)
         } else {
           window.scrollTo(0, scrollY + anchorTop)
         }

yarn.lock

@@ -7043,6 +7043,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.2.18":
+  version "18.2.18"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
+  integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-responsive@^8.0.5":
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.5.tgz#77769862d2a0711434feb972be08e3e6c334440a"