Permalink
Browse files

Adding option of disabling extra HEAD request (#46)

  • Loading branch information...
Raúl Gómez Acuña
Raúl Gómez Acuña committed Oct 10, 2017
1 parent a76e8af commit 8739c0322364e9544945fa6d43fec5b1091dbae7
Showing with 52 additions and 15 deletions.
  1. +8 −4 README.md
  2. +1 −1 package.json
  3. +22 −5 src/ConnectivityRenderer.js
  4. +21 −5 src/withNetworkConnectivity.js
View
@@ -64,7 +64,8 @@ withNetworkConnectivity(config: Config): (WrappedComponent) => EnhancedComponent
type Config = {
withRedux?: boolean = false,
timeout?: number = 3000,
pingServerUrl?: string = 'https://google.com'
pingServerUrl?: string = 'https://google.com',
withExtraHeadRequest?: boolean = true,
}
```
@@ -75,6 +76,8 @@ type Config = {
`pingServerUrl`: remote server to ping to. It defaults to https://google.com since it's probably one the most stable servers out there, but you can provide your own if needed.
`withExtraHeadRequest`: flag that denotes whether the extra ping check will be performed or not. Defaults to `true`.
##### Usage
```js
import React from 'react';
@@ -89,14 +92,15 @@ export default withNetworkConnectivity()(YourComponent);
```
#### `ConnectivityRenderer`
React component that accepts a function as children. It allows you to decouple your parent component and your child component, managing connectivity state on behalf of the components it is composed with, without making demands on how that state is leveraged by its children. Useful for conditionally render different children based on connectivity status. `timeout` and `pingServerUrl` can be provided through props in this case.
React component that accepts a function as children. It allows you to decouple your parent component and your child component, managing connectivity state on behalf of the components it is composed with, without making demands on how that state is leveraged by its children. Useful for conditionally render different children based on connectivity status. `timeout`, `pingServerUrl` and `withExtraHeadRequest` can be provided through props in this case.
##### Props
```js
type Props = {
children: (isConnected: boolean) => React$Element<any>
timeout?: number,
pingServerUrl?: string
timeout?: number = 3000,
pingServerUrl?: string = 'https://google.com',
withExtraHeadRequest?: boolean = true,
}
```
View
@@ -1,6 +1,6 @@
{
"name": "react-native-offline",
"version": "3.1.1",
"version": "3.2.0",
"description": "Handy toolbelt to deal with offline mode in React Native applications. Cross-platform, provides a smooth redux integration.",
"main": "./src/index.js",
"author": "Raul Gomez Acuña <raulgdeveloper@gmail.com> (https://github.com/rauliyohmc)",
@@ -9,6 +9,7 @@ import reactConnectionStore from './reactConnectionStore';
type DefaultProps = {
timeout?: number,
pingServerUrl?: string,
withExtraHeadRequest?: boolean,
};
type Props = DefaultProps & {
@@ -24,11 +25,13 @@ class ConnectivityRenderer extends Component<DefaultProps, Props, State> {
children: PropTypes.func.isRequired,
timeout: PropTypes.number,
pingServerUrl: PropTypes.string,
withExtraHeadRequest: PropTypes.bool,
};
static defaultProps: DefaultProps = {
timeout: 3000,
pingServerUrl: 'https://google.com',
withExtraHeadRequest: true,
};
state = {
@@ -48,17 +51,31 @@ class ConnectivityRenderer extends Component<DefaultProps, Props, State> {
}
componentDidMount() {
NetInfo.isConnected.addEventListener('change', this.checkInternet);
NetInfo.isConnected.addEventListener(
'change',
this.props.withExtraHeadRequest
? this.checkInternet
: this.handleConnectivityChange,
);
// On Android the listener does not fire on startup
if (Platform.OS === 'android') {
NetInfo.isConnected
.fetch()
.then((isConnected: boolean) => this.checkInternet(isConnected));
NetInfo.isConnected.fetch().then((isConnected: boolean) => {
if (this.props.withExtraHeadRequest) {
this.checkInternet(isConnected);
} else {
this.handleConnectivityChange(isConnected);
}
});
}
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('change', this.checkInternet);
NetInfo.isConnected.removeEventListener(
'change',
this.props.withExtraHeadRequest
? this.checkInternet
: this.handleConnectivityChange,
);
}
checkInternet = (isConnected: boolean) => {
@@ -12,6 +12,7 @@ type Arguments = {
withRedux?: boolean,
timeout?: number,
pingServerUrl?: string,
withExtraHeadRequest?: boolean,
};
type State = {
@@ -23,6 +24,7 @@ const withNetworkConnectivity = (
withRedux = false,
timeout = 3000,
pingServerUrl = 'https://google.com',
withExtraHeadRequest = true,
}: Arguments = {},
) => (WrappedComponent: ReactClass<*>) => {
if (typeof withRedux !== 'boolean') {
@@ -49,17 +51,31 @@ const withNetworkConnectivity = (
};
componentDidMount() {
NetInfo.isConnected.addEventListener('change', this.checkInternet);
NetInfo.isConnected.addEventListener(
'change',
withExtraHeadRequest
? this.checkInternet
: this.handleConnectivityChange,
);
// On Android the listener does not fire on startup
if (Platform.OS === 'android') {
NetInfo.isConnected
.fetch()
.then((isConnected: boolean) => this.checkInternet(isConnected));
NetInfo.isConnected.fetch().then((isConnected: boolean) => {
if (withExtraHeadRequest) {
this.checkInternet(isConnected);
} else {
this.handleConnectivityChange(isConnected);
}
});
}
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('change', this.checkInternet);
NetInfo.isConnected.removeEventListener(
'change',
withExtraHeadRequest
? this.checkInternet
: this.handleConnectivityChange,
);
}
checkInternet = (isConnected: boolean) => {

0 comments on commit 8739c03

Please sign in to comment.