Fix z-indexes to make tabbar scroll on Android (#7102)

5 files changed, 19 insertions, 18 deletions

diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx
index 3e98f364b..83eb5b80d 100644
--- a/src/screens/Hashtag.tsx
+++ b/src/screens/Hashtag.tsx
@@ -134,7 +134,7 @@ export default function HashtagScreen({
       <Pager
         onPageSelected={onPageSelected}
         renderTabBar={props => (
-          <Layout.Center style={web([a.sticky, a.z_10, {top: 0}])}>
+          <Layout.Center style={[a.z_10, web([a.sticky, {top: 0}])]}>
             <TabBar items={sections.map(section => section.title)} {...props} />
           </Layout.Center>
         )}
diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx
index b3f936ddc..2c0bbee52 100644
--- a/src/view/com/pager/Pager.tsx
+++ b/src/view/com/pager/Pager.tsx
@@ -136,14 +136,12 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
 
     return (
       <View testID={testID} style={[a.flex_1, native(a.overflow_hidden)]}>
-        <View style={a.z_10 /* Let tabbar bottom border cover the glimmer */}>
-          {renderTabBar({
-            selectedPage,
-            onSelect: onTabBarSelect,
-            dragProgress,
-            dragState,
-          })}
-        </View>
+        {renderTabBar({
+          selectedPage,
+          onSelect: onTabBarSelect,
+          dragProgress,
+          dragState,
+        })}
         <GestureDetector gesture={nativeGesture}>
           <AnimatedPagerView
             ref={pagerView}
diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx
index 98b32b347..3e530358a 100644
--- a/src/view/com/pager/PagerWithHeader.web.tsx
+++ b/src/view/com/pager/PagerWithHeader.web.tsx
@@ -134,14 +134,16 @@ let PagerTabBar = ({
       <Layout.Center>{renderHeader?.({setMinimumHeight: noop})}</Layout.Center>
       {tabBarAnchor}
       <Layout.Center
-        style={web([
-          a.sticky,
+        style={[
           a.z_10,
-          {
-            top: 0,
-            display: isHeaderReady ? undefined : 'none',
-          },
-        ])}>
+          web([
+            a.sticky,
+            {
+              top: 0,
+              display: isHeaderReady ? undefined : 'none',
+            },
+          ]),
+        ]}>
         <TabBar
           testID={testID}
           items={items}
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 82c68dde6..4794cdcd0 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -144,7 +144,7 @@ export function NotificationsScreen({}: Props) {
       <Pager
         onPageSelected={onPageSelected}
         renderTabBar={props => (
-          <Layout.Center style={web([a.sticky, a.z_10, {top: 0}])}>
+          <Layout.Center style={[a.z_10, web([a.sticky, {top: 0}])]}>
             <TabBar
               {...props}
               items={sections.map(section => section.title)}
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index ed62c5a51..21f9c988f 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -532,7 +532,8 @@ let SearchScreenInner = ({
       renderTabBar={props => (
         <Layout.Center
           style={[
-            web([a.sticky, a.z_10]),
+            a.z_10,
+            web([a.sticky]),
             {top: isWeb ? headerHeight : undefined},
           ]}>
           <TabBar items={sections.map(section => section.title)} {...props} />