diff --git a/App.js b/App.js index 0e2e740..e97ad3a 100644 --- a/App.js +++ b/App.js @@ -42,6 +42,7 @@ export default class App extends React.Component { super(); LocaleManager.initTranslations(); this.onIntroDone = this.onIntroDone.bind(this); + SplashScreen.preventAutoHide(); } /** @@ -84,13 +85,9 @@ export default class App extends React.Component { async loadAssetsAsync() { // Wait for custom fonts to be loaded before showing the app - // console.log("loading Fonts"); - SplashScreen.preventAutoHide(); - // console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); - // console.log("loading Expo token"); - await NotificationsManager.initExpoToken(); + // await NotificationsManager.initExpoToken(); this.onLoadFinished(); } @@ -122,7 +119,6 @@ export default class App extends React.Component { isAprilFools={this.state.showAprilFools && !this.state.showIntro} />; } else { - return ( diff --git a/app.json b/app.json index f1ef51b..57500e5 100644 --- a/app.json +++ b/app.json @@ -13,6 +13,7 @@ "version": "1.5.2", "orientation": "portrait", "primaryColor": "#be1522", + "userInterfaceStyle": "automatic", "icon": "./assets/android.icon.png", "splash": { "backgroundColor": "#be1522", diff --git a/package.json b/package.json index 39ade1f..d446175 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ "react-native-render-html": "^4.1.2", "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", - "react-native-webview": "7.4.3" + "react-native-webview": "7.4.3", + "react-native-appearance": "~0.3.1" }, "devDependencies": { "babel-preset-expo": "^8.0.0" diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 47e36f1..9d2c328 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -7,6 +7,7 @@ import i18n from "i18n-js"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; import {Card, List, Switch, ToggleButton} from 'react-native-paper'; +import {Appearance} from "react-native-appearance"; type Props = { navigation: Object, @@ -14,6 +15,7 @@ type Props = { type State = { nightMode: boolean, + nightModeFollowSystem: boolean, proxiwashNotifPickerSelected: string, startScreenPickerSelected: string, }; @@ -24,6 +26,8 @@ type State = { export default class SettingsScreen extends React.Component { state = { nightMode: ThemeManager.getNightMode(), + nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' && + Appearance.getColorScheme() !== 'no-preference', proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current, startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current, }; @@ -31,12 +35,14 @@ export default class SettingsScreen extends React.Component { onProxiwashNotifPickerValueChange: Function; onStartScreenPickerValueChange: Function; onToggleNightMode: Function; + onToggleNightModeFollowSystem: Function; constructor() { super(); this.onProxiwashNotifPickerValueChange = this.onProxiwashNotifPickerValueChange.bind(this); this.onStartScreenPickerValueChange = this.onStartScreenPickerValueChange.bind(this); this.onToggleNightMode = this.onToggleNightMode.bind(this); + this.onToggleNightModeFollowSystem = this.onToggleNightModeFollowSystem.bind(this); } /** @@ -119,6 +125,18 @@ export default class SettingsScreen extends React.Component { this.setState({nightMode: !this.state.nightMode}); } + onToggleNightModeFollowSystem() { + const value = !this.state.nightModeFollowSystem; + this.setState({nightModeFollowSystem: value}); + let key = AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.key; + AsyncStorageManager.getInstance().savePref(key, value ? '1' : '0'); + if (value) { + const nightMode = Appearance.getColorScheme() === 'dark'; + ThemeManager.getInstance().setNightMode(nightMode); + this.setState({nightMode: nightMode}); + } + } + /** * Get a list item using a checkbox control * @@ -128,7 +146,7 @@ export default class SettingsScreen extends React.Component { * @param subtitle The text to display as this list item subtitle * @returns {React.Node} */ - getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) { + getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) { return ( { left={props => } right={props => } /> @@ -149,14 +167,27 @@ export default class SettingsScreen extends React.Component { - {this.getToggleItem( - this.onToggleNightMode, + {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem( + this.onToggleNightModeFollowSystem, 'theme-light-dark', - i18n.t('settingsScreen.nightMode'), + i18n.t('settingsScreen.nightModeAuto'), this.state.nightMode ? i18n.t('settingsScreen.nightModeSubOn') : - i18n.t('settingsScreen.nightModeSubOff') - )} + i18n.t('settingsScreen.nightModeSubOff'), + this.state.nightModeFollowSystem + ) : null} + { + Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ? + this.getToggleItem( + this.onToggleNightMode, + 'theme-light-dark', + i18n.t('settingsScreen.nightMode'), + this.state.nightMode ? + i18n.t('settingsScreen.nightModeSubOn') : + i18n.t('settingsScreen.nightModeSubOff'), + this.state.nightMode + ) : null + }