Fixed #533

Added trending in the "public" tab

src/screens/Tabs/Public/Root.tsx

@@ -0,0 +1,84 @@
+import { HeaderRight } from '@components/Header'
+import Timeline from '@components/Timeline'
+import TimelineDefault from '@components/Timeline/Default'
+import SegmentedControl from '@react-native-community/segmented-control'
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import { TabPublicStackParamList } from '@utils/navigation/navigators'
+import usePopToTop from '@utils/navigation/usePopToTop'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Dimensions } from 'react-native'
+import { SceneMap, TabView } from 'react-native-tab-view'
+
+const Route = ({ route: { key: page } }: { route: any }) => {
+  const queryKey: QueryKeyTimeline = ['Timeline', { page }]
+  return (
+    <Timeline
+      queryKey={queryKey}
+      disableRefresh={page === 'Trending'}
+      customProps={{
+        renderItem: ({ item }: any) => <TimelineDefault item={item} queryKey={queryKey} />
+      }}
+    />
+  )
+}
+
+const renderScene = SceneMap({
+  Local: Route,
+  LocalPublic: Route,
+  Trending: Route
+})
+
+const Root: React.FC<NativeStackScreenProps<TabPublicStackParamList, 'Tab-Public-Root'>> = ({
+  navigation
+}) => {
+  const { mode } = useTheme()
+  const { t } = useTranslation('screenTabs')
+
+  const [segment, setSegment] = useState(0)
+  const [routes] = useState([
+    { key: 'Local', title: t('tabs.public.segments.local') },
+    { key: 'LocalPublic', title: t('tabs.public.segments.federated') },
+    { key: 'Trending', title: t('tabs.public.segments.trending') }
+  ])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle: () => (
+        <SegmentedControl
+          appearance={mode}
+          values={routes.map(({ title }) => title)}
+          selectedIndex={segment}
+          onChange={({ nativeEvent }) => setSegment(nativeEvent.selectedSegmentIndex)}
+          style={{ flexBasis: '65%' }}
+        />
+      ),
+      headerRight: () => (
+        <HeaderRight
+          accessibilityLabel={t('common.search.accessibilityLabel')}
+          accessibilityHint={t('common.search.accessibilityHint')}
+          content='Search'
+          onPress={() => navigation.navigate('Tab-Shared-Search')}
+        />
+      )
+    })
+  }, [mode, segment])
+
+  usePopToTop()
+
+  return (
+    <TabView
+      lazy
+      swipeEnabled
+      renderScene={renderScene}
+      renderTabBar={() => null}
+      onIndexChange={index => setSegment(index)}
+      navigationState={{ index: segment, routes }}
+      initialLayout={{ width: Dimensions.get('screen').width }}
+    />
+  )
+}
+
+export default Root