react-native-ui-lib/typings/components/connectionStatusBar/index.js

[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down

import React from "react";
import _ from "lodash";
import { StyleSheet, Text, NetInfo } from "react-native";
import * as Constants from "../../helpers/Constants";
import { BaseComponent } from "../../commons";
import { Colors, Typography } from "../../style";
import TouchableOpacity from "../touchableOpacity";
import View from "../view";
/**
 * @description: Top bar to show a "no internet" connection status. Note: Run on real device for best results
 * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.js
 */
export default class ConnectionStatusBar extends BaseComponent {
    constructor(props) {
        super(props);
        this.onConnectionChange = this.onConnectionChange.bind(this);
        this.state = {
            isConnected: true,
            isCancelled: false
        };
        this.getInitialConnectionState();
    }
    static registerGlobalOnConnectionLost(callback) {
        ConnectionStatusBar.onConnectionLost = callback;
    }
    static unregisterGlobalOnConnectionLost() {
        delete ConnectionStatusBar.onConnectionLost;
    }
    generateStyles() {
        this.styles = createStyles();
    }
    componentDidMount() {
        this.netInfoListener = NetInfo.addEventListener("connectionChange", this.onConnectionChange);
    }
    componentWillUnmount() {
        if (this.netInfoListener) {
            this.netInfoListener.remove();
        }
    }
    onConnectionChange(state) {
        const isConnected = this.isStateConnected(state);
        if (isConnected !== this.state.isConnected) {
            this.setState({
                isConnected,
                isCancelled: false
            });
            if (this.props.onConnectionChange) {
                this.props.onConnectionChange(isConnected, false);
            }
            if (!isConnected) {
                setTimeout(() => {
                    this.getInitialConnectionState();
                }, 3000);
            }
            if (!isConnected && _.isFunction(ConnectionStatusBar.onConnectionLost)) {
                ConnectionStatusBar.onConnectionLost();
            }
        }
    }
    async getInitialConnectionState() {
        const state = await NetInfo.getConnectionInfo();
        const isConnected = this.isStateConnected(state);
        this.setState({ isConnected });
        if (this.props.onConnectionChange) {
            this.props.onConnectionChange(isConnected, true);
        }
    }
    isStateConnected(state) {
        const lowerCaseState = _.lowerCase(state.type);
        const isConnected = lowerCaseState !== "none";
        return isConnected;
    }
    render() {
        if (this.state.isConnected || this.state.isCancelled) {
            return false;
        }
        return (<View useSafeArea style={this.styles.absoluteContainer}>
        <View style={this.styles.container}>
          <View style={{ flex: 1, flexDirection: "row" }}>
            <Text style={this.styles.text}>{this.props.label}</Text>
            {this.props.allowDismiss && (<TouchableOpacity style={this.styles.xContainer} onPress={() => this.setState({ isCancelled: true })}>
                <Text style={this.styles.x}>✕</Text>
              </TouchableOpacity>)}
          </View>
        </View>
      </View>);
    }
}
ConnectionStatusBar.displayName = "ConnectionStatusBar";
ConnectionStatusBar.defaultProps = {
    label: "No internet. Check your connection.",
    allowDismiss: false
};
function createStyles() {
    const typography = Constants.isSmallScreen
        ? Typography.text90
        : Typography.text80;
    return StyleSheet.create({
        absoluteContainer: {
            backgroundColor: Colors.dark30,
            ...StyleSheet.absoluteFillObject,
            bottom: undefined
        },
        container: {
            flexDirection: "column",
            justifyContent: "center"
        },
        text: {
            flex: 1,
            ...typography,
            textAlign: "center",
            color: Colors.dark60,
            marginTop: 8,
            marginBottom: 8,
            alignSelf: "center"
        },
        xContainer: {
            paddingLeft: 10,
            paddingRight: 10,
            alignSelf: "center"
        },
        x: {
            fontSize: Typography.text80.fontSize,
            color: Colors.black
        }
    });
}