implemented theme changing

src/screens/application/container/applicationContainer.js

@@ -1,13 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import EStyleSheet from 'react-native-extended-stylesheet';
 import { addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
 import tr from 'react-intl/locale-data/tr';
 import { ApplicationScreen } from '..';
-// themes
-import darkTheme from '../../../themes/darkTheme';
-import lightTheme from '../../../themes/lightTheme';
 
 addLocaleData([...en, ...tr]);
 // symbol polyfills
@@ -23,33 +19,31 @@ class ApplicationContainer extends Component {
   constructor() {
     super();
     this.state = {
-      shouldRender: true,
+      isRenderRequire: true,
     };
   }
 
-  componentDidMount() {
-    const { isDarkTheme } = this.props;
-    EStyleSheet.build(isDarkTheme ? darkTheme : lightTheme);
-  }
-
   componentWillReceiveProps(nextProps) {
     const { isDarkTheme } = this.props;
 
     if (isDarkTheme !== nextProps.isDarkTheme) {
-      const theme = nextProps.isDarkTheme ? darkTheme : lightTheme;
-      EStyleSheet.build(theme);
-      this.setState({ shouldRender: false }, () => this.setState({ shouldRender: true }));
+      this.setState({ isRenderRequire: false }, () => this.setState({ isRenderRequire: true }));
     }
   }
 
   render() {
     const { selectedLanguage } = this.props;
+    const { isRenderRequire } = this.state;
+
     const locale = (navigator.languages && navigator.languages[0])
       || navigator.language
       || navigator.userLanguage
       || selectedLanguage;
 
-    return <ApplicationScreen locale={locale} {...this.props} />;
+    if (isRenderRequire) {
+      return <ApplicationScreen locale={locale} {...this.props} />;
+    }
+    return null;
   }
 }
 

src/screens/application/screen/applicationScreen.js

@@ -1,16 +1,26 @@
 import React, { Component } from 'react';
 import { IntlProvider } from 'react-intl';
 
+import EStyleSheet from 'react-native-extended-stylesheet';
 import { ReduxNavigation } from '../../../config/reduxNavigation';
 import { flattenMessages } from '../../../utils/flattenMessages';
 import messages from '../../../config/locales';
 
+// Themes (Styles)
+import darkTheme from '../../../themes/darkTheme';
+import lightTheme from '../../../themes/lightTheme';
+
 class ApplicationScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {};
   }
 
+  componentWillMount() {
+    const { isDarkTheme } = this.props;
+    EStyleSheet.build(isDarkTheme ? darkTheme : lightTheme);
+  }
+
   render() {
     const { locale } = this.props;
 

src/themes/darkTheme.js

@@ -2,16 +2,18 @@ import { Dimensions } from 'react-native';
 
 export default {
   // Primary Colors
-  $white: 'black',
-  $black: 'black',
-  $primaryBlue: 'red',
-  $primaryDarkBlue: 'black',
-  $primaryLightBlue: 'black',
-  $primaryGray: 'red',
-  $primaryDarkGray: 'red',
-  $primaryLightGray: 'red',
-  $primaryRed: 'red',
-  $primaryBlack: 'red',
+  $theme: 'darkTheme',
+  $mainBackgroundColor: '#1e2835',
+  $white: '#1e2835',
+  $black: '#000000',
+  $primaryBlue: '#357ce6',
+  $primaryDarkBlue: '#1a509a',
+  $primaryLightBlue: '#eaf2fc',
+  $primaryGray: '#ffff',
+  $primaryDarkGray: '#ffff',
+  $primaryLightGray: '#f6f6f6',
+  $primaryRed: '#e63535',
+  $primaryBlack: '#3c4449',
 
   // General Colors
   $borderColor: '#c5c5c5',

src/themes/lightTheme.js

@@ -2,6 +2,8 @@ import { Dimensions } from 'react-native';
 
 export default {
   // Primary Colors
+  $theme: 'lightTheme',
+  $mainBackgroundColor: '#FFFFFF',
   $white: '#FFFFFF',
   $black: '#000000',
   $primaryBlue: '#357ce6',