Fixed #362

src/components/Header/Center.tsx

@@ -1,31 +1,53 @@
+import Icon from '@components/Icon'
 import CustomText from '@components/Text'
+import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
+import { View } from 'react-native'
 
 export interface Props {
-  content: React.ReactNode | string
+  content?: string
   inverted?: boolean
   onPress?: () => void
+  dropdown?: boolean
 }
 
 // Used for Android mostly
 const HeaderCenter: React.FC<Props> = ({
   content,
   inverted = false,
-  onPress
+  onPress,
+  dropdown = false
 }) => {
   const { colors } = useTheme()
 
   return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center'
+      }}
+    >
       <CustomText
         style={{
-        fontSize: 18,
           color: inverted ? colors.primaryOverlay : colors.primaryDefault
         }}
+        fontSize='L'
         fontWeight='Bold'
+        numberOfLines={1}
         children={content}
         {...(onPress && { onPress })}
       />
+      {dropdown ? (
+        <Icon
+          name='ChevronDown'
+          size={StyleConstants.Font.Size.M}
+          color={colors.primaryDefault}
+          style={{ marginLeft: StyleConstants.Spacing.XS }}
+          strokeWidth={3}
+        />
+      ) : null}
+    </View>
   )
 }
 

src/screens/ImagesViewer.tsx

@@ -2,13 +2,9 @@ import analytics from '@components/analytics'
 import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header'
 import { Message } from '@components/Message'
 import { useActionSheet } from '@expo/react-native-action-sheet'
-import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import { RootStackScreenProps } from '@utils/navigation/navigators'
-import {
-  RootStackParamList,
-  RootStackScreenProps
-} from '@utils/navigation/navigators'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { RefObject, useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform, Share, StatusBar, View } from 'react-native'
 import FlashMessage from 'react-native-flash-message'

src/screens/Tabs/Local.tsx

@@ -1,7 +1,5 @@
 import analytics from '@components/analytics'
 import { HeaderCenter, HeaderRight } from '@components/Header'
-import Icon from '@components/Icon'
-import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
 import TimelineDefault from '@components/Timeline/Default'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
@@ -11,26 +9,22 @@ import {
 } from '@utils/navigation/navigators'
 import { useListsQuery } from '@utils/queryHooks/lists'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
-import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import ContextMenu from 'react-native-context-menu-view'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabLocalStackParamList>()
 
 const TabLocal = React.memo(
   ({ navigation }: ScreenTabsScreenProps<'Tab-Local'>) => {
-    const { colors } = useTheme()
     const { t } = useTranslation('screenTabs')
 
     const { data: lists } = useListsQuery({})
-    const [listsShown, setListsShown] = useState(false)
     useEffect(() => {
       layoutAnimation()
-    }, [listsShown])
+    }, [lists?.length])
 
     const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
       'Timeline',
@@ -43,25 +37,42 @@ const TabLocal = React.memo(
           name='Tab-Local-Root'
           options={{
             headerTitle: () => (
-              <HeaderCenter
+              <ContextMenu
-                onPress={() => {
+                dropdownMenuMode
-                  if (lists?.length) {
+                style={{ maxWidth: '80%' }}
-                    setListsShown(!listsShown)
+                actions={
+                  lists?.length
+                    ? [
+                        {
+                          id: '',
+                          title: t('tabs.local.name'),
+                          disabled: queryKey[1].page === 'Following'
+                        },
+                        ...lists.map(list => ({
+                          id: list.id,
+                          title: list.title,
+                          disabled:
+                            queryKey[1].page === 'List' &&
+                            queryKey[1].list === list.id
+                        }))
+                      ]
+                    : undefined
                 }
+                onPress={({ nativeEvent: { id } }) => {
+                  id.length
+                    ? setQueryKey(['Timeline', { page: 'List', list: id }])
+                    : setQueryKey(['Timeline', { page: 'Following' }])
                 }}
+                children={
+                  <HeaderCenter
+                    dropdown={(lists?.length ?? 0) > 0}
                     content={
-                  <>
+                      queryKey[1].page === 'List' && queryKey[1].list?.length
-                    <Text>{t('tabs.local.name')}</Text>
+                        ? lists?.find(list => list.id === queryKey[1].list)
-                    {lists?.length ? (
+                            ?.title
-                      <Icon
+                        : t('tabs.local.name')
-                        name='ChevronDown'
+                    }
-                        size={StyleConstants.Font.Size.M}
-                        color={colors.primaryDefault}
-                        style={{ marginLeft: StyleConstants.Spacing.S }}
-                        strokeWidth={3}
                   />
-                    ) : null}
-                  </>
                 }
               />
             ),
@@ -81,7 +92,6 @@ const TabLocal = React.memo(
             )
           }}
           children={() => (
-            <>
             <Timeline
               queryKey={queryKey}
               lookback='Following'
@@ -91,58 +101,6 @@ const TabLocal = React.memo(
                 )
               }}
             />
-              {listsShown ? (
-                <View
-                  style={{
-                    position: 'absolute',
-                    backgroundColor: colors.backgroundDefault,
-                    width: '100%',
-                    paddingVertical: StyleConstants.Spacing.S
-                  }}
-                >
-                  <Pressable
-                    style={{
-                      padding: StyleConstants.Spacing.S * 1.5,
-                      borderColor: colors.border,
-                      borderTopWidth: StyleSheet.hairlineWidth,
-                      borderBottomWidth: StyleSheet.hairlineWidth
-                    }}
-                    onPress={() => {
-                      setQueryKey(['Timeline', { page: 'Following' }])
-                      setListsShown(!listsShown)
-                    }}
-                  >
-                    <CustomText fontSize='M' style={{ textAlign: 'center' }}>
-                      Default
-                    </CustomText>
-                  </Pressable>
-                  {lists?.map(list => (
-                    <Pressable
-                      style={{
-                        padding: StyleConstants.Spacing.S,
-                        borderColor: colors.border,
-                        borderBottomWidth: StyleSheet.hairlineWidth
-                      }}
-                      onPress={() => {
-                        setQueryKey([
-                          'Timeline',
-                          { page: 'List', list: list.id }
-                        ])
-                        setListsShown(!listsShown)
-                      }}
-                    >
-                      <CustomText
-                        key={list.id}
-                        fontSize='M'
-                        style={{ textAlign: 'center' }}
-                      >
-                        {list.title}
-                      </CustomText>
-                    </Pressable>
-                  ))}
-                </View>
-              ) : null}
-            </>
           )}
         />
         {TabSharedRoot({ Stack })}

src/startup/sentry.ts

@@ -4,6 +4,7 @@ import log from './log'
 const sentry = () => {
   log('log', 'Sentry', 'initializing')
   Sentry.init({
+    // @ts-ignore
     dsn: 'https://53348b60ff844d52886e90251b3a5f41@o917354.ingest.sentry.io/6410576',
     enableInExpoDevelopment: false,
     autoSessionTracking: true