Merge pull request #232 from tooot-app/main

Fix theme changing issue
This commit is contained in:
xmflsct 2022-02-17 00:13:26 +01:00 committed by GitHub
commit e78f8263da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 30 deletions

View File

@ -4,7 +4,7 @@
"native": "220214",
"major": 3,
"minor": 5,
"patch": 0,
"patch": 1,
"expo": "44.0.0"
},
"description": "tooot app for Mastodon",

View File

@ -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]}

View File

@ -127,7 +127,7 @@ const ScreenImagesViewer = ({
return (
<SafeAreaProvider>
<StatusBar backgroundColor='rgb(0,0,0)' />
<StatusBar hidden />
<ImageViewer
images={imageUrls}
imageIndex={initialIndex}

View File

@ -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(

View File

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

View File

@ -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>