ChatScreen: 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).

Use exactly the same strategy as we did for Screen, in the parent.

Author: Chris Bobbe

src/chat/ChatScreen.js

@@ -5,15 +5,17 @@ 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 } from '../types';
+import type { ThemeColors } from '../styles';
+import styles, { ThemeContext } from '../styles';
+import type { Dispatch, Fetching, Narrow } 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';
@@ -33,6 +35,10 @@ type Props = $ReadOnly<{|
 |}>;
 
 const componentStyles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    flexDirection: 'column',
+  },
   /** A workaround for #3089, by letting us put MessageList first. */
   reverse: {
     flex: 1,
@@ -41,14 +47,10 @@ const componentStyles = StyleSheet.create({
 });
 
 class ChatScreen extends PureComponent<Props> {
-  context: Context;
-
-  static contextTypes = {
-    styles: () => null,
-  };
+  static contextType = ThemeContext;
+  context: ThemeColors;
 
   render() {
-    const { styles: contextStyles } = this.context;
     const { fetching, haveNoMessages, loading, navigation } = this.props;
     const { narrow } = navigation.state.params;
 
@@ -59,7 +61,13 @@ class ChatScreen extends PureComponent<Props> {
 
     return (
       <ActionSheetProvider>
-        <View style={[contextStyles.screen, componentStyles.reverse]}>
+        <View
+          style={[
+            componentStyles.screen,
+            { backgroundColor: this.context.backgroundColor },
+            componentStyles.reverse,
+          ]}
+        >
           <KeyboardAvoider style={styles.flexed} behavior="padding">
             <UnreadNotice narrow={narrow} />
             {sayNoMessages ? (