Convert all screens to react navigation

src/lib/routes/types.ts

@@ -0,0 +1,27 @@
+import {NavigationState, PartialState} from '@react-navigation/native'
+
+export type {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+export type CommonNavigatorParams = {
+  Settings: undefined
+  Profile: {name: string}
+  ProfileFollowers: {name: string}
+  ProfileFollows: {name: string}
+  PostThread: {name: string; rkey: string}
+  PostUpvotedBy: {name: string; rkey: string}
+  PostRepostedBy: {name: string; rkey: string}
+  Debug: undefined
+  Log: undefined
+}
+export type HomeStackNavigatorParams = CommonNavigatorParams & {
+  Home: undefined
+}
+export type NotificationsStackNavigatorParams = CommonNavigatorParams & {
+  Notifications: undefined
+}
+export type SearchStackNavigatorParams = CommonNavigatorParams & {
+  Search: undefined
+}
+export type State =
+  | NavigationState
+  | Omit<PartialState<NavigationState>, 'stale'>

src/view/routes.ts

@@ -1,13 +1,11 @@
 import React from 'react'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {Home} from './screens/Home'
-import {Contacts} from './screens/Contacts'
 import {Search} from './screens/Search'
 import {Notifications} from './screens/Notifications'
 import {NotFound} from './screens/NotFound'
 import {PostThread} from './screens/PostThread'
 import {PostUpvotedBy} from './screens/PostUpvotedBy'
-import {PostDownvotedBy} from './screens/PostDownvotedBy'
 import {PostRepostedBy} from './screens/PostRepostedBy'
 import {Profile} from './screens/Profile'
 import {ProfileFollowers} from './screens/ProfileFollowers'
@@ -33,7 +31,6 @@ export type MatchResult = {
 const r = (pattern: string) => new RegExp('^' + pattern + '([?]|$)', 'i')
 export const routes: Route[] = [
   [Home, 'Home', 'house', r('/')],
-  [Contacts, 'Contacts', ['far', 'circle-user'], r('/contacts')],
   [Search, 'Search', 'magnifying-glass', r('/search')],
   [Notifications, 'Notifications', 'bell', r('/notifications')],
   [Settings, 'Settings', 'bell', r('/settings')],
@@ -57,12 +54,6 @@ export const routes: Route[] = [
     'heart',
     r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/upvoted-by'),
   ],
-  [
-    PostDownvotedBy,
-    'Downvoted by',
-    'heart',
-    r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/downvoted-by'),
-  ],
   [
     PostRepostedBy,
     'Reposted by',

src/view/screens.tsx

@@ -1,36 +1,29 @@
 import * as React from 'react'
-import {View, Text, Button} from 'react-native'
+import {View, Text} from 'react-native'
 import {NavigationContainer} from '@react-navigation/native'
-import {
+import {createNativeStackNavigator} from '@react-navigation/native-stack'
-  createNativeStackNavigator,
-  NativeStackScreenProps,
-} from '@react-navigation/native-stack'
 import {createDrawerNavigator} from '@react-navigation/drawer'
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 
-import {NavigationState, PartialState} from '@react-navigation/native'
+import {
+  HomeStackNavigatorParams,
+  NotificationsStackNavigatorParams,
+  SearchStackNavigatorParams,
+  State,
+} from 'lib/routes/types'
 
-type CommonNavigatorParams = {
+import {HomeScreen} from './screens/Home'
-  Settings: undefined
+import {SearchScreen} from './screens/Search'
-  Profile: {name: string}
+import {NotificationsScreen} from './screens/Notifications'
-  ProfileFollowers: {name: string}
+import {SettingsScreen} from './screens/Settings'
-  ProfileFollows: {name: string}
+import {ProfileScreen} from './screens/Profile'
-  PostThread: {name: string; rkey: string}
+import {ProfileFollowersScreen} from './screens/ProfileFollowers'
-  PostUpvotedBy: {name: string; rkey: string}
+import {ProfileFollowsScreen} from './screens/ProfileFollows'
-  PostRepostedBy: {name: string; rkey: string}
+import {PostThreadScreen} from './screens/PostThread'
-  Debug: undefined
+import {PostUpvotedByScreen} from './screens/PostUpvotedBy'
-  Log: undefined
+import {PostRepostedByScreen} from './screens/PostRepostedBy'
-}
+import {DebugScreen} from './screens/Debug'
-type HomeStackNavigatorParams = CommonNavigatorParams & {
+import {LogScreen} from './screens/Log'
-  Home: undefined
-}
-type NotificationsStackNavigatorParams = CommonNavigatorParams & {
-  Notifications: undefined
-}
-type SearchStackNavigatorParams = CommonNavigatorParams & {
-  Search: undefined
-}
-type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>
 
 const HomeDrawer = createDrawerNavigator()
 const HomeStack = createNativeStackNavigator<HomeStackNavigatorParams>()
@@ -71,8 +64,11 @@ function r(pattern: string): Route {
 }
 const ROUTES: Record<string, Route> = {
   Home: r('/'),
+  HomeInner: r('/'),
   Search: r('/search'),
+  SearchInner: r('/search'),
   Notifications: r('/notifications'),
+  NotificationsInner: r('/notifications'),
   Settings: r('/settings'),
   Profile: r('/profile/:name'),
   ProfileFollowers: r('/profile/:name/followers'),
@@ -116,182 +112,31 @@ const LINKING = {
     }
 
     // build the state object
-    let container = 'HomeStack'
+    if (match === 'Search') {
+      return buildStateObject('SearchStack', 'Search', params)
+    }
     if (match === 'Notifications') {
-      container = 'NotificationsStack'
+      return buildStateObject('NotificationsStack', 'Notifications', params)
-    } else if (match === 'Search') {
-      container = 'SearchStack'
-    }
-    return {
-      routes: [
-        {
-          name: container,
-          state: {
-            routes: [{name: match, params}],
-          },
-        },
-      ],
     }
+    return buildStateObject('HomeStack', match, params)
   },
 }
 
-function HomeScreen({
+function buildStateObject(stack: string, route: string, params: RouteParams) {
-  navigation,
+  return {
-}: NativeStackScreenProps<HomeStackNavigatorParams, 'Home'>) {
+    routes: [
-  return (
+      {
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+        name: stack,
-      <Text>Home Screen</Text>
+        state: {
-      <Button
+          routes: [{name: route, params}],
-        title="Go to Post"
+        },
-        onPress={() =>
+      },
-          navigation.push('PostThread', {name: 'bob', rkey: '123'})
+    ],
-        }
+  }
-      />
-      <Button
-        title="Go to profile"
-        onPress={() => navigation.push('Profile', {name: 'alice'})}
-      />
-    </View>
-  )
-}
-
-function NotificationsScreen({
-  navigation,
-}: NativeStackScreenProps<NotificationsStackNavigatorParams, 'Notifications'>) {
-  return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text>Notifications Screen</Text>
-      <Button
-        title="Go to Post"
-        onPress={() =>
-          navigation.push('PostThread', {name: 'bob', rkey: '123'})
-        }
-      />
-      <Button
-        title="Go to profile"
-        onPress={() => navigation.push('Profile', {name: 'alice'})}
-      />
-    </View>
-  )
-}
-
-function SearchScreen({
-  navigation,
-}: NativeStackScreenProps<SearchStackNavigatorParams, 'Search'>) {
-  return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text>Search Screen</Text>
-      <Button
-        title="Go to Post"
-        onPress={() =>
-          navigation.push('PostThread', {name: 'bob', rkey: '123'})
-        }
-      />
-      <Button
-        title="Go to profile"
-        onPress={() => navigation.push('Profile', {name: 'alice'})}
-      />
-    </View>
-  )
-}
-
-function SettingsScreen({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'Settings'
->) {
-  return (
-    <View>
-      <Text>SettingsScreen</Text>
-    </View>
-  )
-}
-
-function ProfileScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'Profile'>) {
-  return (
-    <View>
-      <Text>ProfileScreen {route.params.name}</Text>
-    </View>
-  )
-}
-
-function ProfileFollowersScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>) {
-  return (
-    <View>
-      <Text>ProfileFollowersScreen {route.params.name}</Text>
-    </View>
-  )
-}
-
-function ProfileFollowsScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>) {
-  return (
-    <View>
-      <Text>ProfileFollowsScreen {route.params.name}</Text>
-    </View>
-  )
-}
-
-function PostThreadScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>) {
-  return (
-    <View>
-      <Text>
-        PostThreadScreen {route.params.name} {route.params.rkey}
-      </Text>
-    </View>
-  )
-}
-
-function PostUpvotedByScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'PostUpvotedBy'>) {
-  return (
-    <View>
-      <Text>
-        PostUpvotedByScreen {route.params.name} {route.params.rkey}
-      </Text>
-    </View>
-  )
-}
-
-function PostRepostedByScreen({
-  route,
-}: NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>) {
-  return (
-    <View>
-      <Text>
-        PostRepostedByScreen {route.params.name} {route.params.rkey}
-      </Text>
-    </View>
-  )
-}
-
-function DebugScreen({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'Debug'
->) {
-  return (
-    <View>
-      <Text>DebugScreen</Text>
-    </View>
-  )
-}
-
-function LogScreen({}: NativeStackScreenProps<CommonNavigatorParams, 'Log'>) {
-  return (
-    <View>
-      <Text>LogScreen</Text>
-    </View>
-  )
 }
 
 function DrawerContent() {
+  // TODO
   return (
     <View>
       <Text>Drawer</Text>

src/view/screens/Contacts.tsx

@@ -1,88 +0,0 @@
-import React, {useEffect, useState, useRef} from 'react'
-import {StyleSheet, TextInput, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
-import {Selector} from '../com/util/Selector'
-import {Text} from '../com/util/text/Text'
-import {colors} from 'lib/styles'
-import {ScreenParams} from '../routes'
-import {useStores} from 'state/index'
-import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-
-export const Contacts = ({navIdx, visible}: ScreenParams) => {
-  const store = useStores()
-  const selectorInterp = useAnimatedValue(0)
-
-  useEffect(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, 'Contacts')
-    }
-  }, [store, visible, navIdx])
-
-  const [searchText, onChangeSearchText] = useState('')
-  const inputRef = useRef<TextInput | null>(null)
-
-  return (
-    <View>
-      <View style={styles.section}>
-        <Text testID="contactsTitle" style={styles.title}>
-          Contacts
-        </Text>
-      </View>
-      <View style={styles.section}>
-        <View style={styles.searchContainer}>
-          <FontAwesomeIcon
-            icon="magnifying-glass"
-            size={16}
-            style={styles.searchIcon}
-          />
-          <TextInput
-            testID="contactsTextInput"
-            ref={inputRef}
-            value={searchText}
-            style={styles.searchInput}
-            placeholder="Search"
-            placeholderTextColor={colors.gray4}
-            onChangeText={onChangeSearchText}
-          />
-        </View>
-      </View>
-      <Selector
-        items={['All', 'Following', 'Scenes']}
-        selectedIndex={0}
-        panX={selectorInterp}
-      />
-      {!!store.me.handle && <ProfileFollowsComponent name={store.me.handle} />}
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  section: {
-    backgroundColor: colors.white,
-  },
-  title: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-
-  searchContainer: {
-    flexDirection: 'row',
-    backgroundColor: colors.gray1,
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-    marginHorizontal: 10,
-    marginBottom: 6,
-    borderRadius: 4,
-  },
-  searchIcon: {
-    color: colors.gray5,
-    marginRight: 8,
-  },
-  searchInput: {
-    flex: 1,
-    color: colors.black,
-  },
-})

src/view/screens/Debug.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {ScrollView, View} from 'react-native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -20,7 +21,10 @@ import {ErrorMessage} from '../com/util/error/ErrorMessage'
 
 const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
 
-export const Debug = () => {
+export const DebugScreen = ({}: NativeStackScreenProps<
+  CommonNavigatorParams,
+  'Debug'
+>) => {
   const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
     'light',
   )

src/view/screens/Home.tsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import {FlatList, View} from 'react-native'
+import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
+import {
+  NativeStackScreenProps,
+  HomeStackNavigatorParams,
+} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {WelcomeBanner} from '../com/util/WelcomeBanner'
 import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
-import {ScreenParams} from '../routes'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
@@ -16,19 +20,20 @@ import {ComposeIcon2} from 'lib/icons'
 
 const HEADER_HEIGHT = 42
 
-export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
+type Props = NativeStackScreenProps<HomeStackNavigatorParams, 'Home'>
+export const HomeScreen = observer(function Home({}: Props) {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)
   const {screen, track} = useAnalytics()
   const scrollElRef = React.useRef<FlatList>(null)
-  const [wasVisible, setWasVisible] = React.useState<boolean>(false)
   const {appState} = useAppState({
     onForeground: () => doPoll(true),
   })
+  const isFocused = useIsFocused()
 
   const doPoll = React.useCallback(
     (knownActive = false) => {
-      if ((!knownActive && appState !== 'active') || !visible) {
+      if ((!knownActive && appState !== 'active') || !isFocused) {
         return
       }
       if (store.me.mainFeed.isLoading) {
@@ -37,7 +42,7 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
       store.log.debug('HomeScreen: Polling for new posts')
       store.me.mainFeed.checkForLatest()
     },
-    [appState, visible, store],
+    [appState, isFocused, store],
   )
 
   const scrollToTop = React.useCallback(() => {
@@ -46,53 +51,35 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
     scrollElRef.current?.scrollToOffset({offset: -HEADER_HEIGHT})
   }, [scrollElRef])
 
-  React.useEffect(() => {
+  useFocusEffect(
-    const softResetSub = store.onScreenSoftReset(scrollToTop)
+    React.useCallback(() => {
-    const feedCleanup = store.me.mainFeed.registerListeners()
+      const softResetSub = store.onScreenSoftReset(scrollToTop)
-    const pollInterval = setInterval(doPoll, 15e3)
+      const feedCleanup = store.me.mainFeed.registerListeners()
-    const cleanup = () => {
+      const pollInterval = setInterval(doPoll, 15e3)
-      clearInterval(pollInterval)
-      softResetSub.remove()
-      feedCleanup()
-    }
 
-    // guard to only continue when transitioning from !visible -> visible
+      screen('Feed')
-    // TODO is this 100% needed? depends on if useEffect() is getting refired
+      store.log.debug('HomeScreen: Updating feed')
-    //      for reasons other than `visible` changing -prf
+      if (store.me.mainFeed.hasContent) {
-    if (!visible) {
+        store.me.mainFeed.update()
-      setWasVisible(false)
+      }
-      return cleanup
-    } else if (wasVisible) {
-      return cleanup
-    }
-    setWasVisible(true)
 
-    // just became visible
+      return () => {
-    screen('Feed')
+        clearInterval(pollInterval)
-    store.nav.setTitle(navIdx, 'Home')
+        softResetSub.remove()
-    store.log.debug('HomeScreen: Updating feed')
+        feedCleanup()
-    if (store.me.mainFeed.hasContent) {
+      }
-      store.me.mainFeed.update()
+    }, [store, doPoll, scrollToTop, screen]),
-    }
+  )
-    return cleanup
-  }, [
-    visible,
-    store,
-    store.me.mainFeed,
-    navIdx,
-    doPoll,
-    wasVisible,
-    scrollToTop,
-    screen,
-  ])
 
   const onPressCompose = React.useCallback(() => {
     track('HomeScreen:PressCompose')
     store.shell.openComposer({})
   }, [store, track])
+
   const onPressTryAgain = React.useCallback(() => {
     store.me.mainFeed.refresh()
   }, [store])
+
   const onPressLoadLatest = React.useCallback(() => {
     store.me.mainFeed.refresh()
     scrollToTop()

src/view/screens/Log.tsx

@@ -1,28 +1,30 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ScrollView} from '../com/util/Views'
 import {useStores} from 'state/index'
-import {ScreenParams} from '../routes'
 import {s} from 'lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ago} from 'lib/strings/time'
 
-export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
+export const LogScreen = observer(function Log({}: NativeStackScreenProps<
+  CommonNavigatorParams,
+  'Log'
+>) {
   const pal = usePalette('default')
   const store = useStores()
   const [expanded, setExpanded] = React.useState<string[]>([])
 
-  useEffect(() => {
+  useFocusEffect(
-    if (!visible) {
+    React.useCallback(() => {
-      return
+      store.shell.setMinimalShellMode(false)
-    }
+    }, [store]),
-    store.shell.setMinimalShellMode(false)
+  )
-    store.nav.setTitle(navIdx, 'Log')
-  }, [visible, store, navIdx])
 
   const toggler = (id: string) => () => {
     if (expanded.includes(id)) {

src/view/screens/Notifications.tsx

@@ -1,17 +1,24 @@
 import React, {useEffect} from 'react'
 import {FlatList, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import useAppState from 'react-native-appstate-hook'
+import {
+  NativeStackScreenProps,
+  NotificationsStackNavigatorParams,
+} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
 import {useStores} from 'state/index'
-import {ScreenParams} from '../routes'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 
 const NOTIFICATIONS_POLL_INTERVAL = 15e3
 
-export const Notifications = ({navIdx, visible}: ScreenParams) => {
+export const NotificationsScreen = ({}: NativeStackScreenProps<
+  NotificationsStackNavigatorParams,
+  'Notifications'
+>) => {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)
   const scrollElRef = React.useRef<FlatList>(null)
@@ -59,21 +66,19 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
 
   // on-visible setup
   // =
-  useEffect(() => {
+  useFocusEffect(
-    if (!visible) {
+    React.useCallback(() => {
-      // mark read when the user leaves the screen
+      store.log.debug('NotificationsScreen: Updating feed')
-      store.me.notifications.markAllRead()
+      const softResetSub = store.onScreenSoftReset(scrollToTop)
-      return
+      store.me.notifications.update()
-    }
+      screen('Notifications')
-    store.log.debug('NotificationsScreen: Updating feed')
+
-    const softResetSub = store.onScreenSoftReset(scrollToTop)
+      return () => {
-    store.me.notifications.update()
+        softResetSub.remove()
-    screen('Notifications')
+        store.me.notifications.markAllRead()
-    store.nav.setTitle(navIdx, 'Notifications')
+      }
-    return () => {
+    }, [store, screen, scrollToTop]),
-      softResetSub.remove()
+  )
-    }
-  }, [visible, store, navIdx, screen, scrollToTop])
 
   return (
     <View style={s.hContentRegion}>

src/view/screens/PostDownvotedBy.tsx

@@ -1,27 +0,0 @@
-import React, {useEffect} from 'react'
-import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
-import {ScreenParams} from '../routes'
-import {useStores} from 'state/index'
-import {makeRecordUri} from 'lib/strings/url-helpers'
-
-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(navIdx, 'Downvoted by')
-      store.shell.setMinimalShellMode(false)
-    }
-  }, [store, visible, navIdx])
-
-  return (
-    <View>
-      <ViewHeader title="Downvoted by" />
-      <PostLikedByComponent uri={uri} direction="down" />
-    </View>
-  )
-}

src/view/screens/PostRepostedBy.tsx

@@ -1,22 +1,23 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 
-export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
+export const PostRepostedByScreen = ({route}: Props) => {
   const store = useStores()
-  const {name, rkey} = params
+  const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
-  useEffect(() => {
+  useFocusEffect(
-    if (visible) {
+    React.useCallback(() => {
-      store.nav.setTitle(navIdx, 'Reposted by')
       store.shell.setMinimalShellMode(false)
-    }
+    }, [store]),
-  }, [store, visible, navIdx])
+  )
 
   return (
     <View>

src/view/screens/PostThread.tsx

@@ -1,11 +1,12 @@
-import React, {useEffect, useMemo} from 'react'
+import React, {useMemo} from 'react'
 import {StyleSheet, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ComposePrompt} from 'view/com/composer/Prompt'
 import {PostThreadViewModel} from 'state/models/post-thread-view'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -13,46 +14,31 @@ import {clamp} from 'lodash'
 
 const SHELL_FOOTER_HEIGHT = 44
 
-export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
+export const PostThreadScreen = ({route}: Props) => {
   const store = useStores()
   const safeAreaInsets = useSafeAreaInsets()
-  const {name, rkey} = params
+  const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
   const view = useMemo<PostThreadViewModel>(
     () => new PostThreadViewModel(store, {uri}),
     [store, uri],
   )
 
-  useEffect(() => {
+  useFocusEffect(
-    let aborted = false
+    React.useCallback(() => {
-    const threadCleanup = view.registerListeners()
+      const threadCleanup = view.registerListeners()
-    const setTitle = () => {
+      store.shell.setMinimalShellMode(false)
-      const author = view.thread?.post.author
+      if (!view.hasLoaded && !view.isLoading) {
-      const niceName = author?.handle || name
+        view.setup().catch(err => {
-      store.nav.setTitle(navIdx, `Post by ${niceName}`)
-    }
-    if (!visible) {
-      return threadCleanup
-    }
-    setTitle()
-    store.shell.setMinimalShellMode(false)
-    if (!view.hasLoaded && !view.isLoading) {
-      view.setup().then(
-        () => {
-          if (!aborted) {
-            setTitle()
-          }
-        },
-        err => {
           store.log.error('Failed to fetch thread', err)
-        },
+        })
-      )
+      }
-    }
+      return () => {
-    return () => {
+        threadCleanup()
-      aborted = true
+      }
-      threadCleanup()
+    }, [store, view]),
-    }
+  )
-  }, [visible, store.nav, store.log, store.shell, name, navIdx, view])
 
   const onPressReply = React.useCallback(() => {
     if (!view.thread) {

src/view/screens/PostUpvotedBy.tsx

@@ -1,21 +1,23 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 
-export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostUpvotedBy'>
+export const PostUpvotedByScreen = ({route}: Props) => {
   const store = useStores()
-  const {name, rkey} = params
+  const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
-  useEffect(() => {
+  useFocusEffect(
-    if (visible) {
+    React.useCallback(() => {
-      store.nav.setTitle(navIdx, 'Liked by')
+      store.shell.setMinimalShellMode(false)
-    }
+    }, [store]),
-  }, [store, visible, navIdx])
+  )
 
   return (
     <View>

src/view/screens/Profile.tsx

@@ -1,9 +1,10 @@
 import React, {useEffect, useState} from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewSelector} from '../com/util/ViewSelector'
 import {CenteredView} from '../com/util/Views'
-import {ScreenParams} from '../routes'
 import {ProfileUiModel, Sections} from 'state/models/profile-ui'
 import {useStores} from 'state/index'
 import {ProfileHeader} from '../com/profile/ProfileHeader'
@@ -23,7 +24,8 @@ const LOADING_ITEM = {_reactKey: '__loading__'}
 const END_ITEM = {_reactKey: '__end__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
 
-export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
+export const ProfileScreen = observer(({route}: Props) => {
   const store = useStores()
   const {screen, track} = useAnalytics()
 
@@ -34,35 +36,30 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   const onMainScroll = useOnMainScroll(store)
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const uiState = React.useMemo(
-    () => new ProfileUiModel(store, {user: params.name}),
+    () => new ProfileUiModel(store, {user: route.params.name}),
-    [params.name, store],
+    [route.params.name, store],
   )
 
-  useEffect(() => {
+  useFocusEffect(
-    store.nav.setTitle(navIdx, params.name)
+    React.useCallback(() => {
-  }, [store, navIdx, params.name])
+      let aborted = false
-
+      const feedCleanup = uiState.feed.registerListeners()
-  useEffect(() => {
+      if (hasSetup) {
-    let aborted = false
+        uiState.update()
-    const feedCleanup = uiState.feed.registerListeners()
+      } else {
-    if (!visible) {
+        uiState.setup().then(() => {
-      return feedCleanup
+          if (aborted) {
-    }
+            return
-    if (hasSetup) {
+          }
-      uiState.update()
+          setHasSetup(true)
-    } else {
+        })
-      uiState.setup().then(() => {
+      }
-        if (aborted) {
+      return () => {
-          return
+        aborted = true
-        }
+        feedCleanup()
-        setHasSetup(true)
+      }
-      })
+    }, [hasSetup, uiState]),
-    }
+  )
-    return () => {
-      aborted = true
-      feedCleanup()
-    }
-  }, [visible, store, hasSetup, uiState])
 
   // events
   // =
@@ -171,7 +168,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
         <ErrorScreen
           testID="profileErrorScreen"
           title="Failed to load profile"
-          message={`There was an issue when attempting to load ${params.name}`}
+          message={`There was an issue when attempting to load ${route.params.name}`}
           details={uiState.profile.error}
           onPressTryAgain={onPressTryAgain}
         />

src/view/screens/ProfileFollowers.tsx

@@ -1,20 +1,21 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 
-export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
+export const ProfileFollowersScreen = ({route}: Props) => {
   const store = useStores()
-  const {name} = params
+  const {name} = route.params
 
-  useEffect(() => {
+  useFocusEffect(
-    if (visible) {
+    React.useCallback(() => {
-      store.nav.setTitle(navIdx, `Followers of ${name}`)
       store.shell.setMinimalShellMode(false)
-    }
+    }, [store]),
-  }, [store, visible, name, navIdx])
+  )
 
   return (
     <View>

src/view/screens/ProfileFollows.tsx

@@ -1,20 +1,21 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 
-export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
+export const ProfileFollowsScreen = ({route}: Props) => {
   const store = useStores()
-  const {name} = params
+  const {name} = route.params
 
-  useEffect(() => {
+  useFocusEffect(
-    if (visible) {
+    React.useCallback(() => {
-      store.nav.setTitle(navIdx, `Followed by ${name}`)
       store.shell.setMinimalShellMode(false)
-    }
+    }, [store]),
-  }, [store, visible, name, navIdx])
+  )
 
   return (
     <View>

src/view/screens/Search.tsx

@@ -7,15 +7,19 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {ScrollView} from '../com/util/Views'
+import {
+  NativeStackScreenProps,
+  SearchStackNavigatorParams,
+} from 'lib/routes/types'
 import {observer} from 'mobx-react-lite'
 import {UserAvatar} from '../com/util/UserAvatar'
 import {Text} from '../com/util/text/Text'
-import {ScreenParams} from '../routes'
 import {useStores} from 'state/index'
 import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view'
 import {s} from 'lib/styles'
@@ -30,7 +34,8 @@ import {useAnalytics} from 'lib/analytics'
 const MENU_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 const FIVE_MIN = 5 * 60 * 1e3
 
-export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
+type Props = NativeStackScreenProps<SearchStackNavigatorParams, 'Search'>
+export const SearchScreen = observer(({}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
   const {track} = useAnalytics()
@@ -44,29 +49,28 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
     () => new UserAutocompleteViewModel(store),
     [store],
   )
-  const {name} = params
 
   const onSoftReset = () => {
     scrollElRef.current?.scrollTo({x: 0, y: 0})
   }
 
-  React.useEffect(() => {
+  useFocusEffect(
-    const softResetSub = store.onScreenSoftReset(onSoftReset)
+    React.useCallback(() => {
-    const cleanup = () => {
+      const softResetSub = store.onScreenSoftReset(onSoftReset)
-      softResetSub.remove()
+      const cleanup = () => {
-    }
+        softResetSub.remove()
+      }
 
-    if (visible) {
       const now = Date.now()
       if (now - lastRenderTime > FIVE_MIN) {
         setRenderTime(Date.now()) // trigger reload of suggestions
       }
       store.shell.setMinimalShellMode(false)
       autocompleteView.setup()
-      store.nav.setTitle(navIdx, 'Search')
+
-    }
+      return cleanup
-    return cleanup
+    }, [store, autocompleteView, lastRenderTime, setRenderTime]),
-  }, [store, visible, name, navIdx, autocompleteView, lastRenderTime])
+  )
 
   const onPressMenu = () => {
     track('ViewHeader:MenuButtonClicked')

src/view/screens/Search.web.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {ScrollView} from '../com/util/Views'
 import {observer} from 'mobx-react-lite'
-import {ScreenParams} from '../routes'
+import {
+  NativeStackScreenProps,
+  SearchStackNavigatorParams,
+} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {WhoToFollow} from '../com/discover/WhoToFollow'
@@ -12,7 +16,8 @@ import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 
 const FIVE_MIN = 5 * 60 * 1e3
 
-export const Search = observer(({navIdx, visible}: ScreenParams) => {
+type Props = NativeStackScreenProps<SearchStackNavigatorParams, 'Search'>
+export const SearchScreen = observer(({}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
   const scrollElRef = React.useRef<ScrollView>(null)
@@ -23,22 +28,21 @@ export const Search = observer(({navIdx, visible}: ScreenParams) => {
     scrollElRef.current?.scrollTo({x: 0, y: 0})
   }
 
-  React.useEffect(() => {
+  useFocusEffect(
-    const softResetSub = store.onScreenSoftReset(onSoftReset)
+    React.useCallback(() => {
-    const cleanup = () => {
+      const softResetSub = store.onScreenSoftReset(onSoftReset)
-      softResetSub.remove()
-    }
 
-    if (visible) {
       const now = Date.now()
       if (now - lastRenderTime > FIVE_MIN) {
         setRenderTime(Date.now()) // trigger reload of suggestions
       }
       store.shell.setMinimalShellMode(false)
-      store.nav.setTitle(navIdx, 'Search')
+
-    }
+      return () => {
-    return cleanup
+        softResetSub.remove()
-  }, [store, visible, navIdx, lastRenderTime])
+      }
+    }, [store, lastRenderTime, setRenderTime]),
+  )
 
   return (
     <ScrollView

src/view/screens/Settings.tsx

@@ -1,18 +1,19 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {observer} from 'mobx-react-lite'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import * as AppInfo from 'lib/app-info'
 import {useStores} from 'state/index'
-import {ScreenParams} from '../routes'
 import {s, colors} from 'lib/styles'
 import {ScrollView} from '../com/util/Views'
 import {ViewHeader} from '../com/util/ViewHeader'
@@ -26,250 +27,247 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {AccountData} from 'state/models/session'
 import {useAnalytics} from 'lib/analytics'
 
-export const Settings = observer(function Settings({
+export const SettingsScreen = observer(
-  navIdx,
+  function Settings({}: NativeStackScreenProps<
-  visible,
+    CommonNavigatorParams,
-}: ScreenParams) {
+    'Settings'
-  const theme = useTheme()
+  >) {
-  const pal = usePalette('default')
+    const theme = useTheme()
-  const store = useStores()
+    const pal = usePalette('default')
-  const {screen, track} = useAnalytics()
+    const store = useStores()
-  const [isSwitching, setIsSwitching] = React.useState(false)
+    const {screen, track} = useAnalytics()
+    const [isSwitching, setIsSwitching] = React.useState(false)
 
-  useEffect(() => {
+    useFocusEffect(
-    screen('Settings')
+      React.useCallback(() => {
-  }, [screen])
+        screen('Settings')
+        store.shell.setMinimalShellMode(false)
+      }, [screen, store]),
+    )
 
-  useEffect(() => {
+    const onPressSwitchAccount = async (acct: AccountData) => {
-    if (!visible) {
+      track('Settings:SwitchAccountButtonClicked')
-      return
+      setIsSwitching(true)
-    }
+      if (await store.session.resumeSession(acct)) {
-    store.shell.setMinimalShellMode(false)
+        setIsSwitching(false)
-    store.nav.setTitle(navIdx, 'Settings')
+        store.nav.tab.fixedTabReset()
-  }, [visible, store, navIdx])
+        Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
-
+        return
-  const onPressSwitchAccount = async (acct: AccountData) => {
+      }
-    track('Settings:SwitchAccountButtonClicked')
-    setIsSwitching(true)
-    if (await store.session.resumeSession(acct)) {
       setIsSwitching(false)
+      Toast.show('Sorry! We need you to enter your password.')
       store.nav.tab.fixedTabReset()
-      Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
+      store.session.clear()
-      return
+    }
+    const onPressAddAccount = () => {
+      track('Settings:AddAccountButtonClicked')
+      store.session.clear()
+    }
+    const onPressChangeHandle = () => {
+      track('Settings:ChangeHandleButtonClicked')
+      store.shell.openModal({
+        name: 'change-handle',
+        onChanged() {
+          setIsSwitching(true)
+          store.session.reloadFromServer().then(
+            () => {
+              setIsSwitching(false)
+              Toast.show('Your handle has been updated')
+            },
+            err => {
+              store.log.error(
+                'Failed to reload from server after handle update',
+                {err},
+              )
+              setIsSwitching(false)
+            },
+          )
+        },
+      })
+    }
+    const onPressSignout = () => {
+      track('Settings:SignOutButtonClicked')
+      store.session.logout()
+    }
+    const onPressDeleteAccount = () => {
+      store.shell.openModal({name: 'delete-account'})
     }
-    setIsSwitching(false)
-    Toast.show('Sorry! We need you to enter your password.')
-    store.nav.tab.fixedTabReset()
-    store.session.clear()
-  }
-  const onPressAddAccount = () => {
-    track('Settings:AddAccountButtonClicked')
-    store.session.clear()
-  }
-  const onPressChangeHandle = () => {
-    track('Settings:ChangeHandleButtonClicked')
-    store.shell.openModal({
-      name: 'change-handle',
-      onChanged() {
-        setIsSwitching(true)
-        store.session.reloadFromServer().then(
-          () => {
-            setIsSwitching(false)
-            Toast.show('Your handle has been updated')
-          },
-          err => {
-            store.log.error(
-              'Failed to reload from server after handle update',
-              {err},
-            )
-            setIsSwitching(false)
-          },
-        )
-      },
-    })
-  }
-  const onPressSignout = () => {
-    track('Settings:SignOutButtonClicked')
-    store.session.logout()
-  }
-  const onPressDeleteAccount = () => {
-    store.shell.openModal({name: 'delete-account'})
-  }
 
-  return (
+    return (
-    <View style={[s.hContentRegion]} testID="settingsScreen">
+      <View style={[s.hContentRegion]} testID="settingsScreen">
-      <ViewHeader title="Settings" />
+        <ViewHeader title="Settings" />
-      <ScrollView style={s.hContentRegion}>
+        <ScrollView style={s.hContentRegion}>
-        <View style={styles.spacer20} />
+          <View style={styles.spacer20} />
-        <View style={[s.flexRow, styles.heading]}>
+          <View style={[s.flexRow, styles.heading]}>
-          <Text type="xl-bold" style={pal.text}>
+            <Text type="xl-bold" style={pal.text}>
-            Signed in as
+              Signed in as
-          </Text>
+            </Text>
-          <View style={s.flex1} />
+            <View style={s.flex1} />
-        </View>
-        {isSwitching ? (
-          <View style={[pal.view, styles.linkCard]}>
-            <ActivityIndicator />
           </View>
-        ) : (
+          {isSwitching ? (
-          <Link
-            href={`/profile/${store.me.handle}`}
-            title="Your profile"
-            noFeedback>
             <View style={[pal.view, styles.linkCard]}>
+              <ActivityIndicator />
+            </View>
+          ) : (
+            <Link
+              href={`/profile/${store.me.handle}`}
+              title="Your profile"
+              noFeedback>
+              <View style={[pal.view, styles.linkCard]}>
+                <View style={styles.avi}>
+                  <UserAvatar
+                    size={40}
+                    displayName={store.me.displayName}
+                    handle={store.me.handle || ''}
+                    avatar={store.me.avatar}
+                  />
+                </View>
+                <View style={[s.flex1]}>
+                  <Text type="md-bold" style={pal.text} numberOfLines={1}>
+                    {store.me.displayName || store.me.handle}
+                  </Text>
+                  <Text type="sm" style={pal.textLight} numberOfLines={1}>
+                    {store.me.handle}
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  testID="signOutBtn"
+                  onPress={isSwitching ? undefined : onPressSignout}>
+                  <Text type="lg" style={pal.link}>
+                    Sign out
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </Link>
+          )}
+          {store.session.switchableAccounts.map(account => (
+            <TouchableOpacity
+              testID={`switchToAccountBtn-${account.handle}`}
+              key={account.did}
+              style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
+              onPress={
+                isSwitching ? undefined : () => onPressSwitchAccount(account)
+              }>
               <View style={styles.avi}>
                 <UserAvatar
                   size={40}
-                  displayName={store.me.displayName}
+                  displayName={account.displayName}
-                  handle={store.me.handle || ''}
+                  handle={account.handle || ''}
-                  avatar={store.me.avatar}
+                  avatar={account.aviUrl}
                 />
               </View>
               <View style={[s.flex1]}>
-                <Text type="md-bold" style={pal.text} numberOfLines={1}>
+                <Text type="md-bold" style={pal.text}>
-                  {store.me.displayName || store.me.handle}
+                  {account.displayName || account.handle}
                 </Text>
-                <Text type="sm" style={pal.textLight} numberOfLines={1}>
+                <Text type="sm" style={pal.textLight}>
-                  {store.me.handle}
+                  {account.handle}
                 </Text>
               </View>
-              <TouchableOpacity
+              <AccountDropdownBtn handle={account.handle} />
-                testID="signOutBtn"
+            </TouchableOpacity>
-                onPress={isSwitching ? undefined : onPressSignout}>
+          ))}
-                <Text type="lg" style={pal.link}>
-                  Sign out
-                </Text>
-              </TouchableOpacity>
-            </View>
-          </Link>
-        )}
-        {store.session.switchableAccounts.map(account => (
           <TouchableOpacity
-            testID={`switchToAccountBtn-${account.handle}`}
+            testID="switchToNewAccountBtn"
-            key={account.did}
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-            style={[pal.view, styles.linkCard, isSwitching && styles.dimmed]}
+            onPress={isSwitching ? undefined : onPressAddAccount}>
-            onPress={
+            <View style={[styles.iconContainer, pal.btn]}>
-              isSwitching ? undefined : () => onPressSwitchAccount(account)
+              <FontAwesomeIcon
-            }>
+                icon="plus"
-            <View style={styles.avi}>
+                style={pal.text as FontAwesomeIconStyle}
-              <UserAvatar
-                size={40}
-                displayName={account.displayName}
-                handle={account.handle || ''}
-                avatar={account.aviUrl}
               />
             </View>
-            <View style={[s.flex1]}>
+            <Text type="lg" style={pal.text}>
-              <Text type="md-bold" style={pal.text}>
+              Add account
-                {account.displayName || account.handle}
+            </Text>
-              </Text>
-              <Text type="sm" style={pal.textLight}>
-                {account.handle}
-              </Text>
-            </View>
-            <AccountDropdownBtn handle={account.handle} />
           </TouchableOpacity>
-        ))}
+
-        <TouchableOpacity
+          <View style={styles.spacer20} />
-          testID="switchToNewAccountBtn"
+
-          style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          onPress={isSwitching ? undefined : onPressAddAccount}>
+            Advanced
-          <View style={[styles.iconContainer, pal.btn]}>
-            <FontAwesomeIcon
-              icon="plus"
-              style={pal.text as FontAwesomeIconStyle}
-            />
-          </View>
-          <Text type="lg" style={pal.text}>
-            Add account
           </Text>
-        </TouchableOpacity>
+          <TouchableOpacity
+            testID="changeHandleBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            onPress={isSwitching ? undefined : onPressChangeHandle}>
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon="at"
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+            <Text type="lg" style={pal.text}>
+              Change my handle
+            </Text>
+          </TouchableOpacity>
 
-        <View style={styles.spacer20} />
+          <View style={styles.spacer20} />
 
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          Advanced
+            Danger zone
-        </Text>
-        <TouchableOpacity
-          testID="changeHandleBtn"
-          style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-          onPress={isSwitching ? undefined : onPressChangeHandle}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <FontAwesomeIcon
-              icon="at"
-              style={pal.text as FontAwesomeIconStyle}
-            />
-          </View>
-          <Text type="lg" style={pal.text}>
-            Change my handle
           </Text>
-        </TouchableOpacity>
+          <TouchableOpacity
-
+            style={[pal.view, styles.linkCard]}
-        <View style={styles.spacer20} />
+            onPress={onPressDeleteAccount}>
-
+            <View
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+              style={[
-          Danger zone
+                styles.iconContainer,
-        </Text>
+                theme.colorScheme === 'dark'
-        <TouchableOpacity
+                  ? styles.trashIconContainerDark
-          style={[pal.view, styles.linkCard]}
+                  : styles.trashIconContainerLight,
-          onPress={onPressDeleteAccount}>
+              ]}>
-          <View
+              <FontAwesomeIcon
-            style={[
+                icon={['far', 'trash-can']}
-              styles.iconContainer,
+                style={
-              theme.colorScheme === 'dark'
+                  theme.colorScheme === 'dark'
-                ? styles.trashIconContainerDark
+                    ? styles.dangerDark
-                : styles.trashIconContainerLight,
+                    : styles.dangerLight
-            ]}>
+                }
-            <FontAwesomeIcon
+                size={21}
-              icon={['far', 'trash-can']}
+              />
+            </View>
+            <Text
+              type="lg"
               style={
                 theme.colorScheme === 'dark'
                   ? styles.dangerDark
                   : styles.dangerLight
-              }
+              }>
-              size={21}
+              Delete my account
-            />
+            </Text>
-          </View>
+          </TouchableOpacity>
-          <Text
-            type="lg"
-            style={
-              theme.colorScheme === 'dark'
-                ? styles.dangerDark
-                : styles.dangerLight
-            }>
-            Delete my account
-          </Text>
-        </TouchableOpacity>
 
-        <View style={styles.spacer20} />
+          <View style={styles.spacer20} />
 
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          Developer tools
+            Developer tools
-        </Text>
-        <Link
-          style={[pal.view, styles.linkCardNoIcon]}
-          href="/sys/log"
-          title="System log">
-          <Text type="lg" style={pal.text}>
-            System log
           </Text>
-        </Link>
+          <Link
-        <Link
+            style={[pal.view, styles.linkCardNoIcon]}
-          style={[pal.view, styles.linkCardNoIcon]}
+            href="/sys/log"
-          href="/sys/debug"
+            title="System log">
-          title="Debug tools">
+            <Text type="lg" style={pal.text}>
-          <Text type="lg" style={pal.text}>
+              System log
-            Storybook
+            </Text>
+          </Link>
+          <Link
+            style={[pal.view, styles.linkCardNoIcon]}
+            href="/sys/debug"
+            title="Debug tools">
+            <Text type="lg" style={pal.text}>
+              Storybook
+            </Text>
+          </Link>
+          <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+            Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
           </Text>
-        </Link>
+          <View style={s.footerSpacer} />
-        <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
+        </ScrollView>
-          Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
+      </View>
-        </Text>
+    )
-        <View style={s.footerSpacer} />
+  },
-      </ScrollView>
+)
-    </View>
-  )
-})
 
 function AccountDropdownBtn({handle}: {handle: string}) {
   const store = useStores()