lightbox header/footer: Put content in safe areas.

Including left and right safe areas, for landscape mode.

Fixes: #4267

Author: chrisbobbe

src/lightbox/LightboxFooter.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import { Text, View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Icon } from '../common/Icons';
 import { createStyleSheet } from '../styles';
@@ -36,10 +37,12 @@ export default class LightboxFooter extends PureComponent<Props> {
   render() {
     const { displayMessage, onOptionsPress, style } = this.props;
     return (
-      <View style={[styles.wrapper, style]}>
-        <Text style={styles.text}>{displayMessage}</Text>
-        <Icon style={styles.icon} color="white" name="more-vertical" onPress={onOptionsPress} />
-      </View>
+      <SafeAreaView mode="padding" edges={['right', 'bottom', 'left']}>
+        <View style={[styles.wrapper, style]}>
+          <Text style={styles.text}>{displayMessage}</Text>
+          <Icon style={styles.icon} color="white" name="more-vertical" onPress={onOptionsPress} />
+        </View>
+      </SafeAreaView>
     );
   }
 }

src/lightbox/LightboxHeader.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
 import { View, Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { shortTime, humanDate } from '../utils/date';
 import { createStyleSheet } from '../styles';
@@ -63,20 +64,22 @@ export default class LightboxHeader extends PureComponent<Props> {
     const subheader = `${displayDate} at ${time}`;
 
     return (
-      <View style={styles.wrapper}>
-        <UserAvatarWithPresence size={36} avatarUrl={avatarUrl} email={senderEmail} />
-        <View style={styles.text}>
-          <Text style={styles.name} numberOfLines={1}>
-            {senderName}
-          </Text>
-          <Text style={styles.subheader} numberOfLines={1}>
-            {subheader}
-          </Text>
+      <SafeAreaView mode="padding" edges={['top', 'right', 'left']}>
+        <View style={styles.wrapper}>
+          <UserAvatarWithPresence size={36} avatarUrl={avatarUrl} email={senderEmail} />
+          <View style={styles.text}>
+            <Text style={styles.name} numberOfLines={1}>
+              {senderName}
+            </Text>
+            <Text style={styles.subheader} numberOfLines={1}>
+              {subheader}
+            </Text>
+          </View>
+          <Touchable onPress={onPressBack}>
+            <Icon style={styles.rightIcon} color="white" name="x" />
+          </Touchable>
         </View>
-        <Touchable onPress={onPressBack}>
-          <Icon style={styles.rightIcon} color="white" name="x" />
-        </Touchable>
-      </View>
+      </SafeAreaView>
     );
   }
 }