Screen: Switch to new React Context API for theme colors.

Per zulip#1946, we're moving to the new React Context API
(https://reactjs.org/docs/context.html).

For details like height, margin, and flex that are about the
component and not the theme, put these in the existing
`componentStyles` object.

A functional difference between this pattern and the one in, e.g.,
a2bfcb4 and 51dd1b3, is that, here, we don't group the
theme-dependent styles together with the constant ones. If we don't
compute the theme-dependent styles in the `render` method, then the
component's appearance won't live-update when the theme is changed.

A universal choice between the non-functional difference between
using an instance field and an outer-level `const` declaration
hasn't been made, but there's been some fruitful discussion [1],
quoted in the next commit. Here, we just go with the existing
`const` declaration.

In practice, the lack of live-updating has probably never been
observed, as a side-effect of the `key={theme}` hack in
src/boot/StylesProvider.js, which causes most of the entire tree to
be remounted (not rerendered, remounted) when the theme changes.
This hack is explained in docs/architecture/react.md#context, and it
will be removed at the end of this series of commits, since the new
Context API makes it unnecessary. Before that happens, the latent
bugs in a2bfcb4 and 51dd1b3 (mentioned above), and elsewhere,
will be fixed.

[1]: https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Styles.20in.20component.20files/near/860528

Author: Chris Bobbe

src/common/Screen.js

@@ -5,7 +5,9 @@ import type { Node as React$Node } from 'react';
 import { StyleSheet, View, ScrollView } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
-import type { Context, Dimensions, LocalizableText, Dispatch } from '../types';
+import type { ThemeColors } from '../styles';
+import styles, { ThemeContext } from '../styles';
+import type { Dimensions, LocalizableText, Dispatch } from '../types';
 import { connect } from '../react-redux';
 import KeyboardAvoider from './KeyboardAvoider';
 import OfflineNotice from './OfflineNotice';
@@ -14,9 +16,12 @@ import ZulipStatusBar from './ZulipStatusBar';
 import { getSession } from '../selectors';
 import ModalNavBar from '../nav/ModalNavBar';
 import ModalSearchNavBar from '../nav/ModalSearchNavBar';
-import styles from '../styles';
 
 const componentStyles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    flexDirection: 'column',
+  },
   wrapper: {
     flex: 1,
     justifyContent: 'center',
@@ -72,11 +77,8 @@ type Props = $ReadOnly<{|
  *                 Required unless `search` is true.
  */
 class Screen extends PureComponent<Props> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   static defaultProps = {
     centerContent: false,
@@ -109,10 +111,15 @@ class Screen extends PureComponent<Props> {
       title,
       shouldShowLoadingBanner,
     } = this.props;
-    const { styles: contextStyles } = this.context;
 
     return (
-      <View style={[contextStyles.screen, { paddingBottom: safeAreaInsets.bottom }]}>
+      <View
+        style={[
+          componentStyles.screen,
+          { backgroundColor: this.context.backgroundColor },
+          { paddingBottom: safeAreaInsets.bottom },
+        ]}
+      >
         <ZulipStatusBar />
         {search ? (
           <ModalSearchNavBar autoFocus={autoFocus} searchBarOnChange={searchBarOnChange} />