ZulipStatusBar: Fix types in connect call.

Some changes I was experimenting with somehow inspired Flow
to start pointing out things like

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/common/ZulipStatusBar.js:71:20

Property backgroundColor is missing in props [1].

     src/common/ZulipStatusBar.js
     68│ export default connect((state, props) => ({
     69│   safeAreaInsets: getSession(state).safeAreaInsets,
     70│   theme: getSettings(state).theme,
     71│   backgroundColor: props.backgroundColor || getTitleBackgroundColor(props.narrow)(state),
     72│   orientation: getSession(state).orientation,
     73│ }))(ZulipStatusBar);
     74│

     src/chat/ChatScreen.js
 [1] 36│           <ZulipStatusBar narrow={narrow} />

Where indeed, that code uses `props.backgroundColor` in a way that
looks like it assumes such a prop is present.  It doesn't really, but
that's hard to tell without more context.

Make the logic more explicit, which fixed those errors.  As a bonus,
the two remaining "ST is not a React component" errors go away too!

Author: gnprice

src/common/Screen.js

@@ -113,7 +113,6 @@ class Screen extends PureComponent<Props> {
 
     return (
       <View style={[contextStyles.screen, { paddingBottom: safeAreaInsets.bottom }]}>
-        {/* $FlowFixMe-56 Cannot create ZulipStatusBar element because ST is not a React component. */}
         <ZulipStatusBar />
         {search ? (
           <ModalSearchNavBar autoFocus={autoFocus} searchBarOnChange={searchBarOnChange} />

src/common/ZulipStatusBar.js

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import { Platform, StatusBar, View } from 'react-native';
 import Color from 'color';
 
-import type { Dimensions, ThemeName } from '../types';
+import type { Dimensions, GlobalState, Narrow, ThemeName } from '../types';
 import { DEFAULT_TITLE_BACKGROUND_COLOR, getTitleBackgroundColor } from '../title/titleSelectors';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getSession, getSettings } from '../selectors';
@@ -65,9 +65,14 @@ class ZulipStatusBar extends PureComponent<Props> {
   }
 }
 
-export default connect((state, props) => ({
-  safeAreaInsets: getSession(state).safeAreaInsets,
-  theme: getSettings(state).theme,
-  backgroundColor: props.backgroundColor || getTitleBackgroundColor(props.narrow)(state),
-  orientation: getSession(state).orientation,
-}))(ZulipStatusBar);
+export default connect(
+  (state: GlobalState, props: { backgroundColor?: string, narrow?: Narrow }) => ({
+    safeAreaInsets: getSession(state).safeAreaInsets,
+    theme: getSettings(state).theme,
+    backgroundColor:
+      props.backgroundColor !== undefined
+        ? props.backgroundColor
+        : getTitleBackgroundColor(props.narrow)(state),
+    orientation: getSession(state).orientation,
+  }),
+)(ZulipStatusBar);

src/main/MainScreenWithTabs.js

@@ -19,7 +19,6 @@ export default class MainScreenWithTabs extends PureComponent<{}> {
 
     return (
       <View style={[styles.flexed, contextStyles.backgroundColor]}>
-        {/* $FlowFixMe-56 Cannot create ZulipStatusBar element because ST is not a React component. */}
         <ZulipStatusBar />
         <OfflineNotice />
         <MainTabs />