Lightbox: Stop passing new style prop to header/footer Views on each render

Author: chrisbobbe

src/lightbox/Lightbox.js

@@ -64,19 +64,27 @@ export default function Lightbox(props: Props): Node {
           height: 300,
           flex: 1,
         },
-        overlay: {
+        header: {
           backgroundColor: 'black',
           opacity: 0.8,
           position: 'absolute',
           width: windowWidth,
+          ...(headerFooterVisible ? { top: 0 } : { bottom: windowHeight }),
+        },
+        footer: {
+          backgroundColor: 'black',
+          opacity: 0.8,
+          position: 'absolute',
+          width: windowWidth,
+          ...(headerFooterVisible ? { bottom: 0 } : { top: windowHeight }),
         },
         container: {
           flex: 1,
           justifyContent: 'space-between',
           alignItems: 'center',
         },
       }),
-    [windowWidth],
+    [headerFooterVisible, windowWidth, windowHeight],
   );
 
   return (
@@ -103,7 +111,7 @@ export default function Lightbox(props: Props): Node {
           onTap={handleImagePress}
           onViewTap={handleImagePress}
         />
-        <View style={[styles.overlay, headerFooterVisible ? { top: 0 } : { bottom: windowHeight }]}>
+        <View style={styles.header}>
           <LightboxHeader
             onPressBack={() => {
               navigation.dispatch(navigateBack());
@@ -113,7 +121,7 @@ export default function Lightbox(props: Props): Node {
             senderId={message.sender_id}
           />
         </View>
-        <View style={[styles.overlay, headerFooterVisible ? { bottom: 0 } : { top: windowHeight }]}>
+        <View style={styles.footer}>
           <LightboxFooter
             displayMessage={footerMessage}
             onOptionsPress={() => {