#33 Styles reorganisation, get rid of outdated react-native-dark-mode package

App.js

@@ -16,8 +16,8 @@ import {
     BackHandler,
     ActivityIndicator,
     Dimensions,
-    StatusBar,
     Alert,
+    Appearance,
 } from 'react-native';
 import { 
     View,
@@ -35,10 +35,10 @@ import RNIap, {
   type PurchaseError
 } from 'react-native-iap';
 
-import { initialMode, useDarkMode, DynamicStyleSheet, DynamicValue, useDynamicStyleSheet, eventEmitter } from 'react-native-dark-mode';
 import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';
 import VideoCall from './VideoCall';
 import ErrorPage from './ErrorPage';
+import { themeDark, themeLight, useTheme } from './Theme';
 
 import { version } from './package.json';
 
@@ -56,7 +56,6 @@ export default class App extends Component<Props> {
 
     loading = false;
     videoCallAudio = false;
-    mode = initialMode;
     purchaseUpdateSubscription = null;
     purchaseErrorSubscription = null;
     products = {};
@@ -64,8 +63,10 @@ export default class App extends Component<Props> {
     constructor(props) {
         super(props);
 
+        var colorScheme = Appearance.getColorScheme();
+
         this.state = {
-            url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == this.mode ? MIX_DARK : MIX_LIGHT}`,
+            url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' === colorScheme ? MIX_DARK : MIX_LIGHT}`,
             status: 'No Page Loaded',
             backButtonEnabled: false,
             forwardButtonEnabled: false,
@@ -87,13 +88,6 @@ export default class App extends Component<Props> {
         this.onVideoCallStart = this.onVideoCallStart.bind(this);        
     }
 
-    onModeChanged(newMode){
-        this.mode = newMode;
-        this.setState ({
-            key: this.state.key + 1,
-        });
-    }
-
     async onRequestPurchase (sku: string) {
         if ('ios' === Platform.OS)
             RNIap.clearTransactionIOS();
@@ -217,8 +211,9 @@ export default class App extends Component<Props> {
         if (`${BASE_URL}` == this.state.url || this.state.url.startsWith(`${BASE_URL}?skin=${TEMPLATE}`) || `${BASE_URL}index.php` == this.state.url) {
             this.injectJavaScript("bx_mobile_apps_close_sliding_menus()");
         } else {
+            var colorScheme = Appearance.getColorScheme();
             this.setState ({
-                url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == this.mode ? MIX_DARK : MIX_LIGHT}`,
+                url: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == colorScheme ? MIX_DARK : MIX_LIGHT}`,
                 searchbar: false,
                 key: this.state.key + 1,
             });
@@ -368,11 +363,14 @@ export default class App extends Component<Props> {
         SplashScreen.hide();
     }
 
-    UNSAFE_componentWillMount() {
-        eventEmitter.on('currentModeChanged', this.onModeChanged.bind(this));
-    }
-
     async componentDidMount() {
+
+        Appearance.addChangeListener(({ colorScheme }) => {
+            this.setState ({
+                key: this.state.key + 1,
+            });
+        });
+
         OneSignal.setLogLevel(6, 0);
         OneSignal.setAppId(ONESIGNALAPPID);
         // OneSignal.inFocusDisplaying(0);
@@ -428,9 +426,7 @@ export default class App extends Component<Props> {
                     return false;
                 }
             });
-        }
-
-        SplashScreen.hide();
+        }        
 
         if (PAYMENTS_CALLBACK != '') {
             var _self = this;
@@ -479,10 +475,11 @@ export default class App extends Component<Props> {
                 console.log('purchaseErrorListener', error);
             }); 
         }
+
+        SplashScreen.hide();
     }
     
     componentWillUnmount() {
-        eventEmitter.removeListener('currentModeChanged', this.onModeChanged);
 
         if (this.purchaseUpdateSubscription) {
             this.purchaseUpdateSubscription.remove();
@@ -565,6 +562,7 @@ export default class App extends Component<Props> {
     }
     
     render() {
+        var colorScheme = Appearance.getColorScheme();
         var sWebview = (
                 <WebView
                     useWebKit={true}
@@ -581,7 +579,7 @@ export default class App extends Component<Props> {
                     onShouldStartLoadWithRequest={this.onWebViewShouldStartLoadWithRequest.bind(this)}
                     onNavigationStateChange={this.onWebViewNavigationStateChange.bind(this)}
                     style={{flex: 1}}
-                    source={{uri: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == this.mode ? MIX_DARK : MIX_LIGHT}`}}
+                    source={{uri: `${BASE_URL}?skin=${TEMPLATE}&mix=${'dark' == colorScheme ? MIX_DARK : MIX_LIGHT}`}}
                     userAgent={"UNAMobileApp/Mobile (" + Platform.OS + ")"}
                     onMessage={this.onWebViewMessage.bind(this)}
                     allowFileAccess={true}
@@ -591,7 +589,7 @@ export default class App extends Component<Props> {
                 />
         );
         return (
-            <Container>
+            <Container> 
             <Drawer ref="drawer" content={<UnaDrawer onLogin={this.onDrawerLoginMenu.bind(this)} onJoin={this.onDrawerJoinMenu.bind(this)} onForotPassword={this.onDrawerForgotMenu.bind(this)} onClose={this.drawerClose.bind(this)} />} onClose={this.drawerClose.bind(this)}>
             <UnaApp 
                 webview={sWebview}
@@ -620,16 +618,6 @@ export default class App extends Component<Props> {
 }
 
 function UnaApp(o) {
-        const styles = useDynamicStyleSheet(dynamicStyles);
-
-        const isDarkMode = useDarkMode();
-        var sBarStyle = 'dark-content';
-        if (Platform.OS === 'android' || isDarkMode)
-            sBarStyle = 'light-content';            
-        if (Platform.OS === 'android')
-            StatusBar.setBackgroundColor('#076fd3');
-        StatusBar.setBarStyle(sBarStyle, false);         
-
         return (<Container>
 
                 {o.state.searchbar ? (
@@ -655,7 +643,6 @@ function UnaApp(o) {
 }
 
 function UnaFooter(o) {
-    const styles = useDynamicStyleSheet(dynamicStyles)
     return (
         <Footer style={styles.footer}>
             {!('decorous' == TEMPLATE && Platform.isPad) &&
@@ -706,22 +693,22 @@ function UnaFooter(o) {
 }
 
 function UnaToolbar(o) {
-    const styles = useDynamicStyleSheet(dynamicStyles)
+    var colorScheme = Appearance.getColorScheme();
     return (
-        <Header style={styles.header}>
+        <Header androidStatusBarColor={useTheme('colors.statusBar')} transparent={false} iosBarStyle={useTheme('iosBarStyle')} style={styles.header}>
             <Left>
             {o.loading ? (
-                <ActivityIndicator size="small" color={Platform.OS === 'android' ? '#fff' : '#333'} style={styles.loadingIndicator} />
+                <ActivityIndicator size="small" color={useTheme('colors.activityIndicator')} style={styles.loadingIndicator} />
             ):(
                 o.loggedin ? (
                     (o.backButtonEnabled || Platform.OS === 'android') && 
                         (<Button style={Platform.OS === 'android' ? styles.buttonLeftTopAndroid : styles.buttonLeftTopIos} transparent disabled={!o.backButtonEnabled} onPress={o.onBackAndMainMenu}>
-                        <Icon name="ios-arrow-back" />
+                        <Icon name="ios-arrow-back" style={styles.headerIcon} />
                         </Button>)
                     
                 ) : (
                     <Button style={Platform.OS === 'android' ? styles.buttonLeftTopAndroid : styles.buttonLeftTopIos} transparent onPress={o.onMainMenu}>
-                        <Icon name='menu' />
+                        <Icon name='menu' style={styles.headerIcon} />
                     </Button>
                 )
             )}
@@ -732,7 +719,7 @@ function UnaToolbar(o) {
             <Right>
                 {o.loggedin && (
                     <Button transparent>
-                        <Icon name='search' onPress={o.onSearchMenu} />
+                        <Icon name='search' onPress={o.onSearchMenu} style={styles.headerIcon} />
                     </Button>
                 )}
             </Right>
@@ -741,24 +728,23 @@ function UnaToolbar(o) {
 }
 
 function UnaToolbarSearch(o) {
-    const styles = useDynamicStyleSheet(dynamicStyles)
+    var colorScheme = Appearance.getColorScheme();
     return (
-        <Header style={styles.header} searchBar rounded>
+        <Header androidStatusBarColor={useTheme('colors.statusBar')} transparent={false} iosBarStyle={useTheme('iosBarStyle')} style={styles.header} searchBar rounded>
           <Item>
             <Icon name="search" />
             <Input placeholder="Search" onEndEditing={o.onSearchCancel} onSubmitEditing={o.onSearch} />
           </Item>
           <Button transparent onPress={o.onSearchCancel}>
-            <Text>Cancel</Text>
+            <Text style={styles.headerIcon}>Cancel</Text>
           </Button>
         </Header>
     );
 }
 
 function UnaDrawer(o) {
-    const styles = useDynamicStyleSheet(dynamicStyles)
     return (
-        <Container>
+        <Container style={styles.drawerContainer}>
             <Content>
                 <View style={styles.drawerImageContainer}>
                     <Image style={styles.drawerImage} source={require('./img/logo-loading.png')} />
@@ -780,22 +766,29 @@ function UnaDrawer(o) {
   );
 }
 
-const dynamicStyles = new DynamicStyleSheet({
+const styles = new StyleSheet.create({
+    container: {
+        backgroundColor: useTheme('colors.background'),
+        flex: 1
+    },
     header: {
-        backgroundColor: Platform.OS === 'android' ? '#1890ff' : new DynamicValue('#eee', '#333'),
+        backgroundColor: useTheme('colors.primary'),
         height: 46, paddingTop:0, // tmp fix - https://github.com/GeekyAnts/NativeBase/issues/3095
     },
     headerTitle: {
-        color: Platform.OS === 'android' ? '#fff' : new DynamicValue('#333', '#ccc'),
+        color: useTheme('colors.textOnPrimary'),
+    },
+    headerIcon: {
+        color: useTheme('colors.textOnPrimary'),
     },
     footer: {
-        backgroundColor: Platform.OS === 'android' ? '#1890ff' : new DynamicValue('#eee', '#333'),
+        backgroundColor: useTheme('colors.primary'),
     },
     footerTab: {
-        backgroundColor: Platform.OS === 'android' ? '#1890ff' : new DynamicValue('#eee', '#333'),
+        backgroundColor: useTheme('colors.primary'),
     },
     footerIcon: {
-        color: Platform.OS === 'android' ? '#fff' : new DynamicValue('#555', '#ccc'),
+        color: useTheme('colors.textOnPrimary'),
     },
 
     containerVideoCall: {
@@ -812,11 +805,14 @@ const dynamicStyles = new DynamicStyleSheet({
     buttonLeftTopIos: {
         marginLeft: 5,
     },
+    drawerContainer: {
+        backgroundColor: useTheme('colors.drawerBackground'),
+    },
     drawerImageContainer: {
         height:100, 
         justifyContent: 'center', 
         alignItems: 'center', 
-        backgroundColor: '#FFF',
+        backgroundColor: useTheme('colors.drawerBackground'),
     },
     drawerImage: {
         height:33.5, 
@@ -830,10 +826,9 @@ const dynamicStyles = new DynamicStyleSheet({
         fontSize: 20,
         justifyContent: 'center',
         textAlign: 'center',
-        color: '#1890ff',
+        color: useTheme('colors.drawerText'),
     },
     drawerButtonText: {
-        color: '#1890ff',
+        color: useTheme('colors.drawerText'),
     }
 });
-

Theme.js

@@ -0,0 +1,45 @@
+
+import {Appearance} from 'react-native';
+
+const themeDark = {
+    dark: true,
+    iosBarStyle: 'light-content',
+    colors: {
+        primary: '#1890ff',
+        textOnPrimary: '#f3f4f5',
+        background: '#123',
+        text: '#f3f4f5',
+        drawerBackground: '#f3f4f5',
+        drawerText: '#1890ff',
+        statusBar: '#076fd3',
+        activityIndicator: '#f3f4f5',
+    }
+};
+const themeLight = {
+    dark: false,
+    iosBarStyle: 'light-content',
+    colors: {
+        primary: '#1890ff',
+        textOnPrimary: '#f3f4f5',
+        background: '#edf1f7',
+        text: '#595959',
+        drawerBackground: '#edf1f7',
+        drawerText: '#1890ff',
+        statusBar: '#076fd3',
+        activityIndicator: '#f3f4f5',
+    }
+};
+
+function useTheme (s) {
+    var colorScheme = Appearance.getColorScheme();
+    var a = s.split('.'),
+        ret = 'dark' === colorScheme ? themeDark : themeLight,
+        i = 0;        
+    for (; i < a.length ; i++) {
+        if ('undefined' !== typeof(ret[a[i]]))
+            ret = ret[a[i]];
+    }
+    return ret;
+}
+
+export {themeDark, themeLight, useTheme};

ios/Podfile.lock

@@ -328,8 +328,6 @@ PODS:
     - React-cxxreact (= 0.64.1)
     - React-jsi (= 0.64.1)
     - React-perflogger (= 0.64.1)
-  - ReactNativeDarkMode (0.2.2):
-    - React
   - RNIap (6.0.5):
     - React-Core
   - Yoga (1.14.0)
@@ -389,7 +387,6 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
-  - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
   - RNIap (from `../node_modules/react-native-iap`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -473,8 +470,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
-  ReactNativeDarkMode:
-    :path: "../node_modules/react-native-dark-mode"
   RNIap:
     :path: "../node_modules/react-native-iap"
   Yoga:
@@ -525,7 +520,6 @@ SPEC CHECKSUMS:
   React-RCTVibration: 4b99a7f5c6c0abbc5256410cc5425fb8531986e1
   React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6
   ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca
-  ReactNativeDarkMode: 0178ffca3b10f6a7c9f49d6f9810232b328fa949
   RNIap: a5c2a6e776178f39bb29add4da1b2afce9e3fc8b
   Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

package-lock.json

@@ -2003,11 +2003,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
       "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag=="
     },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
-    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2059,34 +2054,6 @@
       "integrity": "sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==",
       "dev": true
     },
-    "@types/prop-types": {
-      "version": "15.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
-    },
-    "@types/react": {
-      "version": "17.0.5",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.5.tgz",
-      "integrity": "sha512-bj4biDB9ZJmGAYTWSKJly6bMr4BLUiBrx9ujiJEoP9XIDY9CTaPGxE5QWN/1WjpPLzYF7/jRNnV2nNxNe970sw==",
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-native": {
-      "version": "0.64.5",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.64.5.tgz",
-      "integrity": "sha512-k0r8MnQX7UFboZDvMKLov26gFLXKrNgLhCfSVhjaZ6wMUofKijxvee7/wgfAqtT2zS5FR4an4+qn0r72SCbw3g==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/scheduler": {
-      "version": "0.16.1",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
-    },
     "@types/stack-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
@@ -3467,11 +3434,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4297,11 +4259,6 @@
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
     },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
-    },
     "exec-sh": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.6.tgz",
@@ -8712,18 +8669,6 @@
         "nullthrows": "^1.1.1"
       }
     },
-    "react-native-dark-mode": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/react-native-dark-mode/-/react-native-dark-mode-0.2.2.tgz",
-      "integrity": "sha512-2vhWOOimU7DRKYjCU/pdv0+JpnGKURq5+c7bre093Jtzk57HtlJfd+ViibbC9Y8zh0viIOyKtfL5mYhVhZ6Crw==",
-      "requires": {
-        "@types/events": "*",
-        "@types/react": "*",
-        "@types/react-native": "*",
-        "events": "^3.0.0",
-        "toolkit.ts": "^0.0.2"
-      }
-    },
     "react-native-drawer": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/react-native-drawer/-/react-native-drawer-2.5.1.tgz",
@@ -10228,11 +10173,6 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
-    "toolkit.ts": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/toolkit.ts/-/toolkit.ts-0.0.2.tgz",
-      "integrity": "sha512-yJJTVbCwiD6AfFgReewJCGJuODmyZUeL1sDjnxp33t0UBxnezgQrLbz/F9++RC28CTlk5u5pVji4TbeondYEkw=="
-    },
     "tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",

package.json

@@ -13,7 +13,6 @@
     "native-base": "^2.15.2",
     "react": "17.0.1",
     "react-native": "0.64.1",
-    "react-native-dark-mode": "^0.2.2",
     "react-native-iap": "^6.0.5",
     "react-native-jitsi-meet": "^2.1.1",
     "react-native-onesignal": "^4.0.8",