add transparency prop to tab bar (#9336)

src/components/Layout/Header/index.tsx

@@ -163,7 +163,10 @@ export function MenuButton() {
         shape="square"
         onPress={onPress}
         hitSlop={HITSLOP_30}
-        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
+        style={[
+          {marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET},
+          a.bg_transparent,
+        ]}>
         <ButtonIcon icon={Menu} size="lg" />
       </Button>
     </Slot>

src/view/com/home/HomeHeader.tsx

@@ -61,6 +61,7 @@ export function HomeHeader(
         items={items}
         dragProgress={props.dragProgress}
         dragState={props.dragState}
+        transparent
       />
     </HomeHeaderLayout>
   )

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -77,6 +77,7 @@ export function HomeHeaderLayoutMobile({
               style={[
                 a.justify_center,
                 {marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
+                a.bg_transparent,
               ]}>
               <ButtonIcon icon={FeedsIcon} size="lg" />
             </Link>

src/view/com/pager/TabBar.tsx

@@ -30,6 +30,7 @@ export interface TabBarProps {
   onPressSelected?: (index: number) => void
   dragProgress: SharedValue<number>
   dragState: SharedValue<'idle' | 'dragging' | 'settling'>
+  transparent?: boolean
 }
 
 const ITEM_PADDING = 10
@@ -46,6 +47,7 @@ export function TabBar({
   onPressSelected,
   dragProgress,
   dragState,
+  transparent,
 }: TabBarProps) {
   const t = useTheme()
   const scrollElRef = useAnimatedRef<ScrollView>()
@@ -313,7 +315,7 @@ export function TabBar({
   return (
     <View
       testID={testID}
-      style={[t.atoms.bg, a.flex_row]}
+      style={[!transparent && t.atoms.bg, a.flex_row]}
       accessibilityRole="tablist">
       <BlockDrawerGesture>
         <ScrollView