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

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>
         )}

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({
-          {renderTabBar({
+          selectedPage,
-            selectedPage,
+          onSelect: onTabBarSelect,
-            onSelect: onTabBarSelect,
+          dragProgress,
-            dragProgress,
+          dragState,
-            dragState,
+        })}
-          })}
-        </View>
         <GestureDetector gesture={nativeGesture}>
           <AnimatedPagerView
             ref={pagerView}

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([
+        style={[
-          a.sticky,
           a.z_10,
-          {
+          web([
-            top: 0,
+            a.sticky,
-            display: isHeaderReady ? undefined : 'none',
+            {
-          },
+              top: 0,
-        ])}>
+              display: isHeaderReady ? undefined : 'none',
+            },
+          ]),
+        ]}>
         <TabBar
           testID={testID}
           items={items}

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)}

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} />