From e6a6e2579911fc4e171ee2feb6e6217b55eb2250 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 11 Jan 2023 09:53:09 +0200
Subject: [PATCH] Fix navigation theming (#6946)

---
 app/constants/screens.ts  | 11 +++++++----
 app/screens/navigation.ts |  6 +-----
 app/utils/theme/index.ts  | 23 ++++++++++++++++++-----
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/constants/screens.ts b/app/constants/screens.ts
index 1f6713989..32cbb27eb 100644
--- a/app/constants/screens.ts
+++ b/app/constants/screens.ts
@@ -142,20 +142,23 @@ export const MODAL_SCREENS_WITHOUT_BACK = new Set<string>([
     EDIT_POST,
     EDIT_PROFILE,
     EDIT_SERVER,
-    EMOJI_PICKER,
     FIND_CHANNELS,
     GALLERY,
     PERMALINK,
-    REACTIONS,
 ]);
 
 export const SCREENS_WITH_TRANSPARENT_BACKGROUND = new Set<string>([
+    PERMALINK,
+    REVIEW_APP,
+    SNACK_BAR,
+]);
+
+export const SCREENS_AS_BOTTOM_SHEET = new Set<string>([
     BOTTOM_SHEET,
+    EMOJI_PICKER,
     POST_OPTIONS,
     THREAD_OPTIONS,
-    PERMALINK,
     REACTIONS,
-    SNACK_BAR,
     USER_PROFILE,
 ]);
 
diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts
index 9be856a49..bfeaa7ffc 100644
--- a/app/screens/navigation.ts
+++ b/app/screens/navigation.ts
@@ -219,11 +219,7 @@ Appearance.addChangeListener(() => {
 });
 
 export function getThemeFromState(): Theme {
-    if (EphemeralStore.theme) {
-        return EphemeralStore.theme;
-    }
-
-    return getDefaultThemeByAppearance();
+    return EphemeralStore.theme || getDefaultThemeByAppearance();
 }
 
 // This is a temporary helper function to avoid
diff --git a/app/utils/theme/index.ts b/app/utils/theme/index.ts
index 54ced1132..1c55889a1 100644
--- a/app/utils/theme/index.ts
+++ b/app/utils/theme/index.ts
@@ -1,12 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import deepEqual from 'deep-equal';
 import merge from 'deepmerge';
 import {StatusBar, StyleSheet} from 'react-native';
 import tinyColor from 'tinycolor2';
 
 import {Preferences} from '@constants';
-import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens';
+import {MODAL_SCREENS_WITHOUT_BACK, SCREENS_AS_BOTTOM_SHEET, SCREENS_WITH_TRANSPARENT_BACKGROUND} from '@constants/screens';
 import EphemeralStore from '@store/ephemeral_store';
 import NavigationStore from '@store/navigation_store';
 import {NamedStyles} from '@typings/global/styles';
@@ -99,13 +100,25 @@ export function setNavigatorStyles(componentId: string, theme: Theme, additional
         },
     };
 
-    if (!SCREENS_WITH_TRANSPARENT_BACKGROUND.has(componentId)) {
+    if (SCREENS_AS_BOTTOM_SHEET.has(componentId)) {
+        options.topBar = {
+            leftButtonColor: changeOpacity(theme.centerChannelColor, 0.56),
+            background: {
+                color: theme.centerChannelBg,
+            },
+            title: {
+                color: theme.centerChannelColor,
+            },
+        };
+    }
+
+    if (!SCREENS_WITH_TRANSPARENT_BACKGROUND.has(componentId) && !SCREENS_AS_BOTTOM_SHEET.has(componentId)) {
         options.layout = {
             componentBackgroundColor: theme.centerChannelBg,
         };
     }
 
-    if (!MODAL_SCREENS_WITHOUT_BACK.has(componentId) && options.topBar) {
+    if (!MODAL_SCREENS_WITHOUT_BACK.has(componentId) && !SCREENS_AS_BOTTOM_SHEET.has(componentId) && options.topBar) {
         options.topBar.backButton = {
             color: theme.sidebarHeaderTextColor,
         };
@@ -263,8 +276,8 @@ export function setThemeDefaults(theme: ExtendedTheme): Theme {
 }
 
 export const updateThemeIfNeeded = (theme: Theme, force = false) => {
-    if (theme !== EphemeralStore.theme || force) {
-        EphemeralStore.theme = theme;
+    const storedTheme = EphemeralStore.theme;
+    if (!deepEqual(theme, storedTheme) || force) {
         requestAnimationFrame(() => {
             setNavigationStackStyles(theme);
         });