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

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

As in the parent commit, for Screen, separate the constant parts of
the style from those that change with the theme; the latter get
computed in the render method.

Differing from the parent commit, put the constant parts of the
style in an instance field, rather than an outer-level `const`
declaration. We haven't settled the question universally; in
discussion [1], Greg points out,

"""
There's a tension between two things that are good to have:

* The render method, particularly the blob of JSX that's typically
found all at the end, is where we describe the visual look of the
component. It'd be good for the description of its visual look to be
all in one place, or at least reasonably close together, and the
styles are part of that.

* The styles are often kind of long with a lot of fairly boring
stuff, and it's good to be able to see all the other stuff going on
in `render` -- often including logic about what to show at all, or
what data to use -- without the more boring of the styles details
pushing it off the screen.
"""

Putting it an instance property means it's closer at hand than at a
`const` above the class definition, so, slightly favor that pattern
by using it in this file, where there's no precedent (or there was a
precedent, and it was recently removed in 8621b61, before this
series of commits).

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

Author: Chris Bobbe

src/chat/ChatScreen.js

@@ -5,15 +5,16 @@ import type { NavigationScreenProp } from 'react-navigation';
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import { connect } from '../react-redux';
-import type { Context, Dispatch, Fetching, Narrow, EditMessage } from '../types';
+import type { ThemeColors } from '../styles';
+import styles, { ThemeContext } from '../styles';
+import type { Dispatch, Fetching, Narrow, EditMessage } from '../types';
 import { KeyboardAvoider, OfflineNotice, ZulipStatusBar } from '../common';
 import ChatNavBar from '../nav/ChatNavBar';
 
 import MessageList from '../webview/MessageList';
 import NoMessages from '../message/NoMessages';
 import ComposeBox from '../compose/ComposeBox';
 import UnreadNotice from './UnreadNotice';
-import styles from '../styles';
 import { canSendToNarrow } from '../utils/narrow';
 import { getLoading } from '../directSelectors';
 import { getFetchingForNarrow } from './fetchingSelectors';
@@ -37,14 +38,18 @@ type State = {|
 |};
 
 class ChatScreen extends PureComponent<Props, State> {
-  context: Context;
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   state = {
     editMessage: null,
   };
 
-  static contextTypes = {
-    styles: () => null,
+  styles = {
+    screen: {
+      flex: 1,
+      flexDirection: 'column',
+    },
   };
 
   startEditMessage = (editMessage: EditMessage) => {
@@ -56,7 +61,6 @@ class ChatScreen extends PureComponent<Props, State> {
   };
 
   render() {
-    const { styles: contextStyles } = this.context;
     const { fetching, haveNoMessages, loading, navigation } = this.props;
     const { narrow } = navigation.state.params;
     const { editMessage } = this.state;
@@ -68,7 +72,7 @@ class ChatScreen extends PureComponent<Props, State> {
 
     return (
       <ActionSheetProvider>
-        <View style={contextStyles.screen}>
+        <View style={[this.styles.screen, { backgroundColor: this.context.backgroundColor }]}>
           <KeyboardAvoider style={styles.flexed} behavior="padding">
             <ZulipStatusBar narrow={narrow} />
             <ChatNavBar narrow={narrow} editMessage={editMessage} />