React Navigation v6 first try

Android header needs attention
2025-06-05 22:19:13 +02:00 · 2021-08-21 01:45:43 +02:00
parent bc72e637bb
commit b821fc4d16
14 changed files with 563 additions and 567 deletions
--- a/src/Screens.tsx
+++ b/src/Screens.tsx
@ -1,8 +1,9 @@
-import { HeaderCenter, HeaderLeft } from '@components/Header'
+import { HeaderLeft } from '@components/Header'
 import { displayMessage, Message, removeMessage } from '@components/Message'
 import navigationRef from '@helpers/navigationRef'
 import { useNetInfo } from '@react-native-community/netinfo'
 import { NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import ScreenActions from '@screens/Actions'
 import ScreenAnnouncements from '@screens/Announcements'
 import ScreenCompose from '@screens/Compose'
@ -22,7 +23,6 @@ import { addScreenshotListener } from 'expo-screen-capture'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, StatusBar } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { onlineManager, useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
@ -166,8 +166,8 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
            name='Screen-Actions'
            component={ScreenActions}
            options={{
-              stackPresentation: 'transparentModal',
-              stackAnimation: 'fade',
+              presentation: 'transparentModal',
+              animation: 'fade',
              headerShown: false
            }}
          />
@ -175,38 +175,33 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
            name='Screen-Announcements'
            component={ScreenAnnouncements}
            options={({ navigation }) => ({
-              stackPresentation: 'transparentModal',
-              stackAnimation: 'fade',
+              presentation: 'transparentModal',
+              animation: 'fade',
              headerShown: true,
-              headerHideShadow: true,
-              headerTopInsetEnabled: false,
+              headerShadowVisible: false,
+              headerTransparent: true,
              headerStyle: { backgroundColor: 'transparent' },
              headerLeft: () => (
                <HeaderLeft content='X' onPress={() => navigation.goBack()} />
              ),
-              headerTitle: t('screenAnnouncements:heading'),
-              ...(Platform.OS === 'android' && {
-                headerCenter: () => (
-                  <HeaderCenter content={t('screenAnnouncements:heading')} />
-                )
-              })
+              headerTitle: t('screenAnnouncements:heading')
            })}
          />
          <Stack.Screen
            name='Screen-Compose'
            component={ScreenCompose}
            options={{
-              stackPresentation: 'fullScreenModal',
-              ...(Platform.OS === 'android' && { headerShown: false })
+              headerShown: false,
+              presentation: 'fullScreenModal'
            }}
          />
          <Stack.Screen
            name='Screen-ImagesViewer'
            component={ScreenImagesViewer}
            options={{
-              stackPresentation: 'fullScreenModal',
-              stackAnimation: 'fade',
-              ...(Platform.OS === 'android' && { headerShown: false })
+              headerShown: false,
+              presentation: 'fullScreenModal',
+              animation: 'fade'
            }}
          />
        </Stack.Navigator>
--- a/src/screens/Compose.tsx
+++ b/src/screens/Compose.tsx
@ -1,5 +1,6 @@
 import analytics from '@components/analytics'
 import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { StackScreenProps } from '@react-navigation/stack'
 import haptics from '@root/components/haptics'
 import formatText from '@screens/Compose/formatText'
@ -31,7 +32,6 @@ import {
  StyleSheet
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { useQueryClient } from 'react-query'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Sentry from 'sentry-expo'
@ -371,10 +371,7 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
        edges={hasKeyboard ? ['top'] : ['top', 'bottom']}
      >
        <ComposeContext.Provider value={{ composeState, composeDispatch }}>
-          <Stack.Navigator
-            screenOptions={{ headerTopInsetEnabled: false }}
-            initialRouteName='Screen-Compose-Root'
-          >
+          <Stack.Navigator initialRouteName='Screen-Compose-Root'>
            <Stack.Screen
              name='Screen-Compose-Root'
              component={ComposeRoot}
@ -405,18 +402,12 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
            <Stack.Screen
              name='Screen-Compose-DraftsList'
              component={ComposeDraftsList}
-              options={{
-                stackPresentation: 'modal',
-                ...(Platform.OS === 'android' && { headerShown: false })
-              }}
+              options={{ headerShown: false, presentation: 'modal' }}
            />
            <Stack.Screen
              name='Screen-Compose-EditAttachment'
              component={ComposeEditAttachment}
-              options={{
-                stackPresentation: 'modal',
-                ...(Platform.OS === 'android' && { headerShown: false })
-              }}
+              options={{ headerShown: false, presentation: 'modal' }}
            />
          </Stack.Navigator>
        </ComposeContext.Provider>
--- a/src/screens/Compose/DraftsList.tsx
+++ b/src/screens/Compose/DraftsList.tsx
@ -1,9 +1,9 @@
 import { HeaderCenter, HeaderLeft } from '@components/Header'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import ComposeDraftsListRoot from './DraftsList/Root'

 const Stack = createNativeStackNavigator()
@ -37,7 +37,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
  )

  return (
-    <Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
+    <Stack.Navigator>
      <Stack.Screen
        name='Screen-Compose-EditAttachment-Root'
        children={children}
@ -49,7 +49,7 @@ const ComposeDraftsList: React.FC<ScreenComposeEditAttachmentProp> = ({
              <HeaderCenter content={t('content.draftsList.header.title')} />
            )
          }),
-          headerHideShadow: true
+          headerShadowVisible: false
        }}
      />
    </Stack.Navigator>
--- a/src/screens/Compose/EditAttachment.tsx
+++ b/src/screens/Compose/EditAttachment.tsx
@ -1,10 +1,10 @@
-import { HeaderCenter, HeaderLeft } from '@components/Header'
+import { HeaderLeft } from '@components/Header'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { KeyboardAvoidingView, Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import ComposeEditAttachmentRoot from './EditAttachment/Root'
 import ComposeEditAttachmentSubmit from './EditAttachment/Submit'

@ -45,21 +45,14 @@ const ComposeEditAttachment: React.FC<ScreenComposeEditAttachmentProp> = ({
      style={{ flex: 1 }}
    >
      <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
-        <Stack.Navigator screenOptions={{ headerTopInsetEnabled: false }}>
+        <Stack.Navigator>
          <Stack.Screen
            name='Screen-Compose-EditAttachment-Root'
            children={children}
            options={{
              headerLeft,
              headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
-              headerTitle: t('content.editAttachment.header.title'),
-              ...(Platform.OS === 'android' && {
-                headerCenter: () => (
-                  <HeaderCenter
-                    content={t('content.editAttachment.header.title')}
-                  />
-                )
-              })
+              headerTitle: t('content.editAttachment.header.title')
            }}
          />
        </Stack.Navigator>
--- a/src/screens/Tabs.tsx
+++ b/src/screens/Tabs.tsx
@ -52,7 +52,12 @@ const ScreenTabs = React.memo(

    const screenOptions = useCallback(
      ({ route }): BottomTabNavigationOptions => ({
-        tabBarVisible: instanceActive !== -1,
+        headerShown: false,
+        tabBarActiveTintColor: theme.primaryDefault,
+        tabBarInactiveTintColor: theme.secondary,
+        tabBarShowLabel: false,
+        ...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
+        tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
        tabBarIcon: ({
          focused,
          color,
@ -95,15 +100,7 @@ const ScreenTabs = React.memo(
      }),
      [instanceAccount?.avatarStatic, instanceActive]
    )
-    const tabBarOptions = useMemo(
-      () => ({
-        activeTintColor: theme.primaryDefault,
-        inactiveTintColor: theme.secondary,
-        showLabel: false,
-        ...(Platform.OS === 'android' && { keyboardHidesTabBar: true })
-      }),
-      [mode]
-    )
+
    const composeListeners = useMemo(
      () => ({
        tabPress: (e: any) => {
@ -133,7 +130,6 @@ const ScreenTabs = React.memo(
      <Tab.Navigator
        initialRouteName={instanceActive !== -1 ? previousTab : 'Tab-Me'}
        screenOptions={screenOptions}
-        tabBarOptions={tabBarOptions}
      >
        <Tab.Screen name='Tab-Local' component={TabLocal} />
        <Tab.Screen name='Tab-Public' component={TabPublic} />
--- a/src/screens/Tabs/Local.tsx
+++ b/src/screens/Tabs/Local.tsx
@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { ScreenTabsParamList } from '@screens/Tabs'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import sharedScreens from './Shared/sharedScreens'

 export type TabLocalProp = BottomTabScreenProps<
@ -22,13 +22,6 @@ const TabLocal = React.memo(
  ({ navigation }: TabLocalProp) => {
    const { t, i18n } = useTranslation('screenTabs')

-    const screenOptions = useMemo(
-      () => ({
-        headerHideShadow: true,
-        headerTopInsetEnabled: false
-      }),
-      []
-    )
    const screenOptionsRoot = useMemo(
      () => ({
        headerTitle: t('tabs.local.name'),
@ -64,7 +57,7 @@ const TabLocal = React.memo(
    )

    return (
-      <Stack.Navigator screenOptions={screenOptions}>
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
        <Stack.Screen
          name='Tab-Local-Root'
          options={screenOptionsRoot}
--- a/src/screens/Tabs/Me.tsx
+++ b/src/screens/Tabs/Me.tsx
@ -1,8 +1,8 @@
 import { HeaderCenter, HeaderLeft } from '@components/Header'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import TabMeBookmarks from './Me/Bookmarks'
 import TabMeConversations from './Me/Cconversations'
 import TabMeFavourites from './Me/Favourites'
@ -23,16 +23,14 @@ const TabMe = React.memo(
    const { t } = useTranslation('screenTabs')

    return (
-      <Stack.Navigator
-        screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
-      >
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
        <Stack.Screen
          name='Tab-Me-Root'
          component={TabMeRoot}
          options={{
-            headerTranslucent: true,
+            headerShadowVisible: false,
            headerStyle: { backgroundColor: 'rgba(255, 255, 255, 0)' },
-            headerCenter: () => null
+            headerShown: false
          }}
        />
        <Stack.Screen
@ -108,15 +106,15 @@ const TabMe = React.memo(
          name='Tab-Me-Profile'
          component={TabMeProfile}
          options={{
-            stackPresentation: 'modal',
-            ...(Platform.OS === 'android' && { headerShown: false })
+            headerShown: false,
+            presentation: 'modal'
          }}
        />
        <Stack.Screen
          name='Tab-Me-Push'
          component={TabMePush}
          options={({ navigation }) => ({
-            stackPresentation: 'modal',
+            presentation: 'modal',
            headerShown: true,
            headerTitle: t('me.stacks.push.name'),
            ...(Platform.OS === 'android' && {
@ -162,7 +160,7 @@ const TabMe = React.memo(
          name='Tab-Me-Switch'
          component={TabMeSwitch}
          options={({ navigation }) => ({
-            stackPresentation: 'modal',
+            presentation: 'modal',
            headerShown: true,
            headerTitle: t('me.stacks.switch.name'),
            ...(Platform.OS === 'android' && {
--- a/src/screens/Tabs/Me/Profile.tsx
+++ b/src/screens/Tabs/Me/Profile.tsx
@ -1,11 +1,11 @@
 import { HeaderCenter, HeaderLeft } from '@components/Header'
 import { Message } from '@components/Message'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { KeyboardAvoidingView, Platform } from 'react-native'
 import FlashMessage from 'react-native-flash-message'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import TabMeProfileFields from './Profile/Fields'
 import TabMeProfileName from './Profile/Name'
 import TabMeProfileNote from './Profile/Note'
@ -25,9 +25,7 @@ const TabMeProfile: React.FC<StackScreenProps<
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
-      <Stack.Navigator
-        screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
-      >
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
        <Stack.Screen
          name='Tab-Me-Profile-Root'
          options={{
--- a/src/screens/Tabs/Notifications.tsx
+++ b/src/screens/Tabs/Notifications.tsx
@ -3,12 +3,12 @@ import { HeaderCenter, HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineNotifications from '@components/Timeline/Notifications'
 import { useNavigation } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'

 const Stack = createNativeStackNavigator<Nav.TabNotificationsStackParamList>()

@ -17,13 +17,6 @@ const TabNotifications = React.memo(
    const navigation = useNavigation()
    const { t, i18n } = useTranslation('screenTabs')

-    const screenOptions = useMemo(
-      () => ({
-        headerHideShadow: true,
-        headerTopInsetEnabled: false
-      }),
-      []
-    )
    const screenOptionsRoot = useMemo(
      () => ({
        headerTitle: t('tabs.notifications.name'),
@ -62,7 +55,7 @@ const TabNotifications = React.memo(
    )

    return (
-      <Stack.Navigator screenOptions={screenOptions}>
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
        <Stack.Screen
          name='Tab-Notifications-Root'
          children={children}
--- a/src/screens/Tabs/Public.tsx
+++ b/src/screens/Tabs/Public.tsx
@ -4,6 +4,7 @@ import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import SegmentedControl from '@react-native-community/segmented-control'
 import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { ScreenTabsParamList } from '@screens/Tabs'
 import sharedScreens from '@screens/Tabs/Shared/sharedScreens'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
@ -11,7 +12,6 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, StyleSheet } from 'react-native'
-import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import { TabView } from 'react-native-tab-view'

 export type TabPublicProps = BottomTabScreenProps<
@ -40,16 +40,9 @@ const TabPublic = React.memo(
        key: 'Local'
      }
    ]
-    const screenOptions = useMemo(
-      () => ({
-        headerHideShadow: true,
-        headerTopInsetEnabled: false
-      }),
-      []
-    )
    const screenOptionsRoot = useMemo(
      () => ({
-        headerCenter: () => (
+        headerTitle: () => (
          <SegmentedControl
            appearance={mode}
            values={pages.map(p => p.title)}
@ -113,7 +106,7 @@ const TabPublic = React.memo(
    )

    return (
-      <Stack.Navigator screenOptions={screenOptions}>
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
        <Stack.Screen
          name='Tab-Public-Root'
          options={screenOptionsRoot}
--- a/src/screens/Tabs/Shared/sharedScreens.tsx
+++ b/src/screens/Tabs/Shared/sharedScreens.tsx
@ -1,6 +1,15 @@
 import { HeaderCenter, HeaderLeft } from '@components/Header'
 import { ParseEmojis } from '@components/Parse'
-import { StackNavigationState, TypedNavigator } from '@react-navigation/native'
+import {
+  ParamListBase,
+  StackNavigationState,
+  TypedNavigator
+} from '@react-navigation/native'
+import {
+  NativeStackNavigationEventMap,
+  NativeStackNavigationOptions,
+  NativeStackNavigatorProps
+} from '@react-navigation/native-stack/lib/typescript/src/types'
 import { StackScreenProps } from '@react-navigation/stack'
 import TabSharedAccount from '@screens/Tabs/Shared/Account'
 import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@ -14,11 +23,6 @@ import { debounce } from 'lodash'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
-import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript/native-stack'
-import {
-  NativeStackNavigationEventMap,
-  NativeStackNavigatorProps
-} from 'react-native-screens/lib/typescript/native-stack/types'

 export type BaseScreens =
  | Nav.TabLocalStackParamList
@ -52,175 +56,184 @@ export type SharedUsersProp = StackScreenProps<BaseScreens, 'Tab-Shared-Users'>

 const sharedScreens = (
  Stack: TypedNavigator<
-    BaseScreens,
-    StackNavigationState<Record<string, object | undefined>>,
+    Nav.TabLocalStackParamList,
+    StackNavigationState<ParamListBase>,
    NativeStackNavigationOptions,
    NativeStackNavigationEventMap,
-    ({ ...rest }: NativeStackNavigatorProps) => JSX.Element
+    ({}: NativeStackNavigatorProps) => JSX.Element
  >
 ) => {
  const { mode, theme } = useTheme()
  const { t } = useTranslation('screenTabs')

-  return [
-    <Stack.Screen
-      key='Tab-Shared-Account'
-      name='Tab-Shared-Account'
-      component={TabSharedAccount}
-      options={({ navigation }: SharedAccountProp) => {
-        return {
-          headerTranslucent: true,
-          headerStyle: {
-            backgroundColor: `rgba(255, 255, 255, 0)`
+  return (
+    <Stack.Group>
+      <Stack.Screen
+        key='Tab-Shared-Account'
+        name='Tab-Shared-Account'
+        component={TabSharedAccount}
+        options={({ navigation }: SharedAccountProp) => {
+          return {
+            headerTransparent: true,
+            headerStyle: {
+              backgroundColor: `rgba(255, 255, 255, 0)`
+            },
+            headerTitle: '',
+            headerLeft: () => (
+              <HeaderLeft onPress={() => navigation.goBack()} background />
+            )
+          }
+        }}
+      />
+
+      <Stack.Screen
+        key='Tab-Shared-Attachments'
+        name='Tab-Shared-Attachments'
+        component={TabSharedAttachments}
+        options={({
+          route: {
+            params: { account }
          },
-          headerCenter: () => null,
-          headerLeft: () => (
-            <HeaderLeft onPress={() => navigation.goBack()} background />
-          )
-        }
-      }}
-    />,
-    <Stack.Screen
-      key='Tab-Shared-Attachments'
-      name='Tab-Shared-Attachments'
-      component={TabSharedAttachments}
-      options={({
-        route: {
-          params: { account }
-        },
-        navigation
-      }: SharedAttachmentsProp) => {
-        return {
+          navigation
+        }: SharedAttachmentsProp) => {
+          return {
+            headerLeft: () => (
+              <HeaderLeft onPress={() => navigation.goBack()} />
+            ),
+            headerTitle: () => (
+              <Text numberOfLines={1}>
+                <Trans
+                  i18nKey='screenTabs:shared.attachments.name'
+                  components={[
+                    <ParseEmojis
+                      content={account.display_name || account.username}
+                      emojis={account.emojis}
+                      fontBold
+                    />,
+                    <Text
+                      style={{
+                        ...StyleConstants.FontStyle.M,
+                        color: theme.primaryDefault,
+                        fontWeight: StyleConstants.Font.Weight.Bold
+                      }}
+                    />
+                  ]}
+                />
+              </Text>
+            )
+          }
+        }}
+      />
+
+      <Stack.Screen
+        key='Tab-Shared-Hashtag'
+        name='Tab-Shared-Hashtag'
+        component={TabSharedHashtag}
+        options={({ route, navigation }: SharedHashtagProp) => ({
+          headerTitle: `#${decodeURIComponent(route.params.hashtag)}`,
+          ...(Platform.OS === 'android' && {
+            headerCenter: () => (
+              <HeaderCenter
+                content={`#${decodeURIComponent(route.params.hashtag)}`}
+              />
+            )
+          }),
+          headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+        })}
+      />
+
+      <Stack.Screen
+        key='Tab-Shared-Search'
+        name='Tab-Shared-Search'
+        component={TabSharedSearch}
+        options={({ navigation }: SharedSearchProp) => ({
          headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
-          headerCenter: () => (
-            <Text numberOfLines={1}>
-              <Trans
-                i18nKey='screenTabs:shared.attachments.name'
-                components={[
-                  <ParseEmojis
-                    content={account.display_name || account.username}
-                    emojis={account.emojis}
-                    fontBold
-                  />,
-                  <Text
-                    style={{
-                      ...StyleConstants.FontStyle.M,
+          headerTitle: () => {
+            const onChangeText = debounce(
+              (text: string) => navigation.setParams({ text }),
+              1000,
+              {
+                trailing: true
+              }
+            )
+            return (
+              <View style={styles.searchBar}>
+                <TextInput
+                  editable={false}
+                  style={[
+                    styles.textInput,
+                    {
+                      color: theme.primaryDefault
+                    }
+                  ]}
+                  defaultValue={t('shared.search.header.prefix')}
+                />
+                <TextInput
+                  accessibilityRole='search'
+                  keyboardAppearance={mode}
+                  style={[
+                    styles.textInput,
+                    {
+                      flex: 1,
                      color: theme.primaryDefault,
-                      fontWeight: StyleConstants.Font.Weight.Bold
-                    }}
-                  />
-                ]}
-              />
-            </Text>
-          )
-        }
-      }}
-    />,
-    <Stack.Screen
-      key='Tab-Shared-Hashtag'
-      name='Tab-Shared-Hashtag'
-      component={TabSharedHashtag}
-      options={({ route, navigation }: SharedHashtagProp) => ({
-        headerTitle: `#${decodeURIComponent(route.params.hashtag)}`,
-        ...(Platform.OS === 'android' && {
-          headerCenter: () => (
-            <HeaderCenter
-              content={`#${decodeURIComponent(route.params.hashtag)}`}
-            />
-          )
-        }),
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-      })}
-    />,
-    <Stack.Screen
-      key='Tab-Shared-Search'
-      name='Tab-Shared-Search'
-      component={TabSharedSearch}
-      options={({ navigation }: SharedSearchProp) => ({
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
-        headerCenter: () => {
-          const onChangeText = debounce(
-            (text: string) => navigation.setParams({ text }),
-            1000,
-            {
-              trailing: true
-            }
-          )
-          return (
-            <View style={styles.searchBar}>
-              <TextInput
-                editable={false}
-                style={[
-                  styles.textInput,
-                  {
-                    color: theme.primaryDefault
+                      paddingLeft: StyleConstants.Spacing.XS
+                    }
+                  ]}
+                  autoFocus
+                  onChangeText={onChangeText}
+                  autoCapitalize='none'
+                  autoCorrect={false}
+                  clearButtonMode='never'
+                  keyboardType='web-search'
+                  onSubmitEditing={({ nativeEvent: { text } }) =>
+                    navigation.setParams({ text })
                  }
-                ]}
-                defaultValue={t('shared.search.header.prefix')}
+                  placeholder={t('shared.search.header.placeholder')}
+                  placeholderTextColor={theme.secondary}
+                  returnKeyType='go'
+                />
+              </View>
+            )
+          }
+        })}
+      />
+
+      <Stack.Screen
+        key='Tab-Shared-Toot'
+        name='Tab-Shared-Toot'
+        component={TabSharedToot}
+        options={({ navigation }: SharedTootProp) => ({
+          headerTitle: t('shared.toot.name'),
+          ...(Platform.OS === 'android' && {
+            headerCenter: () => <HeaderCenter content={t('shared.toot.name')} />
+          }),
+          headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+        })}
+      />
+
+      <Stack.Screen
+        key='Tab-Shared-Users'
+        name='Tab-Shared-Users'
+        component={TabSharedUsers}
+        options={({
+          navigation,
+          route: {
+            params: { reference, type, count }
+          }
+        }: SharedUsersProp) => ({
+          headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
+          headerTitle: t(`shared.users.${reference}.${type}`, { count }),
+          ...(Platform.OS === 'android' && {
+            headerCenter: () => (
+              <HeaderCenter
+                content={t(`shared.users.${reference}.${type}`, { count })}
              />
-              <TextInput
-                accessibilityRole='search'
-                keyboardAppearance={mode}
-                style={[
-                  styles.textInput,
-                  {
-                    flex: 1,
-                    color: theme.primaryDefault,
-                    paddingLeft: StyleConstants.Spacing.XS
-                  }
-                ]}
-                autoFocus
-                onChangeText={onChangeText}
-                autoCapitalize='none'
-                autoCorrect={false}
-                clearButtonMode='never'
-                keyboardType='web-search'
-                onSubmitEditing={({ nativeEvent: { text } }) =>
-                  navigation.setParams({ text })
-                }
-                placeholder={t('shared.search.header.placeholder')}
-                placeholderTextColor={theme.secondary}
-                returnKeyType='go'
-              />
-            </View>
-          )
-        }
-      })}
-    />,
-    <Stack.Screen
-      key='Tab-Shared-Toot'
-      name='Tab-Shared-Toot'
-      component={TabSharedToot}
-      options={({ navigation }: SharedTootProp) => ({
-        headerTitle: t('shared.toot.name'),
-        ...(Platform.OS === 'android' && {
-          headerCenter: () => <HeaderCenter content={t('shared.toot.name')} />
-        }),
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-      })}
-    />,
-    <Stack.Screen
-      key='Tab-Shared-Users'
-      name='Tab-Shared-Users'
-      component={TabSharedUsers}
-      options={({
-        navigation,
-        route: {
-          params: { reference, type, count }
-        }
-      }: SharedUsersProp) => ({
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
-        headerTitle: t(`shared.users.${reference}.${type}`, { count }),
-        ...(Platform.OS === 'android' && {
-          headerCenter: () => (
-            <HeaderCenter
-              content={t(`shared.users.${reference}.${type}`, { count })}
-            />
-          )
-        })
-      })}
-    />
-  ]
+            )
+          })
+        })}
+      />
+    </Stack.Group>
+  )
 }

 const styles = StyleSheet.create({