├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── redux.js └── src ├── components ├── redux │ └── withConnection.js └── withConnection.js ├── index.js └── shapes.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | }, 5 | extends: 'airbnb', 6 | parser: 'babel-eslint', 7 | plugins: [ 8 | 'react', 9 | 'react-native', 10 | ], 11 | rules: { 12 | eqeqeq: ['error', 'smart'], 13 | 'react/jsx-filename-extension': [0], 14 | 'react/jsx-boolean-value': 0, 15 | }, 16 | settings: { 17 | 'import/resolver': { 18 | node: { 19 | extensions: ['.js', '.ios.js', '.android.js'] 20 | } 21 | } 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # nyc 2 | .nyc_output 3 | 4 | # Created by https://www.gitignore.io/api/node,osx,windows,vim 5 | 6 | ### Node ### 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules 37 | jspm_packages 38 | 39 | # Optional npm cache directory 40 | .npm 41 | 42 | # Optional REPL history 43 | .node_repl_history 44 | 45 | 46 | ### OSX ### 47 | .DS_Store 48 | .AppleDouble 49 | .LSOverride 50 | 51 | # Icon must end with two \r 52 | Icon 53 | 54 | 55 | # Thumbnails 56 | ._* 57 | 58 | # Files that might appear in the root of a volume 59 | .DocumentRevisions-V100 60 | .fseventsd 61 | .Spotlight-V100 62 | .TemporaryItems 63 | .Trashes 64 | .VolumeIcon.icns 65 | .com.apple.timemachine.donotpresent 66 | 67 | # Directories potentially created on remote AFP share 68 | .AppleDB 69 | .AppleDesktop 70 | Network Trash Folder 71 | Temporary Items 72 | .apdisk 73 | 74 | 75 | ### Windows ### 76 | # Windows image file caches 77 | Thumbs.db 78 | ehthumbs.db 79 | 80 | # Folder config file 81 | Desktop.ini 82 | 83 | # Recycle Bin used on file shares 84 | $RECYCLE.BIN/ 85 | 86 | # Windows Installer files 87 | *.cab 88 | *.msi 89 | *.msm 90 | *.msp 91 | 92 | # Windows shortcuts 93 | *.lnk 94 | 95 | 96 | ### Vim ### 97 | # swap 98 | [._]*.s[a-w][a-z] 99 | [._]s[a-w][a-z] 100 | # session 101 | Session.vim 102 | # temporary 103 | .netrwhist 104 | *~ 105 | # auto-generated tag files 106 | tags 107 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | notifications: 7 | email: false 8 | node_js: 9 | - '4' 10 | before_install: 11 | - npm i -g npm@^2.0.0 12 | before_script: 13 | - npm prune 14 | after_success: 15 | - npm run semantic-release 16 | branches: 17 | only: 18 | - master 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Zaro Megagenta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-connection-info 2 | 3 | [![travis build](https://img.shields.io/travis/zaromev/react-native-connection-info.svg?style=flat)](https://travis-ci.org/zaromev/react-native-connection-info) 4 | [![version](https://img.shields.io/npm/v/react-native-connection-info.svg?style=flat)](https://www.npmjs.com/package/react-native-connection-info) 5 | [![downloads](https://img.shields.io/npm/dm/react-native-connection-info.svg?style=flat)](https://npm-stat.com/charts.html?package=react-native-connection-info&from=2016-08-22) 6 | [![MIT license](https://img.shields.io/npm/l/react-native-connection-info.svg?style=flat)](http://opensource.org/licenses/MIT) 7 | [![github](https://img.shields.io/github/stars/zaromev/react-native-connection-info.svg?style=social&label=Star)](https://github.com/zaromev/react-native-connection-info) 8 | 9 | Higher order component for React Native to detect network connection state. 10 | 11 | Use `withConnection` to inject the `connection` object which _currently_ has the [`isConnected`](https://facebook.github.io/react-native/docs/netinfo.html#isconnected) property. 12 | This is a boolean value that indicates internet connectivity status (see the `NetInfo` [documentation](https://facebook.github.io/react-native/docs/netinfo.html#isconnected) on `isConnected`). 13 | 14 | ## Usage 15 | 16 | ### Installation 17 | 18 | ``` 19 | npm install --save react-native-connection-info 20 | ``` 21 | 22 | #### Android 23 | Make sure to also [include permissions](https://facebook.github.io/react-native/docs/netinfo.html#android) on Android. Add the following line to your `AndroidManifest.xml` 24 | 25 | ``` 26 | 27 | ``` 28 | 29 | ### Examples 30 | 31 | ``` 32 | import React from 'react'; 33 | import { 34 | Text, 35 | View, 36 | } from 'react-native'; 37 | import { withConnection, connectionShape } from 'react-native-connection-info'; 38 | 39 | const MyComponent = ({ connection }) => ( 40 | 41 | 44 | {connection.isConnected ? 'Connected' : 'Offline'} 45 | 46 | 47 | ) 48 | 49 | MyComponent.propTypes = { 50 | connection: connectionShape, 51 | }; 52 | 53 | export default withConnection(MyComponent); 54 | ``` 55 | 56 | ### Redux Wrapped Instance 57 | 58 | Usage with redux is supported by default. 59 | 60 | This section is **only** used if you need to reference the wrapped instance using [`getWrappedInstance()`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#getwrappedinstance-reactcomponent) when using `react-redux`'s `connect()`. This component uses `{ withRef: true }`. 61 | 62 | #### Usage 63 | 64 | ``` 65 | // instead of importing from 'react-native-connection-info' 66 | // import { withConnection, connectionShape } from 'react-native-connection-info'; 67 | // just add /redux 68 | import { withConnection, connectionShape } from 'react-native-connection-info/redux'; 69 | ``` 70 | 71 | The rest is the same as in the first [example](#examples). 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-connection-info", 3 | "version": "0.0.0-semantically-released", 4 | "description": "Higher order component for React Native to detect network connection state.", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "precommit": "npm run lint", 8 | "commit": "git-cz", 9 | "lint": "eslint src && eslint redux.js", 10 | "semantic-release": "semantic-release pre && npm publish && semantic-release post" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/zaromev/react-native-connection-info.git" 15 | }, 16 | "keywords": [ 17 | "react-native", 18 | "network", 19 | "NetInfo" 20 | ], 21 | "author": "Zaro Megagenta (https://github.com/zaromev)", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/zaromev/react-native-connection-info/issues" 25 | }, 26 | "homepage": "https://github.com/zaromev/react-native-connection-info#readme", 27 | "devDependencies": { 28 | "babel-eslint": "6.1.2", 29 | "commitizen": "2.8.6", 30 | "cz-conventional-changelog": "1.2.0", 31 | "eslint": "3.3.1", 32 | "eslint-config-airbnb": "10.0.1", 33 | "eslint-plugin-import": "1.14.0", 34 | "eslint-plugin-jsx-a11y": "2.1.0", 35 | "eslint-plugin-react": "6.1.2", 36 | "eslint-plugin-react-native": "2.0.0", 37 | "ghooks": "1.3.2", 38 | "semantic-release": "4.3.5", 39 | "validate-commit-msg": "2.7.0" 40 | }, 41 | "peerDependencies": { 42 | "react": ">=0.14", 43 | "react-native": ">=0.4", 44 | "react-redux": ">=3.1.2" 45 | }, 46 | "config": { 47 | "commitizen": { 48 | "path": "node_modules/cz-conventional-changelog" 49 | }, 50 | "ghooks": { 51 | "pre-commit": "npm run lint", 52 | "commit-msg": "validate-commit-msg" 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /redux.js: -------------------------------------------------------------------------------- 1 | export { default as withConnection } from './src/components/redux/withConnection'; 2 | export { connectionShape } from './src/shapes'; 3 | -------------------------------------------------------------------------------- /src/components/redux/withConnection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NetInfo } from 'react-native'; 3 | import { connect } from 'react-redux'; 4 | import { connectionShape } from '../../shapes'; 5 | 6 | const withConnection = ComposedComponent => class extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | isConnected: false, 11 | }; 12 | this.handleIsConnected = this.handleIsConnected.bind(this); 13 | } 14 | 15 | componentDidMount() { 16 | NetInfo.isConnected.fetch().then(isConnected => { 17 | this.handleIsConnected(isConnected); 18 | }); 19 | NetInfo.isConnected.addEventListener( 20 | 'change', 21 | this.handleIsConnected 22 | ); 23 | } 24 | 25 | componentWillUnmount() { 26 | NetInfo.isConnected.removeEventListener( 27 | 'change', 28 | this.handleIsConnected 29 | ); 30 | } 31 | 32 | getWrappedInstance() { 33 | return this.wrappedInstance; 34 | } 35 | 36 | handleIsConnected(isConnected) { 37 | this.setState({ isConnected }); 38 | } 39 | 40 | render() { 41 | return ( 42 | { this.wrappedInstance = c; }} 44 | {...this.props} 45 | connection={{ ...this.state }} 46 | /> 47 | ); 48 | } 49 | }; 50 | 51 | withConnection.propTypes = { 52 | connection: connectionShape, 53 | }; 54 | 55 | export default ComposedComponent => connect( 56 | null, null, null, { withRef: true }, 57 | )(withConnection(ComposedComponent)); 58 | -------------------------------------------------------------------------------- /src/components/withConnection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NetInfo } from 'react-native'; 3 | import { connectionShape } from '../shapes'; 4 | 5 | const withConnection = ComposedComponent => class extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { 9 | isConnected: false, 10 | }; 11 | this.handleIsConnected = this.handleIsConnected.bind(this); 12 | } 13 | 14 | componentDidMount() { 15 | NetInfo.isConnected.fetch().then(isConnected => { 16 | this.handleIsConnected(isConnected); 17 | }); 18 | NetInfo.isConnected.addEventListener( 19 | 'change', 20 | this.handleIsConnected 21 | ); 22 | } 23 | 24 | componentWillUnmount() { 25 | NetInfo.isConnected.removeEventListener( 26 | 'change', 27 | this.handleIsConnected 28 | ); 29 | } 30 | 31 | handleIsConnected(isConnected) { 32 | this.setState({ isConnected }); 33 | } 34 | 35 | render() { 36 | return ( 37 | 38 | ); 39 | } 40 | }; 41 | 42 | withConnection.propTypes = { 43 | connection: connectionShape, 44 | }; 45 | 46 | export default withConnection; 47 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as withConnection } from './components/withConnection'; 2 | export { connectionShape } from './shapes'; 3 | -------------------------------------------------------------------------------- /src/shapes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // eslint-disable-next-line import/prefer-default-export 4 | export const connectionShape = React.PropTypes.shape({ 5 | isConnected: React.PropTypes.bool.isRequired, 6 | }); 7 | --------------------------------------------------------------------------------