From 55222c5b0e57b3c7223fc13778e4cba67579da69 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Sat, 14 Dec 2024 00:01:31 +0000
Subject: [PATCH] Fix z-indexes to make tabbar scroll on Android (#7102)

---
 src/screens/Hashtag.tsx                    |  2 +-
 src/view/com/pager/Pager.tsx               | 14 ++++++--------
 src/view/com/pager/PagerWithHeader.web.tsx | 16 +++++++++-------
 src/view/screens/Notifications.tsx         |  2 +-
 src/view/screens/Search/Search.tsx         |  3 ++-
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx
index 3e98f364bf..83eb5b80da 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 b3f936ddc4..2c0bbee520 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 98b32b3476..3e530358a3 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 82c68dde64..4794cdcd0e 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 ed62c5a51c..21f9c988fb 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} />