offline notice: Render on remaining screens

I've audited all our screens and found just these two where we
weren't yet showing the OfflineNotice, and added it:

- The lightbox screen, where the offline notice might give the
  reason why an image isn't loading.

- FullScreenLoading, which we show when we're waiting for server
  data, where the notice might give the reason we don't have server
  data.

Taking care that the OfflineNotice's position is consistent with its
position on all the other screens (see previous commit): always at
the top of the screen, just below the top inset.

Author: chrisbobbe

src/common/FullScreenLoading.js

@@ -7,6 +7,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 import LoadingIndicator from './LoadingIndicator';
 import ZulipStatusBar from './ZulipStatusBar';
+import OfflineNotice from './OfflineNotice';
 
 const componentStyles = createStyleSheet({
   center: {
@@ -35,6 +36,7 @@ export default function FullScreenLoading(props: Props): Node {
             backgroundColor: BRAND_COLOR,
           }}
         />
+        <OfflineNotice />
         <LoadingIndicator color="black" size={80} showLogo />
       </View>
     </>

src/lightbox/LightboxHeader.js

@@ -9,6 +9,7 @@ import { createStyleSheet } from '../styles';
 import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { Icon } from '../common/Icons';
 import { AvatarURL } from '../utils/avatar';
+import OfflineNotice from '../common/OfflineNotice';
 
 const styles = createStyleSheet({
   text: {
@@ -29,7 +30,7 @@ const styles = createStyleSheet({
     alignSelf: 'center',
     marginVertical: 4,
   },
-  wrapper: {
+  contentArea: {
     flex: 1,
     flexDirection: 'row',
     paddingHorizontal: 16,
@@ -60,8 +61,9 @@ export default function LightboxHeader(props: Props): Node {
   const subheader = `${displayDate} at ${time}`;
 
   return (
-    <SafeAreaView mode="padding" edges={['top', 'right', 'left']}>
-      <View style={styles.wrapper}>
+    <SafeAreaView mode="padding" edges={['top']}>
+      <OfflineNotice />
+      <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.contentArea}>
         <UserAvatarWithPresence size={36} avatarUrl={avatarUrl} email={senderEmail} />
         <View style={styles.text}>
           <Text style={styles.name} numberOfLines={1}>
@@ -74,7 +76,7 @@ export default function LightboxHeader(props: Props): Node {
         <Pressable style={styles.rightIconTouchTarget} onPress={onPressBack} hitSlop={12}>
           {({ pressed }) => <Icon size={24} color={pressed ? 'gray' : 'white'} name="x" />}
         </Pressable>
-      </View>
+      </SafeAreaView>
     </SafeAreaView>
   );
 }