Fix theme changing issue

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",

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()
+  const { colors, theme } = useTheme()
-  enum barStyle {
-    light = 'dark-content',
-    dark = 'light-content'
-  }
 
   const routeRef = useRef<{ name?: string; params?: {} }>()
 
@@ -163,10 +159,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
 
   return (
     <>
-      <StatusBar
+      <StatusBar backgroundColor={colors.backgroundDefault} />
-        barStyle={barStyle[mode]}
-        backgroundColor={colors.backgroundDefault}
-      />
       <NavigationContainer
         ref={navigationRef}
         theme={themes[theme]}

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}

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(

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 }))

src/utils/styles/ThemeManager.tsx

@@ -1,10 +1,4 @@
-import React, {
+import React, { createContext, useContext, useEffect, useState } from 'react'
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  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
+    setMode(userTheme === 'auto' ? osTheme || 'light' : userTheme)
-  }, [userTheme])
+  }, [osTheme, userTheme])
   useEffect(() => {
     setTheme(determineTheme(osTheme, userTheme, darkTheme))
   }, [osTheme, userTheme, darkTheme])
 
   return (
     <ManageThemeContext.Provider
-      value={{
+      value={{ mode, theme, colors: getColors(theme) }}
-        mode: mode.current,
-        theme,
-        colors: getColors(theme)
-      }}
     >
       {children}
     </ManageThemeContext.Provider>