ptzagk / react-native-connection-info

Higher order component for React Native to detect network connection state.

react-native-connection-info

Higher order component for React Native to detect network connection state.

Use withConnection to inject the connection object which currently has the isConnected property. This is a boolean value that indicates internet connectivity status (see the NetInfo documentation on isConnected).

Usage

Installation

npm install --save react-native-connection-info

Android

Make sure to also include permissions on Android. Add the following line to your AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Examples

import React from 'react';
import {
  Text,
  View,
} from 'react-native';
import { withConnection, connectionShape } from 'react-native-connection-info';

const MyComponent = ({ connection }) => (
  <View>
    <Text
      style={{ color: connection.isConnected ? 'lightskyblue' : 'lightcoral' }}
    >
      {connection.isConnected ? 'Connected' : 'Offline'}
    </Text>
  </View>
)

MyComponent.propTypes = {
  connection: connectionShape,
};

export default withConnection(MyComponent);

Redux Wrapped Instance

Usage with redux is supported by default.

This section is only used if you need to reference the wrapped instance using getWrappedInstance() when using react-redux's connect(). This component uses { withRef: true }.

Usage

// instead of importing from 'react-native-connection-info'
// import { withConnection, connectionShape } from 'react-native-connection-info';
// just add /redux
import { withConnection, connectionShape } from 'react-native-connection-info/redux';

The rest is the same as in the first example.