https://github.com/baptistelambert/react-native-netinfo

📲 Notifies your app when the network connection goes online or offline.
https://github.com/baptistelambert/react-native-netinfo

connectivity network react react-native render-prop

Last synced: 13 days ago
JSON representation

📲 Notifies your app when the network connection goes online or offline.

• Host: GitHub
• URL: https://github.com/baptistelambert/react-native-netinfo
• Owner: baptistelambert
• License: mit
• Created: 2018-02-14T18:59:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-15T20:02:46.000Z (almost 7 years ago)
• Last Synced: 2024-12-03T06:19:23.398Z (about 1 month ago)
• Topics: connectivity, network, react, react-native, render-prop
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-netinfo
• Size: 41 KB
• Stars: 11
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-netinfo

Notifies your app when the network connection goes online or offline.

Inspired by [react-network](https://github.com/ReactTraining/react-network) and [react-native-offline](https://github.com/rauliyohmc/react-native-offline), designed with a similar API to the former for when you need a simpler and lighter package than the latter.

## Installation

```

npm install react-native-netinfo

# or with yarn

yarn add react-native-netinfo

```

## Usage

### With a render prop

```js

import { NetInfoProvider } from 'react-native-netinfo';

const App = () => (

  

     {

        console.log(isConnected);

        console.log(connectionInfo);

      }}

      render={({ isConnected, connectionInfo }) =>

        isConnected ? (

          

            Wonderful, you are connected!

            Connection type: {connectionInfo.type}

            

              Effective connection type:{connectionInfo.effectiveType}

            

          

        ) : (

          It looks like you encounter connectivity problems.

        )

      }

    />

  

);

```

### With children as a function

```js

import { NetInfoProvider } from 'react-native-netinfo';

const App = () => (

  

     {

        console.log(isConnected);

        console.log(connectionInfo);

      }}

    >

      {({ isConnected, connectionInfo }) =>

        isConnected ? (

          

            Wonderful, you are connected!

            Connection type: {connectionInfo.type}

            

              Effective connection type:{connectionInfo.effectiveType}

            

          

        ) : (

          It looks like you encounter connectivity problems.

        )

      }

    

  

);

```

### With component injection

```js

import { NetInfoProvider } from 'react-native-netinfo';

const ConnectedComponent = ({ isConnected, connectionInfo }) =>

  isConnected ? (

    

      Wonderful, you are connected!

      Connection type: {connectionInfo.type}

      Effective connection type:{connectionInfo.effectiveType}

    

  ) : (

    It looks like you encounter connectivity problems.

  );

const App = () => (

  

     {

        console.log(isConnected);

        console.log(connectionInfo);

      }}

      component={ConnectedComponent}

    />

  

);

```

NB: you should not set both component and render props. If you were to do this, the render prop would be ignored.

## Constants

This package also exposes constants for connection info's types and effective types.

You can use them like so:

```js

import { CONSTANTS } from 'react-native-netinfo';

const App = () => (

  

    {CONSTANTS.CONNECTION_INFO.TYPES.WIFI}

    {CONSTANTS.CONNECTION_INFO.EFFECTIVE_TYPES['4G']}

  

);

```

You can find the full list of types and effective types in the [official React Native documentation about NetInfo](https://facebook.github.io/react-native/docs/netinfo.html#connectiontype-enum).