InternetToast.js

import React, {Component} from 'react';
import {StyleSheet, View, Text, NetInfo} from 'react-native';
import PropTypes from 'prop-types';

class InternetToast extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isOnline: false
        };
        this.handleConnectivityChange = this
            .handleConnectivityChange
            .bind(this);
    }

    handleConnectivityChange(isConnected) {
        console.log('Internet is ' + (isConnected
            ? 'online'
            : 'offline'));

        this.setState({isOnline: isConnected});
    }
    componentWillMount() {
        NetInfo
            .isConnected
            .fetch()
            .then(isConnected => this.handleConnectivityChange(isConnected));
        NetInfo
            .isConnected
            .addEventListener('connectionChange', this.handleConnectivityChange);
    }

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

    render() {
        var toastHeight = this.state.isOnline
            ? 0
            : 45;
        return <Text
            style={{
            width: "100%",
            height: toastHeight,
            backgroundColor: "#CE2029",
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: 16,
            textShadowColor: '#AAA',
            color: 'white',
            textAlign: 'center',
            textAlignVertical: 'center',
            position:'absolute',
            bottom:0
        }}>No Internet Connection</Text>
    }
}

InternetToast.prototypes = {
    onConnectionChange: PropTypes.func.isRequired
}
export default InternetToast;