Try fixing navigation

src/components/Header/Left.tsx

@@ -1,5 +1,6 @@
 import Icon, { IconName } from '@components/Icon'
 import CustomText from '@components/Text'
+import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@@ -9,7 +10,7 @@ export type Props = {
   native?: boolean
   background?: boolean
 
-  onPress: () => void
+  onPress?: () => void
 } & ({ type?: undefined; content?: IconName } | { type: 'text'; content: string })
 
 const HeaderLeft: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const HeaderLeft: React.FC<Props> = ({
   background = false,
   onPress
 }) => {
+  const navigation = useNavigation()
   const { colors } = useTheme()
 
   const children = () => {
@@ -40,7 +42,7 @@ const HeaderLeft: React.FC<Props> = ({
 
   return (
     <Pressable
-      onPress={onPress}
+      onPress={onPress ? onPress : () => navigation.goBack()}
       children={children()}
       style={{
         flexDirection: 'row',

src/components/Selections.tsx

@@ -1,18 +1,18 @@
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { Pressable, View } from 'react-native'
-import haptics from './haptics'
 import Icon from './Icon'
 import { ParseEmojis } from './Parse'
 import CustomText from './Text'
+import haptics from './haptics'
 
 export interface Props {
   title?: string
 
   multiple?: boolean
   options: { selected: boolean; content: string }[]
-  setOptions: React.Dispatch<React.SetStateAction<{ selected: boolean; content: string }[]>>
+  setOptions: React.Dispatch<React.SetStateAction<any>>
   disabled?: boolean
   invalid?: boolean
 }

src/screens/Compose/DraftsList.tsx

@@ -1,4 +1,3 @@
-import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import { SwipeToActions } from '@components/SwipeToActions'
 import CustomText from '@components/Text'
@@ -7,10 +6,10 @@ import { connectMedia } from '@utils/api/helpers/connect'
 import apiInstance from '@utils/api/instance'
 import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators'
 import { getAccountStorage, setAccountStorage, useAccountStorage } from '@utils/storage/actions'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import { Image } from 'expo-image'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, Modal, Pressable, View } from 'react-native'
 import ComposeContext from './utils/createContext'
@@ -35,13 +34,6 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
   const { colors } = useTheme()
   const { t } = useTranslation('screenCompose')
 
-  useEffect(() => {
-    navigation.setOptions({
-      title: t('content.draftsList.header.title'),
-      headerLeft: () => <HeaderLeft content='chevron-down' onPress={() => navigation.goBack()} />
-    })
-  }, [])
-
   const { composeDispatch } = useContext(ComposeContext)
   const [drafts] = useAccountStorage.object('drafts')
   const [checkingAttachments, setCheckingAttachments] = useState(false)

src/screens/Compose/EditAttachment.tsx

@@ -38,7 +38,6 @@ const ComposeEditAttachment: React.FC<
 
   useEffect(() => {
     navigation.setOptions({
-      title: t('screenCompose:content.editAttachment.header.title'),
       headerLeft: () => (
         <HeaderLeft
           content='chevron-down'

src/screens/Compose/index.tsx

@@ -414,12 +414,21 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
           <Stack.Screen
             name='Screen-Compose-DraftsList'
             component={ComposeDraftsList}
-            options={{ presentation: 'modal', headerShadowVisible: false }}
+            options={{
+              presentation: 'modal',
+              headerShadowVisible: false,
+              title: t('screenCompose:content.draftsList.header.title'),
+              headerLeft: () => <HeaderLeft content='chevron-down' />
+            }}
           />
           <Stack.Screen
             name='Screen-Compose-EditAttachment'
             component={ComposeEditAttachment}
-            options={{ presentation: 'modal', headerShadowVisible: false }}
+            options={{
+              presentation: 'modal',
+              headerShadowVisible: false,
+              title: t('screenCompose:content.editAttachment.header.title')
+            }}
           />
         </Stack.Navigator>
       </ComposeContext.Provider>

src/screens/Tabs/Local/index.tsx

@@ -4,15 +4,19 @@ import usePopToTop from '@utils/navigation/usePopToTop'
 import React from 'react'
 import TabShared from '../Shared'
 import Root from './Root'
+import { HeaderLeft } from '@components/Header'
 
 const Stack = createNativeStackNavigator<TabLocalStackParamList>()
 
 const TabLocal: React.FC = () => {
   usePopToTop('Tab-Local-Root')
+
   return (
-    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+    <Stack.Navigator
+      screenOptions={{ headerShadowVisible: false, headerLeft: () => <HeaderLeft /> }}
+    >
       <Stack.Screen name='Tab-Local-Root' component={Root} />
-      {TabShared({ Stack })}
+      {TabShared(Stack)}
     </Stack.Navigator>
   )
 }

src/screens/Tabs/Me/Preferences/Filter.tsx

@@ -51,7 +51,7 @@ const TabMePreferencesFilter: React.FC<
   const titleState = useState(params.type === 'edit' ? params.filter.title : '')
 
   const expirations = ['0', '1800', '3600', '43200', '86400', '604800', '18144000'] as const
-  const [expiration, setExpiration] = useState<typeof expirations[number]>('0')
+  const [expiration, setExpiration] = useState<(typeof expirations)[number]>('0')
 
   const [contexts, setContexts] = useState<
     {
@@ -226,8 +226,10 @@ const TabMePreferencesFilter: React.FC<
               cancelButtonIndex: expirations.length,
               ...androidActionSheetStyles(colors)
             },
-            (selectedIndex: number) => {
+            selectedIndex => {
-              selectedIndex < expirations.length && setExpiration(expirations[selectedIndex])
+              selectedIndex &&
+                selectedIndex < expirations.length &&
+                setExpiration(expirations[selectedIndex])
             }
           )
         }

src/screens/Tabs/Me/Profile/index.tsx

@@ -12,7 +12,7 @@ import TabMeProfileRoot from './Root'
 
 const Stack = createNativeStackNavigator<TabMeProfileStackParamList>()
 
-const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Switch'>> = ({ navigation }) => {
+const TabMeProfile: React.FC<TabMeStackScreenProps<'Tab-Me-Profile'>> = ({ navigation }) => {
   const { t } = useTranslation('screenTabs')
   const messageRef = useRef<FlashMessage>(null)
 

src/screens/Tabs/Me/index.tsx

@@ -156,7 +156,7 @@ const TabMe: React.FC = () => {
         })}
       />
 
-      {TabShared({ Stack })}
+      {TabShared(Stack)}
     </Stack.Navigator>
   )
 }

src/screens/Tabs/Notifications/index.tsx

@@ -54,7 +54,7 @@ const TabNotifications: React.FC = () => {
         component={TabNotificationsFilters}
         options={{ presentation: 'modal', gestureEnabled: false }}
       />
-      {TabShared({ Stack })}
+      {TabShared(Stack)}
     </Stack.Navigator>
   )
 }

src/screens/Tabs/Public/index.tsx

@@ -12,7 +12,7 @@ const TabPublic: React.FC = () => {
   return (
     <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
       <Stack.Screen name='Tab-Public-Root' component={Root} />
-      {TabShared({ Stack })}
+      {TabShared(Stack)}
     </Stack.Navigator>
   )
 }

src/screens/Tabs/Shared/Account/index.tsx

@@ -1,17 +1,17 @@
-import menuAccount from '@components/contextMenu/account'
+import { HeaderRight } from '@components/Header'
-import menuShare from '@components/contextMenu/share'
-import { HeaderLeft, HeaderRight } from '@components/Header'
 import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
+import menuAccount from '@components/contextMenu/account'
+import menuShare from '@components/contextMenu/share'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { queryClient } from '@utils/queryHooks'
 import { useAccountQuery } from '@utils/queryHooks/account'
 import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useAccountStorage } from '@utils/storage/actions'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import React, { Fragment, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, Text, View } from 'react-native'
@@ -65,8 +65,6 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
     navigation.setOptions({
       headerTransparent: true,
       headerStyle: { backgroundColor: `rgba(255, 255, 255, 0)` },
-      title: '',
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
       headerRight: () => {
         return (
           <DropdownMenu.Root>

src/screens/Tabs/Shared/AccountInLists.tsx

@@ -1,6 +1,5 @@
 import Button from '@components/Button'
 import haptics from '@components/haptics'
-import { HeaderRight } from '@components/Header'
 import { MenuRow } from '@components/Menu'
 import CustomText from '@components/Text'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
@@ -8,14 +7,13 @@ import { useAccountInListsQuery } from '@utils/queryHooks/account'
 import { useListAccountsMutation, useListsQuery } from '@utils/queryHooks/lists'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SectionList, View } from 'react-native'
 
 const TabSharedAccountInLists: React.FC<
   TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'>
 > = ({
-  navigation,
   route: {
     params: { account }
   }
@@ -23,20 +21,6 @@ const TabSharedAccountInLists: React.FC<
   const { colors } = useTheme()
   const { t } = useTranslation(['common', 'screenTabs'])
 
-  useEffect(() => {
-    navigation.setOptions({
-      presentation: 'modal',
-      title: t('screenTabs:shared.accountInLists.name', { username: account.username }),
-      headerRight: () => (
-        <HeaderRight
-          type='text'
-          content={t('common:buttons.done')}
-          onPress={() => navigation.pop(1)}
-        />
-      )
-    })
-  }, [])
-
   const listsQuery = useListsQuery()
   const accountInListsQuery = useAccountInListsQuery({ id: account.id })
 

src/screens/Tabs/Shared/Attachments.tsx

@@ -1,12 +1,7 @@
-import { HeaderLeft } from '@components/Header'
-import { ParseEmojis } from '@components/Parse'
-import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
-import { Trans } from 'react-i18next'
 
 const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attachments'>> = ({
   navigation,
@@ -14,33 +9,7 @@ const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attac
     params: { account }
   }
 }) => {
-  const { colors } = useTheme()
-
   useEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
-      headerTitle: () => (
-        <CustomText numberOfLines={1}>
-          <Trans
-            ns='screenTabs'
-            i18nKey='shared.attachments.name'
-            components={[
-              <ParseEmojis
-                content={account.display_name || account.username}
-                emojis={account.emojis}
-                fontBold
-              />,
-              <CustomText
-                fontStyle='M'
-                style={{ color: colors.primaryDefault }}
-                fontWeight='Bold'
-              />
-            ]}
-          />
-        </CustomText>
-      ),
-      headerBackVisible: false
-    })
     navigation.setParams({ queryKey })
   }, [])
 

src/screens/Tabs/Shared/Filter.tsx

@@ -1,6 +1,5 @@
 import Button from '@components/Button'
 import { Filter } from '@components/Filter'
-import { HeaderRight } from '@components/Header'
 import Hr from '@components/Hr'
 import CustomText from '@components/Text'
 import { featureCheck } from '@utils/helpers/featureCheck'
@@ -8,7 +7,7 @@ import { TabSharedStackScreenProps, useNavState } from '@utils/navigation/naviga
 import { useFilterMutation, useFiltersQuery } from '@utils/queryHooks/filters'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { SectionList, View } from 'react-native'
 
@@ -24,19 +23,6 @@ const TabSharedFilter: React.FC<TabSharedStackScreenProps<'Tab-Shared-Filter'>>
   const { colors } = useTheme()
   const { t } = useTranslation(['common', 'screenTabs'])
 
-  useEffect(() => {
-    navigation.setOptions({
-      title: t('screenTabs:shared.filter.name'),
-      headerRight: () => (
-        <HeaderRight
-          type='text'
-          content={t('common:buttons.done')}
-          onPress={() => navigation.goBack()}
-        />
-      )
-    })
-  }, [])
-
   const { data, isFetching, refetch } = useFiltersQuery<'v2'>({ version: 'v2' })
   const sections = [
     {

src/screens/Tabs/Shared/Hashtag.tsx

@@ -1,5 +1,5 @@
 import menuHashtag from '@components/contextMenu/hashtag'
-import { HeaderLeft, HeaderRight } from '@components/Header'
+import { HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import { featureCheck } from '@utils/helpers/featureCheck'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
@@ -20,10 +20,6 @@ const TabSharedHashtag: React.FC<TabSharedStackScreenProps<'Tab-Shared-Hashtag'>
   const mHashtag = menuHashtag({ tag_name, queryKey })
 
   useEffect(() => {
-    navigation.setOptions({
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
-      title: `#${decodeURIComponent(tag_name)}`
-    })
     navigation.setParams({ queryKey: queryKey })
   }, [])
 

src/screens/Tabs/Shared/History.tsx

@@ -1,4 +1,3 @@
-import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import { ParseEmojis } from '@components/Parse'
 import ComponentSeparator from '@components/Separator'
@@ -12,8 +11,7 @@ import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { diffChars, diffWords } from 'diff'
-import React, { useEffect } from 'react'
+import React from 'react'
-import { useTranslation } from 'react-i18next'
 import { FlatList, View } from 'react-native'
 
 const SCRIPTS_WITHOUT_BOUNDARIES = [
@@ -136,21 +134,12 @@ const ContentView: React.FC<{
 }
 
 const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
-  navigation,
   route: {
     params: { status, detectedLanguage }
   }
 }) => {
-  const { t } = useTranslation('screenTabs')
   const { data } = useStatusHistory({ status })
 
-  useEffect(() => {
-    navigation.setOptions({
-      title: t('shared.history.name'),
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-    })
-  }, [])
-
   const dataReversed = data ? [...data].reverse() : []
 
   const withoutBoundary = !!SCRIPTS_WITHOUT_BOUNDARIES.filter(script =>

src/screens/Tabs/Shared/Mute.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
 
-const TabSharedMute: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>> = ({
+const TabSharedMute: React.FC<TabSharedStackScreenProps<'Tab-Shared-Mute'>> = ({
   navigation,
   route: {
     params: { account }
@@ -47,14 +47,6 @@ const TabSharedMute: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>> =
 
   useEffect(() => {
     navigation.setOptions({
-      title: t('screenTabs:shared.mute.name', { acct: `@${account.acct}` }),
-      headerLeft: () => (
-        <HeaderLeft
-          type='text'
-          content={t('common:buttons.cancel')}
-          onPress={() => navigation.goBack()}
-        />
-      ),
       headerRight: () => (
         <HeaderRight
           type='text'

src/screens/Tabs/Shared/Report.tsx

@@ -1,5 +1,5 @@
 import ComponentAccount from '@components/Account'
-import { HeaderLeft, HeaderRight } from '@components/Header'
+import { HeaderRight } from '@components/Header'
 import { ModalScrollView } from '@components/ModalScrollView'
 import Selections from '@components/Selections'
 import CustomText from '@components/Text'
@@ -38,14 +38,6 @@ const TabSharedReport: React.FC<TabSharedStackScreenProps<'Tab-Shared-Report'>>
   const [isReporting, setIsReporting] = useState(false)
   useEffect(() => {
     navigation.setOptions({
-      title: t('screenTabs:shared.report.name', { acct: `@${account.acct}` }),
-      headerLeft: () => (
-        <HeaderLeft
-          type='text'
-          content={t('common:buttons.cancel')}
-          onPress={() => navigation.goBack()}
-        />
-      ),
       headerRight: () => (
         <HeaderRight
           type='text'

src/screens/Tabs/Shared/Search/index.tsx

@@ -1,13 +1,12 @@
 import ComponentAccount from '@components/Account'
 import ComponentHashtag from '@components/Hashtag'
-import { HeaderLeft } from '@components/Header'
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useSearchQuery } from '@utils/queryHooks/search'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import { debounce } from 'lodash'
 import React, { useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
@@ -24,7 +23,6 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
   const [searchTerm, setSearchTerm] = useState<string>('')
   useEffect(() => {
     navigation.setOptions({
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
       headerTitle: () => {
         return (
           <View
@@ -73,8 +71,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
             />
           </View>
         )
-      },
+      }
-      headerBackVisible: false
     })
   }, [mode])
   useEffect(() => {

src/screens/Tabs/Shared/Toot.tsx

@@ -1,8 +1,6 @@
-import { HeaderLeft } from '@components/Header'
+import { HeaderRight } from '@components/Header'
-import Icon from '@components/Icon'
 import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
-import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
 import { useQuery } from '@tanstack/react-query'
 import apiGeneral from '@utils/api/general'
@@ -17,7 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, FlatList, Platform, Pressable, View } from 'react-native'
+import { Alert, FlatList, Platform, View } from 'react-native'
 import { Path, Svg } from 'react-native-svg'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
@@ -38,38 +36,20 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   const flRef = useRef<FlatList<Mastodon.Status & { _level?: number }>>(null)
 
   useEffect(() => {
-    navigation.setOptions({
+    hasRemoteContent &&
-      headerTitle: () => (
+      navigation.setOptions({
-        <Pressable
+        headerRight: () => (
-          style={{ flexDirection: 'row', alignItems: 'center' }}
+          <HeaderRight
-          disabled={!hasRemoteContent}
+            content='wifi'
-          onPress={() =>
+            onPress={() =>
-            Alert.alert(
+              Alert.alert(
-              t('screenTabs:shared.toot.remoteFetch.title'),
+                t('screenTabs:shared.toot.remoteFetch.title'),
-              t('screenTabs:shared.toot.remoteFetch.message')
+                t('screenTabs:shared.toot.remoteFetch.message')
-            )
+              )
-          }
+            }
-        >
-          {hasRemoteContent ? (
-            <Icon
-              name='wifi'
-              size={StyleConstants.Font.Size.M}
-              color={colors.primaryDefault}
-              style={{ marginRight: StyleConstants.Spacing.S }}
-            />
-          ) : null}
-          <CustomText
-            style={{ color: colors.primaryDefault }}
-            fontSize='L'
-            fontWeight='Bold'
-            numberOfLines={1}
-            children={t('screenTabs:shared.toot.name')}
           />
-        </Pressable>
+        )
-      ),
+      })
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
-      headerBackVisible: false
-    })
     navigation.setParams({ queryKey: queryKey.local })
   }, [hasRemoteContent])
 

src/screens/Tabs/Shared/Users.tsx

@@ -1,5 +1,4 @@
 import ComponentAccount from '@components/Account'
-import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import { Loading } from '@components/Loading'
 import ComponentSeparator from '@components/Separator'
@@ -9,7 +8,7 @@ import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
 import { flattenPages } from '@utils/queryHooks/utils'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
@@ -20,14 +19,6 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
 }) => {
   const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
-  useEffect(() => {
-    navigation.setOptions({
-      title: t(`shared.users.${params.reference}.${params.type}`, {
-        count: params.count
-      } as any) as any,
-      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-    })
-  }, [])
 
   const queryKey: QueryKeyUsers = ['Users', params]
   const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({

src/screens/Tabs/Shared/index.tsx

@@ -1,3 +1,5 @@
+import { HeaderLeft, HeaderRight } from '@components/Header'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import TabSharedAccount from '@screens/Tabs/Shared/Account'
 import TabSharedAccountInLists from '@screens/Tabs/Shared/AccountInLists'
 import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@@ -8,58 +10,166 @@ import TabSharedSearch from '@screens/Tabs/Shared/Search'
 import TabSharedToot from '@screens/Tabs/Shared/Toot'
 import TabSharedUsers from '@screens/Tabs/Shared/Users'
 import React from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import TabSharedFilter from './Filter'
 import TabSharedMute from './Mute'
+import {
+  TabLocalStackParamList,
+  TabMeStackParamList,
+  TabNotificationsStackParamList,
+  TabPublicStackParamList
+} from '@utils/navigation/navigators'
+import CustomText from '@components/Text'
+import { ParseEmojis } from '@components/Parse'
+import { useTheme } from '@utils/styles/ThemeManager'
+
+const TabShared = (
+  Stack: ReturnType<
+    typeof createNativeStackNavigator<
+      | TabLocalStackParamList
+      | TabPublicStackParamList
+      | TabNotificationsStackParamList
+      | TabMeStackParamList
+    >
+  >
+) => {
+  const { colors } = useTheme()
+  const { t } = useTranslation(['common', 'screenTabs'])
 
-const TabShared = ({ Stack }: { Stack: any }) => {
   return (
     <Stack.Group>
       <Stack.Screen
-        key='Tab-Shared-Account'
         name='Tab-Shared-Account'
         component={TabSharedAccount}
+        options={{
+          title: '',
+          headerLeft: () => <HeaderLeft background />
+        }}
       />
       <Stack.Screen
-        key='Tab-Shared-Account-In-Lists'
         name='Tab-Shared-Account-In-Lists'
         component={TabSharedAccountInLists}
+        options={({
+          navigation,
+          route: {
+            params: {
+              account: { username }
+            }
+          }
+        }) => ({
+          presentation: 'modal',
+          title: t('screenTabs:shared.accountInLists.name', { username: username }),
+          headerRight: () => (
+            <HeaderRight
+              type='text'
+              content={t('common:buttons.done')}
+              onPress={() => navigation.pop(1)}
+            />
+          )
+        })}
       />
       <Stack.Screen
-        key='Tab-Shared-Attachments'
         name='Tab-Shared-Attachments'
         component={TabSharedAttachments}
+        options={({
+          route: {
+            params: { account }
+          }
+        }) => ({
+          headerTitle: () => (
+            <CustomText numberOfLines={1}>
+              <Trans
+                ns='screenTabs'
+                i18nKey='shared.attachments.name'
+                components={[
+                  <ParseEmojis
+                    content={account.display_name || account.username}
+                    emojis={account.emojis}
+                    fontBold
+                  />,
+                  <CustomText
+                    fontStyle='M'
+                    style={{ color: colors.primaryDefault }}
+                    fontWeight='Bold'
+                  />
+                ]}
+              />
+            </CustomText>
+          )
+        })}
       />
       <Stack.Screen
-        key='Tab-Shared-Filter'
         name='Tab-Shared-Filter'
         component={TabSharedFilter}
-        options={{ presentation: 'modal' }}
+        options={({ navigation }) => ({
+          presentation: 'modal',
+          title: t('screenTabs:shared.filter.name'),
+          headerRight: () => (
+            <HeaderRight
+              type='text'
+              content={t('common:buttons.done')}
+              onPress={() => navigation.goBack()}
+            />
+          )
+        })}
       />
       <Stack.Screen
-        key='Tab-Shared-Hashtag'
         name='Tab-Shared-Hashtag'
         component={TabSharedHashtag}
+        options={({
+          route: {
+            params: { tag_name }
+          }
+        }) => ({ title: `#${decodeURIComponent(tag_name)}` })}
       />
       <Stack.Screen
-        key='Tab-Shared-History'
         name='Tab-Shared-History'
         component={TabSharedHistory}
+        options={{ title: t('screenTabs:shared.history.name') }}
       />
       <Stack.Screen
-        key='Tab-Shared-Mute'
         name='Tab-Shared-Mute'
         component={TabSharedMute}
-        options={{ presentation: 'modal' }}
+        options={({
+          route: {
+            params: {
+              account: { acct }
+            }
+          }
+        }) => ({
+          presentation: 'modal',
+          headerLeft: () => <HeaderLeft type='text' content={t('common:buttons.cancel')} />,
+          title: t('screenTabs:shared.mute.name', { acct: `@${acct}` })
+        })}
       />
       <Stack.Screen
-        key='Tab-Shared-Report'
         name='Tab-Shared-Report'
         component={TabSharedReport}
-        options={{ presentation: 'modal' }}
+        options={({
+          route: {
+            params: { account }
+          }
+        }) => ({
+          presentation: 'modal',
+          headerLeft: () => <HeaderLeft type='text' content={t('common:buttons.cancel')} />,
+          title: t('screenTabs:shared.report.name', { acct: `@${account.acct}` })
+        })}
       />
       <Stack.Screen key='Tab-Shared-Search' name='Tab-Shared-Search' component={TabSharedSearch} />
-      <Stack.Screen key='Tab-Shared-Toot' name='Tab-Shared-Toot' component={TabSharedToot} />
+      <Stack.Screen
-      <Stack.Screen key='Tab-Shared-Users' name='Tab-Shared-Users' component={TabSharedUsers} />
+        name='Tab-Shared-Toot'
+        component={TabSharedToot}
+        options={{ title: t('screenTabs:shared.toot.name') }}
+      />
+      <Stack.Screen
+        name='Tab-Shared-Users'
+        component={TabSharedUsers}
+        options={({ route: { params } }) => ({
+          title: t(`shared.users.${params.reference}.${params.type}`, {
+            count: params.count
+          } as any) as any
+        })}
+      />
     </Stack.Group>
   )
 }