Initial try out dynamic following

src/components/Header/Center.tsx

@@ -3,13 +3,17 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 
 export interface Props {
-  content: string
+  content: React.ReactNode | string
   inverted?: boolean
+  onPress?: () => void
 }
 
 // Used for Android mostly
-const HeaderCenter = React.memo(
+const HeaderCenter: React.FC<Props> = ({
-  ({ content, inverted = false }: Props) => {
+  content,
+  inverted = false,
+  onPress
+}) => {
   const { colors } = useTheme()
 
   return (
@@ -20,10 +24,9 @@ const HeaderCenter = React.memo(
       }}
       fontWeight='Bold'
       children={content}
+      {...(onPress && { onPress })}
     />
   )
-  },
+}
-  (prev, next) => prev.content === next.content
-)
 
 export default HeaderCenter

src/screens/Tabs/Local.tsx

@@ -1,5 +1,7 @@
 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'
@@ -7,24 +9,62 @@ import {
   ScreenTabsScreenProps,
   TabLocalStackParamList
 } from '@utils/navigation/navigators'
+import { useListsQuery } from '@utils/queryHooks/lists'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import React, { useCallback, useMemo } from 'react'
+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 { Platform } from 'react-native'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
 import TabSharedRoot from './Shared/Root'
 
 const Stack = createNativeStackNavigator<TabLocalStackParamList>()
 
 const TabLocal = React.memo(
   ({ navigation }: ScreenTabsScreenProps<'Tab-Local'>) => {
-    const { t, i18n } = useTranslation('screenTabs')
+    const { colors } = useTheme()
+    const { t } = useTranslation('screenTabs')
 
-    const screenOptionsRoot = useMemo(
+    const { data: lists } = useListsQuery({})
-      () => ({
+    const [listsShown, setListsShown] = useState(false)
-        title: t('tabs.local.name'),
+    useEffect(() => {
-        ...(Platform.OS === 'android' && {
+      layoutAnimation()
-          headerCenter: () => <HeaderCenter content={t('tabs.local.name')} />
+    }, [listsShown])
-        }),
+
+    const [queryKey, setQueryKey] = useState<QueryKeyTimeline>([
+      'Timeline',
+      { page: 'Following' }
+    ])
+
+    return (
+      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+        <Stack.Screen
+          name='Tab-Local-Root'
+          options={{
+            headerTitle: () => (
+              <HeaderCenter
+                onPress={() => {
+                  if (lists?.length) {
+                    setListsShown(!listsShown)
+                  }
+                }}
+                content={
+                  <>
+                    <Text>{t('tabs.local.name')}</Text>
+                    {lists?.length ? (
+                      <Icon
+                        name='ChevronDown'
+                        size={StyleConstants.Font.Size.M}
+                        color={colors.primaryDefault}
+                        style={{ marginLeft: StyleConstants.Spacing.S }}
+                        strokeWidth={3}
+                      />
+                    ) : null}
+                  </>
+                }
+              />
+            ),
             headerRight: () => (
               <HeaderRight
                 accessibilityLabel={t('common.search.accessibilityLabel')}
@@ -39,13 +79,9 @@ const TabLocal = React.memo(
                 }}
               />
             )
-      }),
+          }}
-      [i18n.language]
+          children={() => (
-    )
+            <>
-
-    const queryKey: QueryKeyTimeline = ['Timeline', { page: 'Following' }]
-    const children = useCallback(
-      () => (
               <Timeline
                 queryKey={queryKey}
                 lookback='Following'
@@ -55,16 +91,59 @@ const TabLocal = React.memo(
                   )
                 }}
               />
-      ),
+              {listsShown ? (
-      []
+                <View
-    )
+                  style={{
-
+                    position: 'absolute',
-    return (
+                    backgroundColor: colors.backgroundDefault,
-      <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+                    width: '100%',
-        <Stack.Screen
+                    paddingVertical: StyleConstants.Spacing.S
-          name='Tab-Local-Root'
+                  }}
-          options={screenOptionsRoot}
+                >
-          children={children}
+                  <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 })}
       </Stack.Navigator>