Bug in react-native

https://github.com/expo/expo/issues/10815

src/utils/styles/ThemeManager.tsx

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import { useColorScheme } from 'react-native'
+import { Appearance } from 'react-native'
 import { useSelector } from 'react-redux'
 import { ColorDefinitions, getTheme } from '@utils/styles/themes'
 import { getSettingsTheme } from '@utils/slices/settingsSlice'
+import { throttle } from 'lodash'
 
 type ContextType = {
   mode: 'light' | 'dark'
@@ -18,8 +19,34 @@ export const ManageThemeContext = createContext<ContextType>({
 
 export const useTheme = () => useContext(ManageThemeContext)
 
+const useColorSchemeDelay = (delay = 250) => {
+  const [colorScheme, setColorScheme] = React.useState(
+    Appearance.getColorScheme()
+  )
+  const onColorSchemeChange = React.useCallback(
+    throttle(
+      ({ colorScheme }) => {
+        setColorScheme(colorScheme)
+      },
+      delay,
+      {
+        leading: false
+      }
+    ),
+    []
+  )
+  React.useEffect(() => {
+    Appearance.addChangeListener(onColorSchemeChange)
+    return () => {
+      onColorSchemeChange.cancel()
+      Appearance.removeChangeListener(onColorSchemeChange)
+    }
+  }, [])
+  return colorScheme
+}
+
 const ThemeManager: React.FC = ({ children }) => {
-  const osTheme = useColorScheme()
+  const osTheme = useColorSchemeDelay()
   const userTheme = useSelector(getSettingsTheme)
   const currentMode =
     userTheme === 'auto' ? (osTheme as 'light' | 'dark') : userTheme