Working iOS & android Here this is used to when we are having net connection fine other wise showing text
Step 1: First we have to Create Project like react-native init SampleProject
Step 2: After we have to Create the OfflineNotice.js Component
like this below
import React, { PureComponent } from 'react'; import { View, Text, NetInfo, Dimensions, StyleSheet } from 'react-native'; const { width } = Dimensions.get('window'); function MiniOfflineSign() { return ( No Internet Connection ); } class OfflineNotice extends PureComponent { render() { return ; } } const styles = StyleSheet.create({ offlineContainer: { backgroundColor: '#b52424', height: 30, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', width, position: 'absolute', top: 30 }, offlineText: { color: '#fff' } }); export default OfflineNotice;
step 3:
Then where you want to setUp to Screen or showing any page Please import to that screen
import OfflineNotice from './OfflineNotice'
step 4: Now import like this below
export default class App extends Component<{}> { render() { return ( <---- add this here Welcome to React Native! To get started, edit App.js {instructions} ); } }
step 5:
Please take a state varibale
constructor(props){ super(props) state = { isConnected: true }; }
step 6:
function handleConnectivityChange = isConnected => { if (isConnected) { this.setState({ isConnected }); } else { this.setState({ isConnected }); } };
step 7 : here Net Info import from your react-native components
import { NetInfo } from 'react-native'
Our componentDidMount should look like this:
componentDidMount() { NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange); }
Plus its also good practise to remove event listeners when your component is about to be unmounted to avoid any memory leakage, so we would do that in the componentWillUnmount lifecycle method.
componentWillUnmount() { NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
render() { if (!this.state.isConnected) { return ; } return null; } Boom, that’s all there is to this. We have successfully created a “No Internet Connection” sign that responds to the state of the connection on your mobile device.
The final OfflineNotice.js component should look like this: Please check the Js file OfflineNotice.js }