From fb7a49ea333f60c91e88d9ec939ce0b8050adb93 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 16:03:05 -0500
Subject: [PATCH 01/34] ZulipStatusBar [nfc]: Un-nest `StatusBar` from `View`.

React Native's `StatusBar` component is unusual in that its `render`
method always returns null [1]. The component isn't meant to
participate in the spatial layout of the UI elements. Instead, the
API works more like this: Mount a `StatusBar` component in order to
tell something new to the native status bar API; e.g., what colors
and animation you want to use.

This commit is therefore NFC: the `StatusBar` still gets mounted in
all cases where it was getting mounted before, and nothing changes
in the spatial layout of the UI elements.

The `<View style={style} />` is doing an important job: it covers
the "safe area" at the top of the screen (which includes the status
bar), so that our content doesn't accidentally overlap with it. But
`ZulipStatusBar` already has a very different job, which is to
configure the status bar in kind of subtle ways, and depending on
the platform. I'd like to pull the safe-area handling out of
`ZulipStatusBar` to give it one less thing to worry about; that will
happen in the rest of this series of commits.

[1] https://github.com/facebook/react-native/blob/v0.63.4/Libraries/Components/StatusBar/StatusBar.js#L497
---
 src/common/ZulipStatusBar.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index 5aa495b6b80..cb79a301a8f 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -58,7 +58,8 @@ class ZulipStatusBar extends PureComponent<Props> {
     const statusBarColor = getStatusBarColor(backgroundColor, theme);
     return (
       orientation === 'PORTRAIT' && (
-        <View style={style}>
+        <>
+          <View style={style} />
           <StatusBar
             animated
             showHideTransition="slide"
@@ -66,7 +67,7 @@ class ZulipStatusBar extends PureComponent<Props> {
             backgroundColor={Color(statusBarColor).darken(0.1)}
             barStyle={getStatusBarStyle(statusBarColor)}
           />
-        </View>
+        </>
       )
     );
   }

From fc08d86ce471fb223c3a18282b7ecb5afbc2d580 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 17:01:15 -0500
Subject: [PATCH 02/34] Screen [nfc]: Grab `orientation` from Redux.

We'll use this soon.
---
 src/common/Screen.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/common/Screen.js b/src/common/Screen.js
index 078983ca982..87614dead27 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -5,17 +5,20 @@ import type { Node as React$Node } from 'react';
 import { View, ScrollView } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { type EdgeInsets } from 'react-native-safe-area-context';
+import { compose } from 'redux';
 
 import { withSafeAreaInsets } from '../react-native-safe-area-context';
+import { connect } from '../react-redux';
 import type { ThemeData } from '../styles';
 import styles, { createStyleSheet, ThemeContext } from '../styles';
-import type { LocalizableText } from '../types';
+import type { Dispatch, LocalizableText, Orientation } from '../types';
 import KeyboardAvoider from './KeyboardAvoider';
 import OfflineNotice from './OfflineNotice';
 import LoadingBanner from './LoadingBanner';
 import ZulipStatusBar from './ZulipStatusBar';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
+import { getSession } from '../directSelectors';
 
 const componentStyles = createStyleSheet({
   screen: {
@@ -36,6 +39,10 @@ const componentStyles = createStyleSheet({
   },
 });
 
+type SelectorProps = $ReadOnly<{|
+  orientation: Orientation,
+|}>;
+
 type Props = $ReadOnly<{|
   centerContent: boolean,
   +children: React$Node,
@@ -52,6 +59,9 @@ type Props = $ReadOnly<{|
 
   canGoBack: boolean,
   +title: LocalizableText,
+
+  dispatch: Dispatch,
+  ...SelectorProps,
 |}>;
 
 /**
@@ -150,4 +160,9 @@ class Screen extends PureComponent<Props> {
   }
 }
 
-export default withSafeAreaInsets(Screen);
+export default compose(
+  connect<SelectorProps, _, _>((state, props) => ({
+    orientation: getSession(state).orientation,
+  })),
+  withSafeAreaInsets,
+)(Screen);

From 6956fc08dbd8613c62c2db090812af1cb56556ed Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 18:21:06 -0500
Subject: [PATCH 03/34] ZulipStatusBar [nfc]: Move sized `View` out to callers.

Now, `ZulipStatusBar` doesn't have to worry about handling safe area
views, and we can tailor that logic more specifically to each of the
callers.
---
 src/chat/ChatScreen.js         | 13 +++++++++++++
 src/common/Screen.js           | 13 +++++++++++++
 src/common/ZulipStatusBar.js   | 24 +++++++++++++-----------
 src/lightbox/LightboxScreen.js | 19 ++++++++++++++++++-
 src/main/MainTabsScreen.js     | 18 ++++++++++++++++--
 src/start/LoadingScreen.js     | 16 ++++++++++++++++
 6 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index b128d4e4116..0cff30ba56e 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelector, useDispatch } from '../react-redux';
 import type { RouteProp } from '../react-navigation';
@@ -115,11 +116,23 @@ export default function ChatScreen(props: Props) {
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
   const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const orientation = useSelector(state => getSession(state).orientation);
+  const insets = useSafeAreaInsets();
+  // This'll go away very soon, of course.
+  const statusBarHidden = false;
 
   return (
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
+          {orientation === 'PORTRAIT' && (
+            <View
+              style={{
+                height: statusBarHidden ? 0 : insets.top,
+                backgroundColor: titleBackgroundColor,
+              }}
+            />
+          )}
           <ZulipStatusBar backgroundColor={titleBackgroundColor} />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
diff --git a/src/common/Screen.js b/src/common/Screen.js
index 87614dead27..34587dca535 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -19,6 +19,7 @@ import ZulipStatusBar from './ZulipStatusBar';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
 import { getSession } from '../directSelectors';
+import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 
 const componentStyles = createStyleSheet({
   screen: {
@@ -119,8 +120,12 @@ class Screen extends PureComponent<Props> {
       style,
       title,
       shouldShowLoadingBanner,
+      orientation,
     } = this.props;
 
+    // This'll go away very soon, of course.
+    const statusBarHidden = false;
+
     return (
       <View
         style={[
@@ -129,6 +134,14 @@ class Screen extends PureComponent<Props> {
           { paddingBottom: insets.bottom },
         ]}
       >
+        {orientation === 'PORTRAIT' && (
+          <View
+            style={{
+              height: statusBarHidden ? 0 : insets.top,
+              backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
+            }}
+          />
+        )}
         <ZulipStatusBar />
         {search ? (
           <ModalSearchNavBar
diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index cb79a301a8f..8775b526b51 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -1,7 +1,7 @@
 /* @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';
@@ -44,6 +44,9 @@ 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 = {
@@ -54,20 +57,19 @@ class ZulipStatusBar extends PureComponent<Props> {
   render() {
     const { theme, hidden, insets, orientation } = this.props;
     const backgroundColor = this.props.backgroundColor;
+    // We'll remove this soon.
+    // eslint-disable-next-line no-unused-vars
     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)}
-          />
-        </>
+        <StatusBar
+          animated
+          showHideTransition="slide"
+          hidden={hidden && Platform.OS !== 'android'}
+          backgroundColor={Color(statusBarColor).darken(0.1)}
+          barStyle={getStatusBarStyle(statusBarColor)}
+        />
       )
     );
   }
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
index 0df32c28174..ab5298dd3db 100644
--- a/src/lightbox/LightboxScreen.js
+++ b/src/lightbox/LightboxScreen.js
@@ -2,7 +2,10 @@
 import React from 'react';
 import { View } from 'react-native';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useSelector } from '../react-redux';
+import { getSession } from '../selectors';
 import type { Message } from '../types';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -26,9 +29,23 @@ type Props = $ReadOnly<{|
 
 export default function LightboxScreen(props: Props) {
   const { src, message } = props.route.params;
+
+  const orientation = useSelector(state => getSession(state).orientation);
+  const insets = useSafeAreaInsets();
+  // This'll go away very soon, of course.
+  const statusBarHidden = true;
+
   return (
     <View style={styles.screen}>
-      <ZulipStatusBar hidden backgroundColor="black" />
+      {orientation === 'PORTRAIT' && (
+        <View
+          style={{
+            height: statusBarHidden ? 0 : insets.top,
+            backgroundColor: 'black',
+          }}
+        />
+      )}
+      <ZulipStatusBar hidden={statusBarHidden} backgroundColor="black" />
       <ActionSheetProvider>
         <Lightbox src={src} message={message} />
       </ActionSheetProvider>
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index b725ad496c6..f837504b443 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';
@@ -20,8 +20,9 @@ import { OwnAvatar, OfflineNotice, ZulipStatusBar } from '../common';
 import IconUnreadConversations from '../nav/IconUnreadConversations';
 import ProfileScreen from '../account-info/ProfileScreen';
 import { useSelector } from '../react-redux';
-import { getHaveServerData } from '../selectors';
+import { getHaveServerData, getSession } from '../selectors';
 import styles, { ThemeContext } from '../styles';
+import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 
 export type MainTabsNavigatorParamList = {|
   home: RouteParamsOf<typeof HomeScreen>,
@@ -50,6 +51,11 @@ export default function MainTabsScreen(props: Props) {
   const { backgroundColor } = useContext(ThemeContext);
   const haveServerData = useSelector(getHaveServerData);
 
+  const orientation = useSelector(state => getSession(state).orientation);
+  const insets = useSafeAreaInsets();
+  // This'll go away very soon, of course.
+  const statusBarHidden = false;
+
   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 +69,14 @@ export default function MainTabsScreen(props: Props) {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
+      {orientation === 'PORTRAIT' && (
+        <View
+          style={{
+            height: statusBarHidden ? 0 : insets.top,
+            backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
+          }}
+        />
+      )}
       <ZulipStatusBar />
       <OfflineNotice />
       <Tab.Navigator
diff --git a/src/start/LoadingScreen.js b/src/start/LoadingScreen.js
index 8a0bac38d45..c30ea916a93 100644
--- a/src/start/LoadingScreen.js
+++ b/src/start/LoadingScreen.js
@@ -1,7 +1,10 @@
 /* @flow strict-local */
 import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useSelector } from '../react-redux';
+import { getSession } from '../selectors';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
@@ -27,8 +30,21 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function LoadingScreen(props: Props) {
+  const orientation = useSelector(state => getSession(state).orientation);
+  const insets = useSafeAreaInsets();
+  // This'll go away very soon, of course.
+  const statusBarHidden = false;
+
   return (
     <View style={componentStyles.center}>
+      {orientation === 'PORTRAIT' && (
+        <View
+          style={{
+            height: statusBarHidden ? 0 : insets.top,
+            backgroundColor: BRAND_COLOR,
+          }}
+        />
+      )}
       <ZulipStatusBar backgroundColor={BRAND_COLOR} />
       <LoadingIndicator color="black" size={80} showLogo />
     </View>

From bac28e4d3e622b0259b72d41cf2958e8b78bcc3f Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 18:32:28 -0500
Subject: [PATCH 04/34] ZulipStatusBar [nfc]: Settle into a recent change
 (1/x).

Simplify some trivial expressions.
---
 src/chat/ChatScreen.js         | 4 +---
 src/common/Screen.js           | 5 +----
 src/lightbox/LightboxScreen.js | 8 ++------
 src/main/MainTabsScreen.js     | 4 +---
 src/start/LoadingScreen.js     | 4 +---
 5 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 0cff30ba56e..56ef55e3edd 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -118,8 +118,6 @@ export default function ChatScreen(props: Props) {
   const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
   const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
-  // This'll go away very soon, of course.
-  const statusBarHidden = false;
 
   return (
     <ActionSheetProvider>
@@ -128,7 +126,7 @@ export default function ChatScreen(props: Props) {
           {orientation === 'PORTRAIT' && (
             <View
               style={{
-                height: statusBarHidden ? 0 : insets.top,
+                height: insets.top,
                 backgroundColor: titleBackgroundColor,
               }}
             />
diff --git a/src/common/Screen.js b/src/common/Screen.js
index 34587dca535..74b4d9ee82c 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -123,9 +123,6 @@ class Screen extends PureComponent<Props> {
       orientation,
     } = this.props;
 
-    // This'll go away very soon, of course.
-    const statusBarHidden = false;
-
     return (
       <View
         style={[
@@ -137,7 +134,7 @@ class Screen extends PureComponent<Props> {
         {orientation === 'PORTRAIT' && (
           <View
             style={{
-              height: statusBarHidden ? 0 : insets.top,
+              height: insets.top,
               backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
             }}
           />
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
index ab5298dd3db..7a33b588ddc 100644
--- a/src/lightbox/LightboxScreen.js
+++ b/src/lightbox/LightboxScreen.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelector } from '../react-redux';
 import { getSession } from '../selectors';
@@ -31,21 +30,18 @@ export default function LightboxScreen(props: Props) {
   const { src, message } = props.route.params;
 
   const orientation = useSelector(state => getSession(state).orientation);
-  const insets = useSafeAreaInsets();
-  // This'll go away very soon, of course.
-  const statusBarHidden = true;
 
   return (
     <View style={styles.screen}>
       {orientation === 'PORTRAIT' && (
         <View
           style={{
-            height: statusBarHidden ? 0 : insets.top,
+            height: 0,
             backgroundColor: 'black',
           }}
         />
       )}
-      <ZulipStatusBar hidden={statusBarHidden} backgroundColor="black" />
+      <ZulipStatusBar hidden backgroundColor="black" />
       <ActionSheetProvider>
         <Lightbox src={src} message={message} />
       </ActionSheetProvider>
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index f837504b443..efbc79c1f53 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -53,8 +53,6 @@ export default function MainTabsScreen(props: Props) {
 
   const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
-  // This'll go away very soon, of course.
-  const statusBarHidden = false;
 
   if (!haveServerData) {
     // This can happen if the user has just logged out; this screen
@@ -72,7 +70,7 @@ export default function MainTabsScreen(props: Props) {
       {orientation === 'PORTRAIT' && (
         <View
           style={{
-            height: statusBarHidden ? 0 : insets.top,
+            height: insets.top,
             backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
           }}
         />
diff --git a/src/start/LoadingScreen.js b/src/start/LoadingScreen.js
index c30ea916a93..7c26afbc3a8 100644
--- a/src/start/LoadingScreen.js
+++ b/src/start/LoadingScreen.js
@@ -32,15 +32,13 @@ type Props = $ReadOnly<{|
 export default function LoadingScreen(props: Props) {
   const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
-  // This'll go away very soon, of course.
-  const statusBarHidden = false;
 
   return (
     <View style={componentStyles.center}>
       {orientation === 'PORTRAIT' && (
         <View
           style={{
-            height: statusBarHidden ? 0 : insets.top,
+            height: insets.top,
             backgroundColor: BRAND_COLOR,
           }}
         />

From 59a2d4c376630e50316076dd054f0f5d9eb12116 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 18:35:18 -0500
Subject: [PATCH 05/34] ZulipStatusBar [nfc]: Settle into a recent change
 (2/x).

---
 src/common/ZulipStatusBar.js | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index 8775b526b51..d1ef559bb9f 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -3,10 +3,7 @@
 import React, { PureComponent } from 'react';
 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';
@@ -33,8 +30,6 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  insets: EdgeInsets,
-
   backgroundColor: string,
   hidden: boolean,
 
@@ -55,11 +50,8 @@ class ZulipStatusBar extends PureComponent<Props> {
   };
 
   render() {
-    const { theme, hidden, insets, orientation } = this.props;
+    const { theme, hidden, orientation } = this.props;
     const backgroundColor = this.props.backgroundColor;
-    // We'll remove this soon.
-    // eslint-disable-next-line no-unused-vars
-    const style = { height: hidden ? 0 : insets.top, backgroundColor };
     const statusBarColor = getStatusBarColor(backgroundColor, theme);
     return (
       orientation === 'PORTRAIT' && (
@@ -75,10 +67,7 @@ class ZulipStatusBar extends PureComponent<Props> {
   }
 }
 
-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);

From c1ab47e5c3e54a430ac662a3cd5e333bdc5dc55d Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 25 Jan 2021 18:37:21 -0500
Subject: [PATCH 06/34] ZulipStatusBar [nfc]: Settle into a recent change
 (3/x).

The value of this constant is `'transparent'`, which is the default
background color of `View`s anyway.
---
 src/common/Screen.js       | 10 +---------
 src/main/MainTabsScreen.js | 10 +---------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/common/Screen.js b/src/common/Screen.js
index 74b4d9ee82c..c5873319117 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -19,7 +19,6 @@ import ZulipStatusBar from './ZulipStatusBar';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
 import { getSession } from '../directSelectors';
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 
 const componentStyles = createStyleSheet({
   screen: {
@@ -131,14 +130,7 @@ class Screen extends PureComponent<Props> {
           { paddingBottom: insets.bottom },
         ]}
       >
-        {orientation === 'PORTRAIT' && (
-          <View
-            style={{
-              height: insets.top,
-              backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
-            }}
-          />
-        )}
+        {orientation === 'PORTRAIT' && <View style={{ height: insets.top }} />}
         <ZulipStatusBar />
         {search ? (
           <ModalSearchNavBar
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index efbc79c1f53..401c33466d8 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -22,7 +22,6 @@ import ProfileScreen from '../account-info/ProfileScreen';
 import { useSelector } from '../react-redux';
 import { getHaveServerData, getSession } from '../selectors';
 import styles, { ThemeContext } from '../styles';
-import { DEFAULT_TITLE_BACKGROUND_COLOR } from '../title/titleSelectors';
 
 export type MainTabsNavigatorParamList = {|
   home: RouteParamsOf<typeof HomeScreen>,
@@ -67,14 +66,7 @@ export default function MainTabsScreen(props: Props) {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
-      {orientation === 'PORTRAIT' && (
-        <View
-          style={{
-            height: insets.top,
-            backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
-          }}
-        />
-      )}
+      {orientation === 'PORTRAIT' && <View style={{ height: insets.top }} />}
       <ZulipStatusBar />
       <OfflineNotice />
       <Tab.Navigator

From 919c71d1fe6eaf2c00add9e40a018f3976e7679b Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 12:28:18 -0500
Subject: [PATCH 07/34] LightboxScreen [nfc]: Remove an invisible, zero-height
 `View`.

---
 src/lightbox/LightboxScreen.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
index 7a33b588ddc..3a9a5012c6e 100644
--- a/src/lightbox/LightboxScreen.js
+++ b/src/lightbox/LightboxScreen.js
@@ -3,8 +3,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
-import { useSelector } from '../react-redux';
-import { getSession } from '../selectors';
 import type { Message } from '../types';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -29,18 +27,8 @@ type Props = $ReadOnly<{|
 export default function LightboxScreen(props: Props) {
   const { src, message } = props.route.params;
 
-  const orientation = useSelector(state => getSession(state).orientation);
-
   return (
     <View style={styles.screen}>
-      {orientation === 'PORTRAIT' && (
-        <View
-          style={{
-            height: 0,
-            backgroundColor: 'black',
-          }}
-        />
-      )}
       <ZulipStatusBar hidden backgroundColor="black" />
       <ActionSheetProvider>
         <Lightbox src={src} message={message} />

From 4f1fcff5266eaf44442b0fe630716f4cb897f089 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 14:47:42 -0500
Subject: [PATCH 08/34] safe-area: Remove an unnecessary condition on
 `orientation`.

In each of these instances, the `View` will be rendered at the top
of the screen -- regardless of the device's orientation. (I.e., if
it's in a portrait orientation, it'll be on a short side at the top;
if it's in a landscape orientation, it'll be on a long side at the
top.) The `View` is meant to guard against a potential unsafe area
at the top. In principle, that isn't less necessary when we're in a
landscape orientation.

I can't think of a device that has a nonzero top inset in landscape
mode, so it's possible that this commit is NFC. Still, we might as
well (1) handle that case, so we don't have to think about it, and
(2) remove something that can cause confusion.
---
 src/chat/ChatScreen.js     | 15 ++++++---------
 src/common/Screen.js       | 22 +++-------------------
 src/main/MainTabsScreen.js |  5 ++---
 src/start/LoadingScreen.js | 17 ++++++-----------
 4 files changed, 17 insertions(+), 42 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 56ef55e3edd..b8b77026c1e 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -116,21 +116,18 @@ export default function ChatScreen(props: Props) {
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
   const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
-  const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
 
   return (
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
-          {orientation === 'PORTRAIT' && (
-            <View
-              style={{
-                height: insets.top,
-                backgroundColor: titleBackgroundColor,
-              }}
-            />
-          )}
+          <View
+            style={{
+              height: insets.top,
+              backgroundColor: titleBackgroundColor,
+            }}
+          />
           <ZulipStatusBar backgroundColor={titleBackgroundColor} />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
diff --git a/src/common/Screen.js b/src/common/Screen.js
index c5873319117..5f2ac4bb0b0 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -5,20 +5,17 @@ import type { Node as React$Node } from 'react';
 import { View, ScrollView } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { type EdgeInsets } from 'react-native-safe-area-context';
-import { compose } from 'redux';
 
 import { withSafeAreaInsets } from '../react-native-safe-area-context';
-import { connect } from '../react-redux';
 import type { ThemeData } from '../styles';
 import styles, { createStyleSheet, ThemeContext } from '../styles';
-import type { Dispatch, LocalizableText, Orientation } from '../types';
+import type { LocalizableText } from '../types';
 import KeyboardAvoider from './KeyboardAvoider';
 import OfflineNotice from './OfflineNotice';
 import LoadingBanner from './LoadingBanner';
 import ZulipStatusBar from './ZulipStatusBar';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
-import { getSession } from '../directSelectors';
 
 const componentStyles = createStyleSheet({
   screen: {
@@ -39,10 +36,6 @@ const componentStyles = createStyleSheet({
   },
 });
 
-type SelectorProps = $ReadOnly<{|
-  orientation: Orientation,
-|}>;
-
 type Props = $ReadOnly<{|
   centerContent: boolean,
   +children: React$Node,
@@ -59,9 +52,6 @@ type Props = $ReadOnly<{|
 
   canGoBack: boolean,
   +title: LocalizableText,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
 /**
@@ -119,7 +109,6 @@ class Screen extends PureComponent<Props> {
       style,
       title,
       shouldShowLoadingBanner,
-      orientation,
     } = this.props;
 
     return (
@@ -130,7 +119,7 @@ class Screen extends PureComponent<Props> {
           { paddingBottom: insets.bottom },
         ]}
       >
-        {orientation === 'PORTRAIT' && <View style={{ height: insets.top }} />}
+        <View style={{ height: insets.top }} />
         <ZulipStatusBar />
         {search ? (
           <ModalSearchNavBar
@@ -162,9 +151,4 @@ class Screen extends PureComponent<Props> {
   }
 }
 
-export default compose(
-  connect<SelectorProps, _, _>((state, props) => ({
-    orientation: getSession(state).orientation,
-  })),
-  withSafeAreaInsets,
-)(Screen);
+export default withSafeAreaInsets(Screen);
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index 401c33466d8..0c5a25b3c40 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -20,7 +20,7 @@ import { OwnAvatar, OfflineNotice, ZulipStatusBar } from '../common';
 import IconUnreadConversations from '../nav/IconUnreadConversations';
 import ProfileScreen from '../account-info/ProfileScreen';
 import { useSelector } from '../react-redux';
-import { getHaveServerData, getSession } from '../selectors';
+import { getHaveServerData } from '../selectors';
 import styles, { ThemeContext } from '../styles';
 
 export type MainTabsNavigatorParamList = {|
@@ -50,7 +50,6 @@ export default function MainTabsScreen(props: Props) {
   const { backgroundColor } = useContext(ThemeContext);
   const haveServerData = useSelector(getHaveServerData);
 
-  const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
 
   if (!haveServerData) {
@@ -66,7 +65,7 @@ export default function MainTabsScreen(props: Props) {
 
   return (
     <View style={[styles.flexed, { backgroundColor }]}>
-      {orientation === 'PORTRAIT' && <View style={{ height: insets.top }} />}
+      <View style={{ height: insets.top }} />
       <ZulipStatusBar />
       <OfflineNotice />
       <Tab.Navigator
diff --git a/src/start/LoadingScreen.js b/src/start/LoadingScreen.js
index 7c26afbc3a8..a9014e785d2 100644
--- a/src/start/LoadingScreen.js
+++ b/src/start/LoadingScreen.js
@@ -3,8 +3,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useSelector } from '../react-redux';
-import { getSession } from '../selectors';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
@@ -30,19 +28,16 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function LoadingScreen(props: Props) {
-  const orientation = useSelector(state => getSession(state).orientation);
   const insets = useSafeAreaInsets();
 
   return (
     <View style={componentStyles.center}>
-      {orientation === 'PORTRAIT' && (
-        <View
-          style={{
-            height: insets.top,
-            backgroundColor: BRAND_COLOR,
-          }}
-        />
-      )}
+      <View
+        style={{
+          height: insets.top,
+          backgroundColor: BRAND_COLOR,
+        }}
+      />
       <ZulipStatusBar backgroundColor={BRAND_COLOR} />
       <LoadingIndicator color="black" size={80} showLogo />
     </View>

From e7520ac51f1cf9b67f4808dee83368e2427b9ce2 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 14:56:17 -0500
Subject: [PATCH 09/34] ChatScreen [nfc]: Reorder `View` with `ZulipStatusBar`.

As noted in a recent commit, the `ZulipStatusBar` component no
longer has any effect on the spatial layout of the UI, so we're free
to do this.
---
 src/chat/ChatScreen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index b8b77026c1e..0115c6cd288 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -122,13 +122,13 @@ export default function ChatScreen(props: Props) {
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
+          <ZulipStatusBar backgroundColor={titleBackgroundColor} />
           <View
             style={{
               height: insets.top,
               backgroundColor: titleBackgroundColor,
             }}
           />
-          <ZulipStatusBar backgroundColor={titleBackgroundColor} />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
           <UnreadNotice narrow={narrow} />

From f06bbad464e0b9d65954d27c8ae919280e1fc120 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 15:33:19 -0500
Subject: [PATCH 10/34] ChatScreen [nfc]: Move safe-area-handling `View` into
 `ChatNavBar`.

The nav bar is always present, for `ChatScreen`, and always at the
top. So it's harmless to have the nav bar component also take
control of handling the upper safe-area inset. (The default
algorithm used to display the diff in `ChatNavBar` gives a lot of
noise; `git diff -w` should reduce that quite a lot.)

Soon, I'd like to start reversing our avoidance of React
Navigation's screen-header APIs; i.e., it'll make sense for the
`<Stack.Screen` with `component={ChatScreen}` to use `ChatNavBar`
(or something much like it) in its `header` prop [1], instead of
sticking it at the top of the screen component, where the screen's
content belongs.

When we do that, `ChatScreen` will properly describe only the
content of the screen, below the header, and it'll be too far down
the screen for top-safe-area handling to be done there.

[1] https://reactnavigation.org/docs/stack-navigator/#header
---
 src/chat/ChatScreen.js |  8 ------
 src/nav/ChatNavBar.js  | 65 ++++++++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 0115c6cd288..b128d4e4116 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -3,7 +3,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useSelector, useDispatch } from '../react-redux';
 import type { RouteProp } from '../react-navigation';
@@ -116,19 +115,12 @@ export default function ChatScreen(props: Props) {
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
   const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
-  const insets = useSafeAreaInsets();
 
   return (
     <ActionSheetProvider>
       <View style={[componentStyles.screen, { backgroundColor }]}>
         <KeyboardAvoider style={styles.flexed} behavior="padding">
           <ZulipStatusBar backgroundColor={titleBackgroundColor} />
-          <View
-            style={{
-              height: insets.top,
-              backgroundColor: titleBackgroundColor,
-            }}
-          />
           <ChatNavBar narrow={narrow} editMessage={editMessage} />
           <OfflineNotice />
           <UnreadNotice narrow={narrow} />
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 04d3a074abc..d2b741272e3 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
@@ -31,36 +32,46 @@ export default function ChatNavBar(props: Props) {
       ? 'default'
       : foregroundColorFromBackground(backgroundColor);
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <View
-      style={{
-        borderColor:
-          backgroundColor === 'transparent'
-            ? 'hsla(0, 0%, 50%, 0.25)'
-            : Color(backgroundColor).darken(0.1),
-        borderBottomWidth: 1,
-      }}
-    >
+    <>
+      <View
+        style={{
+          height: insets.top,
+          backgroundColor,
+        }}
+      />
       <View
-        style={[
-          {
-            flexDirection: 'row',
-            height: NAVBAR_SIZE,
-            alignItems: 'center',
-          },
-          { backgroundColor },
-        ]}
+        style={{
+          borderColor:
+            backgroundColor === 'transparent'
+              ? 'hsla(0, 0%, 50%, 0.25)'
+              : Color(backgroundColor).darken(0.1),
+          borderBottomWidth: 1,
+        }}
       >
-        <NavBarBackButton color={color} />
-        <Title color={color} narrow={narrow} editMessage={editMessage} />
-        <ExtraButton color={color} narrow={narrow} />
-        <InfoButton color={color} narrow={narrow} />
+        <View
+          style={[
+            {
+              flexDirection: 'row',
+              height: NAVBAR_SIZE,
+              alignItems: 'center',
+            },
+            { backgroundColor },
+          ]}
+        >
+          <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={backgroundColor}
-        textColor={color}
-      />
-    </View>
+    </>
   );
 }

From 84c708854ee8100a77d93f78ca2dccc14821368b Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 17:38:29 -0500
Subject: [PATCH 11/34] ChatNavBar [nfc]: Better integrate safe-area handling
 (1/x).

---
 src/nav/ChatNavBar.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index d2b741272e3..2b066415392 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -49,17 +49,15 @@ export default function ChatNavBar(props: Props) {
               ? 'hsla(0, 0%, 50%, 0.25)'
               : Color(backgroundColor).darken(0.1),
           borderBottomWidth: 1,
+          backgroundColor,
         }}
       >
         <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} />

From 2f026516976a79ffcff6199372405e40bb65fcad Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 17:39:25 -0500
Subject: [PATCH 12/34] ChatNavBar [nfc]: Better integrate safe-area handling
 (2/x).

---
 src/nav/ChatNavBar.js | 55 +++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 2b066415392..72992e91be0 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -35,41 +35,34 @@ export default function ChatNavBar(props: Props) {
   const insets = useSafeAreaInsets();
 
   return (
-    <>
+    <View
+      style={{
+        borderColor:
+          backgroundColor === 'transparent'
+            ? 'hsla(0, 0%, 50%, 0.25)'
+            : Color(backgroundColor).darken(0.1),
+        borderBottomWidth: 1,
+        backgroundColor,
+        paddingTop: insets.top,
+      }}
+    >
       <View
         style={{
-          height: insets.top,
-          backgroundColor,
-        }}
-      />
-      <View
-        style={{
-          borderColor:
-            backgroundColor === 'transparent'
-              ? 'hsla(0, 0%, 50%, 0.25)'
-              : Color(backgroundColor).darken(0.1),
-          borderBottomWidth: 1,
-          backgroundColor,
+          flexDirection: 'row',
+          height: NAVBAR_SIZE,
+          alignItems: 'center',
         }}
       >
-        <View
-          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}
-        />
+        <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>
   );
 }

From 86b09d3f587dd0ee7481916b7660ee0be81a8318 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 17:41:15 -0500
Subject: [PATCH 13/34] ChatNavBar: Better integrate safe-area handling (3/x).

react-native-safe-area-context recommends [1] using its
`SafeAreaView` component, which applies the insets natively, to
avoid flickering when you rotate the screen.

[1] https://github.com/th3rdwave/react-native-safe-area-context
---
 src/nav/ChatNavBar.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 72992e91be0..26ab4ea2b7b 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Color from 'color';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
@@ -32,10 +32,10 @@ export default function ChatNavBar(props: Props) {
       ? 'default'
       : foregroundColorFromBackground(backgroundColor);
 
-  const insets = useSafeAreaInsets();
-
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top']}
       style={{
         borderColor:
           backgroundColor === 'transparent'
@@ -43,7 +43,6 @@ export default function ChatNavBar(props: Props) {
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,
         backgroundColor,
-        paddingTop: insets.top,
       }}
     >
       <View
@@ -63,6 +62,6 @@ export default function ChatNavBar(props: Props) {
         backgroundColor={backgroundColor}
         textColor={color}
       />
-    </View>
+    </SafeAreaView>
   );
 }

From 909a3f79a7c8427b3d65ccbffda7643f22bb24c2 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 17:44:26 -0500
Subject: [PATCH 14/34] ChatNavBar: Handle left and right insets too.

The contents of this header extend all the way to the left and the
right of the screen. When in landscape mode, the left and right
insets can be nonzero.

We shouldn't add padding for the bottom inset because the header
isn't at the bottom of the screen.
---
 src/nav/ChatNavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 26ab4ea2b7b..1241342db6a 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -35,7 +35,7 @@ export default function ChatNavBar(props: Props) {
   return (
     <SafeAreaView
       mode="padding"
-      edges={['top']}
+      edges={['top', 'right', 'left']}
       style={{
         borderColor:
           backgroundColor === 'transparent'

From b89634af670f3e13ce5f7be528288a7e6633932e Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 19:12:24 -0500
Subject: [PATCH 15/34] SettingsScreen: Remove `ModalNavBar`.

- None of the other tabs have a header like this, so it looks a bit
  odd and inconsistent.

- It duplicates what's being said by the selected gear icon in the
  bottom tab bar.

- It takes up space.

See also discussion at
https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Stack.20nav.20for.20settings.20tab/near/1107707.
---
 src/settings/SettingsScreen.js | 2 --
 1 file changed, 2 deletions(-)

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"

From 08c19045101c8c8fbabf3f7c020cb1f375b3eb6e Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 20:46:54 -0500
Subject: [PATCH 16/34] Screen [nfc]: Reorder `View` with `ZulipStatusBar`.

As noted in a recent commit, the `ZulipStatusBar` component no
longer has any effect on the spatial layout of the UI, so we're free
to do this.
---
 src/common/Screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/Screen.js b/src/common/Screen.js
index 5f2ac4bb0b0..cf39281c11d 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -119,8 +119,8 @@ class Screen extends PureComponent<Props> {
           { paddingBottom: insets.bottom },
         ]}
       >
-        <View style={{ height: insets.top }} />
         <ZulipStatusBar />
+        <View style={{ height: insets.top }} />
         {search ? (
           <ModalSearchNavBar
             autoFocus={autoFocus}

From 746a9f6d13dd997e6740f0c07b1bd35ba457b804 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:04:41 -0500
Subject: [PATCH 17/34] Screen [nfc]: Move safe-area-handling `View` into
 `Modal(Search)NavBar`.

Like we did in a recent commit, moving a similar `View` from
`ChatScreen` into `ChatNavBar`.
---
 src/common/Screen.js         |  1 -
 src/nav/ModalNavBar.js       | 37 ++++++++++++++++++++----------------
 src/nav/ModalSearchNavBar.js | 31 +++++++++++++++++-------------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/common/Screen.js b/src/common/Screen.js
index cf39281c11d..078983ca982 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -120,7 +120,6 @@ class Screen extends PureComponent<Props> {
         ]}
       >
         <ZulipStatusBar />
-        <View style={{ height: insets.top }} />
         {search ? (
           <ModalSearchNavBar
             autoFocus={autoFocus}
diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index 0d87bb96538..ddf4e785a18 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 { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { LocalizableText } from '../types';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
@@ -20,24 +21,28 @@ export default function ModalNavBar(props: Props) {
     styles.navTitle,
     canGoBack ? { marginRight: NAVBAR_SIZE } : { marginLeft: 16 },
   ];
+  const insets = useSafeAreaInsets();
 
   return (
-    <View
-      style={[
-        {
-          borderColor: 'hsla(0, 0%, 50%, 0.25)',
-          flexDirection: 'row',
-          height: NAVBAR_SIZE,
-          alignItems: 'center',
-          borderBottomWidth: 1,
-          backgroundColor,
-        },
-      ]}
-    >
-      {canGoBack && <NavBarBackButton />}
-      <View style={styles.flexedLeftAlign}>
-        <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
+    <>
+      <View style={{ height: insets.top }} />
+      <View
+        style={[
+          {
+            borderColor: 'hsla(0, 0%, 50%, 0.25)',
+            flexDirection: 'row',
+            height: NAVBAR_SIZE,
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            backgroundColor,
+          },
+        ]}
+      >
+        {canGoBack && <NavBarBackButton />}
+        <View style={styles.flexedLeftAlign}>
+          <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
+        </View>
       </View>
-    </View>
+    </>
   );
 }
diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index 1fb0c635ea5..e1be84126b4 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ThemeContext, NAVBAR_SIZE } from '../styles';
 import SearchInput from '../common/SearchInput';
@@ -15,19 +16,23 @@ type Props = $ReadOnly<{|
 export default function ModalSearchNavBar(props: Props) {
   const { autoFocus, searchBarOnChange, canGoBack = true } = props;
   const { backgroundColor } = useContext(ThemeContext);
+  const insets = useSafeAreaInsets();
   return (
-    <View
-      style={{
-        borderColor: 'hsla(0, 0%, 50%, 0.25)',
-        flexDirection: 'row',
-        height: NAVBAR_SIZE,
-        alignItems: 'center',
-        borderBottomWidth: 1,
-        backgroundColor,
-      }}
-    >
-      {canGoBack && <NavBarBackButton />}
-      <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
-    </View>
+    <>
+      <View style={{ height: insets.top }} />
+      <View
+        style={{
+          borderColor: 'hsla(0, 0%, 50%, 0.25)',
+          flexDirection: 'row',
+          height: NAVBAR_SIZE,
+          alignItems: 'center',
+          borderBottomWidth: 1,
+          backgroundColor,
+        }}
+      >
+        {canGoBack && <NavBarBackButton />}
+        <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
+      </View>
+    </>
   );
 }

From 635b13a39c6610dd4f368d8d2e5285537fac8aa8 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:13:07 -0500
Subject: [PATCH 18/34] ModalNavBar: Remove explicit height.

This limits our flexibility for gracefully handling the user's
system font-size preference.
---
 src/nav/ModalNavBar.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index ddf4e785a18..162b971ce8f 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -31,7 +31,6 @@ export default function ModalNavBar(props: Props) {
           {
             borderColor: 'hsla(0, 0%, 50%, 0.25)',
             flexDirection: 'row',
-            height: NAVBAR_SIZE,
             alignItems: 'center',
             borderBottomWidth: 1,
             backgroundColor,

From 3f5bcf35b9140188665d731a4720ae8796d0eab9 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:14:37 -0500
Subject: [PATCH 19/34] ModalNavBar: Better integrate safe-area handling (1/x).

Now, `backgroundColor` extends up through the top inset.
---
 src/nav/ModalNavBar.js | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index 162b971ce8f..de0ab770973 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -24,24 +24,22 @@ export default function ModalNavBar(props: Props) {
   const insets = useSafeAreaInsets();
 
   return (
-    <>
-      <View style={{ height: insets.top }} />
-      <View
-        style={[
-          {
-            borderColor: 'hsla(0, 0%, 50%, 0.25)',
-            flexDirection: 'row',
-            alignItems: 'center',
-            borderBottomWidth: 1,
-            backgroundColor,
-          },
-        ]}
-      >
-        {canGoBack && <NavBarBackButton />}
-        <View style={styles.flexedLeftAlign}>
-          <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
-        </View>
+    <View
+      style={[
+        {
+          borderColor: 'hsla(0, 0%, 50%, 0.25)',
+          flexDirection: 'row',
+          alignItems: 'center',
+          borderBottomWidth: 1,
+          backgroundColor,
+          paddingTop: insets.top,
+        },
+      ]}
+    >
+      {canGoBack && <NavBarBackButton />}
+      <View style={styles.flexedLeftAlign}>
+        <Label style={textStyle} text={title} numberOfLines={1} ellipsizeMode="tail" />
       </View>
-    </>
+    </View>
   );
 }

From c5f340dbfc61a0ede13c29b06914207f76df20c8 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:16:34 -0500
Subject: [PATCH 20/34] ModalNavBar: Better integrate safe-area handling (2/x).

react-native-safe-area-context recommends [1] using its
`SafeAreaView` component, which applies the insets natively, to
avoid flickering when you rotate the screen.

[1] https://github.com/th3rdwave/react-native-safe-area-context
---
 src/nav/ModalNavBar.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index de0ab770973..9065270d09f 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -2,7 +2,7 @@
 
 import React, { useContext } from 'react';
 import { View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { LocalizableText } from '../types';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
@@ -21,10 +21,11 @@ export default function ModalNavBar(props: Props) {
     styles.navTitle,
     canGoBack ? { marginRight: NAVBAR_SIZE } : { marginLeft: 16 },
   ];
-  const insets = useSafeAreaInsets();
 
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top']}
       style={[
         {
           borderColor: 'hsla(0, 0%, 50%, 0.25)',
@@ -32,7 +33,6 @@ export default function ModalNavBar(props: Props) {
           alignItems: 'center',
           borderBottomWidth: 1,
           backgroundColor,
-          paddingTop: insets.top,
         },
       ]}
     >
@@ -40,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>
   );
 }

From fd81cc78f4b0362be4b05d80cab7fcbb45e47159 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:18:21 -0500
Subject: [PATCH 21/34] ModalNavBar: Handle left and right insets too.

For landscape mode.
---
 src/nav/ModalNavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index 9065270d09f..ba77e56de1a 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -25,7 +25,7 @@ export default function ModalNavBar(props: Props) {
   return (
     <SafeAreaView
       mode="padding"
-      edges={['top']}
+      edges={['top', 'right', 'left']}
       style={[
         {
           borderColor: 'hsla(0, 0%, 50%, 0.25)',

From a9ab3fc21fbb96adfa6715b5f19f214b3365066c Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:15:28 -0500
Subject: [PATCH 22/34] ModalSearchNavBar: Remove explicit height.

This limits our flexibility for gracefully handling the user's
system font-size preference.
---
 src/nav/ModalSearchNavBar.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index e1be84126b4..a5222b110a3 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { View } from 'react-native';
 import { useSafeAreaInsets } 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';
 
@@ -24,7 +24,6 @@ export default function ModalSearchNavBar(props: Props) {
         style={{
           borderColor: 'hsla(0, 0%, 50%, 0.25)',
           flexDirection: 'row',
-          height: NAVBAR_SIZE,
           alignItems: 'center',
           borderBottomWidth: 1,
           backgroundColor,

From 93d9efa08d816bef3b7f7355f564bc4edebb3746 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:24:02 -0500
Subject: [PATCH 23/34] ModalSearchNavBar: Better integrate safe-area handling
 (1/x).

Now, `backgroundColor` extends up through the top inset.
---
 src/nav/ModalSearchNavBar.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index a5222b110a3..edb14a4bff5 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -18,20 +18,18 @@ export default function ModalSearchNavBar(props: Props) {
   const { backgroundColor } = useContext(ThemeContext);
   const insets = useSafeAreaInsets();
   return (
-    <>
-      <View style={{ height: insets.top }} />
-      <View
-        style={{
-          borderColor: 'hsla(0, 0%, 50%, 0.25)',
-          flexDirection: 'row',
-          alignItems: 'center',
-          borderBottomWidth: 1,
-          backgroundColor,
-        }}
-      >
-        {canGoBack && <NavBarBackButton />}
-        <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
-      </View>
-    </>
+    <View
+      style={{
+        borderColor: 'hsla(0, 0%, 50%, 0.25)',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomWidth: 1,
+        backgroundColor,
+        paddingTop: insets.top,
+      }}
+    >
+      {canGoBack && <NavBarBackButton />}
+      <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
+    </View>
   );
 }

From d1fd30dd3e00ea268c9592225ccd6fb52d140719 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:26:03 -0500
Subject: [PATCH 24/34] ModalSearchNavBar: Better integrate safe-area handling
 (2/x).

---
 src/nav/ModalSearchNavBar.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index edb14a4bff5..853e7e54c22 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -1,7 +1,6 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
-import { View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { ThemeContext } from '../styles';
 import SearchInput from '../common/SearchInput';
@@ -16,20 +15,20 @@ type Props = $ReadOnly<{|
 export default function ModalSearchNavBar(props: Props) {
   const { autoFocus, searchBarOnChange, canGoBack = true } = props;
   const { backgroundColor } = useContext(ThemeContext);
-  const insets = useSafeAreaInsets();
   return (
-    <View
+    <SafeAreaView
+      mode="padding"
+      edges={['top']}
       style={{
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         flexDirection: 'row',
         alignItems: 'center',
         borderBottomWidth: 1,
         backgroundColor,
-        paddingTop: insets.top,
       }}
     >
       {canGoBack && <NavBarBackButton />}
       <SearchInput autoFocus={autoFocus} onChangeText={searchBarOnChange} />
-    </View>
+    </SafeAreaView>
   );
 }

From deb301557d871290970e54031a2dd2502224a9bf Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 26 Jan 2021 21:26:36 -0500
Subject: [PATCH 25/34] ModalSearchNavBar: Handle left and right insets too.

For landscape mode.
---
 src/nav/ModalSearchNavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index 853e7e54c22..9d2751be510 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -18,7 +18,7 @@ export default function ModalSearchNavBar(props: Props) {
   return (
     <SafeAreaView
       mode="padding"
-      edges={['top']}
+      edges={['top', 'right', 'left']}
       style={{
         borderColor: 'hsla(0, 0%, 50%, 0.25)',
         flexDirection: 'row',

From 26f6f231521753b14e8fc8c9ddf5767c93e76a20 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:28:55 -0500
Subject: [PATCH 26/34] ChatNavBar [nfc]: Pass `undefined` instead of
 'transparent'.

This should be equivalent, and it'll help with a simplification
we're about to do.
---
 src/nav/ChatNavBar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 1241342db6a..adaf53649ad 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -42,7 +42,8 @@ export default function ChatNavBar(props: Props) {
             ? 'hsla(0, 0%, 50%, 0.25)'
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,
-        backgroundColor,
+        backgroundColor:
+          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR ? undefined : backgroundColor,
       }}
     >
       <View

From 5abde565b87037c6aad9654121df9d0e2f427878 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:30:02 -0500
Subject: [PATCH 27/34] ChatNavBar [nfc]: Use a variable instead of
 'transparent'.

This is pretty clearly what was intended. Soon, though, we'll
simplify things by removing the variable -- at this point, it's just
being used as a sentinel value [1].

[1] https://github.com/zulip/zulip-mobile/pull/4443#discussion_r567121563
---
 src/nav/ChatNavBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index adaf53649ad..0dc73897609 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -38,7 +38,7 @@ export default function ChatNavBar(props: Props) {
       edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === 'transparent'
+          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
             ? 'hsla(0, 0%, 50%, 0.25)'
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,

From a9c1b4490b035e399e1397662fba95cd30b621b9 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:33:32 -0500
Subject: [PATCH 28/34] nav [nfc]: Remove DEFAULT_TITLE_BACKGROUND_COLOR.

We're only using this as a sentinel value [1], so `undefined` works
just as well and is less to think about.

[1] https://github.com/zulip/zulip-mobile/pull/4443#discussion_r567121563
---
 src/common/ZulipStatusBar.js                   |  9 ++++-----
 src/common/__tests__/getStatusBarColor-test.js |  7 ++-----
 src/nav/ChatNavBar.js                          | 15 +++++----------
 src/title/__tests__/titleSelectors-test.js     | 10 ++++------
 src/title/titleSelectors.js                    |  4 +---
 5 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index d1ef559bb9f..0b330155cdc 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -6,14 +6,13 @@ import Color from 'color';
 
 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
+export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
+  backgroundColor === undefined
     ? theme === 'night'
       ? 'hsl(212, 28%, 18%)'
       : 'white'
@@ -30,7 +29,7 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  backgroundColor: string,
+  backgroundColor: string | void,
   hidden: boolean,
 
   dispatch: Dispatch,
@@ -46,7 +45,7 @@ type Props = $ReadOnly<{
 class ZulipStatusBar extends PureComponent<Props> {
   static defaultProps = {
     hidden: false,
-    backgroundColor: DEFAULT_TITLE_BACKGROUND_COLOR,
+    backgroundColor: undefined,
   };
 
   render() {
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/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 0dc73897609..3a83fb6cd06 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -11,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 { getTitleBackgroundColor } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
@@ -24,13 +24,9 @@ export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
   const backgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
   const color =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? BRAND_COLOR
-      : foregroundColorFromBackground(backgroundColor);
+    backgroundColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(backgroundColor);
   const spinnerColor =
-    backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
-      ? 'default'
-      : foregroundColorFromBackground(backgroundColor);
+    backgroundColor === undefined ? 'default' : foregroundColorFromBackground(backgroundColor);
 
   return (
     <SafeAreaView
@@ -38,12 +34,11 @@ export default function ChatNavBar(props: Props) {
       edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
+          backgroundColor === undefined
             ? 'hsla(0, 0%, 50%, 0.25)'
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,
-        backgroundColor:
-          backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR ? undefined : backgroundColor,
+        backgroundColor: backgroundColor === undefined ? undefined : backgroundColor,
       }}
     >
       <View
diff --git a/src/title/__tests__/titleSelectors-test.js b/src/title/__tests__/titleSelectors-test.js
index 0142e507559..67a97f0f0f4 100644
--- a/src/title/__tests__/titleSelectors-test.js
+++ b/src/title/__tests__/titleSelectors-test.js
@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../titleSelectors';
+import { getTitleBackgroundColor } from '../titleSelectors';
 import { pmNarrowFromUsersUnsafe, streamNarrow, pm1to1NarrowFromUser } from '../../utils/narrow';
 import * as eg from '../../__tests__/lib/exampleData';
 
@@ -19,12 +19,10 @@ describe('getTitleBackgroundColor', () => {
     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,
-    );
+  test('return undefined for non topic/stream narrow', () => {
+    expect(getTitleBackgroundColor(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(undefined);
     expect(
       getTitleBackgroundColor(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
-    ).toEqual(DEFAULT_TITLE_BACKGROUND_COLOR);
+    ).toEqual(undefined);
   });
 });
diff --git a/src/title/titleSelectors.js b/src/title/titleSelectors.js
index aeef4f10147..25226d7e254 100644
--- a/src/title/titleSelectors.js
+++ b/src/title/titleSelectors.js
@@ -3,8 +3,6 @@ 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`.
  *
@@ -14,7 +12,7 @@ export const DEFAULT_TITLE_BACKGROUND_COLOR = 'transparent';
 export const getTitleBackgroundColor = (state: GlobalState, narrow: Narrow) => {
   const subscriptionsByName = getSubscriptionsByName(state);
   if (!isStreamOrTopicNarrow(narrow)) {
-    return DEFAULT_TITLE_BACKGROUND_COLOR;
+    return undefined;
   }
   const streamName = streamNameOfNarrow(narrow);
   return subscriptionsByName.get(streamName)?.color ?? 'gray';

From 42396b6c7e70da4b14fa48d00250c6187bee7b47 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:40:09 -0500
Subject: [PATCH 29/34] nav [nfc]: Simplify a few conditionals.

---
 src/common/ZulipStatusBar.js | 6 +-----
 src/nav/ChatNavBar.js        | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index 0b330155cdc..1a88366bd2e 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -12,11 +12,7 @@ import { getSession, getSettings } from '../selectors';
 type BarStyle = $PropertyType<React$ElementConfig<typeof StatusBar>, 'barStyle'>;
 
 export const getStatusBarColor = (backgroundColor: string | void, theme: ThemeName): string =>
-  backgroundColor === undefined
-    ? theme === 'night'
-      ? 'hsl(212, 28%, 18%)'
-      : 'white'
-    : backgroundColor;
+  backgroundColor ?? (theme === 'night' ? 'hsl(212, 28%, 18%)' : 'white');
 
 export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
   foregroundColorFromBackground(statusBarColor) === 'white' /* force newline */
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 3a83fb6cd06..5c05dc9e690 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -38,7 +38,7 @@ export default function ChatNavBar(props: Props) {
             ? 'hsla(0, 0%, 50%, 0.25)'
             : Color(backgroundColor).darken(0.1),
         borderBottomWidth: 1,
-        backgroundColor: backgroundColor === undefined ? undefined : backgroundColor,
+        backgroundColor,
       }}
     >
       <View

From d16cdfae516eb0ec11e76557e31556e6073997e3 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 1 Feb 2021 18:12:29 -0500
Subject: [PATCH 30/34] ZulipStatusBar [nfc]: Remove default prop with value
 `undefined`.

Some callers pass a `string` type; some don't pass anything, and one
passes a `string | void` type.

So `backgroundColor?: string | void` seems the most correct, even
though we could probably get away with removing the `| void`.
---
 src/common/ZulipStatusBar.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common/ZulipStatusBar.js b/src/common/ZulipStatusBar.js
index 1a88366bd2e..1ea9c729b75 100644
--- a/src/common/ZulipStatusBar.js
+++ b/src/common/ZulipStatusBar.js
@@ -25,7 +25,7 @@ type SelectorProps = $ReadOnly<{|
 |}>;
 
 type Props = $ReadOnly<{
-  backgroundColor: string | void,
+  backgroundColor?: string | void,
   hidden: boolean,
 
   dispatch: Dispatch,
@@ -41,7 +41,6 @@ type Props = $ReadOnly<{
 class ZulipStatusBar extends PureComponent<Props> {
   static defaultProps = {
     hidden: false,
-    backgroundColor: undefined,
   };
 
   render() {

From dada934c2719d55fdbcf974fb98d55c6e0dbb131 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:44:11 -0500
Subject: [PATCH 31/34] titleSelectors [nfc]: Give `getTitleBackgroundColor` a
 better name.

---
 src/chat/ChatScreen.js                     |  4 ++--
 src/nav/ChatNavBar.js                      |  4 ++--
 src/title/__tests__/titleSelectors-test.js | 12 ++++++------
 src/title/titleSelectors.js                |  7 +++----
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index b128d4e4116..3515f5d5359 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 '../title/titleSelectors';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -114,7 +114,7 @@ export default function ChatScreen(props: Props) {
   const sayNoMessages = haveNoMessages && !isFetching;
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
-  const titleBackgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const titleBackgroundColor = useSelector(state => getStreamColorForNarrow(state, narrow));
 
   return (
     <ActionSheetProvider>
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 5c05dc9e690..e3af9a8d332 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -11,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 { getTitleBackgroundColor } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
@@ -22,7 +22,7 @@ type Props = $ReadOnly<{|
 
 export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
-  const backgroundColor = useSelector(state => getTitleBackgroundColor(state, narrow));
+  const backgroundColor = useSelector(state => getStreamColorForNarrow(state, narrow));
   const color =
     backgroundColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(backgroundColor);
   const spinnerColor =
diff --git a/src/title/__tests__/titleSelectors-test.js b/src/title/__tests__/titleSelectors-test.js
index 67a97f0f0f4..f757b80c887 100644
--- a/src/title/__tests__/titleSelectors-test.js
+++ b/src/title/__tests__/titleSelectors-test.js
@@ -1,28 +1,28 @@
 /* @flow strict-local */
 
-import { getTitleBackgroundColor } from '../titleSelectors';
+import { getStreamColorForNarrow } from '../titleSelectors';
 import { pmNarrowFromUsersUnsafe, streamNarrow, pm1to1NarrowFromUser } from '../../utils/narrow';
 import * as eg from '../../__tests__/lib/exampleData';
 
-describe('getTitleBackgroundColor', () => {
+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(getTitleBackgroundColor(state, streamNarrow(eg.stream.name))).toEqual(exampleColor);
+    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(getTitleBackgroundColor(state, streamNarrow(unknownStream.name))).toEqual('gray');
+    expect(getStreamColorForNarrow(state, streamNarrow(unknownStream.name))).toEqual('gray');
   });
 
   test('return undefined for non topic/stream narrow', () => {
-    expect(getTitleBackgroundColor(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(undefined);
+    expect(getStreamColorForNarrow(state, pm1to1NarrowFromUser(eg.otherUser))).toEqual(undefined);
     expect(
-      getTitleBackgroundColor(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
+      getStreamColorForNarrow(state, pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser])),
     ).toEqual(undefined);
   });
 });
diff --git a/src/title/titleSelectors.js b/src/title/titleSelectors.js
index 25226d7e254..649a501898e 100644
--- a/src/title/titleSelectors.js
+++ b/src/title/titleSelectors.js
@@ -4,12 +4,11 @@ import { isStreamOrTopicNarrow, streamNameOfNarrow } from '../utils/narrow';
 import { getSubscriptionsByName } from '../subscriptions/subscriptionSelectors';
 
 /**
- * Background color to use for the app bar in narrow `narrow`.
+ * The stream's color for the given stream or topic narrow.
  *
- * If `narrow` is a stream or topic narrow, this is based on the stream color.
- * Otherwise, it takes a default value.
+ * Gives undefined for narrows that are not stream or topic narrows.
  */
-export const getTitleBackgroundColor = (state: GlobalState, narrow: Narrow) => {
+export const getStreamColorForNarrow = (state: GlobalState, narrow: Narrow) => {
   const subscriptionsByName = getSubscriptionsByName(state);
   if (!isStreamOrTopicNarrow(narrow)) {
     return undefined;

From 6782cfdb146534d546b1d1622bed61fc29ca6f44 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:44:46 -0500
Subject: [PATCH 32/34] titleSelectors [nfc]: Make an early return earlier.

---
 src/title/titleSelectors.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/title/titleSelectors.js b/src/title/titleSelectors.js
index 649a501898e..a70502b72fe 100644
--- a/src/title/titleSelectors.js
+++ b/src/title/titleSelectors.js
@@ -9,10 +9,11 @@ import { getSubscriptionsByName } from '../subscriptions/subscriptionSelectors';
  * Gives undefined for narrows that are not stream or topic narrows.
  */
 export const getStreamColorForNarrow = (state: GlobalState, narrow: Narrow) => {
-  const subscriptionsByName = getSubscriptionsByName(state);
   if (!isStreamOrTopicNarrow(narrow)) {
     return undefined;
   }
+
+  const subscriptionsByName = getSubscriptionsByName(state);
   const streamName = streamNameOfNarrow(narrow);
   return subscriptionsByName.get(streamName)?.color ?? 'gray';
 };

From 228880725e69732a8fd0b70b3875292fb342c0bb Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Sat, 30 Jan 2021 17:53:29 -0500
Subject: [PATCH 33/34] nav [nfc]: Improve a few variable names.

Based on the rename of `getStreamColorForNarrow` (previously
`getTitleBackgroundColor`) in a recent commit.
---
 src/chat/ChatScreen.js |  4 ++--
 src/nav/ChatNavBar.js  | 18 ++++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 3515f5d5359..76073524f97 100644
--- a/src/chat/ChatScreen.js
+++ b/src/chat/ChatScreen.js
@@ -114,13 +114,13 @@ export default function ChatScreen(props: Props) {
   const sayNoMessages = haveNoMessages && !isFetching;
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
-  const titleBackgroundColor = useSelector(state => getStreamColorForNarrow(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/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index e3af9a8d332..d0ddb087852 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -22,11 +22,11 @@ type Props = $ReadOnly<{|
 
 export default function ChatNavBar(props: Props) {
   const { narrow, editMessage } = props;
-  const backgroundColor = useSelector(state => getStreamColorForNarrow(state, narrow));
+  const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
   const color =
-    backgroundColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? BRAND_COLOR : foregroundColorFromBackground(streamColor);
   const spinnerColor =
-    backgroundColor === undefined ? 'default' : foregroundColorFromBackground(backgroundColor);
+    streamColor === undefined ? 'default' : foregroundColorFromBackground(streamColor);
 
   return (
     <SafeAreaView
@@ -34,11 +34,9 @@ export default function ChatNavBar(props: Props) {
       edges={['top', 'right', 'left']}
       style={{
         borderColor:
-          backgroundColor === undefined
-            ? '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,
+        backgroundColor: streamColor,
       }}
     >
       <View
@@ -53,11 +51,7 @@ export default function ChatNavBar(props: Props) {
         <ExtraButton color={color} narrow={narrow} />
         <InfoButton color={color} narrow={narrow} />
       </View>
-      <LoadingBanner
-        spinnerColor={spinnerColor}
-        backgroundColor={backgroundColor}
-        textColor={color}
-      />
+      <LoadingBanner spinnerColor={spinnerColor} backgroundColor={streamColor} textColor={color} />
     </SafeAreaView>
   );
 }

From 0a218e04fe70be7696001f6db7f6783b5d829944 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 1 Feb 2021 18:08:08 -0500
Subject: [PATCH 34/34] titleSelectors [nfc]: Delete; move only selector to
 subscriptionSelectors.

As Greg points out [1], this "never made as much sense as the
selectors files like `subscriptionSelectors.js` that are clearly
about a particular part of the app's data model."

[1] https://github.com/zulip/zulip-mobile/pull/4443#discussion_r568190562
---
 src/chat/ChatScreen.js                        |  2 +-
 src/nav/ChatNavBar.js                         |  2 +-
 src/selectors.js                              |  1 -
 .../__tests__/subscriptionSelectors-test.js   | 33 ++++++++++++++++++-
 src/subscriptions/subscriptionSelectors.js    | 15 +++++++++
 src/title/__tests__/titleSelectors-test.js    | 28 ----------------
 src/title/titleSelectors.js                   | 19 -----------
 7 files changed, 49 insertions(+), 51 deletions(-)
 delete mode 100644 src/title/__tests__/titleSelectors-test.js
 delete mode 100644 src/title/titleSelectors.js

diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 76073524f97..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 { getStreamColorForNarrow } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index d0ddb087852..e1edd1bac8e 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -11,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 { getStreamColorForNarrow } from '../title/titleSelectors';
+import { getStreamColorForNarrow } from '../subscriptions/subscriptionSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { ExtraButton, InfoButton } from '../title-buttons/titleButtonFromNarrow';
 
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/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 f757b80c887..00000000000
--- a/src/title/__tests__/titleSelectors-test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* @flow strict-local */
-
-import { getStreamColorForNarrow } from '../titleSelectors';
-import { pmNarrowFromUsersUnsafe, streamNarrow, pm1to1NarrowFromUser } from '../../utils/narrow';
-import * as eg from '../../__tests__/lib/exampleData';
-
-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/title/titleSelectors.js b/src/title/titleSelectors.js
deleted file mode 100644
index a70502b72fe..00000000000
--- a/src/title/titleSelectors.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* @flow strict-local */
-import type { Narrow, GlobalState } from '../types';
-import { isStreamOrTopicNarrow, streamNameOfNarrow } from '../utils/narrow';
-import { getSubscriptionsByName } from '../subscriptions/subscriptionSelectors';
-
-/**
- * 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';
-};