offline notice [nfc]: Put <OfflineNotice />s into nearby *NavBar components

We want to try making the OfflineNotice a surface that fills the top
inset, instead of being a bar that cuts through the middle of an
existing surface.

With that goal in mind, move our `<OfflineNotice />`s closer to the
UI code responsible for handling the top inset.

But without making any functional changes yet: in ChatScreen, for
example, the `<OfflineNotice />` goes from being the next element
down from `<ChatNavBar />`, to being the last element *in*
ChatNavBar, in a way that ensures the visual layout doesn't change.

And likewise everywhere else an `<OfflineNotice />` was just below a
`<ModalNavBar />` or a `<ModalSearchNavBar />`.

We'll start changing the layout next.

Author: chrisbobbe

src/chat/ChatScreen.js

@@ -9,7 +9,6 @@ import type { AppNavigationProp } from '../nav/AppNavigator';
 import { ThemeContext, createStyleSheet } from '../styles';
 import type { Narrow, EditMessage } from '../types';
 import KeyboardAvoider from '../common/KeyboardAvoider';
-import OfflineNotice from '../common/OfflineNotice';
 import ChatNavBar from '../nav/ChatNavBar';
 import MessageList from '../webview/MessageList';
 import NoMessages from '../message/NoMessages';
@@ -199,7 +198,6 @@ export default function ChatScreen(props: Props): Node {
   return (
     <KeyboardAvoider style={[componentStyles.screen, { backgroundColor }]} behavior="padding">
       <ChatNavBar narrow={narrow} editMessage={editMessage} />
-      <OfflineNotice />
       <UnreadNotice narrow={narrow} />
       {(() => {
         if (!isNarrowValid) {

src/common/Screen.js

@@ -10,7 +10,6 @@ import type { EditingEvent } from 'react-native/Libraries/Components/TextInput/T
 import styles, { createStyleSheet, ThemeContext } from '../styles';
 import type { LocalizableText, LocalizableReactText } from '../types';
 import KeyboardAvoider from './KeyboardAvoider';
-import OfflineNotice from './OfflineNotice';
 import LoadingBanner from './LoadingBanner';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
@@ -112,7 +111,6 @@ export default function Screen(props: Props): Node {
       ) : (
         <ModalNavBar canGoBack={canGoBack} title={title} />
       )}
-      <OfflineNotice />
       {shouldShowLoadingBanner && <LoadingBanner />}
       <KeyboardAvoider
         behavior="padding"

src/nav/ChatNavBar.js

@@ -21,6 +21,7 @@ import { doNarrow } from '../actions';
 import { isNarrowValid as getIsNarrowValid } from '../selectors';
 import NavButton from './NavButton';
 import { useNavigation } from '../react-navigation';
+import OfflineNotice from '../common/OfflineNotice';
 
 function ExtraNavButtonStream(props: {| +color: string, +narrow: Narrow |}): Node {
   const { color, narrow } = props;
@@ -191,6 +192,7 @@ export default function ChatNavBar(props: {|
           textColor={textColor}
         />
       </SafeAreaView>
+      <OfflineNotice />
     </>
   );
 }

src/nav/ModalNavBar.js

@@ -8,6 +8,7 @@ import type { LocalizableReactText } from '../types';
 import globalStyles, { ThemeContext, NAVBAR_SIZE } from '../styles';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import NavBarBackButton from './NavBarBackButton';
+import OfflineNotice from '../common/OfflineNotice';
 
 type Props = $ReadOnly<{|
   canGoBack: boolean,
@@ -63,12 +64,15 @@ export default function ModalNavBar(props: Props): Node {
   );
 
   return (
-    <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
-      {/* See comment on styles.contentArea.minHeight. */}
-      <View style={styles.contentArea}>
-        {canGoBack && <NavBarBackButton />}
-        <ZulipTextIntl style={styles.text} text={title} numberOfLines={1} ellipsizeMode="tail" />
-      </View>
-    </SafeAreaView>
+    <>
+      <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
+        {/* See comment on styles.contentArea.minHeight. */}
+        <View style={styles.contentArea}>
+          {canGoBack && <NavBarBackButton />}
+          <ZulipTextIntl style={styles.text} text={title} numberOfLines={1} ellipsizeMode="tail" />
+        </View>
+      </SafeAreaView>
+      <OfflineNotice />
+    </>
   );
 }

src/nav/ModalSearchNavBar.js

@@ -9,6 +9,7 @@ import { ThemeContext, NAVBAR_SIZE } from '../styles';
 import SearchInput from '../common/SearchInput';
 import NavBarBackButton from './NavBarBackButton';
 import type { LocalizableText } from '../types';
+import OfflineNotice from '../common/OfflineNotice';
 
 type Props = $ReadOnly<{|
   autoFocus: boolean,
@@ -50,22 +51,25 @@ export default function ModalSearchNavBar(props: Props): Node {
   );
 
   return (
-    <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
-      {/* See comment on styles.contentArea.minHeight. */}
-      <View style={styles.contentArea}>
-        {canGoBack && (
-          <>
-            <NavBarBackButton />
-            <View style={{ width: 20 }} />
-          </>
-        )}
-        <SearchInput
-          autoFocus={autoFocus}
-          onChangeText={searchBarOnChange}
-          onSubmitEditing={searchBarOnSubmit}
-          placeholder={placeholder}
-        />
-      </View>
-    </SafeAreaView>
+    <>
+      <SafeAreaView mode="padding" edges={['top', 'right', 'left']} style={styles.safeAreaView}>
+        {/* See comment on styles.contentArea.minHeight. */}
+        <View style={styles.contentArea}>
+          {canGoBack && (
+            <>
+              <NavBarBackButton />
+              <View style={{ width: 20 }} />
+            </>
+          )}
+          <SearchInput
+            autoFocus={autoFocus}
+            onChangeText={searchBarOnChange}
+            onSubmitEditing={searchBarOnSubmit}
+            placeholder={placeholder}
+          />
+        </View>
+      </SafeAreaView>
+      <OfflineNotice />
+    </>
   );
 }

src/streams/SubscriptionsScreen.js

@@ -21,7 +21,6 @@ import { caseInsensitiveCompareFunc } from '../utils/misc';
 import StreamItem from './StreamItem';
 import ModalNavBar from '../nav/ModalNavBar';
 import NestedNavRow from '../common/NestedNavRow';
-import OfflineNotice from '../common/OfflineNotice';
 
 const styles = createStyleSheet({
   container: {
@@ -74,8 +73,6 @@ export default function SubscriptionsScreen(props: Props): Node {
     <View style={styles.container}>
       {/* Consumes the top inset. */}
       <ModalNavBar canGoBack={false} title="Streams" />
-      <OfflineNotice />
-
       <LoadingBanner />
       {subscriptions.length === 0 ? (
         <SearchEmptyState text="No streams found" />