working on internet connectivity feature created structure

src/components/basicUIElements/index.js

@@ -2,6 +2,7 @@ import Card from './view/card/cardView';
 import Chip from './view/chip/chipView';
 import GrayWrapper from './view/grayWrapper/grayWrapperView';
 import LineBreak from './view/lineBreak/lineBreakView';
+import NoInternetConnection from './view/noInternetConnection/noInternetConnectionView';
 import NoPost from './view/noPost/noPostView';
 import PostCardPlaceHolder from './view/placeHolder/postCardPlaceHolderView';
 import PostPlaceHolder from './view/placeHolder/postPlaceHolderView';
@@ -19,6 +20,7 @@ export {
   Chip,
   GrayWrapper,
   LineBreak,
+  NoInternetConnection,
   NoPost,
   PostCardPlaceHolder,
   PostPlaceHolder,

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

@@ -0,0 +1,15 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    alignItems: 'center',
+    height: 30,
+    backgroundColor: '$primaryRed',
+    justifyContent: 'center',
+  },
+  text: {
+    color: '$primaryDarkGray',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import styles from './noInternetConnectionStyle';
+
+const NoInternetConnection = () => (
+  <View style={styles.container}>
+    <Text style={styles.text}> No internet conenction</Text>
+  </View>
+);
+
+export default NoInternetConnection;

src/redux/actions/applicationActions.js

@@ -1,17 +1,18 @@
 import {
   ACTIVE_APPLICATION,
   CLOSE_PIN_CODE_MODAL,
+  IS_CONNECTED,
   IS_DARK_THEME,
   IS_LOGIN_DONE,
   IS_NOTIFICATION_OPEN,
   LOGIN,
+  LOGOUT_DONE,
   LOGOUT,
   OPEN_PIN_CODE_MODAL,
   SET_API,
   SET_CURRENCY,
   SET_LANGUAGE,
   SET_UPVOTE_PERCENT,
-  LOGOUT_DONE,
 } from '../constants/constants';
 
 export const login = payload => ({
@@ -73,3 +74,8 @@ export const isDarkTheme = payload => ({
   payload,
   type: IS_DARK_THEME,
 });
+
+export const setConnectivityStatus = payload => ({
+  payload,
+  type: IS_CONNECTED,
+});

src/redux/constants/constants.js

@@ -6,6 +6,7 @@ export const SET_USER_DATA = 'SET_USER_DATA';
 // Applicaiton
 export const ACTIVE_APPLICATION = 'ACTIVE_APPLICATION';
 export const CLOSE_PIN_CODE_MODAL = 'CLOSE_PIN_CODE_MODAL';
+export const IS_CONNECTED = 'IS_CONNECTED';
 export const IS_DARK_THEME = 'IS_DARK_THEME';
 export const IS_LOGGED_IN = 'IS_LOGGED_IN';
 export const IS_LOGIN_DONE = 'IS_LOGIN_DONE';

src/redux/reducers/applicationReducer.js

@@ -1,23 +1,25 @@
 import {
   ACTIVE_APPLICATION,
   CLOSE_PIN_CODE_MODAL,
+  IS_CONNECTED,
+  IS_DARK_THEME,
+  IS_LOGIN_DONE,
+  IS_NOTIFICATION_OPEN,
   LOGIN,
+  LOGOUT_DONE,
   LOGOUT,
   OPEN_PIN_CODE_MODAL,
   SET_API,
   SET_CURRENCY,
   SET_LANGUAGE,
-  IS_NOTIFICATION_OPEN,
-  IS_DARK_THEME,
-  IS_LOGIN_DONE,
   SET_UPVOTE_PERCENT,
-  LOGOUT_DONE,
 } from '../constants/constants';
 
 const initialState = {
   api: 'api.steemit.com',
   currency: 'usd',
   isActive: false,
+  isConnected: true, // internet connectivity
   isDarkTheme: false,
   isLoggedIn: false, // Has any logged in user.
   isLoginDone: false,
@@ -41,6 +43,11 @@ export default function (state = initialState, action) {
         ...state,
         isLoginDone: true,
       };
+    case IS_CONNECTED:
+      return {
+        ...state,
+        isConnected: action.payload,
+      };
     case LOGOUT:
       return {
         ...state,

src/screens/application/container/applicationContainer.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import { Platform, BackHandler, Alert } from 'react-native';
+import {
+  Platform, BackHandler, Alert, NetInfo,
+} from 'react-native';
 import { connect } from 'react-redux';
 import { addLocaleData } from 'react-intl';
 import Config from 'react-native-config';
@@ -44,12 +46,13 @@ import {
   isLoginDone,
   isNotificationOpen,
   login,
+  logoutDone,
   openPinCodeModal,
   setApi,
+  setConnectivityStatus,
   setCurrency,
   setLanguage,
   setUpvotePercent,
-  logoutDone,
 } from '../../../redux/actions/applicationActions';
 
 // Container
@@ -68,9 +71,21 @@ class ApplicationContainer extends Component {
   }
 
   componentDidMount = async () => {
-    BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
-    await this._getUserData();
-    await this._getSettings();
+    let isConnected;
+
+    await NetInfo.isConnected.fetch().then((_isConnected) => {
+      isConnected = _isConnected;
+    });
+
+    if (isConnected) {
+      BackHandler.addEventListener('hardwareBackPress', this._onBackPress);
+      NetInfo.isConnected.addEventListener('connectionChange', this._handleConntectionChange);
+
+      this._getSettings();
+      await this._getUserData();
+    } else {
+      Alert.alert('No internet connection');
+    }
   };
 
   componentWillReceiveProps(nextProps) {
@@ -87,8 +102,15 @@ class ApplicationContainer extends Component {
 
   componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
+    NetInfo.isConnected.removeEventListener('connectionChange', this._handleConntectionChange);
   }
 
+  _handleConntectionChange = (isConnected) => {
+    const { dispatch } = this.props;
+
+    dispatch(setConnectivityStatus(isConnected));
+  };
+
   _onBackPress = () => {
     const { dispatch } = this.props;
 
@@ -260,7 +282,7 @@ class ApplicationContainer extends Component {
   };
 
   render() {
-    const { selectedLanguage } = this.props;
+    const { selectedLanguage, isConnected } = this.props;
     const { isRenderRequire, isReady } = this.state;
 
     // For testing It comented out.
@@ -270,7 +292,7 @@ class ApplicationContainer extends Component {
     //   || selectedLanguage;
 
     if (isRenderRequire && isReady) {
-      return <ApplicationScreen locale={selectedLanguage} {...this.props} />;
+      return <ApplicationScreen isConnected={isConnected} locale={selectedLanguage} {...this.props} />;
     }
     return <Launch />;
   }
@@ -283,6 +305,7 @@ const mapStateToProps = state => ({
   notificationSettings: state.application.isNotificationOpen,
   isLogingOut: state.application.isLogingOut,
   isLoggedIn: state.application.isLoggedIn,
+  isConnected: state.application.isConnected,
 
   // Account
   unreadActivityCount: state.account.currentAccount.unread_activity_count,

src/screens/application/screen/applicationScreen.js

@@ -1,11 +1,16 @@
 import React, { Component, Fragment } from 'react';
 import { IntlProvider } from 'react-intl';
-import { StatusBar, Platform } from 'react-native';
+import {
+  View, Text, StatusBar, Platform,
+} from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { ReduxNavigation } from '../../../navigation/reduxNavigation';
 import { flattenMessages } from '../../../utils/flattenMessages';
 import messages from '../../../config/locales';
 
+// Components
+import { NoInternetConnection } from '../../../components/basicUIElements';
+
 // Themes (Styles)
 import darkTheme from '../../../themes/darkTheme';
 import lightTheme from '../../../themes/lightTheme';
@@ -22,7 +27,7 @@ class ApplicationScreen extends Component {
   }
 
   render() {
-    const { locale, isDarkTheme } = this.props;
+    const { isConnected, isDarkTheme, locale } = this.props;
     const barStyle = isDarkTheme ? 'light-content' : 'dark-content';
     const barColor = isDarkTheme ? '#1e2835' : '#fff';
 
@@ -34,6 +39,12 @@ class ApplicationScreen extends Component {
           <StatusBar barStyle={barStyle} backgroundColor={barColor} />
         )}
 
+        {!isConnected && (
+          <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
+            <NoInternetConnection />
+          </IntlProvider>
+        )}
+
         <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
           <ReduxNavigation />
         </IntlProvider>