fix: correctly set header to translucent

react-navigation · Feb 3, 2022 · c9eed38 · c9eed38
1 parent 29b501f
commit c9eed38
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/packages/native-stack/src/views/HeaderConfig.tsx b/packages/native-stack/src/views/HeaderConfig.tsx
@@ -137,6 +137,14 @@ export default function HeaderConfig({
     ? headerLeftElement != null
     : Platform.OS === 'android' && headerTitleElement != null;
 
+  const translucent =
+    headerBackground != null ||
+    headerTransparent ||
+    // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
+    ((hasHeaderSearchBar || headerLargeTitle) &&
+      Platform.OS === 'ios' &&
+      headerTransparent !== false);
+
   return (
     <>
       {headerBackground != null ? (
@@ -186,13 +194,8 @@ export default function HeaderConfig({
         titleFontWeight={titleFontWeight}
         topInsetEnabled={insets.top !== 0}
         translucent={
-          headerBackground != null ||
           // This defaults to `true`, so we can't pass `undefined`
-          headerTransparent === true ||
-          // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
-          ((hasHeaderSearchBar || headerLargeTitle) &&
-            Platform.OS === 'ios' &&
-            headerTransparent !== false)
+          translucent === true
         }
       >
         {Platform.OS === 'ios' ? (