ui created wip on event listener

src/components/basicUIElements/view/noInternetConnection/noInternetConnectionStyle.js

@@ -3,13 +3,18 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 export default EStyleSheet.create({
   container: {
     alignItems: 'center',
-    height: 50,
-    backgroundColor: '$primaryRed',
+    height: 45,
+    backgroundColor: '$noConnectionColor',
     justifyContent: 'center',
+    flexDirection: 'row',
   },
   text: {
     color: '$pureWhite',
     fontSize: 14,
     fontWeight: 'bold',
   },
+  icon: {
+    color: '$pureWhite',
+    marginRight: 5,
+  },
 });

src/components/basicUIElements/view/noInternetConnection/noInternetConnectionView.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import { Text, SafeAreaView } from 'react-native';
+
+import { Icon } from '../../../icon';
+
 import styles from './noInternetConnectionStyle';
 
 const NoInternetConnection = props => (
   <SafeAreaView style={styles.container}>
+    <Icon style={styles.icon} iconType="MaterialIcons" name="info" size={16} />
     <Text style={styles.text}>
       {props.intl.formatMessage({
         id: 'alert.no_internet',

src/config/locales/en-US.json

@@ -137,7 +137,7 @@
     "cancel": "Cancel",
     "delete": "Delete",
     "copied": "Copied!",
-    "no_internet": "No internet connection"
+    "no_internet": "No connection!"
   },
   "post": {
     "reblog_alert": "Are you sure you want to reblog?"

src/screens/application/container/applicationContainer.js

@@ -77,10 +77,10 @@ class ApplicationContainer extends Component {
       isConnected = _isConnected;
     });
 
-    if (isConnected) {
-      BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
-      NetInfo.isConnected.addEventListener('connectionChange', this._handleConntectionChange);
+    NetInfo.isConnected.addEventListener('change', this._handleConntectionChange);
+    BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
 
+    if (isConnected) {
       this._getSettings();
       await this._getUserData();
     } else {
@@ -102,13 +102,18 @@ class ApplicationContainer extends Component {
 
   componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
-    NetInfo.isConnected.removeEventListener('connectionChange', this._handleConntectionChange);
+    NetInfo.isConnected.removeEventListener('change', this._handleConntectionChange);
   }
 
-  _handleConntectionChange = (isConnected) => {
-    const { dispatch } = this.props;
+  _handleConntectionChange = (status) => {
+    const { dispatch, isConnected } = this.props;
 
-    dispatch(setConnectivityStatus(isConnected));
+    if (isConnected !== status) {
+      dispatch(setConnectivityStatus(status));
+    }
+
+    // NetInfo.isConnected.removeEventListener('connectionChange', this._handleConntectionChange);
+    // NetInfo.isConnected.addEventListener('connectionChange', this._handleConntectionChange);
   };
 
   _onBackPress = () => {
@@ -296,7 +301,9 @@ class ApplicationContainer extends Component {
     //   || selectedLanguage;
 
     if (isRenderRequire && isReady) {
-      return <ApplicationScreen isConnected={isConnected} locale={selectedLanguage} {...this.props} />;
+      return (
+        <ApplicationScreen isConnected={isConnected} locale={selectedLanguage} {...this.props} />
+      );
     }
     return <Launch />;
   }

src/themes/darkTheme.js

@@ -37,6 +37,7 @@ export default {
   $notificationBorder: '#1e2835',
   $tableTrColor: '#2e3d51',
   $tableBorderColor: '#1e2835',
+  $noConnectionColor: '#788187',
 
   // Devices Sizes
   $deviceHeight:

src/themes/lightTheme.js

@@ -37,6 +37,7 @@ export default {
   $notificationBorder: '#fff',
   $tableTrColor: '#f5f5f5',
   $tableBorderColor: '#FFFFFF',
+  $noConnectionColor: '#788187',
 
   // Devices Sizes
   $deviceHeight: