vn-verdnaturachat/app/utils/theme.ts

83 lines
2.7 KiB
TypeScript
Raw Normal View History

2019-12-04 16:39:53 +00:00
import { Appearance } from 'react-native-appearance';
import changeNavigationBarColor from 'react-native-navigation-bar-color';
import setRootViewColor from 'rn-root-view';
import { IThemePreference, TThemeMode } from '../definitions/ITheme';
import { themes, THEME_PREFERENCES_KEY } from '../lib/constants';
import UserPreferences from '../lib/methods/userPreferences';
import { TSupportedThemes } from '../theme';
import { isAndroid } from './deviceInfo';
2019-12-04 16:39:53 +00:00
let themeListener: { remove: () => void } | null;
2019-12-04 16:39:53 +00:00
Chore: Update react-native-mmkv-storage to 0.6.12 (#3634) * chore: updating mmkv library * feat: updating android ejson to use the getSecureKey new version * feat: updating IOS files to use the getSecureKey new version * feat: changing all mmkv methods to use sync calls * feat: changing mmkv methods from Screen lock * feat: changing all mmkv methods from login, ssl certificate and change/add server * feat: changing all mmkv methods from login, ssl certificate and change/add server * feat: changing all mmkv methods from logout * feat: changing all mmkv methods from e2e * fix: small fix at encryption and server drop down * feat: changing all mmkv methods from set theme * feat: changing all mmkv methods from openLink * fix: setting up mmkv to works property on Android * fix: fix an error to set the theme when open the app * refactor: change the react-native branch (temporary) * refactor: removing all `Async` from mmkv functions name * refactor: removing await from unnecessary functions, removing console.log and update cocoapods * refactor: removing unnecessary undefined from methods * feat: creating a custom hook for mmkv * refactor: changing the fetchPasscode to use the useUserPreferences hook * refactor: changing setTheme from app/index * refactor: small fix on setTheme * chore: update mmkv to 0.6.11 * chore: update mmkv to 0.6.11 * chore: minor tweak * chore: update mmkv to 0.6.12 * chore: mock NativeModules * chore: fix test mmkv * chore: removing custom MMKV JSI module, since is no more necessary after 0.6.11 version * feat: removing some async calls from mmkv after update from develop * feat: creating a function to get the initialTheme * feat: removing unnecessary try/catch * fix: fixing the blink white when open the app * feat: changing useMMKVStorage to create from mmkv lib * test: creating a mock for mmkv create function * chore: fix errors on tablet * minor tweak
2022-03-09 19:41:26 +00:00
export const initialTheme = (): IThemePreference => {
const theme = UserPreferences.getMap(THEME_PREFERENCES_KEY) as IThemePreference;
const initialTheme: IThemePreference = {
currentTheme: defaultTheme(),
darkLevel: 'black'
};
return theme || initialTheme;
};
export const defaultTheme = (): TThemeMode => {
2019-12-04 16:39:53 +00:00
const systemTheme = Appearance.getColorScheme();
if (systemTheme && systemTheme !== 'no-preference') {
return systemTheme;
}
return 'light';
};
export const getTheme = (themePreferences: IThemePreference): TSupportedThemes => {
2019-12-04 16:39:53 +00:00
const { darkLevel, currentTheme } = themePreferences;
let theme = currentTheme;
if (currentTheme === 'automatic') {
theme = defaultTheme();
}
return theme === 'dark' ? darkLevel : 'light';
};
export const newThemeState = (prevState: { themePreferences: IThemePreference }, newTheme: IThemePreference) => {
2019-12-04 16:39:53 +00:00
// new theme preferences
const themePreferences = {
...prevState.themePreferences,
...newTheme
};
// set new state of themePreferences
// and theme (based on themePreferences)
return { themePreferences, theme: getTheme(themePreferences) };
};
export const setNativeTheme = async (themePreferences: IThemePreference): Promise<void> => {
2019-12-04 16:39:53 +00:00
const theme = getTheme(themePreferences);
if (isAndroid) {
const iconsLight = theme === 'light';
try {
// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight, true);
} catch (error) {
// Do nothing
}
2019-12-04 16:39:53 +00:00
}
setRootViewColor(themes[theme].backgroundColor);
};
export const unsubscribeTheme = () => {
if (themeListener && themeListener.remove) {
themeListener.remove();
themeListener = null;
}
};
export const subscribeTheme = (themePreferences: IThemePreference, setTheme: () => void): void => {
2019-12-04 16:39:53 +00:00
const { currentTheme } = themePreferences;
if (!themeListener && currentTheme === 'automatic') {
// not use listener params because we use getTheme
themeListener = Appearance.addChangeListener(() => setTheme());
} else if (currentTheme !== 'automatic') {
// unsubscribe appearance changes when automatic was disabled
unsubscribeTheme();
}
// set native components theme
setNativeTheme(themePreferences);
};