From dd7b9cd6a256608170db452585ce31e8111f0f78 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Thu, 17 Feb 2022 00:09:19 +0100
Subject: [PATCH] Fix theme changing issue

---
 package.json                      |  2 +-
 src/Screens.tsx                   | 11 ++---------
 src/screens/ImagesViewer.tsx      |  2 +-
 src/screens/Tabs.tsx              |  4 ++--
 src/screens/Tabs/Public.tsx       |  4 ++--
 src/utils/styles/ThemeManager.tsx | 22 +++++++---------------
 6 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f630b287..194d3228 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "native": "220214",
     "major": 3,
     "minor": 5,
-    "patch": 0,
+    "patch": 1,
     "expo": "44.0.0"
   },
   "description": "tooot app for Mastodon",
diff --git a/src/Screens.tsx b/src/Screens.tsx
index d353ab9b..98bd115b 100644
--- a/src/Screens.tsx
+++ b/src/Screens.tsx
@@ -40,11 +40,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
   const { t } = useTranslation('screens')
   const dispatch = useDispatch()
   const instanceActive = useSelector(getInstanceActive)
-  const { colors, mode, theme } = useTheme()
-  enum barStyle {
-    light = 'dark-content',
-    dark = 'light-content'
-  }
+  const { colors, theme } = useTheme()
 
   const routeRef = useRef<{ name?: string; params?: {} }>()
 
@@ -163,10 +159,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
 
   return (
     <>
-      <StatusBar
-        barStyle={barStyle[mode]}
-        backgroundColor={colors.backgroundDefault}
-      />
+      <StatusBar backgroundColor={colors.backgroundDefault} />
       <NavigationContainer
         ref={navigationRef}
         theme={themes[theme]}
diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx
index cd723983..405a1aaa 100644
--- a/src/screens/ImagesViewer.tsx
+++ b/src/screens/ImagesViewer.tsx
@@ -127,7 +127,7 @@ const ScreenImagesViewer = ({
 
   return (
     <SafeAreaProvider>
-      <StatusBar backgroundColor='rgb(0,0,0)' />
+      <StatusBar hidden />
       <ImageViewer
         images={imageUrls}
         imageIndex={initialIndex}
diff --git a/src/screens/Tabs.tsx b/src/screens/Tabs.tsx
index e68918e5..b4cf8053 100644
--- a/src/screens/Tabs.tsx
+++ b/src/screens/Tabs.tsx
@@ -31,7 +31,7 @@ const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
 
 const ScreenTabs = React.memo(
   ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
-    const { colors } = useTheme()
+    const { colors, theme } = useTheme()
 
     const instanceActive = useSelector(getInstanceActive)
     const instanceAccount = useSelector(
@@ -87,7 +87,7 @@ const ScreenTabs = React.memo(
           }
         }
       }),
-      [instanceAccount?.avatarStatic, instanceActive]
+      [instanceAccount?.avatarStatic, instanceActive, theme]
     )
 
     const composeListeners = useMemo(
diff --git a/src/screens/Tabs/Public.tsx b/src/screens/Tabs/Public.tsx
index 28d79d83..4495a46a 100644
--- a/src/screens/Tabs/Public.tsx
+++ b/src/screens/Tabs/Public.tsx
@@ -23,7 +23,7 @@ const Stack = createNativeStackNavigator<TabPublicStackParamList>()
 const TabPublic = React.memo(
   ({ navigation }: ScreenTabsScreenProps<'Tab-Public'>) => {
     const { t, i18n } = useTranslation('screenTabs')
-    const { mode } = useTheme()
+    const { mode, theme } = useTheme()
 
     const [segment, setSegment] = useState(0)
     const pages: {
@@ -67,7 +67,7 @@ const TabPublic = React.memo(
           />
         )
       }),
-      [mode, segment, i18n.language]
+      [theme, segment, i18n.language]
     )
 
     const routes = pages.map(p => ({ key: p.key }))
diff --git a/src/utils/styles/ThemeManager.tsx b/src/utils/styles/ThemeManager.tsx
index c058c863..a5d9ea17 100644
--- a/src/utils/styles/ThemeManager.tsx
+++ b/src/utils/styles/ThemeManager.tsx
@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from 'react'
+import React, { createContext, useContext, useEffect, useState } from 'react'
 import { Appearance } from 'react-native'
 import { useSelector } from 'react-redux'
 import { ColorDefinitions, getColors, Theme } from '@utils/styles/themes'
@@ -85,25 +79,23 @@ const ThemeManager: React.FC = ({ children }) => {
   const userTheme = useSelector(getSettingsTheme)
   const darkTheme = useSelector(getSettingsDarkTheme)
 
-  const mode = useRef(userTheme === 'auto' ? osTheme || 'light' : userTheme)
+  const [mode, setMode] = useState(
+    userTheme === 'auto' ? osTheme || 'light' : userTheme
+  )
   const [theme, setTheme] = useState<Theme>(
     determineTheme(osTheme, userTheme, darkTheme)
   )
 
   useEffect(() => {
-    mode.current = userTheme === 'auto' ? osTheme || 'light' : userTheme
-  }, [userTheme])
+    setMode(userTheme === 'auto' ? osTheme || 'light' : userTheme)
+  }, [osTheme, userTheme])
   useEffect(() => {
     setTheme(determineTheme(osTheme, userTheme, darkTheme))
   }, [osTheme, userTheme, darkTheme])
 
   return (
     <ManageThemeContext.Provider
-      value={{
-        mode: mode.current,
-        theme,
-        colors: getColors(theme)
-      }}
+      value={{ mode, theme, colors: getColors(theme) }}
     >
       {children}
     </ManageThemeContext.Provider>