StatusConnexion.js

import React, {Component, PureComponent} from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';
import NetInfo from '@react-native-community/netinfo';
const { width } = Dimensions.get('window');

function MiniOfflineSign() {
  return (
      <View style={styles.offlineContainer}>
        <Text style={styles.offlineText}>No Internet Connection</Text>
      </View>
  );
}

class StatusConnexion extends Component {
  state = {
    isConnected: null
  };

  handleConnectivityChange = isConnected => {
    this.setState({ isConnected });
  };

  componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
  }


  render() {
    return (
        !this.state.isConnected?<MiniOfflineSign />:null
    )
}
}

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 StatusConnexion;