Merge pull request #1222 from esteemapp/enhancment/darktheme

Enhancment/darktheme
This commit is contained in:
Mustafa Buyukcelebi 2019-10-28 15:46:09 +03:00 committed by GitHub
commit 9516a2ccca
9 changed files with 119 additions and 42 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1476,6 +1476,11 @@
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag== 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": "@types/hoist-non-react-statics@^3.3.1":
version "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" 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" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== 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@*": "@types/react@*":
version "16.9.5" version "16.9.5"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.5.tgz#079dabd918b19b32118c25fd00a786bb6d0d5e51" 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" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ= 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: evp_bytestokey@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02" 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" version "0.11.7"
resolved "https://codeload.github.com/luggit/react-native-config/tar.gz/89a602bf8be3808838403a97afaf915caeec76c2" 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: react-native-datepicker@^1.7.2:
version "1.7.2" version "1.7.2"
resolved "https://registry.yarnpkg.com/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz#58d0822591a0ac9b32aba082650222a0ee29669d" 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" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== 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: tough-cookie@^2.3.3, tough-cookie@^2.3.4:
version "2.5.0" version "2.5.0"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"