Last active
November 19, 2020 22:41
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { NetworkProvider } from './NetworkProvider'; | |
import { ExampleComponent } from './ExampleComponent'; | |
export default class App extends React.PureComponent { | |
render() { | |
return ( | |
<NetworkProvider> | |
<ExampleComponent /> | |
</NetworkProvider> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { AppRegistry } from 'react-native'; | |
import App from './App' | |
import { name as appName } from './app.json'; | |
AppRegistry.registerComponent(appName, () => App); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
} |
Getting "TypeError: Cannot read property 'addEventListener' of undefined" in Expo SDK 38. Any fix please?
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
Hello friends, how i can use with eact native hooks and redux this example ?Do you have any ideas?