-
-
Save jvandenaardweg/58ed91e3c33de0b75a15d38853b23d7d to your computer and use it in GitHub Desktop.
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> | |
); | |
} | |
} |
In ExampleComponent.jsx file, in line 12, will it be this. contextType.isConnected or this.context.isConnected????
Actually, i am using hook and in example component My context.isConnected is undefined. What might be issue.
In ExampleComponent.jsx file, in line 12, will it be this. contextType.isConnected or this.context.isConnected????
Actually, i am using hook and in example component My context.isConnected is undefined. What might be issue.
Do you use something like this (not tested):
import React, { useContext } from 'react';
import { NetworkContext } from '../../contexts/UserThemeProvider';
export const ExampleComponent = (props) => {
const { isConnected } = useContext(NetworkContext)
return (
<View>
<Text>You are now {isConnected ? 'online' : 'offline'}</Text>
</View>
)
};
Yeah, this will work after importing NetworkContext. The network status is correct for the first time but if the network status changed, it will not change in ExampleComponent. But in the Context Provider, the network status is getting changed. How to get the changed status in ExampleComponent as well on every time change in Provider?
Above works well for me.
How can can I restrict the api calls or other actions(redux] of my app while the user in offline?
Hello friends, how i can use with eact native hooks and redux this example ?Do you have any ideas?
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.
Thank you!