Merge pull request #1222 from esteemapp/enhancment/darktheme

Enhancment/darktheme

ios/Podfile.lock

@@ -277,6 +277,8 @@ PODS:
     - React-cxxreact (= 0.61.2)
     - React-jsi (= 0.61.2)
     - ReactCommon/jscallinvoker (= 0.61.2)
+  - ReactNativeDarkMode (0.1.2):
+    - React
   - RNGestureHandler (1.4.1):
     - React
   - RNIap (3.4.15):
@@ -341,6 +343,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - ReactNativeDarkMode (from `../node_modules/react-native-dark-mode`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNIap (from `../node_modules/react-native-iap`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
@@ -351,7 +354,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  https://github.com/CocoaPods/Specs.git:
     - AppCenter
     - AppCenterReactNativeShared
     - boost-for-react-native
@@ -433,6 +436,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNativeDarkMode:
+    :path: "../node_modules/react-native-dark-mode"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNIap:
@@ -492,6 +497,7 @@ SPEC CHECKSUMS:
   React-RCTText: e3ef6191cdb627855ff7fe8fa0c1e14094967fb8
   React-RCTVibration: fb54c732fd20405a76598e431aa2f8c2bf527de9
   ReactCommon: 5848032ed2f274fcb40f6b9ec24067787c42d479
+  ReactNativeDarkMode: 315535c6f7a066bc4e8ba60591a63aafa16d5dca
   RNGestureHandler: 4cb47a93019c1a201df2644413a0a1569a51c8aa
   RNIap: b4c77c8bc4501203f4b743126a05da23f10f40b4
   RNImageCropPicker: bfb3ea9c8622f290532e2fe63f369e0d5a52f597
@@ -505,4 +511,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4faf3202c73803d0ba69b4aaf79ce8642ecf11b2
 
-COCOAPODS: 1.7.5
+COCOAPODS: 1.8.3

package.json

@@ -49,6 +49,7 @@
     "react-native-autocomplete-input": "^4.1.0",
     "react-native-code-push": "esteemapp/react-native-code-push",
     "react-native-config": "luggit/react-native-config#master",
+    "react-native-dark-mode": "^0.1.2",
     "react-native-datepicker": "^1.7.2",
     "react-native-extended-stylesheet": "^0.10.0",
     "react-native-fast-image": "^4.0.14",

src/components/bottomTabBar/view/bottomTabBarView.js

@@ -9,6 +9,9 @@ import { updateActiveBottomTab } from '../../../redux/actions/uiAction';
 // Constants
 import ROUTES from '../../../constants/routeNames';
 
+// Container
+import { DarkThemeContainer } from '../../../containers';
+
 // Components
 import TabBar from './tabbar';
 
@@ -38,36 +41,40 @@ const BottomTabBarView = ({
 
   useEffect(() => {
     dispatch(updateActiveBottomTab(routes[index].routeName));
-  }, [dispatch, routes, index]);
+  }, [dispatch, index, routes]);
 
   return (
-    <SafeAreaView style={styles.wrapper}>
-      <TabBar
-        selectedIndex={index}
-        circleBackgroundColor="#357ce6"
-        backgroundColor="#f6f6f6"
-        onChange={i => _jumpTo(routes[i], index, routes, jumpTo)}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-      >
-        {routes.map(route => (
-          <TabBar.Item
-            icon={renderIcon({
-              route,
-              focused: false,
-              tintColor: inactiveTintColor,
-            })}
-            selectedIcon={renderIcon({
-              route,
-              focused: true,
-              tintColor: activeTintColor,
-            })}
-            key={route}
-            disabled={route.routeName === ROUTES.TABBAR.POST_BUTTON}
-          />
-        ))}
-      </TabBar>
-    </SafeAreaView>
+    <DarkThemeContainer>
+      {({ isDarkTheme }) => (
+        <SafeAreaView style={styles.wrapper}>
+          <TabBar
+            selectedIndex={index}
+            circleBackgroundColor="#357ce6"
+            backgroundColor={isDarkTheme ? '#2e3d51' : '#f6f6f6'}
+            onChange={i => _jumpTo(routes[i], index, routes, jumpTo)}
+            activeTintColor={activeTintColor}
+            inactiveTintColor={inactiveTintColor}
+          >
+            {routes.map(route => (
+              <TabBar.Item
+                icon={renderIcon({
+                  route,
+                  focused: false,
+                  tintColor: inactiveTintColor,
+                })}
+                selectedIcon={renderIcon({
+                  route,
+                  focused: true,
+                  tintColor: activeTintColor,
+                })}
+                key={route}
+                disabled={route.routeName === ROUTES.TABBAR.POST_BUTTON}
+              />
+            ))}
+          </TabBar>
+        </SafeAreaView>
+      )}
+    </DarkThemeContainer>
   );
 };
 

src/components/bottomTabBar/view/tabbar.js

@@ -36,7 +36,6 @@ export default class TabBar extends Component {
       circleRadius: new Animated.Value(91 + selectedIndex * value),
       pathD: new Animated.Value(selectedIndex * value),
       pathX: selectedIndex * value,
-      showIcon: true,
       animateConstant: value,
     };
 
@@ -72,15 +71,16 @@ export default class TabBar extends Component {
   _move = index => {
     const { animateConstant, pathD, circleRadius } = this.state;
 
-    this.setState({
-      selectedIndex: index,
-      showIcon: false,
-    });
+    this.setState({ selectedIndex: '' });
 
     Animated.timing(pathD, {
       toValue: 0 + index * animateConstant,
       duration: 450,
-    }).start(() => this.setState({ showIcon: true }));
+    }).start(() => {
+      setTimeout(() => {
+        this.setState({ selectedIndex: index });
+      }, 350);
+    });
     Animated.timing(circleRadius, {
       toValue: 91 + index * animateConstant,
     }).start();
@@ -88,20 +88,19 @@ export default class TabBar extends Component {
 
   render() {
     const { children, backgroundColor, circleBackgroundColor, style } = this.props;
-    const { selectedIndex, showIcon, pathX, circleRadius } = this.state;
+    const { selectedIndex, pathX, circleRadius } = this.state;
 
     return (
       <View style={style}>
         <View style={styles.subContent}>
           {children.map((route, i) => {
-            const element = React.cloneElement(route, {
+            return React.cloneElement(route, {
               selected: selectedIndex === i,
               onPress: this._onPress,
               key: i,
               index: i,
-              showIcon,
+              showIcon: true,
             });
-            return element;
           })}
         </View>
 
@@ -148,8 +147,10 @@ const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, di
         </TouchableHighlight>
       );
     }
+
     return <View style={styles.navItem} />;
   }
+
   return (
     <TouchableHighlight
       underlayColor={'transparent'}

src/containers/darkThemeContainer.js

@@ -0,0 +1,14 @@
+import { React } from 'react';
+import { connect } from 'react-redux';
+
+const DarkThemeContainer = ({ children, isDarkTheme }) =>
+  children &&
+  children({
+    isDarkTheme,
+  });
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(DarkThemeContainer);

src/containers/index.js

@@ -1,3 +1,4 @@
+import DarkThemeContainer from './darkThemeContainer';
 import InAppPurchaseContainer from './inAppPurchaseContainer';
 import PointsContainer from './pointsContainer';
 import ProfileContainer from './profileContainer';
@@ -7,6 +8,7 @@ import SpinGameContainer from './spinGameContainer';
 import TransferContainer from './transferContainer';
 
 export {
+  DarkThemeContainer,
   InAppPurchaseContainer,
   PointsContainer,
   ProfileContainer,

src/screens/application/container/applicationContainer.js

@@ -1,3 +1,4 @@
+/* eslint-disable curly */
 import { Component } from 'react';
 import { Platform, BackHandler, Alert, Linking, AppState } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
@@ -12,6 +13,10 @@ import { NavigationActions } from 'react-navigation';
 import { bindActionCreators } from 'redux';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { forEach, isEmpty, some } from 'lodash';
+import {
+  initialMode as nativeThemeInitialMode,
+  eventEmitter as nativeThemeEventEmitter,
+} from 'react-native-dark-mode';
 
 // Constants
 import AUTH_TYPE from '../../../constants/authType';
@@ -96,7 +101,6 @@ class ApplicationContainer extends Component {
 
   componentDidMount = () => {
     const { isIos } = this.state;
-
     this._setNetworkListener();
 
     if (!isIos) BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
@@ -111,6 +115,14 @@ class ApplicationContainer extends Component {
     setPreviousAppState();
 
     this._createPushListener();
+
+    if (nativeThemeEventEmitter) {
+      nativeThemeEventEmitter.on('currentModeChanged', newMode => {
+        const { dispatch } = this.props;
+
+        dispatch(isDarkTheme(newMode === 'dark'));
+      });
+    }
   };
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -527,7 +539,7 @@ class ApplicationContainer extends Component {
     const settings = await getSettings();
 
     if (settings) {
-      if (settings.isDarkTheme !== '') dispatch(isDarkTheme(settings.isDarkTheme));
+      dispatch(isDarkTheme(nativeThemeInitialMode === 'dark' || settings.isDarkTheme));
       if (settings.isPinCodeOpen !== '') dispatch(isPinCodeOpen(settings.isPinCodeOpen));
       if (settings.language !== '') dispatch(setLanguage(settings.language));
       if (settings.server !== '') dispatch(setApi(settings.server));

yarn.lock

@@ -1476,6 +1476,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
 "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1519,6 +1524,14 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/react-native@*":
+  version "0.60.21"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.21.tgz#81a41cae7b232f52ab3983d854f4a0b0df79531e"
+  integrity sha512-E7F+P/UG4Utu+kh8Hy544i0m4CzpHw1awNX6hVfkhlu4mXSlAn6KLZzKEkPBbHm7g1kspmZTiuP23HAKZpASPw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.5.tgz#079dabd918b19b32118c25fd00a786bb6d0d5e51"
@@ -3854,6 +3867,11 @@ events@^1.1.0:
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
+events@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+  integrity sha512-Dc381HFWJzEOhQ+d8pkNon++bk9h6cdAoAj4iE6Q4y6xgTzySWXlKn05/TVNpjnfRqi/X0EpJEJohPjNI3zpVA==
+
 evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
@@ -7669,6 +7687,17 @@ react-native-config@luggit/react-native-config#master:
   version "0.11.7"
   resolved "https://codeload.github.com/luggit/react-native-config/tar.gz/89a602bf8be3808838403a97afaf915caeec76c2"
 
+react-native-dark-mode@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-native-dark-mode/-/react-native-dark-mode-0.1.2.tgz#4afd760073d5eb02bb83fc09004733d036e9f2d8"
+  integrity sha512-oCanZ5LBJvhmgNCG2uPtvKRfBZ85nBCz/2UHkizXDt3t7ep1Vp994REye/RkIW86bbpPH/Dt8QUHExw5R0ftpg==
+  dependencies:
+    "@types/events" "*"
+    "@types/react" "*"
+    "@types/react-native" "*"
+    events "^3.0.0"
+    toolkit.ts "^0.0.2"
+
 react-native-datepicker@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz#58d0822591a0ac9b32aba082650222a0ee29669d"
@@ -9325,6 +9354,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toolkit.ts@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/toolkit.ts/-/toolkit.ts-0.0.2.tgz#91bde730e5e6ad1a22146cdaf83f4a52721cf3b2"
+  integrity sha512-yJJTVbCwiD6AfFgReewJCGJuODmyZUeL1sDjnxp33t0UBxnezgQrLbz/F9++RC28CTlk5u5pVji4TbeondYEkw==
+
 tough-cookie@^2.3.3, tough-cookie@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"