mobile-rn-network-info

A helper module to manage network info state in Redux.

Module Public Interfaces

Constants

import { constants as networkInfoConstants } from 'mobile-rn-network-info'

// networkInfoConstants.NAME - this constant will be used later in app root reducer and module selectors
// networkInfoConstants.ON_CONNECTION_CHANGE - subscribe to this action type if you want to be notified about any changes in network connection

Action Creators

import { actions as networkInfoActions } from 'mobile-rn-network-info'

// networkInfoActions.initRequest() - dispatch this action on app launch to initialize the module
// networkInfoActions.updateRequest() - dispatch this action to request module updating its state 

Selectors

import { selectors as networkInfoSelectors } from 'mobile-rn-network-info'

// networkInfoSelectors.isConnected() - returns true when your device has network connection; otherwise returns false
// networkInfoSelectors.isWifi() - returns true when your device has 'wifi' network connection; otherwise returns false
// networkInfoSelectors.isCellular() - returns true when your device has 'cellular' network connection; otherwise returns false

Getting started

Install mobile-rn-network-info

$ npm install mobile-rn-network-info --save
# or with yarn
$ yarn add mobile-rn-network-info

Please note, this module has peer dependency on @react-native-community/netinfo and redux-saga modules. Don't forget properly install these modules in your application.

Initialization (3 steps)

// rootReducer.js

import { combineReducers } from 'redux';
import { reducer as networkInfoReducer, constants as networkInfoConstants } from 'mobile-rn-network-info';

const rootReducer = combineReducers({
  ...
   // Step 1. Register networkInfoReducer
   [networkInfoConstants.NAME]: networkInfoReducer,
  ...
});

export default rootReducer;

// rootSaga.js

import { all, call } from 'redux-saga/effects';
import { saga as networkInfoSaga } from 'mobile-rn-network-info';

export default function* rootSaga() {
  yield all([
    ...
   //  Step 2. Register networkInfoSaga
    call(networkInfoSaga),
    ...
  ]);
}

// features/app/sagas/initAppRequest.js

import { put, takeEvery } from 'redux-saga/effects';
import { INIT_APP_REQUEST } from '../constants';
import { actions as networkInfoActions } from 'mobile-rn-network-info';

function* _initAppRequest({ navigator }) {
  console.log('----saga app._initAppRequest saga-----');

  ...
  // Step 3. Initialize network info module
  yield put(networkInfoActions.initRequest());

  // Put your app init logic here
  ...
}

export function* watchInitAppRequest() {
  yield takeEvery(INIT_APP_REQUEST, _initAppRequest);
}

Usage in React Native components

import { takeLatest } from 'redux-saga/effects';
import { constants as networkInfoConstants } from 'mobile-rn-network-info';

export function* _onConnectionChange({ connected, isConnected, isWifi, isCellular, connectionType, netInfoState }) {
  // Please note, "connected" and "isConnected" properties are synonims! Another words connected === isConnected
  // "connected" property preserved for backward compatibility only  
  console.log('----saga app._onConnectionChange saga---- connected=', connected);

  const routeName = yield select(navigationSelectors.getRouteName);
  if (isConnected && isWifi) {
    ...
    ...
  } else {
    ...
    ...
  }
}

export function* watchOnConnectionChange() {
  yield takeLatest(networkInfoConstants.ON_CONNECTION_CHANGE, _onConnectionChange);
}


```javascript
// HomeContainer.js

import Home from './Home';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { selectors as networkInfoSelectors } from 'mobile-rn-network-info';

function mapStateToProps(state) {
  return {
    ...
    // isConnected() selector returns true when your device has network connection; otherwise returns false
    //
    connected: networkInfoSelectors.isConnected(state),
    ...
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    ...
    ...
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Usage in Sagas

// features/app/sagas/onAppStateChange.js

import { takeLatest, put } from 'redux-saga/effects';
import { constants as appStateConstants } from 'appStateFeature';
import { actions as networkInfoActions } from 'mobile-rn-network-info';

function* _onAppStateChange({ appState }) {
  console.log(`----saga app._onAppStateChange appState=${appState} saga----`);

  if (appState === 'active') {
    // When application resumed, request network info module to update its connected state
    yield put(networkInfoActions.updateRequest());
  }
}

export function* watchOnAppStateChange() {
  yield takeLatest(appStateConstants.ON_APP_STATE_CHANGE, _onAppStateChange);
}