diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index b128d4e4116..43212bb00b5 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -22,7 +22,7 @@ import { canSendToNarrow } from '../utils/narrow';
 import { getLoading, getSession } from '../directSelectors';
 import { getFetchingForNarrow } from './fetchingSelectors';
 import { getShownMessagesForNarrow, isNarrowValid as getIsNarrowValid } from './narrowsSelectors';
-import { getTitleBackgroundColor } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -114,13 +114,13 @@ export default function ChatScreen(props: Props) {
   const sayNoMessages = haveNoMessages && !isFetching;
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
-  const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
 
   return (
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
-          <ZulipStatusBar backgroundColor={titleBackgroundColor} />
+          <ZulipStatusBar backgroundColor={streamColor} />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
           <UnreadNotice narrow={narrow} />
diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index 5aa495b6b80..1ea9c729b75 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -1,26 +1,18 @@
 /* @flow strict-local */
 
 import React, { PureComponent } from 'react';
-import { Platform, StatusBar, View } from 'react-native';
+import { Platform, StatusBar } from 'react-native';
 import Color from 'color';
-import { compose } from 'redux';
-import { EdgeInsets } from 'react-native-safe-area-context';
 
-import { withSafeAreaInsets } from '../react-native-safe-area-context';
 import type { Orientation, ThemeName, Dispatch } from '../types';
 import { connect } from '../react-redux';
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getSession, getSettings } from '../selectors';
 
 type BarStyle = $PropertyType<React$ElementConfig<typeof StatusBar>, 'barStyle'>;
 
-export const getStatusBarColor = (backgroundColor: string, theme: ThemeName): string =>
-  backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-    ? theme === 'night'
-      ? 'hsl(212, 28%, 18%)'
-      : 'white'
-    : backgroundColor;
+export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
+  backgroundColor ?? (theme === 'night' ? 'hsl(212, 28%, 18%)' : 'white');
 
 export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
   foregroundColorFromBackground(statusBarColor) === 'white' /* force newline */
@@ -33,9 +25,7 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  insets: EdgeInsets,
-
-  backgroundColor: string,
+  backgroundColor?: string | void,
   hidden: boolean,
 
   dispatch: Dispatch,
@@ -44,38 +34,34 @@ type Props = $ReadOnly<{
 
 /**
  * Applies `hidden` and `backgroundColor` in platform-specific ways.
+ *
+ * Like `StatusBar`, which is the only thing it ever renders, this
+ * doesn't have any effect on the spatial layout of the UI.
  */
 class ZulipStatusBar extends PureComponent<Props> {
   static defaultProps = {
     hidden: false,
-    backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
   };
 
   render() {
-    const { theme, hidden, insets, orientation } = this.props;
+    const { theme, hidden, orientation } = this.props;
     const backgroundColor = this.props.backgroundColor;
-    const style = { height: hidden ? 0 : insets.top, backgroundColor };
     const statusBarColor = getStatusBarColor(backgroundColor, theme);
     return (
       orientation === 'PORTRAIT' && (
-        <View style={style}>
-          <StatusBar
-            animated
-            showHideTransition="slide"
-            hidden={hidden && Platform.OS !== 'android'}
-            backgroundColor={Color(statusBarColor).darken(0.1)}
-            barStyle={getStatusBarStyle(statusBarColor)}
-          />
-        </View>
+        <StatusBar
+          animated
+          showHideTransition="slide"
+          hidden={hidden && Platform.OS !== 'android'}
+          backgroundColor={Color(statusBarColor).darken(0.1)}
+          barStyle={getStatusBarStyle(statusBarColor)}
+        />
       )
     );
   }
 }
 
-export default compose(
-  connect<SelectorProps, _, _>((state, props) => ({
-    theme: getSettings(state).theme,
-    orientation: getSession(state).orientation,
-  })),
-  withSafeAreaInsets,
-)(ZulipStatusBar);
+export default connect<SelectorProps, _, _>((state, props) => ({
+  theme: getSettings(state).theme,
+  orientation: getSession(state).orientation,
+}))(ZulipStatusBar);
diff --git a/src/common/__tests__/getStatusBarColor-test.js b/src/common/__tests__/getStatusBarColor-test.js
index 8c8af4900ba..c6d292320a1 100644
--- a/src/common/__tests__/getStatusBarColor-test.js
+++ b/src/common/__tests__/getStatusBarColor-test.js
@@ -1,5 +1,4 @@
 /* @flow strict-local */
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../../title/titleSelectors';
 import { getStatusBarColor } from '../ZulipStatusBar';
 
 const themeNight = 'night';
@@ -12,9 +11,7 @@ describe('getStatusBarColor', () => {
   });
 
   test('returns color according to theme for default case', () => {
-    expect(getStatusBarColor(DEFAULT_TITLE_BACKGROUND_COLOR, themeDefault)).toEqual('white');
-    expect(getStatusBarColor(DEFAULT_TITLE_BACKGROUND_COLOR, themeNight)).toEqual(
-      'hsl(212, 28%, 18%)',
-    );
+    expect(getStatusBarColor(undefined, themeDefault)).toEqual('white');
+    expect(getStatusBarColor(undefined, themeNight)).toEqual('hsl(212, 28%, 18%)');
   });
 });
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
index 0df32c28174..3a9a5012c6e 100644
--- a/src/lightbox/LightboxScreen.js
+++ b/src/lightbox/LightboxScreen.js
@@ -26,6 +26,7 @@ type Props = $ReadOnly<{|
 
 export default function LightboxScreen(props: Props) {
   const { src, message } = props.route.params;
+
   return (
     <View style={styles.screen}>
       <ZulipStatusBar hidden backgroundColor="black" />
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index b725ad496c6..0c5a25b3c40 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -5,11 +5,11 @@ import {
   createBottomTabNavigator,
   type BottomTabNavigationProp,
 } from '@react-navigation/bottom-tabs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import type { GlobalParamList } from '../nav/globalTypes';
-
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import StreamTabsScreen from './StreamTabsScreen';
@@ -50,6 +50,8 @@ export default function MainTabsScreen(props: Props) {
   const { backgroundColor } = useContext(ThemeContext);
   const haveServerData = useSelector(getHaveServerData);
 
+  const insets = useSafeAreaInsets();
+
   if (!haveServerData) {
     // This can happen if the user has just logged out; this screen
     // is still visible for the duration of the nav transition, and
@@ -63,6 +65,7 @@ export default function MainTabsScreen(props: Props) {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
+      <View style={{ height: insets.top }} />
       <ZulipStatusBar />
       <OfflineNotice />
       <Tab.Navigator
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 04d3a074abc..e1edd1bac8e 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Color from 'color';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
@@ -10,7 +11,7 @@ import { useSelector } from '../react-redux';
 import { BRAND_COLOR, NAVBAR_SIZE } from '../styles';
 import Title from '../title/Title';
 import NavBarBackButton from './NavBarBackButton';
-import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
@@ -21,46 +22,36 @@ type Props = $ReadOnly<{|
 
 export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
-  const backgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
   const color =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? BRAND_COLOR
-      : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(streamColor);
   const spinnerColor =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? 'default'
-      : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? 'default' : foregroundColorFromBackground(streamColor);
 
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === 'transparent'
-            ? 'hsla(0, 0%, 50%, 0.25)'
-            : Color(backgroundColor).darken(0.1),
+          streamColor === undefined ? 'hsla(0, 0%, 50%, 0.25)' : Color(streamColor).darken(0.1),
         borderBottomWidth: 1,
+        backgroundColor: streamColor,
       }}
     >
       <View
-        style={[
-          {
-            flexDirection: 'row',
-            height: NAVBAR_SIZE,
-            alignItems: 'center',
-          },
-          { backgroundColor },
-        ]}
+        style={{
+          flexDirection: 'row',
+          height: NAVBAR_SIZE,
+          alignItems: 'center',
+        }}
       >
         <NavBarBackButton color={color} />
         <Title color={color} narrow={narrow} editMessage={editMessage} />
         <ExtraButton color={color} narrow={narrow} />
         <InfoButton color={color} narrow={narrow} />
       </View>
-      <LoadingBanner
-        spinnerColor={spinnerColor}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
-    </View>
+      <LoadingBanner spinnerColor={spinnerColor} backgroundColor={streamColor} textColor={color} />
+    </SafeAreaView>
   );
 }
diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index 0d87bb96538..ba77e56de1a 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -2,6 +2,7 @@
 
 import React, { useContext } from 'react';
 import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { LocalizableText } from '../types';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
@@ -22,12 +23,13 @@ export default function ModalNavBar(props: Props) {
   ];
 
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={[
         {
           borderColor: 'hsla(0, 0%, 50%, 0.25)',
           flexDirection: 'row',
-          height: NAVBAR_SIZE,
           alignItems: 'center',
           borderBottomWidth: 1,
           backgroundColor,
@@ -38,6 +40,6 @@ export default function ModalNavBar(props: Props) {
       <View style={styles.flexedLeftAlign}>
         <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index 1fb0c635ea5..9d2751be510 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -1,8 +1,8 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { ThemeContext, NAVBAR_SIZE } from '../styles';
+import { ThemeContext } from '../styles';
 import SearchInput from '../common/SearchInput';
 import NavBarBackButton from './NavBarBackButton';
 
@@ -16,11 +16,12 @@ export default function ModalSearchNavBar(props: Props) {
   const { autoFocus, searchBarOnChange, canGoBack = true } = props;
   const { backgroundColor } = useContext(ThemeContext);
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top', 'right', 'left']}
       style={{
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         flexDirection: 'row',
-        height: NAVBAR_SIZE,
         alignItems: 'center',
         borderBottomWidth: 1,
         backgroundColor,
@@ -28,6 +29,6 @@ export default function ModalSearchNavBar(props: Props) {
     >
       {canGoBack && <NavBarBackButton />}
       <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/selectors.js b/src/selectors.js
index 05553d23983..66a0cd62aa9 100644
--- a/src/selectors.js
+++ b/src/selectors.js
@@ -9,7 +9,6 @@ export * from './emoji/emojiSelectors';
 export * from './message/messageSelectors';
 export * from './nav/navSelectors';
 export * from './subscriptions/subscriptionSelectors';
-export * from './title/titleSelectors';
 export * from './topics/topicSelectors';
 export * from './typing/typingSelectors';
 export * from './unread/unreadSelectors';
diff --git a/src/settings/SettingsScreen.js b/src/settings/SettingsScreen.js
index a41f0add595..6c5f7bf49ac 100644
--- a/src/settings/SettingsScreen.js
+++ b/src/settings/SettingsScreen.js
@@ -18,7 +18,6 @@ import {
   IconLanguage,
   IconMoreHorizontal,
 } from '../common/Icons';
-import ModalNavBar from '../nav/ModalNavBar';
 import {
   settingsChange,
   navigateToNotifications,
@@ -52,7 +51,6 @@ class SettingsScreen extends PureComponent<Props> {
 
     return (
       <ScrollView style={styles.optionWrapper}>
-        <ModalNavBar canGoBack={false} title="Settings" />
         <OptionRow
           Icon={IconNight}
           label="Night mode"
diff --git a/src/start/LoadingScreen.js b/src/start/LoadingScreen.js
index 8a0bac38d45..a9014e785d2 100644
--- a/src/start/LoadingScreen.js
+++ b/src/start/LoadingScreen.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -27,8 +28,16 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function LoadingScreen(props: Props) {
+  const insets = useSafeAreaInsets();
+
   return (
     <View style={componentStyles.center}>
+      <View
+        style={{
+          height: insets.top,
+          backgroundColor: BRAND_COLOR,
+        }}
+      />
       <ZulipStatusBar backgroundColor={BRAND_COLOR} />
       <LoadingIndicator color="black" size={80} showLogo />
     </View>
diff --git a/src/subscriptions/__tests__/subscriptionSelectors-test.js b/src/subscriptions/__tests__/subscriptionSelectors-test.js
index f5695b5e2a6..b80f656ab95 100644
--- a/src/subscriptions/__tests__/subscriptionSelectors-test.js
+++ b/src/subscriptions/__tests__/subscriptionSelectors-test.js
@@ -5,8 +5,16 @@ import {
   getSubscriptionsById,
   getIsActiveStreamSubscribed,
   getSubscribedStreams,
+  getStreamColorForNarrow,
 } from '../subscriptionSelectors';
-import { HOME_NARROW, streamNarrow, topicNarrow } from '../../utils/narrow';
+import {
+  HOME_NARROW,
+  streamNarrow,
+  topicNarrow,
+  pmNarrowFromUsersUnsafe,
+  pm1to1NarrowFromUser,
+} from '../../utils/narrow';
+import * as eg from '../../__tests__/lib/exampleData';
 
 describe('getStreamsById', () => {
   test('returns empty object for an empty input', () => {
@@ -116,3 +124,26 @@ describe('getSubscribedStreams', () => {
     expect(actualResult).toEqual(expectedResult);
   });
 });
+
+describe('getStreamColorForNarrow', () => {
+  const exampleColor = '#fff';
+  const state = eg.reduxState({
+    subscriptions: [{ ...eg.makeSubscription({ stream: eg.stream }), color: exampleColor }],
+  });
+
+  test('return stream color for stream and topic narrow', () => {
+    expect(getStreamColorForNarrow(state, streamNarrow(eg.stream.name))).toEqual(exampleColor);
+  });
+
+  test('return null stream color for invalid stream or unknown subscriptions', () => {
+    const unknownStream = eg.makeStream();
+    expect(getStreamColorForNarrow(state, streamNarrow(unknownStream.name))).toEqual('gray');
+  });
+
+  test('return undefined for non topic/stream narrow', () => {
+    expect(getStreamColorForNarrow(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(undefined);
+    expect(
+      getStreamColorForNarrow(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
+    ).toEqual(undefined);
+  });
+});
diff --git a/src/subscriptions/subscriptionSelectors.js b/src/subscriptions/subscriptionSelectors.js
index deac6b6de23..78948f0db1c 100644
--- a/src/subscriptions/subscriptionSelectors.js
+++ b/src/subscriptions/subscriptionSelectors.js
@@ -86,3 +86,18 @@ export const getIsActiveStreamAnnouncementOnly: Selector<boolean, Narrow> = crea
     return stream ? stream.is_announcement_only : false;
   },
 );
+
+/**
+ * The stream's color for the given stream or topic narrow.
+ *
+ * Gives undefined for narrows that are not stream or topic narrows.
+ */
+export const getStreamColorForNarrow = (state: GlobalState, narrow: Narrow) => {
+  if (!isStreamOrTopicNarrow(narrow)) {
+    return undefined;
+  }
+
+  const subscriptionsByName = getSubscriptionsByName(state);
+  const streamName = streamNameOfNarrow(narrow);
+  return subscriptionsByName.get(streamName)?.color ?? 'gray';
+};
diff --git a/src/title/__tests__/titleSelectors-test.js b/src/title/__tests__/titleSelectors-test.js
deleted file mode 100644
index 0142e507559..00000000000
--- a/src/title/__tests__/titleSelectors-test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/* @flow strict-local */
-
-import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../titleSelectors';
-import { pmNarrowFromUsersUnsafe, streamNarrow, pm1to1NarrowFromUser } from '../../utils/narrow';
-import * as eg from '../../__tests__/lib/exampleData';
-
-describe('getTitleBackgroundColor', () => {
-  const exampleColor = '#fff';
-  const state = eg.reduxState({
-    subscriptions: [{ ...eg.makeSubscription({ stream: eg.stream }), color: exampleColor }],
-  });
-
-  test('return stream color for stream and topic narrow', () => {
-    expect(getTitleBackgroundColor(state, streamNarrow(eg.stream.name))).toEqual(exampleColor);
-  });
-
-  test('return null stream color for invalid stream or unknown subscriptions', () => {
-    const unknownStream = eg.makeStream();
-    expect(getTitleBackgroundColor(state, streamNarrow(unknownStream.name))).toEqual('gray');
-  });
-
-  test('return default for non topic/stream narrow', () => {
-    expect(getTitleBackgroundColor(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(
-      DEFAULT_TITLE_BACKGROUND_COLOR,
-    );
-    expect(
-      getTitleBackgroundColor(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
-    ).toEqual(DEFAULT_TITLE_BACKGROUND_COLOR);
-  });
-});
diff --git a/src/title/titleSelectors.js b/src/title/titleSelectors.js
deleted file mode 100644
index aeef4f10147..00000000000
--- a/src/title/titleSelectors.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* @flow strict-local */
-import type { Narrow, GlobalState } from '../types';
-import { isStreamOrTopicNarrow, streamNameOfNarrow } from '../utils/narrow';
-import { getSubscriptionsByName } from '../subscriptions/subscriptionSelectors';
-
-export const DEFAULT_TITLE_BACKGROUND_COLOR = 'transparent';
-
-/**
- * Background color to use for the app bar in narrow `narrow`.
- *
- * If `narrow` is a stream or topic narrow, this is based on the stream color.
- * Otherwise, it takes a default value.
- */
-export const getTitleBackgroundColor = (state: GlobalState, narrow: Narrow) => {
-  const subscriptionsByName = getSubscriptionsByName(state);
-  if (!isStreamOrTopicNarrow(narrow)) {
-    return DEFAULT_TITLE_BACKGROUND_COLOR;
-  }
-  const streamName = streamNameOfNarrow(narrow);
-  return subscriptionsByName.get(streamName)?.color ?? 'gray';
-};