fix: use opacity in headerStyle

Author: satya164

src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap

@@ -383,6 +383,7 @@ Array [
                             "height": 64,
                             "maxHeight": undefined,
                             "minHeight": undefined,
+                            "opacity": undefined,
                           },
                         ]
                       }
@@ -520,6 +521,7 @@ Array [
               "height": 64,
               "maxHeight": undefined,
               "minHeight": undefined,
+              "opacity": undefined,
             },
           ]
         }

src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap

@@ -219,6 +219,7 @@ Array [
               },
               Object {
                 "backgroundColor": "red",
+                "opacity": 0.5,
               },
             ]
           }
@@ -232,6 +233,7 @@ Array [
               "height": 64,
               "maxHeight": undefined,
               "minHeight": undefined,
+              "opacity": 0.5,
             },
           ]
         }
@@ -535,6 +537,7 @@ Array [
               },
               Object {
                 "backgroundColor": "red",
+                "opacity": 0.5,
               },
             ]
           }
@@ -548,6 +551,7 @@ Array [
               "height": 64,
               "maxHeight": undefined,
               "minHeight": undefined,
+              "opacity": 0.5,
             },
           ]
         }

src/views/Header/HeaderSegment.tsx

@@ -217,6 +217,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOffset,
       shadowOpacity,
       shadowRadius,
+      opacity,
       ...unsafeStyles
     } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
 
@@ -257,6 +258,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       shadowOffset,
       shadowOpacity,
       shadowRadius,
+      opacity,
     };
 
     // Setting a property to undefined triggers default style
@@ -284,7 +286,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
         </Animated.View>
         <Animated.View
           pointerEvents="box-none"
-          style={[{ height, minHeight, maxHeight }]}
+          style={[{ height, minHeight, maxHeight, opacity }]}
         >
           <View
             pointerEvents="none"