Extract TabBarItem

src/view/com/home/HomeHeader.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {useNavigation} from '@react-navigation/native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {NavigationProp} from '#/lib/routes/types'
 import {FeedSourceInfo} from '#/state/queries/feed'
 import {useSession} from '#/state/session'
@@ -19,7 +18,6 @@ export function HomeHeader(
   const {feeds} = props
   const {hasSession} = useSession()
   const navigation = useNavigation<NavigationProp>()
-  const pal = usePalette('default')
 
   const hasPinnedCustom = React.useMemo<boolean>(() => {
     if (!hasSession) return false
@@ -61,7 +59,6 @@ export function HomeHeader(
         onSelect={onSelect}
         testID={props.testID}
         items={items}
-        indicatorColor={pal.colors.link}
         dragGesture={props.dragGesture}
       />
     </HomeHeaderLayout>

src/view/com/pager/TabBar.tsx

@@ -16,7 +16,6 @@ export interface TabBarProps {
   testID?: string
   selectedPage: number
   items: string[]
-  indicatorColor?: string
   onSelect?: (index: number) => void
   onPressSelected?: (index: number) => void
 }
@@ -25,17 +24,12 @@ export function TabBar({
   testID,
   selectedPage,
   items,
-  indicatorColor,
   onSelect,
   onPressSelected,
   dragGesture,
 }: TabBarProps) {
   const pal = usePalette('default')
   const scrollElRef = useAnimatedRef()
-  const indicatorStyle = useMemo(
-    () => ({borderBottomColor: indicatorColor || pal.colors.link}),
-    [indicatorColor, pal],
-  )
 
   const onPressItem = useCallback(
     (index: number) => {
@@ -96,28 +90,15 @@ export function TabBar({
             },
           ]}>
           {items.map((item, i) => {
-            const selected = i === selectedPage
             return (
-              <PressableWithHover
+              <TabBarItem
-                testID={`${testID}-selector-${i}`}
+                key={i}
-                key={`${item}-${i}`}
+                index={i}
-                style={styles.item}
+                testID={testID}
-                hoverStyle={pal.viewLight}
+                selected={i === selectedPage}
-                onPress={() => onPressItem(i)}
+                item={item}
-                accessibilityRole="tab">
+                onPressItem={onPressItem}
-                <View style={[styles.itemInner, selected && indicatorStyle]}>
+              />
-                  <Text
-                    emoji
-                    type="lg-bold"
-                    testID={testID ? `${testID}-${item}` : undefined}
-                    style={[
-                      selected ? pal.text : pal.textLight,
-                      {lineHeight: 20},
-                    ]}>
-                    {item}
-                  </Text>
-                </View>
-              </PressableWithHover>
             )
           })}
         </Animated.View>
@@ -127,6 +108,44 @@ export function TabBar({
   )
 }
 
+function TabBarItem({
+  index,
+  testID,
+  selected,
+  item,
+  onPressItem,
+}: {
+  index: number
+  testID: string | undefined
+  selected: boolean
+  item: string
+  onPressItem: (index: number) => void
+}) {
+  const pal = usePalette('default')
+  const indicatorStyle = useMemo(
+    () => ({borderBottomColor: pal.colors.link}),
+    [pal],
+  )
+  return (
+    <PressableWithHover
+      testID={`${testID}-selector-${index}`}
+      style={styles.item}
+      hoverStyle={pal.viewLight}
+      onPress={() => onPressItem(index)}
+      accessibilityRole="tab">
+      <View style={[styles.itemInner, selected && indicatorStyle]}>
+        <Text
+          emoji
+          type="lg-bold"
+          testID={testID ? `${testID}-${item}` : undefined}
+          style={[selected ? pal.text : pal.textLight, {lineHeight: 20}]}>
+          {item}
+        </Text>
+      </View>
+    </PressableWithHover>
+  )
+}
+
 const styles = StyleSheet.create({
   outer: {
     flexDirection: 'row',