Skip to content

Instantly share code, notes, and snippets.

@jvandenaardweg
Last active November 19, 2020 22:41
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save jvandenaardweg/58ed91e3c33de0b75a15d38853b23d7d to your computer and use it in GitHub Desktop.
Save jvandenaardweg/58ed91e3c33de0b75a15d38853b23d7d to your computer and use it in GitHub Desktop.
Use React's Context API in React Native (0.59.0) to have network connectivity status globally available. Gist for Medium article: https://medium.com/@jvandenaardweg/easily-manage-connection-status-updates-in-react-native-28c9b4b0647f
import React from 'react';
import { NetworkProvider } from './NetworkProvider';
import { ExampleComponent } from './ExampleComponent';
export default class App extends React.PureComponent {
render() {
return (
<NetworkProvider>
<ExampleComponent />
</NetworkProvider>
);
}
}
import React from 'react';
import { View, Text } from 'react-native';
import { NetworkContext } from './NetworkProvider';
export class ExampleComponent extends React.PureComponent {
static contextType = NetworkContext;
render() {
return (
<View>
<Text>You are now {this.context.isConnected ? 'online' : 'offline'}</Text>
</View>
);
}
}
import { AppRegistry } from 'react-native';
import App from './App'
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
import React from 'react';
import NetInfo from '@react-native-community/netinfo';
export const NetworkContext = React.createContext({ isConnected: true });
export class NetworkProvider extends React.PureComponent {
state = {
isConnected: true
};
componentDidMount() {
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
}
componentWillUnmount() {
NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
}
handleConnectivityChange = isConnected => this.setState({ isConnected });
render() {
return (
<NetworkContext.Provider value={this.state}>
{this.props.children}
</NetworkContext.Provider>
);
}
}
@sunviwo
Copy link

sunviwo commented Aug 2, 2020

Getting "TypeError: Cannot read property 'addEventListener' of undefined" in Expo SDK 38. Any fix please?

@ernestofgonzalez
Copy link

Getting "TypeError: Cannot read property 'addEventListener' of undefined" in Expo SDK 38. Any fix please?

NetInfo.isConnected.addEventListener() was removed. You have to listen directly to NetInfo. Check this solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment