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

bluesky-social · Dec 14, 2024 · 55222c5 · 55222c5
1 parent ca8ca90
commit 55222c5
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} />