NetInfoExample.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

'use strict';

const React = require('react');
const ReactNative = require('react-native');
const {NetInfo, Text, View, TouchableWithoutFeedback} = ReactNative;

class ConnectionInfoSubscription extends React.Component<{}, $FlowFixMeState> {
  state = {
    connectionInfoHistory: [],
  };

  componentDidMount() {
    NetInfo.addEventListener('change', this._handleConnectionInfoChange);
  }

  componentWillUnmount() {
    NetInfo.removeEventListener('change', this._handleConnectionInfoChange);
  }

  _handleConnectionInfoChange = connectionInfo => {
    const connectionInfoHistory = this.state.connectionInfoHistory.slice();
    connectionInfoHistory.push(connectionInfo);
    this.setState({
      connectionInfoHistory,
    });
  };

  render() {
    return (
      <View>
        <Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text>
      </View>
    );
  }
}

class ConnectionInfoCurrent extends React.Component<{}, $FlowFixMeState> {
  state = {
    connectionInfo: null,
  };

  componentDidMount() {
    NetInfo.addEventListener('change', this._handleConnectionInfoChange);
    NetInfo.fetch().done(connectionInfo => {
      this.setState({connectionInfo});
    });
  }

  componentWillUnmount() {
    NetInfo.removeEventListener('change', this._handleConnectionInfoChange);
  }

  _handleConnectionInfoChange = connectionInfo => {
    this.setState({
      connectionInfo,
    });
  };

  render() {
    return (
      <View>
        <Text>{this.state.connectionInfo}</Text>
      </View>
    );
  }
}

class IsConnected extends React.Component<{}, $FlowFixMeState> {
  state = {
    isConnected: null,
  };

  componentDidMount() {
    NetInfo.isConnected.addEventListener(
      'change',
      this._handleConnectivityChange,
    );
    NetInfo.isConnected.fetch().done(isConnected => {
      this.setState({isConnected});
    });
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      'change',
      this._handleConnectivityChange,
    );
  }

  _handleConnectivityChange = isConnected => {
    this.setState({
      isConnected,
    });
  };

  render() {
    return (
      <View>
        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
      </View>
    );
  }
}

class IsConnectionExpensive extends React.Component<{}, $FlowFixMeState> {
  state = {
    isConnectionExpensive: (null: ?boolean),
  };

  _checkIfExpensive = () => {
    NetInfo.isConnectionExpensive().then(isConnectionExpensive => {
      this.setState({isConnectionExpensive});
    });
  };

  render() {
    return (
      <View>
        <TouchableWithoutFeedback onPress={this._checkIfExpensive}>
          <View>
            <Text>
              Click to see if connection is expensive:
              {this.state.isConnectionExpensive === true
                ? 'Expensive'
                : this.state.isConnectionExpensive === false
                  ? 'Not expensive'
                  : 'Unknown'}
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

exports.title = 'NetInfo';
exports.description = 'Monitor network status';
exports.examples = [
  {
    title: 'NetInfo.isConnected',
    description: 'Asynchronously load and observe connectivity',
    render(): React.Element<any> {
      return <IsConnected />;
    },
  },
  {
    title: 'NetInfo.update',
    description: 'Asynchronously load and observe connectionInfo',
    render(): React.Element<any> {
      return <ConnectionInfoCurrent />;
    },
  },
  {
    title: 'NetInfo.updateHistory',
    description: 'Observed updates to connectionInfo',
    render(): React.Element<any> {
      return <ConnectionInfoSubscription />;
    },
  },
  {
    platform: 'android',
    title: 'NetInfo.isConnectionExpensive (Android)',
    description: 'Asynchronously check isConnectionExpensive',
    render(): React.Element<any> {
      return <IsConnectionExpensive />;
    },
  },
];