From c685690d1ee39d3163afb4601002f85061cbd439 Mon Sep 17 00:00:00 2001 From: Elias Nahum Date: Fri, 13 Mar 2020 15:22:43 -0300 Subject: [PATCH] MM-23179 Avoid unnecessary Overdraws (#4025) * Set navigation based on theme only once * Remove unnecessary overdraws * Feedback review --- app/actions/navigation/index.js | 1 - app/actions/navigation/index.test.js | 1 - .../edit_channel_info.test.js.snap | 1 - .../edit_channel_info/edit_channel_info.js | 1 - app/components/post_body/post_body.js | 2 +- app/components/post_list/post_list.js | 2 +- app/components/root/root.js | 3 +- .../safe_area_view/safe_area_view.android.js | 34 +------- .../sidebars/main/teams_list/teams_list.js | 2 - app/screens/about/about.js | 10 +-- app/screens/add_reaction/add_reaction.js | 79 ------------------- app/screens/add_reaction/index.js | 71 +++++++++++++++-- app/screens/channel/channel.android.js | 20 ++--- app/screens/channel/channel.ios.js | 14 +--- app/screens/channel/channel_base.js | 6 +- app/screens/channel/channel_base.test.js | 10 +-- .../channel_add_members.js | 8 +- .../__snapshots__/channel_info.test.js.snap | 1 - app/screens/channel_info/channel_info.js | 9 +-- .../channel_members/channel_members.js | 8 +- app/screens/client_upgrade/client_upgrade.js | 10 +-- app/screens/code/code.js | 8 -- app/screens/create_channel/create_channel.js | 5 -- app/screens/edit_channel/edit_channel.js | 6 -- app/screens/edit_post/edit_post.js | 6 -- app/screens/edit_profile/edit_profile.js | 4 - .../error_teams_list.test.js.snap | 1 - .../error_teams_list/error_teams_list.js | 21 ++--- .../forgot_password.test.js.snap | 3 - .../forgot_password/forgot_password.js | 1 - app/screens/index.js | 1 - app/screens/login/login.js | 1 - app/screens/login_options/login_options.js | 1 - .../__snapshots__/long_post.test.js.snap | 2 - app/screens/long_post/long_post.js | 2 - app/screens/more_channels/more_channels.js | 5 -- app/screens/more_dms/more_dms.js | 8 +- app/screens/options_modal/options_modal.js | 2 +- .../__snapshots__/permalink.test.js.snap | 3 +- app/screens/permalink/permalink.js | 3 +- app/screens/root/index.js | 12 --- .../__snapshots__/select_team.test.js.snap | 2 - app/screens/select_team/index.js | 9 ++- app/screens/select_team/select_team.js | 8 +- .../selector_screen.test.js.snap | 6 -- .../selector_screen/selector_screen.js | 9 --- .../display_settings.test.js.snap | 4 - .../display_settings/display_settings.js | 5 +- app/screens/settings/general/settings.js | 4 +- .../notification_settings.js | 7 +- .../notification_settings_email.android.js | 1 - .../notification_settings_email_base.js | 7 -- .../notification_settings_mention_base.js | 8 -- .../notification_settings_mentions.android.js | 1 - ...notification_settings_mentions_keywords.js | 8 -- .../notification_settings_mobile.android.js | 3 - .../notification_settings_mobile_base.js | 8 -- .../theme/__snapshots__/theme.test.js.snap | 1 - app/screens/settings/theme/theme.js | 13 +-- app/screens/settings/theme/theme.test.js | 44 ----------- app/screens/settings/timezone/timezone.js | 1 - .../terms_of_service.test.js.snap | 1 - .../terms_of_service/terms_of_service.js | 9 +-- app/screens/text_preview/text_preview.js | 8 -- app/screens/thread/thread_base.js | 5 -- app/screens/user_profile/user_profile.js | 8 +- app/utils/theme.js | 27 ++++++- index.js | 1 + 68 files changed, 136 insertions(+), 460 deletions(-) delete mode 100644 app/screens/add_reaction/add_reaction.js delete mode 100644 app/screens/root/index.js diff --git a/app/actions/navigation/index.js b/app/actions/navigation/index.js index 12c326a49..e6994258f 100644 --- a/app/actions/navigation/index.js +++ b/app/actions/navigation/index.js @@ -92,7 +92,6 @@ export function resetToSelectServer(allowOtherServers) { }, options: { layout: { - backgroundColor: theme.centerChannelBg, componentBackgroundColor: theme.centerChannelBg, }, statusBar: { diff --git a/app/actions/navigation/index.test.js b/app/actions/navigation/index.test.js index e778f6c50..52b7b41c0 100644 --- a/app/actions/navigation/index.test.js +++ b/app/actions/navigation/index.test.js @@ -84,7 +84,6 @@ describe('app/actions/navigation', () => { }, options: { layout: { - backgroundColor: theme.centerChannelBg, componentBackgroundColor: theme.centerChannelBg, }, statusBar: { diff --git a/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap b/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap index ba685adf5..0e48453f0 100644 --- a/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap +++ b/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap @@ -15,7 +15,6 @@ exports[`EditChannelInfo should match snapshot 1`] = ` onKeyboardDidShow={[Function]} style={ Object { - "backgroundColor": "#ffffff", "flex": 1, } } diff --git a/app/components/edit_channel_info/edit_channel_info.js b/app/components/edit_channel_info/edit_channel_info.js index 310cb7bba..346f13692 100644 --- a/app/components/edit_channel_info/edit_channel_info.js +++ b/app/components/edit_channel_info/edit_channel_info.js @@ -370,7 +370,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, scrollView: { flex: 1, diff --git a/app/components/post_body/post_body.js b/app/components/post_body/post_body.js index 960ff874d..7ed1c901f 100644 --- a/app/components/post_body/post_body.js +++ b/app/components/post_body/post_body.js @@ -143,7 +143,7 @@ export default class PostBody extends PureComponent { }; const options = { layout: { - backgroundColor: changeOpacity('#000', 0.2), + componentBackgroundColor: changeOpacity('#000', 0.2), }, }; diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js index 5553bbb3d..1dc5573c5 100644 --- a/app/components/post_list/post_list.js +++ b/app/components/post_list/post_list.js @@ -470,7 +470,7 @@ export default class PostList extends PureComponent { }; const options = { layout: { - backgroundColor: changeOpacity('#000', 0.2), + componentBackgroundColor: changeOpacity('#000', 0.2), }, }; diff --git a/app/components/root/root.js b/app/components/root/root.js index d4b8479bd..39672eb78 100644 --- a/app/components/root/root.js +++ b/app/components/root/root.js @@ -68,7 +68,7 @@ export default class Root extends PureComponent { const {currentUrl, theme} = this.props; const {intl} = this.providerRef.getChildContext(); - let passProps = {theme}; + let passProps = null; const options = {topBar: {}}; if (Platform.OS === 'android') { options.topBar.rightButtons = [{ @@ -87,7 +87,6 @@ export default class Root extends PureComponent { if (screen === 'SelectTeam') { passProps = { - ...passProps, currentUrl, userWithoutTeams: true, }; diff --git a/app/components/safe_area_view/safe_area_view.android.js b/app/components/safe_area_view/safe_area_view.android.js index c0e5bfa31..e348be099 100644 --- a/app/components/safe_area_view/safe_area_view.android.js +++ b/app/components/safe_area_view/safe_area_view.android.js @@ -1,34 +1,8 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {PureComponent} from 'react'; -import PropTypes from 'prop-types'; -import {StyleSheet, View} from 'react-native'; +const SafeAreaAndroid = (props) => { + return props.children; +}; -export default class SafeAreaAndroid extends PureComponent { - static propTypes = { - backgroundColor: PropTypes.string, - children: PropTypes.node.isRequired, - theme: PropTypes.object.isRequired, - }; - - render() { - const {backgroundColor, children, theme} = this.props; - let bgColor = theme.centerChannelBg; - if (backgroundColor) { - bgColor = backgroundColor; - } - - return ( - - {children} - - ); - } -} - -const style = StyleSheet.create({ - container: { - flex: 1, - }, -}); +export default SafeAreaAndroid; \ No newline at end of file diff --git a/app/components/sidebars/main/teams_list/teams_list.js b/app/components/sidebars/main/teams_list/teams_list.js index 4ee33802b..fd10a1d68 100644 --- a/app/components/sidebars/main/teams_list/teams_list.js +++ b/app/components/sidebars/main/teams_list/teams_list.js @@ -86,13 +86,11 @@ export default class TeamsList extends PureComponent { goToSelectTeam = preventDoubleTap(async () => { const {intl} = this.context; - const {theme} = this.props; const {serverUrl} = this.state; const screen = 'SelectTeam'; const title = intl.formatMessage({id: 'mobile.routes.selectTeam', defaultMessage: 'Select Team'}); const passProps = { currentUrl: serverUrl, - theme, }; const options = { topBar: { diff --git a/app/screens/about/about.js b/app/screens/about/about.js index 85152ea5c..67482c698 100644 --- a/app/screens/about/about.js +++ b/app/screens/about/about.js @@ -14,7 +14,7 @@ import DeviceInfo from 'react-native-device-info'; import FormattedText from 'app/components/formatted_text'; import StatusBar from 'app/components/status_bar'; -import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; import AppIcon from 'app/components/app_icon'; import Config from 'assets/config'; @@ -24,19 +24,12 @@ const MATTERMOST_BUNDLE_IDS = ['com.mattermost.rnbeta', 'com.mattermost.rn']; export default class About extends PureComponent { static propTypes = { - componentId: PropTypes.string, config: PropTypes.object.isRequired, license: PropTypes.object.isRequired, theme: PropTypes.object.isRequired, isLandscape: PropTypes.bool.isRequired, }; - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - handleAboutTeam = () => { Linking.openURL(Config.AboutTeamURL); }; @@ -351,7 +344,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { wrapper: { flex: 1, - backgroundColor: theme.centerChannelBg, }, scrollView: { flex: 1, diff --git a/app/screens/add_reaction/add_reaction.js b/app/screens/add_reaction/add_reaction.js deleted file mode 100644 index b8f45a4a5..000000000 --- a/app/screens/add_reaction/add_reaction.js +++ /dev/null @@ -1,79 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {PureComponent} from 'react'; -import PropTypes from 'prop-types'; -import { - StyleSheet, - View, -} from 'react-native'; -import {Navigation} from 'react-native-navigation'; - -import EmojiPicker from 'app/components/emoji_picker'; -import {emptyFunction} from 'app/utils/general'; -import {setNavigatorStyles} from 'app/utils/theme'; -import {dismissModal, setButtons} from 'app/actions/navigation'; - -export default class AddReaction extends PureComponent { - static propTypes = { - componentId: PropTypes.string, - closeButton: PropTypes.object, - onEmojiPress: PropTypes.func, - theme: PropTypes.object.isRequired, - }; - - static defaultProps = { - onEmojiPress: emptyFunction, - }; - - leftButton = { - id: 'close-edit-post', - }; - - constructor(props) { - super(props); - - setButtons(props.componentId, { - leftButtons: [{...this.leftButton, icon: props.closeButton}], - }); - } - - componentDidMount() { - this.navigationEventListener = Navigation.events().bindComponent(this); - } - - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - - navigationButtonPressed({buttonId}) { - if (buttonId === 'close-edit-post') { - this.close(); - } - } - - close = () => { - dismissModal(); - }; - - handleEmojiPress = (emoji) => { - this.props.onEmojiPress(emoji); - this.close(); - } - - render() { - return ( - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}); diff --git a/app/screens/add_reaction/index.js b/app/screens/add_reaction/index.js index 1c3d7556b..d2096beb1 100644 --- a/app/screens/add_reaction/index.js +++ b/app/screens/add_reaction/index.js @@ -1,16 +1,71 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {connect} from 'react-redux'; +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import { + StyleSheet, + View, +} from 'react-native'; +import {Navigation} from 'react-native-navigation'; -import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; +import EmojiPicker from 'app/components/emoji_picker'; +import {emptyFunction} from 'app/utils/general'; +import {dismissModal, setButtons} from 'app/actions/navigation'; -import AddReaction from './add_reaction'; - -function mapStateToProps(state) { - return { - theme: getTheme(state), +export default class AddReaction extends PureComponent { + static propTypes = { + componentId: PropTypes.string, + closeButton: PropTypes.object, + onEmojiPress: PropTypes.func, }; + + static defaultProps = { + onEmojiPress: emptyFunction, + }; + + leftButton = { + id: 'close-edit-post', + }; + + constructor(props) { + super(props); + + setButtons(props.componentId, { + leftButtons: [{...this.leftButton, icon: props.closeButton}], + }); + } + + componentDidMount() { + this.navigationEventListener = Navigation.events().bindComponent(this); + } + + navigationButtonPressed({buttonId}) { + if (buttonId === 'close-edit-post') { + this.close(); + } + } + + close = () => { + dismissModal(); + }; + + handleEmojiPress = (emoji) => { + this.props.onEmojiPress(emoji); + this.close(); + } + + render() { + return ( + + + + ); + } } -export default connect(mapStateToProps)(AddReaction); +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}); diff --git a/app/screens/channel/channel.android.js b/app/screens/channel/channel.android.js index 1a8b2e7fb..4e2ac6307 100644 --- a/app/screens/channel/channel.android.js +++ b/app/screens/channel/channel.android.js @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; -import {View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import EventEmitter from 'mattermost-redux/utils/event_emitter'; @@ -12,7 +12,6 @@ import InteractiveDialogController from 'app/components/interactive_dialog_contr import NetworkIndicator from 'app/components/network_indicator'; import PostTextbox from 'app/components/post_textbox'; import {NavigationTypes} from 'app/constants'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; import LocalConfig from 'assets/config'; @@ -39,7 +38,6 @@ export default class ChannelAndroid extends ChannelBase { return channelLoadingOrFailed; } - const style = getStyleFromTheme(theme); const drawerContent = ( <> @@ -63,7 +61,7 @@ export default class ChannelAndroid extends ChannelBase { return ( <> - + {drawerContent} { - return { - backdrop: { - flex: 1, - backgroundColor: theme.centerChannelBg, - }, - flex: { - flex: 1, - }, - }; +const style = StyleSheet.create({ + flex: { + flex: 1, + }, }); \ No newline at end of file diff --git a/app/screens/channel/channel.ios.js b/app/screens/channel/channel.ios.js index 4fc33eaa1..0ced00be3 100644 --- a/app/screens/channel/channel.ios.js +++ b/app/screens/channel/channel.ios.js @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import React from 'react'; -import {View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view'; import Autocomplete, {AUTOCOMPLETE_MAX_HEIGHT} from 'app/components/autocomplete'; @@ -13,7 +13,6 @@ import PostTextbox from 'app/components/post_textbox'; import SafeAreaView from 'app/components/safe_area_view'; import SettingsSidebar from 'app/components/sidebars/settings'; import StatusBar from 'app/components/status_bar'; -import {makeStyleSheetFromTheme} from 'app/utils/theme'; import LocalConfig from 'assets/config'; @@ -58,7 +57,6 @@ export default class ChannelIOS extends ChannelBase { return channelLoadingOrFailed; } - const style = getStyle(theme); const drawerContent = ( <> @@ -100,7 +98,7 @@ export default class ChannelIOS extends ChannelBase { return ( - + {drawerContent} @@ -112,12 +110,8 @@ export default class ChannelIOS extends ChannelBase { } } -export const getStyle = makeStyleSheetFromTheme((theme) => ({ - backdrop: { - flex: 1, - backgroundColor: theme.centerChannelBg, - }, +export const style = StyleSheet.create({ flex: { flex: 1, }, -})); \ No newline at end of file +}); \ No newline at end of file diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index 6a010e952..15ea6f45d 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -61,8 +61,6 @@ export default class ChannelBase extends PureComponent { this.postTextbox = React.createRef(); this.keyboardTracker = React.createRef(); - setNavigatorStyles(props.componentId, props.theme); - this.state = { channelsRequestFailed: false, }; @@ -108,8 +106,6 @@ export default class ChannelBase extends PureComponent { } if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - EphemeralStore.allNavigationComponentIds.forEach((componentId) => { setNavigatorStyles(componentId, this.props.theme); }); @@ -154,7 +150,7 @@ export default class ChannelBase extends PureComponent { const passProps = {closeButton}; const options = { layout: { - backgroundColor: theme.centerChannelBg, + componentBackgroundColor: theme.centerChannelBg, }, topBar: { visible: true, diff --git a/app/screens/channel/channel_base.test.js b/app/screens/channel/channel_base.test.js index d18768649..3a25238a1 100644 --- a/app/screens/channel/channel_base.test.js +++ b/app/screens/channel/channel_base.test.js @@ -47,7 +47,7 @@ describe('ChannelBase', () => { rightButtonColor: theme.sidebarHeaderTextColor, }, layout: { - backgroundColor: theme.centerChannelBg, + componentBackgroundColor: theme.centerChannelBg, }, }; }; @@ -55,6 +55,7 @@ describe('ChannelBase', () => { test('should call mergeNavigationOptions on all navigation components when theme changes', () => { const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions'); + EphemeralStore.addNavigationComponentId(channelBaseComponentId); componentIds.forEach((componentId) => { EphemeralStore.addNavigationComponentId(componentId); }); @@ -63,20 +64,17 @@ describe('ChannelBase', () => { , ); - const themeOptions = optionsForTheme(Preferences.THEMES.default); - expect(mergeNavigationOptions.mock.calls).toEqual([ - [baseProps.componentId, themeOptions], - ]); + expect(mergeNavigationOptions.mock.calls).toEqual([]); mergeNavigationOptions.mockClear(); wrapper.setProps({theme: Preferences.THEMES.mattermostDark}); const newThemeOptions = optionsForTheme(Preferences.THEMES.mattermostDark); expect(mergeNavigationOptions.mock.calls).toEqual([ - [baseProps.componentId, newThemeOptions], [componentIds[2], newThemeOptions], [componentIds[1], newThemeOptions], [componentIds[0], newThemeOptions], + [baseProps.componentId, newThemeOptions], ]); }); }); diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js index 847cc637a..d2adaff58 100644 --- a/app/screens/channel_add_members/channel_add_members.js +++ b/app/screens/channel_add_members/channel_add_members.js @@ -28,7 +28,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {popTopScreen, setButtons} from 'app/actions/navigation'; @@ -98,16 +97,11 @@ export default class ChannelAddMembers extends PureComponent { this.enableAddOption(false); } - componentDidUpdate(prevProps) { - const {componentId, theme} = this.props; + componentDidUpdate() { const {adding, selectedIds} = this.state; const enabled = Object.keys(selectedIds).length > 0 && !adding; this.enableAddOption(enabled); - - if (theme !== prevProps.theme) { - setNavigatorStyles(componentId, theme); - } } navigationButtonPressed({buttonId}) { diff --git a/app/screens/channel_info/__snapshots__/channel_info.test.js.snap b/app/screens/channel_info/__snapshots__/channel_info.test.js.snap index 3e76982fd..48d9d6d3e 100644 --- a/app/screens/channel_info/__snapshots__/channel_info.test.js.snap +++ b/app/screens/channel_info/__snapshots__/channel_info.test.js.snap @@ -4,7 +4,6 @@ exports[`channel_info should match snapshot 1`] = ` { const {actions} = this.props; @@ -722,7 +716,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, scrollView: { flex: 1, diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js index 686fea974..6f01936ce 100644 --- a/app/screens/channel_members/channel_members.js +++ b/app/screens/channel_members/channel_members.js @@ -28,7 +28,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {popTopScreen, setButtons} from 'app/actions/navigation'; @@ -90,16 +89,11 @@ export default class ChannelMembers extends PureComponent { this.getProfiles(); } - componentDidUpdate(prevProps) { - const {componentId, theme} = this.props; + componentDidUpdate() { const {removing, selectedIds} = this.state; const enabled = Object.keys(selectedIds).length > 0 && !removing; this.enableRemoveOption(enabled); - - if (theme !== prevProps.theme) { - setNavigatorStyles(componentId, theme); - } } navigationButtonPressed({buttonId}) { diff --git a/app/screens/client_upgrade/client_upgrade.js b/app/screens/client_upgrade/client_upgrade.js index db2698af0..581caea68 100644 --- a/app/screens/client_upgrade/client_upgrade.js +++ b/app/screens/client_upgrade/client_upgrade.js @@ -19,7 +19,7 @@ import StatusBar from 'app/components/status_bar'; import {UpgradeTypes} from 'app/constants'; import logo from 'assets/images/logo.png'; import {checkUpgradeType, isUpgradeAvailable} from 'app/utils/client_upgrade'; -import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import {popTopScreen, dismissModal} from 'app/actions/navigation'; export default class ClientUpgrade extends PureComponent { @@ -28,7 +28,6 @@ export default class ClientUpgrade extends PureComponent { logError: PropTypes.func.isRequired, setLastUpgradeCheck: PropTypes.func.isRequired, }).isRequired, - componentId: PropTypes.string, currentVersion: PropTypes.string, closeAction: PropTypes.func, userCheckedForUpgrade: PropTypes.bool, @@ -59,12 +58,6 @@ export default class ClientUpgrade extends PureComponent { } } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - navigationButtonPressed({buttonId}) { if (buttonId === 'close-upgrade') { dismissModal(); @@ -290,7 +283,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, image: { marginTop: 75, diff --git a/app/screens/code/code.js b/app/screens/code/code.js index 1b60101dd..eb7859bd3 100644 --- a/app/screens/code/code.js +++ b/app/screens/code/code.js @@ -17,14 +17,12 @@ import {getCodeFont} from 'app/utils/markdown'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {popTopScreen} from 'app/actions/navigation'; export default class Code extends React.PureComponent { static propTypes = { - componentId: PropTypes.string, theme: PropTypes.object.isRequired, content: PropTypes.string.isRequired, }; @@ -33,12 +31,6 @@ export default class Code extends React.PureComponent { BackHandler.addEventListener('hardwareBackPress', this.handleAndroidBack); } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.handleAndroidBack); } diff --git a/app/screens/create_channel/create_channel.js b/app/screens/create_channel/create_channel.js index 36a790cc7..da0d57d89 100644 --- a/app/screens/create_channel/create_channel.js +++ b/app/screens/create_channel/create_channel.js @@ -16,7 +16,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import {popTopScreen, dismissModal, setButtons} from 'app/actions/navigation'; import EditChannelInfo from 'app/components/edit_channel_info'; import {NavigationTypes} from 'app/constants'; -import {setNavigatorStyles} from 'app/utils/theme'; export default class CreateChannel extends PureComponent { static propTypes = { @@ -75,10 +74,6 @@ export default class CreateChannel extends PureComponent { } componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - const {createChannelRequest} = nextProps; if (this.props.createChannelRequest !== createChannelRequest) { diff --git a/app/screens/edit_channel/edit_channel.js b/app/screens/edit_channel/edit_channel.js index da5505f1b..8d4fa7ebf 100644 --- a/app/screens/edit_channel/edit_channel.js +++ b/app/screens/edit_channel/edit_channel.js @@ -15,7 +15,6 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import EditChannelInfo from 'app/components/edit_channel_info'; import {NavigationTypes, ViewTypes} from 'app/constants'; -import {setNavigatorStyles} from 'app/utils/theme'; import {cleanUpUrlable} from 'app/utils/url'; import {t} from 'app/utils/i18n'; import {popTopScreen, setButtons} from 'app/actions/navigation'; @@ -65,7 +64,6 @@ export default class EditChannel extends PureComponent { channel: PropTypes.object.isRequired, currentTeamUrl: PropTypes.string.isRequired, updateChannelRequest: PropTypes.object.isRequired, - closeButton: PropTypes.object, }; static contextTypes = { @@ -141,10 +139,6 @@ export default class EditChannel extends PureComponent { } componentDidUpdate(prevProps) { - if (prevProps.theme !== this.props.theme) { - setNavigatorStyles(prevProps.componentId, this.props.theme); - } - if (prevProps.updateChannelRequest !== this.props.updateChannelRequest) { switch (this.props.updateChannelRequest.status) { case RequestStatus.STARTED: diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js index 84c36cfa6..567c8cc8a 100644 --- a/app/screens/edit_post/edit_post.js +++ b/app/screens/edit_post/edit_post.js @@ -22,7 +22,6 @@ import {switchKeyboardForCodeBlocks} from 'app/utils/markdown'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {t} from 'app/utils/i18n'; @@ -82,10 +81,6 @@ export default class EditPost extends PureComponent { } componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - const {editPostRequest} = nextProps; if (this.props.editPostRequest !== editPostRequest) { @@ -263,7 +258,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, scrollView: { flex: 1, diff --git a/app/screens/edit_profile/edit_profile.js b/app/screens/edit_profile/edit_profile.js index 4bade2f1f..3ba8c0a7d 100644 --- a/app/screens/edit_profile/edit_profile.js +++ b/app/screens/edit_profile/edit_profile.js @@ -585,7 +585,6 @@ export default class EditProfile extends PureComponent { {displayError} @@ -614,9 +613,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { flex: { flex: 1, }, - container: { - backgroundColor: theme.centerChannelBg, - }, scrollView: { flex: 1, backgroundColor: changeOpacity(theme.centerChannelColor, 0.03), diff --git a/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap b/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap index 4e179f184..1c18ba7b4 100644 --- a/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap +++ b/app/screens/error_teams_list/__snapshots__/error_teams_list.test.js.snap @@ -4,7 +4,6 @@ exports[`ErrorTeamsList should match snapshot 1`] = ` ; @@ -93,11 +85,8 @@ export default class ErrorTeamsList extends PureComponent { } } -const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { - return { - container: { - backgroundColor: theme.centerChannelBg, - flex: 1, - }, - }; +const style = StyleSheet.create({ + container: { + flex: 1, + }, }); diff --git a/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap b/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap index fe416e910..9688712a4 100644 --- a/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap +++ b/app/screens/forgot_password/__snapshots__/forgot_password.test.js.snap @@ -4,7 +4,6 @@ exports[`ForgotPassword match snapshot after success of sendPasswordResetEmail 1 gestureHandlerRootHOC(wrapper(require('app/screens/post_options').default)), () => require('app/screens/post_options').default); Navigation.registerComponent('ReactionList', () => gestureHandlerRootHOC(wrapper(require('app/screens/reaction_list').default)), () => require('app/screens/reaction_list').default); Navigation.registerComponent('RecentMentions', () => wrapper(require('app/screens/recent_mentions').default), () => require('app/screens/recent_mentions').default); - Navigation.registerComponent('Root', () => wrapper(Root), () => Root); Navigation.registerComponent('Search', () => wrapper(require('app/screens/search').default), () => require('app/screens/search').default); Navigation.registerComponent('SelectorScreen', () => wrapper(require('app/screens/selector_screen').default), () => require('app/screens/selector_screen').default); Navigation.registerComponent('SelectServer', () => wrapper(require('app/screens/select_server').default), () => require('app/screens/select_server').default); diff --git a/app/screens/login/login.js b/app/screens/login/login.js index 345573540..716478a01 100644 --- a/app/screens/login/login.js +++ b/app/screens/login/login.js @@ -423,7 +423,6 @@ export default class Login extends PureComponent { const style = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', flex: 1, }, innerContainer: { diff --git a/app/screens/login_options/login_options.js b/app/screens/login_options/login_options.js index b76b849ac..2c3ee77a7 100644 --- a/app/screens/login_options/login_options.js +++ b/app/screens/login_options/login_options.js @@ -283,7 +283,6 @@ export default class LoginOptions extends PureComponent { const style = StyleSheet.create({ container: { - backgroundColor: '#FFFFFF', flex: 1, }, innerContainer: { diff --git a/app/screens/long_post/__snapshots__/long_post.test.js.snap b/app/screens/long_post/__snapshots__/long_post.test.js.snap index 9efd6c735..0e8e8a01e 100644 --- a/app/screens/long_post/__snapshots__/long_post.test.js.snap +++ b/app/screens/long_post/__snapshots__/long_post.test.js.snap @@ -260,7 +260,6 @@ LongPost { style={ Object { "alignItems": "center", - "backgroundColor": "#ffffff", "borderBottomColor": "rgba(61,60,64,0.2)", "borderBottomWidth": 1, "borderTopLeftRadius": 6, @@ -323,7 +322,6 @@ LongPost { { }, header: { alignItems: 'center', - backgroundColor: theme.centerChannelBg, borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2), borderBottomWidth: 1, borderTopLeftRadius: 6, @@ -221,7 +220,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { fontWeight: '600', }, postList: { - backgroundColor: theme.centerChannelBg, flex: 1, }, footer: { diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js index e11cff8e1..e495f0916 100644 --- a/app/screens/more_channels/more_channels.js +++ b/app/screens/more_channels/more_channels.js @@ -27,7 +27,6 @@ import {goToScreen, dismissModal, setButtons} from 'app/actions/navigation'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; @@ -109,10 +108,6 @@ export default class MoreChannels extends PureComponent { let channels; let archivedChannels; - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - if (nextProps.channels !== this.props.channels) { channels = nextProps.channels; if (term) { diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js index 53c8d015b..1989addfb 100644 --- a/app/screens/more_dms/more_dms.js +++ b/app/screens/more_dms/more_dms.js @@ -27,7 +27,6 @@ import {createProfilesSections, loadingText} from 'app/utils/member_list'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {t} from 'app/utils/i18n'; @@ -94,16 +93,11 @@ export default class MoreDirectMessages extends PureComponent { this.mounted = false; } - componentDidUpdate(prevProps) { - const {componentId, theme} = this.props; + componentDidUpdate() { const {selectedCount, startingConversation} = this.state; const canStart = selectedCount > 0 && !startingConversation; this.updateNavigationButtons(canStart); - - if (theme !== prevProps.theme) { - setNavigatorStyles(componentId, theme); - } } navigationButtonPressed({buttonId}) { diff --git a/app/screens/options_modal/options_modal.js b/app/screens/options_modal/options_modal.js index 22880bf4d..e2e2f680d 100644 --- a/app/screens/options_modal/options_modal.js +++ b/app/screens/options_modal/options_modal.js @@ -108,7 +108,7 @@ export default class OptionsModal extends PureComponent { const style = StyleSheet.create({ wrapper: { - backgroundColor: 'rgba(0, 0, 0, 0.5)', + backgroundColor: Platform.select({ios: 'rgba(0, 0, 0, 0.5)'}), flex: 1, }, }); diff --git a/app/screens/permalink/__snapshots__/permalink.test.js.snap b/app/screens/permalink/__snapshots__/permalink.test.js.snap index 9e7f3cc06..7f85170da 100644 --- a/app/screens/permalink/__snapshots__/permalink.test.js.snap +++ b/app/screens/permalink/__snapshots__/permalink.test.js.snap @@ -31,6 +31,7 @@ exports[`Permalink should match snapshot 1`] = ` onTransitionEnd={[Function]} style={ Object { + "backgroundColor": "#ffffff", "borderRadius": 6, "flex": 1, "margin": 10, @@ -43,7 +44,6 @@ exports[`Permalink should match snapshot 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "#ffffff", "borderTopLeftRadius": 6, "borderTopRightRadius": 6, "flexDirection": "row", @@ -116,7 +116,6 @@ exports[`Permalink should match snapshot 1`] = ` style={ Array [ Object { - "backgroundColor": "#ffffff", "flex": 1, }, null, diff --git a/app/screens/permalink/permalink.js b/app/screens/permalink/permalink.js index 4b5f4f0b6..d1ce0eb75 100644 --- a/app/screens/permalink/permalink.js +++ b/app/screens/permalink/permalink.js @@ -467,6 +467,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { marginTop: 20, }, wrapper: { + backgroundColor: theme.centerChannelBg, borderRadius: 6, flex: 1, margin: 10, @@ -474,7 +475,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, header: { alignItems: 'center', - backgroundColor: theme.centerChannelBg, borderTopLeftRadius: 6, borderTopRightRadius: 6, flexDirection: 'row', @@ -506,7 +506,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { fontWeight: '600', }, postList: { - backgroundColor: theme.centerChannelBg, flex: 1, }, bottom: { diff --git a/app/screens/root/index.js b/app/screens/root/index.js deleted file mode 100644 index 3f5579451..000000000 --- a/app/screens/root/index.js +++ /dev/null @@ -1,12 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import Loading from 'app/components/loading'; - -function Root() { - return ; -} - -export default Root; diff --git a/app/screens/select_team/__snapshots__/select_team.test.js.snap b/app/screens/select_team/__snapshots__/select_team.test.js.snap index 118a548e4..2e353922d 100644 --- a/app/screens/select_team/__snapshots__/select_team.test.js.snap +++ b/app/screens/select_team/__snapshots__/select_team.test.js.snap @@ -43,7 +43,6 @@ exports[`SelectTeam should match snapshot for teams 1`] = ` { return { container: { - backgroundColor: theme.centerChannelBg, flex: 1, }, headingContainer: { diff --git a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap index 53641b33c..aa3753838 100644 --- a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap +++ b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap @@ -4,7 +4,6 @@ exports[`SelectorScreen should match snapshot for channels 1`] = ` { this.searchBarRef = ref; } @@ -371,7 +363,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, searchBar: { marginVertical: 5, diff --git a/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap b/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap index c114e1b40..e9a232bc7 100644 --- a/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap +++ b/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap @@ -4,7 +4,6 @@ exports[`DisplaySettings should match snapshot 1`] = ` {timezoneOption} + {clockDisplayModal} - {clockDisplayModal} ); } @@ -167,10 +166,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, wrapper: { - backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), flex: 1, ...Platform.select({ ios: { diff --git a/app/screens/settings/general/settings.js b/app/screens/settings/general/settings.js index d3d9c4336..a94022765 100644 --- a/app/screens/settings/general/settings.js +++ b/app/screens/settings/general/settings.js @@ -29,7 +29,6 @@ class Settings extends PureComponent { clearErrors: PropTypes.func.isRequired, purgeOfflineStore: PropTypes.func.isRequired, }).isRequired, - componentId: PropTypes.string, config: PropTypes.object.isRequired, currentTeamId: PropTypes.string.isRequired, currentUserId: PropTypes.string.isRequired, @@ -115,12 +114,11 @@ class Settings extends PureComponent { }); goToSelectTeam = preventDoubleTap(() => { - const {currentUrl, intl, theme} = this.props; + const {currentUrl, intl} = this.props; const screen = 'SelectTeam'; const title = intl.formatMessage({id: 'mobile.routes.selectTeam', defaultMessage: 'Select Team'}); const passProps = { currentUrl, - theme, }; goToScreen(screen, title, passProps); diff --git a/app/screens/settings/notification_settings/notification_settings.js b/app/screens/settings/notification_settings/notification_settings.js index 25c89723e..dcfc27f54 100644 --- a/app/screens/settings/notification_settings/notification_settings.js +++ b/app/screens/settings/notification_settings/notification_settings.js @@ -19,7 +19,7 @@ import NotificationPreferences from 'app/notification_preferences'; import SettingsItem from 'app/screens/settings/settings_item'; import {getNotificationProps} from 'app/utils/notify_props'; import {preventDoubleTap} from 'app/utils/tap'; -import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import {t} from 'app/utils/i18n'; import {goToScreen} from 'app/actions/navigation'; @@ -28,7 +28,6 @@ export default class NotificationSettings extends PureComponent { actions: PropTypes.shape({ updateMe: PropTypes.func.isRequired, }), - componentId: PropTypes.string, currentUser: PropTypes.object.isRequired, theme: PropTypes.object.isRequired, updateMeRequest: PropTypes.object.isRequired, @@ -42,10 +41,6 @@ export default class NotificationSettings extends PureComponent { }; componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - const {updateMeRequest} = nextProps; const {intl} = this.context; if (this.props.updateMeRequest !== updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) { diff --git a/app/screens/settings/notification_settings_email/notification_settings_email.android.js b/app/screens/settings/notification_settings_email/notification_settings_email.android.js index 162ff68cf..82331cfb3 100644 --- a/app/screens/settings/notification_settings_email/notification_settings_email.android.js +++ b/app/screens/settings/notification_settings_email/notification_settings_email.android.js @@ -244,7 +244,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, separator: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.1), diff --git a/app/screens/settings/notification_settings_email/notification_settings_email_base.js b/app/screens/settings/notification_settings_email/notification_settings_email_base.js index 6c98ce1be..86b23b38b 100644 --- a/app/screens/settings/notification_settings_email/notification_settings_email_base.js +++ b/app/screens/settings/notification_settings_email/notification_settings_email_base.js @@ -9,15 +9,12 @@ import {Navigation} from 'react-native-navigation'; import {Preferences} from 'mattermost-redux/constants'; import {getEmailInterval} from 'mattermost-redux/utils/notify_props'; -import {setNavigatorStyles} from 'app/utils/theme'; - export default class NotificationSettingsEmailBase extends PureComponent { static propTypes = { actions: PropTypes.shape({ savePreferences: PropTypes.func.isRequired, updateMe: PropTypes.func.isRequired, }), - componentId: PropTypes.string, currentUser: PropTypes.object.isRequired, notifyProps: PropTypes.object.isRequired, emailInterval: PropTypes.string.isRequired, @@ -48,10 +45,6 @@ export default class NotificationSettingsEmailBase extends PureComponent { } componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - const { notifyProps, sendEmailNotifications, diff --git a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js index 9d5f6f654..7d8c6e20d 100644 --- a/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js +++ b/app/screens/settings/notification_settings_mentions/notification_settings_mention_base.js @@ -7,11 +7,9 @@ import {intlShape} from 'react-intl'; import {Navigation} from 'react-native-navigation'; import {getNotificationProps} from 'app/utils/notify_props'; -import {setNavigatorStyles} from 'app/utils/theme'; export default class NotificationSettingsMentionsBase extends PureComponent { static propTypes = { - componentId: PropTypes.string, currentUser: PropTypes.object.isRequired, intl: intlShape.isRequired, onBack: PropTypes.func.isRequired, @@ -36,12 +34,6 @@ export default class NotificationSettingsMentionsBase extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - componentDidDisappear() { if (this.goingBack) { this.saveUserNotifyProps(); diff --git a/app/screens/settings/notification_settings_mentions/notification_settings_mentions.android.js b/app/screens/settings/notification_settings_mentions/notification_settings_mentions.android.js index ef47e36b5..da18bcbfd 100644 --- a/app/screens/settings/notification_settings_mentions/notification_settings_mentions.android.js +++ b/app/screens/settings/notification_settings_mentions/notification_settings_mentions.android.js @@ -374,7 +374,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, input: { color: theme.centerChannelColor, diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js index 90e3c4549..9c0f958eb 100644 --- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js +++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js @@ -12,14 +12,12 @@ import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_lo import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; import {popTopScreen} from 'app/actions/navigation'; export default class NotificationSettingsMentionsKeywords extends PureComponent { static propTypes = { - componentId: PropTypes.string, keywords: PropTypes.string, onBack: PropTypes.func.isRequired, theme: PropTypes.object.isRequired, @@ -38,12 +36,6 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent this.navigationEventListener = Navigation.events().bindComponent(this); } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - handleSubmit = () => { popTopScreen(); }; diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.android.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.android.js index 23389bc11..0d6973d15 100644 --- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.android.js +++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.android.js @@ -371,8 +371,6 @@ class NotificationSettingsMobileAndroid extends NotificationSettingsMobileBase { } componentDidUpdate(prevProps) { - super.componentDidUpdate(prevProps); - const {updateMeRequest, intl} = this.props; if (updateMeRequest !== prevProps.updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) { Alert.alert( @@ -754,7 +752,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, input: { color: theme.centerChannelColor, diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js index cf516d0a0..7644ccfa7 100644 --- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js +++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile_base.js @@ -8,14 +8,12 @@ import {intlShape} from 'react-intl'; import {Navigation} from 'react-native-navigation'; import {getNotificationProps} from 'app/utils/notify_props'; -import {setNavigatorStyles} from 'app/utils/theme'; export default class NotificationSettingsMobileBase extends PureComponent { static propTypes = { actions: PropTypes.shape({ updateMe: PropTypes.func.isRequired, }), - componentId: PropTypes.string, config: PropTypes.object.isRequired, currentUser: PropTypes.object.isRequired, intl: intlShape.isRequired, @@ -47,12 +45,6 @@ export default class NotificationSettingsMobileBase extends PureComponent { this.navigationEventListener = Navigation.events().bindComponent(this); } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - getNotificationPreferences = (props) => { if (Platform.OS === 'android') { const { diff --git a/app/screens/settings/theme/__snapshots__/theme.test.js.snap b/app/screens/settings/theme/__snapshots__/theme.test.js.snap index a22cf10aa..191c96da5 100644 --- a/app/screens/settings/theme/__snapshots__/theme.test.js.snap +++ b/app/screens/settings/theme/__snapshots__/theme.test.js.snap @@ -4,7 +4,6 @@ exports[`Theme should match snapshot 1`] = ` { - setNavigatorStyles(componentId, this.props.theme); - }); - } - } - setTheme = (key) => { const { userId, @@ -154,7 +144,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, wrapper: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), diff --git a/app/screens/settings/theme/theme.test.js b/app/screens/settings/theme/theme.test.js index eea8a067b..4a28fc4c5 100644 --- a/app/screens/settings/theme/theme.test.js +++ b/app/screens/settings/theme/theme.test.js @@ -6,9 +6,6 @@ import {shallow} from 'enzyme'; import Preferences from 'mattermost-redux/constants/preferences'; -import EphemeralStore from 'app/store/ephemeral_store'; -import * as NavigationActions from 'app/actions/navigation'; - import Theme from './theme'; import ThemeTile from './theme_tile'; @@ -40,45 +37,4 @@ describe('Theme', () => { expect(wrapper.getElement()).toMatchSnapshot(); expect(wrapper.find(ThemeTile)).toHaveLength(4); }); - - test('should call mergeNavigationOptions on all navigation components when theme changes', () => { - const mergeNavigationOptions = jest.spyOn(NavigationActions, 'mergeNavigationOptions'); - - const componentIds = ['component-1', 'component-2', 'component-3']; - componentIds.forEach((componentId) => { - EphemeralStore.addNavigationComponentId(componentId); - }); - - const wrapper = shallow( - , - ); - - const newTheme = allowedThemes[1]; - wrapper.setProps({theme: newTheme}); - - const options = { - topBar: { - backButton: { - color: newTheme.sidebarHeaderTextColor, - }, - background: { - color: newTheme.sidebarHeaderBg, - }, - title: { - color: newTheme.sidebarHeaderTextColor, - }, - leftButtonColor: newTheme.sidebarHeaderTextColor, - rightButtonColor: newTheme.sidebarHeaderTextColor, - }, - layout: { - backgroundColor: newTheme.centerChannelBg, - }, - }; - - expect(mergeNavigationOptions.mock.calls).toEqual([ - [componentIds[2], options], - [componentIds[1], options], - [componentIds[0], options], - ]); - }); }); diff --git a/app/screens/settings/timezone/timezone.js b/app/screens/settings/timezone/timezone.js index 78fae9a3d..c837f3add 100644 --- a/app/screens/settings/timezone/timezone.js +++ b/app/screens/settings/timezone/timezone.js @@ -207,7 +207,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { flex: 1, - backgroundColor: theme.centerChannelBg, }, wrapper: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), diff --git a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap index 12055e11d..6fa288c2a 100644 --- a/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap +++ b/app/screens/terms_of_service/__snapshots__/terms_of_service.test.js.snap @@ -282,7 +282,6 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = ` { lineHeight: 20, }, container: { - backgroundColor: theme.centerChannelBg, flex: 1, }, scrollView: { diff --git a/app/screens/text_preview/text_preview.js b/app/screens/text_preview/text_preview.js index fd3054486..4c6fb2e4b 100644 --- a/app/screens/text_preview/text_preview.js +++ b/app/screens/text_preview/text_preview.js @@ -16,23 +16,15 @@ import {getCodeFont} from 'app/utils/markdown'; import { changeOpacity, makeStyleSheetFromTheme, - setNavigatorStyles, getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; export default class TextPreview extends React.PureComponent { static propTypes = { - componentId: PropTypes.string, theme: PropTypes.object.isRequired, content: PropTypes.string.isRequired, }; - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - countLines = (content) => { return content.split('\n').length; }; diff --git a/app/screens/thread/thread_base.js b/app/screens/thread/thread_base.js index c99683d5e..c0c21fb91 100644 --- a/app/screens/thread/thread_base.js +++ b/app/screens/thread/thread_base.js @@ -11,7 +11,6 @@ import {General, RequestStatus} from 'mattermost-redux/constants'; import Loading from 'app/components/loading'; import DeletedPost from 'app/components/deleted_post'; import {resetToChannel, popTopScreen, mergeNavigationOptions} from 'app/actions/navigation'; -import {setNavigatorStyles} from 'app/utils/theme'; export default class ThreadBase extends PureComponent { static propTypes = { @@ -68,10 +67,6 @@ export default class ThreadBase extends PureComponent { } componentWillReceiveProps(nextProps) { - if (this.props.theme !== nextProps.theme) { - setNavigatorStyles(this.props.componentId, nextProps.theme); - } - if (this.props.postIds !== nextProps.postIds && !nextProps.postIds.length) { this.close(); return; diff --git a/app/screens/user_profile/user_profile.js b/app/screens/user_profile/user_profile.js index bbe0235c7..67432eb9e 100644 --- a/app/screens/user_profile/user_profile.js +++ b/app/screens/user_profile/user_profile.js @@ -23,7 +23,7 @@ import StatusBar from 'app/components/status_bar'; import {BotTag, GuestTag} from 'app/components/tag'; import {alertErrorWithFallback} from 'app/utils/general'; -import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import {t} from 'app/utils/i18n'; import {isGuest} from 'app/utils/users'; @@ -83,12 +83,6 @@ export default class UserProfile extends PureComponent { } } - componentDidUpdate(prevProps) { - if (this.props.theme !== prevProps.theme) { - setNavigatorStyles(this.props.componentId, this.props.theme); - } - } - componentDidMount() { this.navigationEventListener = Navigation.events().bindComponent(this); diff --git a/app/utils/theme.js b/app/utils/theme.js index ee4ea9cba..f26d45da4 100644 --- a/app/utils/theme.js +++ b/app/utils/theme.js @@ -8,6 +8,22 @@ import * as ThemeUtils from 'mattermost-redux/utils/theme_utils'; import {mergeNavigationOptions} from 'app/actions/navigation'; +const MODAL_SCREENS_WITHOUT_BACK = [ + 'AddReaction', + 'ChannelInfo', + 'ClientUpgrade', + 'CreateChannel', + 'EditPost', + 'ErrorTeamsList', + 'MoreChannels', + 'MoreDirectMessages', + 'Permalink', + 'SelectTeam', + 'Settings', + 'TermsOfService', + 'UserProfile', +]; + export function makeStyleSheetFromTheme(getStyleFromTheme) { return ThemeUtils.makeStyleFromTheme((theme) => { return StyleSheet.create(getStyleFromTheme(theme)); @@ -33,15 +49,18 @@ export function setNavigatorStyles(componentId, theme) { }, leftButtonColor: theme.sidebarHeaderTextColor, rightButtonColor: theme.sidebarHeaderTextColor, - backButton: { - color: theme.sidebarHeaderTextColor, - }, }, layout: { - backgroundColor: theme.centerChannelBg, + componentBackgroundColor: theme.centerChannelBg, }, }; + if (!MODAL_SCREENS_WITHOUT_BACK.includes(componentId)) { + options.topBar.backButton = { + color: theme.sidebarHeaderTextColor, + }; + } + mergeNavigationOptions(componentId, options); } diff --git a/index.js b/index.js index cbdcf1bce..e56dba743 100644 --- a/index.js +++ b/index.js @@ -19,6 +19,7 @@ if (__DEV__) { const YellowBox = require('react-native/Libraries/YellowBox/YellowBox'); YellowBox.ignoreWarnings([ 'Warning: componentWillReceiveProps', + 'Warning: StatusBarIOS', '`-[RCTRootView cancelTouches]`', // Hide warnings caused by React Native (https://github.com/facebook/react-native/issues/20841)