Improve reliability of screen titles

src/view/routes.ts

@@ -17,6 +17,7 @@ import {ProfileMembers} from './screens/ProfileMembers'
 import {Settings} from './screens/Settings'
 
 export type ScreenParams = {
+  navIdx: [number, number]
   params: Record<string, any>
   visible: boolean
   scrollElRef?: MutableRefObject<FlatList<any> | undefined>

src/view/screens/Contacts.tsx

@@ -8,13 +8,13 @@ import {colors} from '../lib/styles'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
-export const Contacts = ({visible, params}: ScreenParams) => {
+export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const selectorInterp = useSharedValue(0)
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Contacts`)
+      store.nav.setTitle(navIdx, `Contacts`)
     }
   }, [store, visible])
 

src/view/screens/Home.tsx

@@ -12,6 +12,7 @@ import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
 
 export const Home = observer(function Home({
+  navIdx,
   visible,
   scrollElRef,
 }: ScreenParams) {
@@ -51,7 +52,7 @@ export const Home = observer(function Home({
       console.log('Updating home feed')
       defaultFeedView.update()
     } else {
-      store.nav.setTitle('Home')
+      store.nav.setTitle(navIdx, 'Home')
       console.log('Fetching home feed')
       defaultFeedView.setup().then(() => {
         if (aborted) return

src/view/screens/Notifications.tsx

@@ -7,7 +7,7 @@ import {useStores} from '../../state'
 import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
 
-export const Notifications = ({visible}: ScreenParams) => {
+export const Notifications = ({navIdx, visible}: ScreenParams) => {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const [notesView, setNotesView] = useState<
     NotificationsViewModel | undefined
@@ -24,7 +24,7 @@ export const Notifications = ({visible}: ScreenParams) => {
       console.log('Updating notifications feed')
       notesView?.update()
     } else {
-      store.nav.setTitle('Notifications')
+      store.nav.setTitle(navIdx, 'Notifications')
       const newNotesView = new NotificationsViewModel(store, {})
       setNotesView(newNotesView)
       newNotesView.setup().then(() => {

src/view/screens/PostDownvotedBy.tsx

@@ -6,14 +6,14 @@ import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../lib/strings'
 
-export const PostDownvotedBy = ({visible, params}: ScreenParams) => {
+export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle('Downvoted by')
+      store.nav.setTitle(navIdx, 'Downvoted by')
     }
   }, [store, visible])
 

src/view/screens/PostRepostedBy.tsx

@@ -6,14 +6,14 @@ import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../lib/strings'
 
-export const PostRepostedBy = ({visible, params}: ScreenParams) => {
+export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle('Reposted by')
+      store.nav.setTitle(navIdx, 'Reposted by')
     }
   }, [store, visible])
 

src/view/screens/PostThread.tsx

@@ -6,14 +6,14 @@ import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
-export const PostThread = ({visible, params}: ScreenParams) => {
+export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Post by ${name}`)
+      store.nav.setTitle(navIdx, `Post by ${name}`)
     }
   }, [visible, store.nav, name])
 

src/view/screens/PostUpvotedBy.tsx

@@ -6,14 +6,14 @@ import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../lib/strings'
 
-export const PostUpvotedBy = ({visible, params}: ScreenParams) => {
+export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle('Upvoted by')
+      store.nav.setTitle(navIdx, 'Upvoted by')
     }
   }, [store, visible])
 

src/view/screens/Profile.tsx

@@ -23,7 +23,7 @@ const LOADING_ITEM = {_reactKey: '__loading__'}
 const END_ITEM = {_reactKey: '__end__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
 
-export const Profile = observer(({visible, params}: ScreenParams) => {
+export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const uiState = useMemo(
@@ -41,7 +41,7 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
       uiState.update()
     } else {
       console.log('Fetching profile for', params.name)
-      store.nav.setTitle(params.name)
+      store.nav.setTitle(navIdx, params.name)
       uiState.setup().then(() => {
         if (aborted) return
         setHasSetup(true)

src/view/screens/ProfileFollowers.tsx

@@ -5,13 +5,13 @@ import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/Prof
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
-export const ProfileFollowers = ({visible, params}: ScreenParams) => {
+export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Followers of ${name}`)
+      store.nav.setTitle(navIdx, `Followers of ${name}`)
     }
   }, [store, visible, name])
 

src/view/screens/ProfileFollows.tsx

@@ -5,13 +5,13 @@ import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileF
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
-export const ProfileFollows = ({visible, params}: ScreenParams) => {
+export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Followed by ${name}`)
+      store.nav.setTitle(navIdx, `Followed by ${name}`)
     }
   }, [store, visible, name])
 

src/view/screens/ProfileMembers.tsx

@@ -5,13 +5,13 @@ import {ProfileMembers as ProfileMembersComponent} from '../com/profile/ProfileM
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 
-export const ProfileMembers = ({visible, params}: ScreenParams) => {
+export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Members of ${name}`)
+      store.nav.setTitle(navIdx, `Members of ${name}`)
     }
   }, [store, visible, name])
 

src/view/screens/Search.tsx

@@ -7,13 +7,13 @@ import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {colors} from '../lib/styles'
 
-export const Search = ({visible, params}: ScreenParams) => {
+export const Search = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
   useEffect(() => {
     if (visible) {
-      store.nav.setTitle(`Search`)
+      store.nav.setTitle(navIdx, `Search`)
     }
   }, [store, visible, name])
   const onComposePress = () => {

src/view/screens/Settings.tsx

@@ -8,14 +8,17 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {UserAvatar} from '../com/util/UserAvatar'
 
-export const Settings = observer(function Settings({visible}: ScreenParams) {
+export const Settings = observer(function Settings({
+  navIdx,
+  visible,
+}: ScreenParams) {
   const store = useStores()
 
   useEffect(() => {
     if (!visible) {
       return
     }
-    store.nav.setTitle('Settings')
+    store.nav.setTitle(navIdx, 'Settings')
   }, [visible, store])
 
   const onPressSignout = () => {

src/view/shell/mobile/index.tsx

@@ -268,7 +268,7 @@ export const MobileShell: React.FC = observer(() => {
         <GestureDetector gesture={swipeGesture}>
           <ScreenContainer style={styles.screenContainer}>
             {screenRenderDesc.screens.map(
-              ({Com, params, key, current, previous}) => {
+              ({Com, navIdx, params, key, current, previous}) => {
                 return (
                   <Screen
                     key={key}
@@ -293,6 +293,7 @@ export const MobileShell: React.FC = observer(() => {
                       ]}>
                       <Com
                         params={params}
+                        navIdx={navIdx}
                         visible={current}
                         scrollElRef={current ? scrollElRef : undefined}
                       />
@@ -361,6 +362,7 @@ export const MobileShell: React.FC = observer(() => {
  */
 type ScreenRenderDesc = MatchResult & {
   key: string
+  navIdx: [number, number]
   current: boolean
   previous: boolean
   isNewTab: boolean
@@ -388,6 +390,7 @@ function constructScreenRenderDesc(nav: NavigationModel): {
       hasNewTab = hasNewTab || tab.isNewTab
       return Object.assign(matchRes, {
         key: `t${tab.id}-s${screen.index}`,
+        navIdx: [tab.id, screen.id],
         current: isCurrent,
         previous: isPrevious,
         isNewTab: tab.isNewTab,