Move screen options into each screen

src/screens/Tabs/Shared/Account.tsx

@@ -1,6 +1,6 @@
 import menuAccount from '@components/contextMenu/account'
 import menuShare from '@components/contextMenu/share'
-import { HeaderRight } from '@components/Header'
+import { HeaderLeft, HeaderRight } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import SegmentedControl from '@react-native-community/segmented-control'
@@ -33,6 +33,12 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<'Tab-Shared-Account'>
   const mAccount = menuAccount({ type: 'account', openChange: true, account })
   useEffect(() => {
     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

@@ -10,7 +10,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SectionList, Text, View } from 'react-native'
+import { SectionList, View } from 'react-native'
 
 const TabSharedAccountInLists: React.FC<
   TabSharedStackScreenProps<'Tab-Shared-Account-In-Lists'>
@@ -27,7 +27,6 @@ const TabSharedAccountInLists: React.FC<
     navigation.setOptions({
       presentation: 'modal',
       title: t('shared.accountInLists.name', { username: account.username }),
-      headerLeft: () => null,
       headerRight: () => {
         return (
           <HeaderRight
@@ -49,8 +48,8 @@ const TabSharedAccountInLists: React.FC<
       id: 'out',
       title: t('shared.accountInLists.notInLists'),
       data:
-        listsQuery.data?.filter(
+        listsQuery?.data?.filter(
-          ({ id }) => !accountInListsQuery.data?.filter(d => d.id === id).length
+          ({ id }) => !accountInListsQuery?.data?.filter(d => d.id === id)?.length
         ) || []
     }
   ]

src/screens/Tabs/Shared/Attachments.tsx

@@ -1,27 +1,57 @@
+import { HeaderLeft } from '@components/Header'
+import { ParseEmojis } from '@components/Parse'
+import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import React from 'react'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useEffect } from 'react'
+import { Trans } from 'react-i18next'
 
-const TabSharedAttachments: React.FC<
+const TabSharedAttachments: React.FC<TabSharedStackScreenProps<'Tab-Shared-Attachments'>> = ({
-  TabSharedStackScreenProps<'Tab-Shared-Attachments'>
+  navigation,
-> = ({
   route: {
     params: { account }
   }
 }) => {
+  const { colors } = useTheme()
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />,
+      headerTitle: () => (
+        <CustomText numberOfLines={1}>
+          <Trans
+            i18nKey='screenTabs: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>
+      )
+    })
+  }, [])
+
   const queryKey: QueryKeyTimeline = [
     'Timeline',
     { page: 'Account_Attachments', account: account.id }
   ]
+
   return (
     <Timeline
       queryKey={queryKey}
       customProps={{
-        renderItem: ({ item }) => (
+        renderItem: ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />
-          <TimelineDefault item={item} queryKey={queryKey} />
-        )
       }}
     />
   )

src/screens/Tabs/Shared/Hashtag.tsx

@@ -1,5 +1,5 @@
 import haptics from '@components/haptics'
-import { HeaderRight } from '@components/Header'
+import { HeaderLeft, HeaderRight } from '@components/Header'
 import { displayMessage } from '@components/Message'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
@@ -18,6 +18,13 @@ const TabSharedHashtag: React.FC<TabSharedStackScreenProps<'Tab-Shared-Hashtag'>
     params: { hashtag }
   }
 }) => {
+  useEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
+      title: `#${decodeURIComponent(hashtag)}`
+    })
+  }, [])
+
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Hashtag', hashtag }]
 
   const { theme } = useTheme()

src/screens/Tabs/Shared/History.tsx

@@ -1,3 +1,4 @@
+import { HeaderLeft } from '@components/Header'
 import Icon from '@components/Icon'
 import { ParseEmojis } from '@components/Parse'
 import ComponentSeparator from '@components/Separator'
@@ -9,7 +10,8 @@ import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 
@@ -23,6 +25,7 @@ const ContentView = ({
   last: boolean
 }) => {
   const { colors } = useTheme()
+
   return (
     <>
       <View
@@ -37,16 +40,11 @@ const ContentView = ({
         ) : null}
         {history.poll
           ? history.poll.options.map((option, index) => (
-              <View
+              <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
-                key={index}
-                style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
-              >
                 <View style={{ flex: 1, flexDirection: 'row' }}>
                   <Icon
                     style={{
-                      paddingTop:
+                      paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
-                        StyleConstants.Font.LineHeight.M -
-                        StyleConstants.Font.Size.M,
                       marginRight: StyleConstants.Spacing.S
                     }}
                     name='Circle'
@@ -54,17 +52,13 @@ const ContentView = ({
                     color={colors.disabled}
                   />
                   <CustomText style={{ flex: 1 }}>
-                    <ParseEmojis
+                    <ParseEmojis content={option.title} emojis={history.poll?.emojis} />
-                      content={option.title}
-                      emojis={history.poll?.emojis}
-                    />
                   </CustomText>
                 </View>
               </View>
             ))
           : null}
-        {Array.isArray(history.media_attachments) &&
+        {Array.isArray(history.media_attachments) && history.media_attachments.length ? (
-        history.media_attachments.length ? (
           <TimelineAttachment status={history} />
         ) : null}
       </View>
@@ -73,15 +67,22 @@ const ContentView = ({
   )
 }
 
-const TabSharedHistory: React.FC<
+const TabSharedHistory: React.FC<TabSharedStackScreenProps<'Tab-Shared-History'>> = ({
-  TabSharedStackScreenProps<'Tab-Shared-History'>
+  navigation,
-> = ({
   route: {
     params: { id }
   }
 }) => {
+  const { t } = useTranslation('screenTabs')
   const { data } = useStatusHistory({ id })
 
+  useEffect(() => {
+    navigation.setOptions({
+      title: t('shared.history.name'),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])
+
   return (
     <ScrollView>
       {data && data.length > 0
@@ -90,12 +91,7 @@ const TabSharedHistory: React.FC<
             .reverse()
             .map((d, i) =>
               i !== 0 ? (
-                <ContentView
+                <ContentView key={i} history={d} first={i === 1} last={i === data.length - 1} />
-                  key={i}
-                  history={d}
-                  first={i === 1}
-                  last={i === data.length - 1}
-                />
               ) : null
             )
         : null}

src/screens/Tabs/Shared/Search.tsx

@@ -1,5 +1,6 @@
 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'
@@ -7,18 +8,80 @@ 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 React, { useCallback, useMemo } from 'react'
+import { debounce } from 'lodash'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { KeyboardAvoidingView, Platform, SectionList, StyleSheet, View } from 'react-native'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  SectionList,
+  StyleSheet,
+  TextInput,
+  View
+} from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 
 const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>> = ({
+  navigation,
   route: {
     params: { text }
   }
 }) => {
   const { t } = useTranslation('screenTabs')
-  const { colors } = useTheme()
+  const { colors, mode } = useTheme()
+
+  useEffect(() => {
+    navigation.setOptions({
+      ...(Platform.OS === 'ios'
+        ? {
+            headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+          }
+        : { headerLeft: () => null }),
+      headerTitle: () => {
+        const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
+          trailing: true
+        })
+        return (
+          <View
+            style={{
+              flexBasis: '80%',
+              flexDirection: 'row',
+              alignItems: 'center'
+            }}
+          >
+            <TextInput
+              editable={false}
+              style={{
+                fontSize: StyleConstants.Font.Size.M,
+                color: colors.primaryDefault
+              }}
+              defaultValue={t('shared.search.header.prefix')}
+            />
+            <TextInput
+              accessibilityRole='search'
+              keyboardAppearance={mode}
+              style={{
+                fontSize: StyleConstants.Font.Size.M,
+                flex: 1,
+                color: colors.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={colors.secondary}
+              returnKeyType='go'
+            />
+          </View>
+        )
+      }
+    })
+  }, [])
 
   const mapKeyToTranslations = {
     accounts: t('shared.search.sections.accounts'),

src/screens/Tabs/Shared/Toot.tsx

@@ -1,24 +1,34 @@
+import { HeaderLeft } from '@components/Header'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
-import { useNavigation } from '@react-navigation/native'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native'
 import { InfiniteQueryObserver, useQueryClient } from 'react-query'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
+  navigation,
   route: {
     params: { toot, rootQueryKey }
   }
 }) => {
+  const { t } = useTranslation('screenTabs')
+
+  useEffect(() => {
+    navigation.setOptions({
+      title: t('shared.toot.name'),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])
+
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Toot', toot: toot.id }]
 
   const flRef = useRef<FlatList>(null)
 
   const [itemsLength, setItemsLength] = useState(0)
   const scrolled = useRef(false)
-  const navigation = useNavigation()
   const queryClient = useQueryClient()
   const observer = new InfiniteQueryObserver(queryClient, {
     queryKey,

src/screens/Tabs/Shared/Users.tsx

@@ -1,27 +1,34 @@
 import ComponentAccount from '@components/Account'
+import { HeaderLeft } from '@components/Header'
 import ComponentSeparator from '@components/Separator'
 import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
 import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
-import { StyleSheet } from 'react-native'
+import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native-gesture-handler'
 
-const TabSharedUsers = React.memo(
+const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> = ({
-  ({ route: { params } }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => {
+  navigation,
+  route: { params }
+}) => {
+  const { t } = useTranslation('screenTabs')
+  useEffect(() => {
+    navigation.setOptions({
+      title: t(`shared.users.${params.reference}.${params.type}`, { count: params.count }),
+      headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+    })
+  }, [])
+
   const queryKey: QueryKeyUsers = ['Users', params]
-    const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
+  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useUsersQuery({
-      useUsersQuery({
     ...queryKey[1],
     options: {
       getPreviousPageParam: firstPage =>
         firstPage.links?.prev && { since_id: firstPage.links.next },
-          getNextPageParam: lastPage =>
+      getNextPageParam: lastPage => lastPage.links?.next && { max_id: lastPage.links.next }
-            lastPage.links?.next && { max_id: lastPage.links.next }
     }
   })
-    const flattenData = data?.pages
+  const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []
-      ? data.pages.flatMap(page => [...page.body])
-      : []
 
   const onEndReached = useCallback(
     () => hasNextPage && !isFetchingNextPage && fetchNextPage(),
@@ -32,10 +39,10 @@ const TabSharedUsers = React.memo(
     <FlatList
       windowSize={7}
       data={flattenData}
-        style={styles.flatList}
+      style={{
-        renderItem={({ item }) => (
+        minHeight: '100%'
-          <ComponentAccount account={item} />
+      }}
-        )}
+      renderItem={({ item }) => <ComponentAccount account={item} />}
       onEndReached={onEndReached}
       onEndReachedThreshold={0.75}
       ItemSeparatorComponent={ComponentSeparator}
@@ -45,14 +52,6 @@ const TabSharedUsers = React.memo(
       }}
     />
   )
-  },
+}
-  () => true
-)
-
-const styles = StyleSheet.create({
-  flatList: {
-    minHeight: '100%'
-  }
-})
 
 export default TabSharedUsers

src/screens/Tabs/Shared/index.tsx

@@ -1,6 +1,3 @@
-import { HeaderCenter, HeaderLeft } from '@components/Header'
-import { ParseEmojis } from '@components/Parse'
-import CustomText from '@components/Text'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import TabSharedAccount from '@screens/Tabs/Shared/Account'
 import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
@@ -9,13 +6,9 @@ import TabSharedHistory from '@screens/Tabs/Shared/History'
 import TabSharedSearch from '@screens/Tabs/Shared/Search'
 import TabSharedToot from '@screens/Tabs/Shared/Toot'
 import TabSharedUsers from '@screens/Tabs/Shared/Users'
-import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { debounce } from 'lodash'
 import React from 'react'
-import { Trans, useTranslation } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
-import { Platform, TextInput, View } from 'react-native'
 import TabSharedAccountInLists from './AccountInLists'
 
 const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNavigator> }) => {
@@ -23,167 +16,35 @@ const TabShared = ({ Stack }: { Stack: ReturnType<typeof createNativeStackNaviga
   const { t } = useTranslation('screenTabs')
 
   return (
-    <Stack.Group
+    <Stack.Group>
-      screenOptions={({ navigation }) => ({
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-      })}
-    >
       <Stack.Screen
         key='Tab-Shared-Account'
         name='Tab-Shared-Account'
         component={TabSharedAccount}
-        options={({
-          navigation,
-          route: {
-            params: { account }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Account'>) => {
-          return {
-            headerTransparent: true,
-            headerStyle: {
-              backgroundColor: `rgba(255, 255, 255, 0)`
-            },
-            title: '',
-            headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} background />
-          }
-        }}
       />
-
       <Stack.Screen
         key='Tab-Shared-Account-In-Lists'
         name='Tab-Shared-Account-In-Lists'
         component={TabSharedAccountInLists}
       />
-
       <Stack.Screen
         key='Tab-Shared-Attachments'
         name='Tab-Shared-Attachments'
         component={TabSharedAttachments}
-        options={({
-          route: {
-            params: { account }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Attachments'>) => {
-          return {
-            headerTitle: () => (
-              <CustomText numberOfLines={1}>
-                <Trans
-                  i18nKey='screenTabs: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-Hashtag'
         name='Tab-Shared-Hashtag'
         component={TabSharedHashtag}
-        options={({ route }: TabSharedStackScreenProps<'Tab-Shared-Hashtag'>) => ({
-          title: `#${decodeURIComponent(route.params.hashtag)}`
-        })}
       />
-
       <Stack.Screen
         key='Tab-Shared-History'
         name='Tab-Shared-History'
         component={TabSharedHistory}
-        options={{ title: t('screenTabs:shared.history.name') }}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Search'
-        name='Tab-Shared-Search'
-        component={TabSharedSearch}
-        options={({ navigation }: TabSharedStackScreenProps<'Tab-Shared-Search'>) => ({
-          ...(Platform.OS === 'ios'
-            ? {
-                headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
-              }
-            : { headerLeft: () => null }),
-          headerTitle: () => {
-            const onChangeText = debounce((text: string) => navigation.setParams({ text }), 1000, {
-              trailing: true
-            })
-            return (
-              <View
-                style={{
-                  flexBasis: '80%',
-                  flexDirection: 'row',
-                  alignItems: 'center'
-                }}
-              >
-                <TextInput
-                  editable={false}
-                  style={{
-                    fontSize: StyleConstants.Font.Size.M,
-                    color: colors.primaryDefault
-                  }}
-                  defaultValue={t('shared.search.header.prefix')}
-                />
-                <TextInput
-                  accessibilityRole='search'
-                  keyboardAppearance={mode}
-                  style={{
-                    fontSize: StyleConstants.Font.Size.M,
-                    flex: 1,
-                    color: colors.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={colors.secondary}
-                  returnKeyType='go'
-                />
-              </View>
-            )
-          }
-        })}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Toot'
-        name='Tab-Shared-Toot'
-        component={TabSharedToot}
-        options={{ title: t('shared.toot.name') }}
-      />
-
-      <Stack.Screen
-        key='Tab-Shared-Users'
-        name='Tab-Shared-Users'
-        component={TabSharedUsers}
-        options={({
-          route: {
-            params: { reference, type, count }
-          }
-        }: TabSharedStackScreenProps<'Tab-Shared-Users'>) => ({
-          title: t(`shared.users.${reference}.${type}`, { count }),
-          ...(Platform.OS === 'android' && {
-            headerCenter: () => (
-              <HeaderCenter content={t(`shared.users.${reference}.${type}`, { count })} />
-            )
-          })
-        })}
       />
+      <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 key='Tab-Shared-Users' name='Tab-Shared-Users' component={TabSharedUsers} />
     </Stack.Group>
   )
 }