Skip to content

Commit a606bf3

Browse files
Chris Bobbegnprice
Chris Bobbe
authored andcommitted
MessageList: Switch to new React Context API, remove miscStyles.webview.
Per zulip#1946, we're moving to the new React Context API (https://reactjs.org/docs/context.html). We’re also isolating the theme colors in their own context type, to be accessed from there instead of the previously used `context.styles` object. So, components that consume the theme colors can and should use `static contextType = ThemeContext;` and, e.g., this.context.backgroundColor, instead of this.context.styles.backgroundColor, as was done before. This change also eliminates the need for miscStyles.webview, which was included in this.context.styles that MessageList was using, so, remove that.
1 parent b0fc317 commit a606bf3

File tree

2 files changed

+7
-13
lines changed

2 files changed

+7
-13
lines changed

src/styles/miscStyles.js

-4
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,4 @@ export default ({ color, backgroundColor }: ThemeColors) => ({
8888
// alignItems: 'stretch',
8989
backgroundColor,
9090
},
91-
webview: {
92-
borderWidth: 0,
93-
backgroundColor,
94-
},
9591
});

src/webview/MessageList.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { connectActionSheet } from '@expo/react-native-action-sheet';
99
import type {
1010
AlertWordsState,
1111
Auth,
12-
Context,
1312
Debug,
1413
Dispatch,
1514
Fetching,
@@ -25,6 +24,8 @@ import type {
2524
ThemeName,
2625
User,
2726
} from '../types';
27+
import type { ThemeColors } from '../styles';
28+
import { ThemeContext } from '../styles';
2829
import { connect } from '../react-redux';
2930
import {
3031
getAuth,
@@ -137,16 +138,13 @@ const assetsPath = Platform.OS === 'ios' ? './webview' : 'file:///android_asset/
137138
// [3] https://github.com/facebook/react-native/blob/0.59-stable/React/Base/RCTConvert.m#L85
138139

139140
class MessageList extends Component<Props> {
140-
context: Context;
141+
static contextType = ThemeContext;
142+
context: ThemeColors;
143+
141144
webview: ?WebView;
142145
sendUpdateEventsIsReady: boolean;
143146
unsentUpdateEvents: WebViewUpdateEvent[] = [];
144147

145-
static contextTypes = {
146-
styles: () => null,
147-
theme: () => null,
148-
};
149-
150148
componentDidMount() {
151149
this.setupSendUpdateEvents();
152150
}
@@ -209,7 +207,6 @@ class MessageList extends Component<Props> {
209207
};
210208

211209
render() {
212-
const { styles: contextStyles } = this.context;
213210
const {
214211
backgroundData,
215212
renderedMessages,
@@ -304,7 +301,8 @@ class MessageList extends Component<Props> {
304301
source={{ baseUrl, html }}
305302
originWhitelist={['file://']}
306303
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
307-
style={contextStyles.webview}
304+
/* eslint-disable react-native/no-inline-styles */
305+
style={{ backgroundColor: this.context.backgroundColor, borderWidth: 0 }}
308306
ref={webview => {
309307
this.webview = webview;
310308
}}

0 commit comments

Comments
 (0)