Convert all screens to react navigation

2023-03-09 20:02:54 -06:00
parent 6a4961caa5
commit df4dee6db2
18 changed files with 465 additions and 725 deletions
@@ -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'>
@@ -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',
@@ -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 {
-  createNativeStackNavigator,
-  NativeStackScreenProps,
-} from '@react-navigation/native-stack'
+import {createNativeStackNavigator} 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 = {
-  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
-}
-type HomeStackNavigatorParams = CommonNavigatorParams & {
-  Home: undefined
-}
-type NotificationsStackNavigatorParams = CommonNavigatorParams & {
-  Notifications: undefined
-}
-type SearchStackNavigatorParams = CommonNavigatorParams & {
-  Search: undefined
-}
-type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>
+import {HomeScreen} from './screens/Home'
+import {SearchScreen} from './screens/Search'
+import {NotificationsScreen} from './screens/Notifications'
+import {SettingsScreen} from './screens/Settings'
+import {ProfileScreen} from './screens/Profile'
+import {ProfileFollowersScreen} from './screens/ProfileFollowers'
+import {ProfileFollowsScreen} from './screens/ProfileFollows'
+import {PostThreadScreen} from './screens/PostThread'
+import {PostUpvotedByScreen} from './screens/PostUpvotedBy'
+import {PostRepostedByScreen} from './screens/PostRepostedBy'
+import {DebugScreen} from './screens/Debug'
+import {LogScreen} from './screens/Log'

 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'
-    } else if (match === 'Search') {
-      container = 'SearchStack'
-    }
-    return {
-      routes: [
-        {
-          name: container,
-          state: {
-            routes: [{name: match, params}],
-          },
-        },
-      ],
+      return buildStateObject('NotificationsStack', 'Notifications', params)
    }
+    return buildStateObject('HomeStack', match, params)
  },
 }

-function HomeScreen({
-  navigation,
-}: NativeStackScreenProps<HomeStackNavigatorParams, 'Home'>) {
-  return (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <Text>Home 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 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 buildStateObject(stack: string, route: string, params: RouteParams) {
+  return {
+    routes: [
+      {
+        name: stack,
+        state: {
+          routes: [{name: route, params}],
+        },
+      },
+    ],
+  }
 }

 function DrawerContent() {
+  // TODO
  return (
    <View>
      <Text>Drawer</Text>
@@ -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,
-  },
-})
@@ -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',
  )
@@ -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(() => {
-    const softResetSub = store.onScreenSoftReset(scrollToTop)
-    const feedCleanup = store.me.mainFeed.registerListeners()
-    const pollInterval = setInterval(doPoll, 15e3)
-    const cleanup = () => {
-      clearInterval(pollInterval)
-      softResetSub.remove()
-      feedCleanup()
-    }
+  useFocusEffect(
+    React.useCallback(() => {
+      const softResetSub = store.onScreenSoftReset(scrollToTop)
+      const feedCleanup = store.me.mainFeed.registerListeners()
+      const pollInterval = setInterval(doPoll, 15e3)

-    // guard to only continue when transitioning from !visible -> visible
-    // TODO is this 100% needed? depends on if useEffect() is getting refired
-    //      for reasons other than `visible` changing -prf
-    if (!visible) {
-      setWasVisible(false)
-      return cleanup
-    } else if (wasVisible) {
-      return cleanup
-    }
-    setWasVisible(true)
+      screen('Feed')
+      store.log.debug('HomeScreen: Updating feed')
+      if (store.me.mainFeed.hasContent) {
+        store.me.mainFeed.update()
+      }

-    // just became visible
-    screen('Feed')
-    store.nav.setTitle(navIdx, 'Home')
-    store.log.debug('HomeScreen: Updating feed')
-    if (store.me.mainFeed.hasContent) {
-      store.me.mainFeed.update()
-    }
-    return cleanup
-  }, [
-    visible,
-    store,
-    store.me.mainFeed,
-    navIdx,
-    doPoll,
-    wasVisible,
-    scrollToTop,
-    screen,
-  ])
+      return () => {
+        clearInterval(pollInterval)
+        softResetSub.remove()
+        feedCleanup()
+      }
+    }, [store, doPoll, 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()
@@ -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(() => {
-    if (!visible) {
-      return
-    }
-    store.shell.setMinimalShellMode(false)
-    store.nav.setTitle(navIdx, 'Log')
-  }, [visible, store, navIdx])
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )

  const toggler = (id: string) => () => {
    if (expanded.includes(id)) {
@@ -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(() => {
-    if (!visible) {
-      // mark read when the user leaves the screen
-      store.me.notifications.markAllRead()
-      return
-    }
-    store.log.debug('NotificationsScreen: Updating feed')
-    const softResetSub = store.onScreenSoftReset(scrollToTop)
-    store.me.notifications.update()
-    screen('Notifications')
-    store.nav.setTitle(navIdx, 'Notifications')
-    return () => {
-      softResetSub.remove()
-    }
-  }, [visible, store, navIdx, screen, scrollToTop])
+  useFocusEffect(
+    React.useCallback(() => {
+      store.log.debug('NotificationsScreen: Updating feed')
+      const softResetSub = store.onScreenSoftReset(scrollToTop)
+      store.me.notifications.update()
+      screen('Notifications')
+
+      return () => {
+        softResetSub.remove()
+        store.me.notifications.markAllRead()
+      }
+    }, [store, screen, scrollToTop]),
+  )

  return (
    <View style={s.hContentRegion}>
@@ -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>
-  )
-}
@@ -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(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, 'Reposted by')
+  useFocusEffect(
+    React.useCallback(() => {
      store.shell.setMinimalShellMode(false)
-    }
-  }, [store, visible, navIdx])
+    }, [store]),
+  )

  return (
    <View>
@@ -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(() => {
-    let aborted = false
-    const threadCleanup = view.registerListeners()
-    const setTitle = () => {
-      const author = view.thread?.post.author
-      const niceName = author?.handle || name
-      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 => {
+  useFocusEffect(
+    React.useCallback(() => {
+      const threadCleanup = view.registerListeners()
+      store.shell.setMinimalShellMode(false)
+      if (!view.hasLoaded && !view.isLoading) {
+        view.setup().catch(err => {
          store.log.error('Failed to fetch thread', err)
-        },
-      )
-    }
-    return () => {
-      aborted = true
-      threadCleanup()
-    }
-  }, [visible, store.nav, store.log, store.shell, name, navIdx, view])
+        })
+      }
+      return () => {
+        threadCleanup()
+      }
+    }, [store, view]),
+  )

  const onPressReply = React.useCallback(() => {
    if (!view.thread) {
@@ -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(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, 'Liked by')
-    }
-  }, [store, visible, navIdx])
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )

  return (
    <View>
@@ -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}),
-    [params.name, store],
+    () => new ProfileUiModel(store, {user: route.params.name}),
+    [route.params.name, store],
  )

-  useEffect(() => {
-    store.nav.setTitle(navIdx, params.name)
-  }, [store, navIdx, params.name])
-
-  useEffect(() => {
-    let aborted = false
-    const feedCleanup = uiState.feed.registerListeners()
-    if (!visible) {
-      return feedCleanup
-    }
-    if (hasSetup) {
-      uiState.update()
-    } else {
-      uiState.setup().then(() => {
-        if (aborted) {
-          return
-        }
-        setHasSetup(true)
-      })
-    }
-    return () => {
-      aborted = true
-      feedCleanup()
-    }
-  }, [visible, store, hasSetup, uiState])
+  useFocusEffect(
+    React.useCallback(() => {
+      let aborted = false
+      const feedCleanup = uiState.feed.registerListeners()
+      if (hasSetup) {
+        uiState.update()
+      } else {
+        uiState.setup().then(() => {
+          if (aborted) {
+            return
+          }
+          setHasSetup(true)
+        })
+      }
+      return () => {
+        aborted = true
+        feedCleanup()
+      }
+    }, [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}
        />
@@ -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(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, `Followers of ${name}`)
+  useFocusEffect(
+    React.useCallback(() => {
      store.shell.setMinimalShellMode(false)
-    }
-  }, [store, visible, name, navIdx])
+    }, [store]),
+  )

  return (
    <View>
@@ -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(() => {
-    if (visible) {
-      store.nav.setTitle(navIdx, `Followed by ${name}`)
+  useFocusEffect(
+    React.useCallback(() => {
      store.shell.setMinimalShellMode(false)
-    }
-  }, [store, visible, name, navIdx])
+    }, [store]),
+  )

  return (
    <View>
@@ -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(() => {
-    const softResetSub = store.onScreenSoftReset(onSoftReset)
-    const cleanup = () => {
-      softResetSub.remove()
-    }
+  useFocusEffect(
+    React.useCallback(() => {
+      const softResetSub = store.onScreenSoftReset(onSoftReset)
+      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
-  }, [store, visible, name, navIdx, autocompleteView, lastRenderTime])
+
+      return cleanup
+    }, [store, autocompleteView, lastRenderTime, setRenderTime]),
+  )

  const onPressMenu = () => {
    track('ViewHeader:MenuButtonClicked')
@@ -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(() => {
-    const softResetSub = store.onScreenSoftReset(onSoftReset)
-    const cleanup = () => {
-      softResetSub.remove()
-    }
+  useFocusEffect(
+    React.useCallback(() => {
+      const softResetSub = store.onScreenSoftReset(onSoftReset)

-    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 cleanup
-  }, [store, visible, navIdx, lastRenderTime])
+
+      return () => {
+        softResetSub.remove()
+      }
+    }, [store, lastRenderTime, setRenderTime]),
+  )

  return (
    <ScrollView
@@ -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({
-  navIdx,
-  visible,
-}: ScreenParams) {
-  const theme = useTheme()
-  const pal = usePalette('default')
-  const store = useStores()
-  const {screen, track} = useAnalytics()
-  const [isSwitching, setIsSwitching] = React.useState(false)
+export const SettingsScreen = observer(
+  function Settings({}: NativeStackScreenProps<
+    CommonNavigatorParams,
+    'Settings'
+  >) {
+    const theme = useTheme()
+    const pal = usePalette('default')
+    const store = useStores()
+    const {screen, track} = useAnalytics()
+    const [isSwitching, setIsSwitching] = React.useState(false)

-  useEffect(() => {
-    screen('Settings')
-  }, [screen])
+    useFocusEffect(
+      React.useCallback(() => {
+        screen('Settings')
+        store.shell.setMinimalShellMode(false)
+      }, [screen, store]),
+    )

-  useEffect(() => {
-    if (!visible) {
-      return
-    }
-    store.shell.setMinimalShellMode(false)
-    store.nav.setTitle(navIdx, 'Settings')
-  }, [visible, store, navIdx])
-
-  const onPressSwitchAccount = async (acct: AccountData) => {
-    track('Settings:SwitchAccountButtonClicked')
-    setIsSwitching(true)
-    if (await store.session.resumeSession(acct)) {
+    const onPressSwitchAccount = async (acct: AccountData) => {
+      track('Settings:SwitchAccountButtonClicked')
+      setIsSwitching(true)
+      if (await store.session.resumeSession(acct)) {
+        setIsSwitching(false)
+        store.nav.tab.fixedTabReset()
+        Toast.show(`Signed in as ${acct.displayName || acct.handle}`)
+        return
+      }
      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}`)
-      return
+      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'})
    }
-    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 (
-    <View style={[s.hContentRegion]} testID="settingsScreen">
-      <ViewHeader title="Settings" />
-      <ScrollView style={s.hContentRegion}>
-        <View style={styles.spacer20} />
-        <View style={[s.flexRow, styles.heading]}>
-          <Text type="xl-bold" style={pal.text}>
-            Signed in as
-          </Text>
-          <View style={s.flex1} />
-        </View>
-        {isSwitching ? (
-          <View style={[pal.view, styles.linkCard]}>
-            <ActivityIndicator />
+    return (
+      <View style={[s.hContentRegion]} testID="settingsScreen">
+        <ViewHeader title="Settings" />
+        <ScrollView style={s.hContentRegion}>
+          <View style={styles.spacer20} />
+          <View style={[s.flexRow, styles.heading]}>
+            <Text type="xl-bold" style={pal.text}>
+              Signed in as
+            </Text>
+            <View style={s.flex1} />
          </View>
-        ) : (
-          <Link
-            href={`/profile/${store.me.handle}`}
-            title="Your profile"
-            noFeedback>
+          {isSwitching ? (
            <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}
-                  handle={store.me.handle || ''}
-                  avatar={store.me.avatar}
+                  displayName={account.displayName}
+                  handle={account.handle || ''}
+                  avatar={account.aviUrl}
                />
              </View>
              <View style={[s.flex1]}>
-                <Text type="md-bold" style={pal.text} numberOfLines={1}>
-                  {store.me.displayName || store.me.handle}
+                <Text type="md-bold" style={pal.text}>
+                  {account.displayName || account.handle}
                </Text>
-                <Text type="sm" style={pal.textLight} numberOfLines={1}>
-                  {store.me.handle}
+                <Text type="sm" style={pal.textLight}>
+                  {account.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 => (
+              <AccountDropdownBtn handle={account.handle} />
+            </TouchableOpacity>
+          ))}
          <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={account.displayName}
-                handle={account.handle || ''}
-                avatar={account.aviUrl}
+            testID="switchToNewAccountBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            onPress={isSwitching ? undefined : onPressAddAccount}>
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon="plus"
+                style={pal.text as FontAwesomeIconStyle}
              />
            </View>
-            <View style={[s.flex1]}>
-              <Text type="md-bold" style={pal.text}>
-                {account.displayName || account.handle}
-              </Text>
-              <Text type="sm" style={pal.textLight}>
-                {account.handle}
-              </Text>
-            </View>
-            <AccountDropdownBtn handle={account.handle} />
+            <Text type="lg" style={pal.text}>
+              Add account
+            </Text>
          </TouchableOpacity>
-        ))}
-        <TouchableOpacity
-          testID="switchToNewAccountBtn"
-          style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
-          onPress={isSwitching ? undefined : onPressAddAccount}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <FontAwesomeIcon
-              icon="plus"
-              style={pal.text as FontAwesomeIconStyle}
-            />
-          </View>
-          <Text type="lg" style={pal.text}>
-            Add account
+
+          <View style={styles.spacer20} />
+
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
+            Advanced
          </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]}>
-          Advanced
-        </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 type="xl-bold" style={[pal.text, styles.heading]}>
+            Danger zone
          </Text>
-        </TouchableOpacity>
-
-        <View style={styles.spacer20} />
-
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          Danger zone
-        </Text>
-        <TouchableOpacity
-          style={[pal.view, styles.linkCard]}
-          onPress={onPressDeleteAccount}>
-          <View
-            style={[
-              styles.iconContainer,
-              theme.colorScheme === 'dark'
-                ? styles.trashIconContainerDark
-                : styles.trashIconContainerLight,
-            ]}>
-            <FontAwesomeIcon
-              icon={['far', 'trash-can']}
+          <TouchableOpacity
+            style={[pal.view, styles.linkCard]}
+            onPress={onPressDeleteAccount}>
+            <View
+              style={[
+                styles.iconContainer,
+                theme.colorScheme === 'dark'
+                  ? styles.trashIconContainerDark
+                  : styles.trashIconContainerLight,
+              ]}>
+              <FontAwesomeIcon
+                icon={['far', 'trash-can']}
+                style={
+                  theme.colorScheme === 'dark'
+                    ? styles.dangerDark
+                    : styles.dangerLight
+                }
+                size={21}
+              />
+            </View>
+            <Text
+              type="lg"
              style={
                theme.colorScheme === 'dark'
                  ? styles.dangerDark
                  : styles.dangerLight
-              }
-              size={21}
-            />
-          </View>
-          <Text
-            type="lg"
-            style={
-              theme.colorScheme === 'dark'
-                ? styles.dangerDark
-                : styles.dangerLight
-            }>
-            Delete my account
-          </Text>
-        </TouchableOpacity>
+              }>
+              Delete my account
+            </Text>
+          </TouchableOpacity>

-        <View style={styles.spacer20} />
+          <View style={styles.spacer20} />

-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          Developer tools
-        </Text>
-        <Link
-          style={[pal.view, styles.linkCardNoIcon]}
-          href="/sys/log"
-          title="System log">
-          <Text type="lg" style={pal.text}>
-            System log
+          <Text type="xl-bold" style={[pal.text, styles.heading]}>
+            Developer tools
          </Text>
-        </Link>
-        <Link
-          style={[pal.view, styles.linkCardNoIcon]}
-          href="/sys/debug"
-          title="Debug tools">
-          <Text type="lg" style={pal.text}>
-            Storybook
+          <Link
+            style={[pal.view, styles.linkCardNoIcon]}
+            href="/sys/log"
+            title="System log">
+            <Text type="lg" style={pal.text}>
+              System log
+            </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>
-        <Text type="sm" style={[styles.buildInfo, pal.textLight]}>
-          Build version {AppInfo.appVersion} ({AppInfo.buildVersion})
-        </Text>
-        <View style={s.footerSpacer} />
-      </ScrollView>
-    </View>
-  )
-})
+          <View style={s.footerSpacer} />
+        </ScrollView>
+      </View>
+    )
+  },
+)

 function AccountDropdownBtn({handle}: {handle: string}) {
  const store = useStores()