safe areas: Put OfflineNotice on each tab screen, out of top inset

This fixes a regression introduced in fc06c94. In that commit, we
asked MainTabsScreen to stop padding the top inset, and asked each
individual tab screen to pad it. With this <OfflineNotice /> being
left behind in MainTabsScreen, it lost its protection from the top
inset, and on my device the crucial "No Internet connection" text
was completely hidden by the notch.

So, remove that single <OfflineNotice /> and add one in each of the
four tab screens, using each screen's protection against rendering
content in the top inset.

Author: chrisbobbe

src/account-info/ProfileScreen.js

@@ -19,6 +19,7 @@ import { getOwnUser } from '../users/userSelectors';
 import { getIdentity } from '../account/accountsSelectors';
 import { useNavigation } from '../react-navigation';
 import { showConfirmationDialog } from '../utils/info';
+import OfflineNotice from '../common/OfflineNotice';
 
 const styles = createStyleSheet({
   buttonRow: {
@@ -128,6 +129,7 @@ export default function ProfileScreen(props: Props): Node {
 
   return (
     <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }}>
+      <OfflineNotice />
       <ScrollView>
         <AccountDetails user={ownUser} />
         <AwayStatusSwitch />

src/main/HomeScreen.js

@@ -17,6 +17,7 @@ import { BRAND_COLOR, createStyleSheet } from '../styles';
 import LoadingBanner from '../common/LoadingBanner';
 import ServerCompatBanner from '../common/ServerCompatBanner';
 import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
+import OfflineNotice from '../common/OfflineNotice';
 
 const styles = createStyleSheet({
   wrapper: {
@@ -40,6 +41,7 @@ export default function HomeScreen(props: Props): Node {
 
   return (
     <SafeAreaView mode="padding" edges={['top']} style={styles.wrapper}>
+      <OfflineNotice />
       <View style={styles.iconList}>
         <TopTabButton
           name="globe"

src/main/MainTabsScreen.js

@@ -15,7 +15,6 @@ import HomeScreen from './HomeScreen';
 import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
 import { IconInbox, IconStream, IconPeople } from '../common/Icons';
 import OwnAvatar from '../common/OwnAvatar';
-import OfflineNotice from '../common/OfflineNotice';
 import ProfileScreen from '../account-info/ProfileScreen';
 import styles, { BRAND_COLOR, ThemeContext } from '../styles';
 import SubscriptionsScreen from '../streams/SubscriptionsScreen';
@@ -54,7 +53,6 @@ export default function MainTabsScreen(props: Props): Node {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
-      <OfflineNotice />
       <Tab.Navigator {...bottomTabNavigatorConfig()} lazy={false} backBehavior="none">
         <Tab.Screen
           name="home"

src/pm-conversations/PmConversationsScreen.js

@@ -15,6 +15,7 @@ import LoadingBanner from '../common/LoadingBanner';
 import { IconPeople, IconPerson } from '../common/Icons';
 import PmConversationList from './PmConversationList';
 import { getRecentConversations } from '../selectors';
+import OfflineNotice from '../common/OfflineNotice';
 
 const styles = createStyleSheet({
   container: {
@@ -54,6 +55,7 @@ export default function PmConversationsScreen(props: Props): Node {
       edges={['top']}
       style={[styles.container, { backgroundColor: context.backgroundColor }]}
     >
+      <OfflineNotice />
       <View style={styles.row}>
         <ZulipButton
           secondary

src/streams/SubscriptionsScreen.js

@@ -21,6 +21,7 @@ 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: {
@@ -73,6 +74,7 @@ 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 ? (