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 (
-            <View style={[style.container, {backgroundColor: bgColor}]}>
-                {children}
-            </View>
-        );
-    }
-}
-
-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 (
-            <View style={styles.container}>
-                <EmojiPicker onEmojiPress={this.handleEmojiPress}/>
-            </View>
-        );
-    }
-}
-
-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 (
+            <View style={styles.container}>
+                <EmojiPicker onEmojiPress={this.handleEmojiPress}/>
+            </View>
+        );
+    }
 }
 
-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 = (
             <>
                 <NetworkIndicator/>
@@ -63,7 +61,7 @@ export default class ChannelAndroid extends ChannelBase {
 
         return (
             <>
-                <View style={style.backdrop}>
+                <View style={style.flex}>
                     {drawerContent}
                 </View>
                 <InteractiveDialogController
@@ -74,14 +72,8 @@ export default class ChannelAndroid extends ChannelBase {
     }
 }
 
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    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 = (
             <>
                 <SafeAreaView>
@@ -100,7 +98,7 @@ export default class ChannelIOS extends ChannelBase {
         return (
             <MainSidebar ref={this.mainSidebarRef}>
                 <SettingsSidebar ref={this.settingsSidebarRef}>
-                    <View style={style.backdrop}>
+                    <View style={style.flex}>
                         {drawerContent}
                     </View>
                 </SettingsSidebar>
@@ -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', () => {
             <ChannelBase {...baseProps}/>,
         );
 
-        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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/channel_info/channel_info.js b/app/screens/channel_info/channel_info.js
index a7da28140..09dc8a6c8 100644
--- a/app/screens/channel_info/channel_info.js
+++ b/app/screens/channel_info/channel_info.js
@@ -16,7 +16,7 @@ import {General, Users} from 'mattermost-redux/constants';
 import StatusBar from 'app/components/status_bar';
 import {preventDoubleTap} from 'app/utils/tap';
 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 {dismissModal, goToScreen, showModalOverCurrentContext} from 'app/actions/navigation';
 
@@ -116,12 +116,6 @@ export default class ChannelInfo extends PureComponent {
         }
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.theme !== this.props.theme) {
-            setNavigatorStyles(prevProps.componentId, this.props.theme);
-        }
-    }
-
     close = (redirect = true) => {
         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 {
                 <KeyboardAwareScrollView
                     bounces={false}
                     innerRef={this.scrollViewRef}
-                    style={style.container}
                 >
                     {displayError}
                     <View style={[style.scrollView]}>
@@ -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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/error_teams_list/error_teams_list.js b/app/screens/error_teams_list/error_teams_list.js
index 7d401338b..32a1e6a35 100644
--- a/app/screens/error_teams_list/error_teams_list.js
+++ b/app/screens/error_teams_list/error_teams_list.js
@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
     InteractionManager,
+    StyleSheet,
     View,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
@@ -13,7 +14,6 @@ import FailedNetworkAction from 'app/components/failed_network_action';
 import Loading from 'app/components/loading';
 import StatusBar from 'app/components/status_bar';
 import {resetToChannel} from 'app/actions/navigation';
-import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 
 export default class ErrorTeamsList extends PureComponent {
     static propTypes = {
@@ -23,7 +23,6 @@ export default class ErrorTeamsList extends PureComponent {
             logout: PropTypes.func.isRequired,
             selectDefaultTeam: PropTypes.func.isRequired,
         }).isRequired,
-        componentId: PropTypes.string,
         theme: PropTypes.object,
     };
 
@@ -39,12 +38,6 @@ export default class ErrorTeamsList extends PureComponent {
         this.navigationEventListener = Navigation.events().bindComponent(this);
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.theme !== prevProps.theme) {
-            setNavigatorStyles(this.props.componentId, this.props.theme);
-        }
-    }
-
     navigationButtonPressed({buttonId}) {
         const {logout} = this.props.actions;
         if (buttonId === 'logout') {
@@ -75,7 +68,6 @@ export default class ErrorTeamsList extends PureComponent {
 
     render() {
         const {theme} = this.props;
-        const style = getStyleFromTheme(theme);
 
         if (this.state.loading) {
             return <Loading color={theme.centerChannelColor}/>;
@@ -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
 <View
   style={
     Object {
-      "backgroundColor": "#FFFFFF",
       "flex": 1,
     }
   }
@@ -88,7 +87,6 @@ exports[`ForgotPassword should match snapshot 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#FFFFFF",
       "flex": 1,
     }
   }
@@ -200,7 +198,6 @@ exports[`ForgotPassword snapshot for error on failure of email regex 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#FFFFFF",
       "flex": 1,
     }
   }
diff --git a/app/screens/forgot_password/forgot_password.js b/app/screens/forgot_password/forgot_password.js
index 698eace45..a6bb36e20 100644
--- a/app/screens/forgot_password/forgot_password.js
+++ b/app/screens/forgot_password/forgot_password.js
@@ -169,7 +169,6 @@ export default class ForgotPassword extends PureComponent {
 
 const style = StyleSheet.create({
     container: {
-        backgroundColor: '#FFFFFF',
         flex: 1,
     },
     innerContainer: {
diff --git a/app/screens/index.js b/app/screens/index.js
index 963e814a7..5b309cc62 100644
--- a/app/screens/index.js
+++ b/app/screens/index.js
@@ -61,7 +61,6 @@ export function registerScreens(store, Provider) {
     Navigation.registerComponent('PostOptions', () => 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 {
             <ScrollView
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
                   "flex": 1,
                 }
               }
diff --git a/app/screens/long_post/long_post.js b/app/screens/long_post/long_post.js
index 16b4ba8fd..0b042e375 100644
--- a/app/screens/long_post/long_post.js
+++ b/app/screens/long_post/long_post.js
@@ -194,7 +194,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         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 <Loading/>;
-}
-
-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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -155,7 +154,6 @@ exports[`SelectTeam should match snapshot when user is a guest 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/select_team/index.js b/app/screens/select_team/index.js
index 2c55c91a0..6a1dba046 100644
--- a/app/screens/select_team/index.js
+++ b/app/screens/select_team/index.js
@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
 
 import {getTeams, addUserToTeam, joinTeam} from 'mattermost-redux/actions/teams';
 import {logout} from 'mattermost-redux/actions/users';
+import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getJoinableTeams} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 
@@ -18,13 +19,15 @@ import SelectTeam from './select_team.js';
 function mapStateToProps(state) {
     const currentUser = getCurrentUser(state);
     const currentUserIsGuest = isGuest(currentUser);
+
     return {
-        teamsRequest: state.requests.teams.getTeams,
-        teams: getJoinableTeams(state),
-        isLandscape: isLandscape(state),
         currentUserId: currentUser && currentUser.id,
         currentUserIsGuest,
+        isLandscape: isLandscape(state),
         serverVersion: state.entities.general.serverVersion,
+        teamsRequest: state.requests.teams.getTeams,
+        teams: getJoinableTeams(state),
+        theme: getTheme(state),
     };
 }
 
diff --git a/app/screens/select_team/select_team.js b/app/screens/select_team/select_team.js
index cf9c5747d..983fd66a9 100644
--- a/app/screens/select_team/select_team.js
+++ b/app/screens/select_team/select_team.js
@@ -25,7 +25,7 @@ import TeamIcon from 'app/components/team_icon';
 import {NavigationTypes} from 'app/constants';
 import {resetToChannel, dismissModal} from 'app/actions/navigation';
 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';
 
 const TEAMS_PER_PAGE = 50;
@@ -39,7 +39,6 @@ export default class SelectTeam extends PureComponent {
             addUserToTeam: PropTypes.func.isRequired,
             logout: PropTypes.func.isRequired,
         }).isRequired,
-        componentId: PropTypes.string.isRequired,
         currentUrl: PropTypes.string.isRequired,
         currentUserIsGuest: PropTypes.bool.isRequired,
         currentUserId: PropTypes.string.isRequired,
@@ -74,10 +73,6 @@ export default class SelectTeam extends PureComponent {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (this.props.theme !== nextProps.theme) {
-            setNavigatorStyles(this.props.componentId, nextProps.theme);
-        }
-
         if (this.props.teams !== nextProps.teams) {
             this.buildData(nextProps);
         }
@@ -299,7 +294,6 @@ export default class SelectTeam extends PureComponent {
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -101,7 +100,6 @@ exports[`SelectorScreen should match snapshot for channels 2`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -198,7 +196,6 @@ exports[`SelectorScreen should match snapshot for explicit options 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -302,7 +299,6 @@ exports[`SelectorScreen should match snapshot for searching 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -399,7 +395,6 @@ exports[`SelectorScreen should match snapshot for users 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -496,7 +491,6 @@ exports[`SelectorScreen should match snapshot for users 2`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/selector_screen/selector_screen.js b/app/screens/selector_screen/selector_screen.js
index 47b3e2a12..f99ca17b6 100644
--- a/app/screens/selector_screen/selector_screen.js
+++ b/app/screens/selector_screen/selector_screen.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';
@@ -43,7 +42,6 @@ export default class SelectorScreen extends PureComponent {
             searchProfiles: PropTypes.func.isRequired,
             searchChannels: PropTypes.func.isRequired,
         }),
-        componentId: PropTypes.string,
         currentTeamId: PropTypes.string.isRequired,
         data: PropTypes.arrayOf(PropTypes.object),
         dataSource: PropTypes.string,
@@ -90,12 +88,6 @@ export default class SelectorScreen extends PureComponent {
         this.mounted = false;
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.theme !== prevProps.theme) {
-            setNavigatorStyles(this.props.componentId, this.props.theme);
-        }
-    }
-
     setSearchBarRef = (ref) => {
         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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -13,7 +12,6 @@ exports[`DisplaySettings should match snapshot 1`] = `
   <View
     style={
       Object {
-        "backgroundColor": "rgba(61,60,64,0.06)",
         "flex": 1,
         "paddingTop": 35,
       }
@@ -83,7 +81,6 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
@@ -92,7 +89,6 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
   <View
     style={
       Object {
-        "backgroundColor": "rgba(61,60,64,0.06)",
         "flex": 1,
         "paddingTop": 35,
       }
diff --git a/app/screens/settings/display_settings/display_settings.js b/app/screens/settings/display_settings/display_settings.js
index c96822c87..0a3df0298 100644
--- a/app/screens/settings/display_settings/display_settings.js
+++ b/app/screens/settings/display_settings/display_settings.js
@@ -16,7 +16,6 @@ import {goToScreen} from 'app/actions/navigation';
 
 export default class DisplaySettings extends PureComponent {
     static propTypes = {
-        componentId: PropTypes.string,
         theme: PropTypes.object.isRequired,
         enableTheme: PropTypes.bool.isRequired,
         enableTimezone: PropTypes.bool.isRequired,
@@ -156,8 +155,8 @@ export default class DisplaySettings extends PureComponent {
                     />
                     {timezoneOption}
                     <View style={style.divider}/>
+                    {clockDisplayModal}
                 </View>
-                {clockDisplayModal}
             </View>
         );
     }
@@ -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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/settings/theme/theme.js b/app/screens/settings/theme/theme.js
index 75cb5e39e..4944857e0 100644
--- a/app/screens/settings/theme/theme.js
+++ b/app/screens/settings/theme/theme.js
@@ -12,8 +12,7 @@ import StatusBar from 'app/components/status_bar';
 import Section from 'app/screens/settings/section';
 import SectionItem from 'app/screens/settings/section_item';
 import FormattedText from 'app/components/formatted_text';
-import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
-import EphemeralStore from 'app/store/ephemeral_store';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import ThemeTile from './theme_tile';
 
@@ -29,7 +28,6 @@ export default class Theme extends React.PureComponent {
         actions: PropTypes.shape({
             savePreferences: PropTypes.func.isRequired,
         }).isRequired,
-        componentId: PropTypes.string,
         allowedThemes: PropTypes.arrayOf(PropTypes.object),
         customTheme: PropTypes.object,
         isLandscape: PropTypes.bool.isRequired,
@@ -56,14 +54,6 @@ export default class Theme extends React.PureComponent {
         return null;
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.theme !== this.props.theme) {
-            EphemeralStore.allNavigationComponentIds.forEach((componentId) => {
-                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(
-            <Theme {...baseProps}/>,
-        );
-
-        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`] = `
 <View
   style={
     Object {
-      "backgroundColor": "#ffffff",
       "flex": 1,
     }
   }
diff --git a/app/screens/terms_of_service/terms_of_service.js b/app/screens/terms_of_service/terms_of_service.js
index 2c7f327d6..93217da06 100644
--- a/app/screens/terms_of_service/terms_of_service.js
+++ b/app/screens/terms_of_service/terms_of_service.js
@@ -17,7 +17,7 @@ import Markdown from 'app/components/markdown';
 import StatusBar from 'app/components/status_bar';
 
 import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
-import {makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
+import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import {dismissModal, setButtons} from 'app/actions/navigation';
 
@@ -74,12 +74,6 @@ export default class TermsOfService extends PureComponent {
         this.getTerms();
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.theme !== prevProps.theme) {
-            setNavigatorStyles(this.props.componentId, this.props.theme);
-        }
-    }
-
     navigationButtonPressed({buttonId}) {
         switch (buttonId) {
         case 'close-terms-of-service':
@@ -275,7 +269,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             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)