Swap the tab bar items and rename suggested to what's hot

src/view/com/util/Pager.tsx

@@ -1,19 +1,13 @@
 import React from 'react'
-import {Animated, StyleSheet, View} from 'react-native'
+import {Animated, View} from 'react-native'
 import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
+import {TabBarProps} from './TabBar'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {s} from 'lib/styles'
 
 export type PageSelectedEvent = PagerViewOnPageSelectedEvent
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
 
-export interface TabBarProps {
-  selectedPage: number
-  position: Animated.Value
-  offset: Animated.Value
-  onSelect?: (index: number) => void
-}
-
 interface Props {
   tabBarPosition?: 'top' | 'bottom'
   renderTabBar: (props: TabBarProps) => JSX.Element

src/view/com/util/TabBar.tsx

@@ -13,6 +13,17 @@ interface Layout {
   width: number
 }
 
+export interface TabBarProps {
+  selectedPage: number
+  items: string[]
+  position: Animated.Value
+  offset: Animated.Value
+  indicatorPosition?: 'top' | 'bottom'
+  indicatorColor?: string
+  onSelect?: (index: number) => void
+  onPressSelected?: () => void
+}
+
 export function TabBar({
   selectedPage,
   items,
@@ -22,16 +33,7 @@ export function TabBar({
   indicatorColor,
   onSelect,
   onPressSelected,
-}: {
+}: TabBarProps) {
-  selectedPage: number
-  items: string[]
-  position: Animated.Value
-  offset: Animated.Value
-  indicatorPosition?: 'top' | 'bottom'
-  indicatorColor?: string
-  onSelect?: (index: number) => void
-  onPressSelected?: () => void
-}) {
   const pal = usePalette('default')
   const [itemLayouts, setItemLayouts] = useState<Layout[]>(
     items.map(() => ({x: 0, width: 0})),

src/view/screens/Home.tsx

@@ -14,8 +14,8 @@ import {FeedModel} from 'state/models/feed-view'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
-import {TabBar} from 'view/com/util/TabBar'
+import {TabBar, TabBarProps} from 'view/com/util/TabBar'
-import {Pager, PageSelectedEvent, TabBarProps} from 'view/com/util/Pager'
+import {Pager, PageSelectedEvent} from 'view/com/util/Pager'
 import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -62,21 +62,24 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
     store.emitScreenSoftReset()
   }, [store])
 
-  const renderTabBar = React.useCallback((props: TabBarProps) => {
+  const renderTabBar = React.useCallback(
-    return <FloatingTabBar {...props} onPressSelected={onPressSelected} />
+    (props: TabBarProps) => {
-  }, [])
+      return <FloatingTabBar {...props} onPressSelected={onPressSelected} />
+    },
+    [onPressSelected],
+  )
 
   return (
     <Pager
       onPageSelected={onPageSelected}
       renderTabBar={renderTabBar}
       tabBarPosition="bottom">
-      <FeedPage key="1" isPageFocused={selectedPage === 0} feed={algoFeed} />
       <FeedPage
-        key="2"
+        key="1"
-        isPageFocused={selectedPage === 1}
+        isPageFocused={selectedPage === 0}
         feed={store.me.mainFeed}
       />
+      <FeedPage key="2" isPageFocused={selectedPage === 1} feed={algoFeed} />
     </Pager>
   )
 })
@@ -112,8 +115,8 @@ const FloatingTabBar = observer((props: TabBarProps) => {
     <Animated.View
       style={[pal.view, pal.border, styles.tabBar, pad, transform]}>
       <TabBar
-        items={['Suggested', 'Following']}
         {...props}
+        items={['Following', "What's hot"]}
         indicatorPosition="top"
         indicatorColor={pal.colors.link}
       />
@@ -232,7 +235,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 8,
+    paddingHorizontal: 10,
     borderTopWidth: 1,
     paddingTop: 0,
     paddingBottom: 30,