mobile-rn-network-info
A helper module to manage network info state in Redux.
Module Public Interfaces
Constants
// 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
// networkInfoActions.initRequest() - dispatch this action on app launch to initialize the module// networkInfoActions.updateRequest() - dispatch this action to request module updating its state
Selectors
// 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 ;; const rootReducer = ; ; // rootSaga.js ;; { ;} // features/app/sagas/initAppRequest.js ;;; { console; ... // Step 3. Initialize network info module ; // Put your app init logic here ...} { ;}
Usage in React Native components
;; { // Please note, "connected" and "isConnected" properties are synonims! Another words connected === isConnected // "connected" property preserved for backward compatibility only console; const routeName = ; if isConnected && isWifi ... ... else ... ... } { ;} ```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 ;;; { console; if appState === 'active' // When application resumed, request network info module to update its connected state ; } { ;}