├── .npmignore
├── README.md
├── index.js
├── media
    └── screen.png
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | media
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-net-state
 2 | 
 3 | ![](https://raw.githubusercontent.com/tienlm1509/react-native-net-state/master/media/screen.png)
 4 | 
 5 | ### Setting
 6 | 
 7 | - **Android**: 
 8 | ```xml
 9 | To request network info, you need to add the following line to your app's
10 | AndroidManifest.xml:
11 | 
12 | <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
13 | Asynchronously determine if the device is connected and details about that connection.
14 | ```
15 | 
16 | ### Example
17 | 
18 | ```js
19 | import React, {Component, PropTypes} from 'react';
20 | import NetState from 'react-native-net-state';
21 | 
22 | class Run extends Component {
23 |   render() {
24 |     return (
25 |       <View style={{flex: 1}}>
26 |         <NetState message="No internet access"/>
27 |       </View>
28 |     );
29 |   }
30 | });
31 | 
32 | module.exports = Run;
33 | ```
34 | 
35 | ### Installation
36 | 
37 | ```npm install react-native-net-state --save```
38 | 
39 | ### Props
40 | - `message` you can customize message
41 | - `style` you can customize styles box
42 | - `styleText` you can customize styles message
43 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import {Platform, StyleSheet, View, Text, Modal, NetInfo} from 'react-native';
 3 | 
 4 | class NetState extends Component {
 5 |   static propTypes = {
 6 |     message: PropTypes.string
 7 |   }
 8 | 
 9 |   constructor(props) {
10 |     super(props);
11 | 
12 |     this.state = {
13 |       conected: false,
14 |       message: props.message || 'No internet access'
15 |     };
16 |   }
17 | 
18 |   componentDidMount() {
19 |     NetInfo.isConnected.fetch().then(isConnected => {
20 |       this.setState({conected: !isConnected});
21 |     });
22 | 
23 |     NetInfo.isConnected.addEventListener(
24 |       'change',
25 |       (isConnected) => {
26 |         this.setState({conected: !isConnected});
27 |       }
28 |     );
29 |   }
30 | 
31 |   shouldComponentUpdate(nextProps, nextState){
32 |     return this.state.conected !== nextState.conected;
33 |   }
34 | 
35 |   render() {
36 |     let messageIOS = Platform.OS == 'ios' ? styles.messageIOS : {};
37 | 
38 |     return (
39 |       <Modal
40 |         animationType={"none"}
41 |         transparent={true}
42 |         visible={this.state.conected}
43 |         style={[styles.modal]}
44 |         onRequestClose={() => {}}
45 |       >
46 |         <View style={[styles.message, messageIOS, this.props.style || {}]}>
47 |           <Text style={[styles.messageText, this.props.styleText || {}]}>{this.state.message}</Text>
48 |         </View>
49 | 
50 |       </Modal>
51 |     );
52 |   }
53 | }
54 | 
55 | const styles = StyleSheet.create({
56 |   modal: {
57 |     flex: 1,
58 |     position: 'absolute',
59 |     top: 0,
60 |     left: 0,
61 |     right: 0,
62 |     bottom: 0,
63 |     zIndex: 999999,
64 |     backgroundColor: 'transparent'
65 |   },
66 |   message: {
67 |     backgroundColor: '#ff4b54',
68 |     justifyContent: 'center',
69 |     paddingBottom: 5,
70 |     height: 40
71 |   },
72 |   messageText: {
73 |     color: '#ffffff',
74 |     fontWeight: '600',
75 |     textAlign: 'center',
76 |     justifyContent: 'center',
77 |     fontSize: 13,
78 |   },
79 |   messageIOS: {
80 |     paddingTop: 20
81 |   },
82 | });
83 | 
84 | module.exports = NetState;
85 | 


--------------------------------------------------------------------------------
/media/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tienlm1509/react-native-net-state/997ef211de399afd17c2082b307bdd4e22f5bcff/media/screen.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-net-state",
 3 |   "version": "1.1.2",
 4 |   "description": "networking status",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/tienlm1509/react-native-net-state.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "native",
16 |     "networking",
17 |     "net",
18 |     "state",
19 |     "netInfo"
20 |   ],
21 |   "author": "tienlm1509@gmail.com",
22 |   "license": "ISC",
23 |   "bugs": {
24 |     "url": "https://github.com/tienlm1509/react-native-net-state/issues"
25 |   },
26 |   "homepage": "https://github.com/tienlm1509/react-native-net-state#readme"
27 | }
28 | 


--------------------------------------------------------------------------------