{"id":23531300,"url":"https://github.com/baptistelambert/react-native-netinfo","last_synced_at":"2025-10-30T12:47:20.112Z","repository":{"id":57338658,"uuid":"121548992","full_name":"baptistelambert/react-native-netinfo","owner":"baptistelambert","description":"📲 Notifies your app when the network connection goes online or offline.","archived":false,"fork":false,"pushed_at":"2018-02-15T20:02:46.000Z","size":42,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T18:22:18.619Z","etag":null,"topics":["connectivity","network","react","react-native","render-prop"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-netinfo","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/baptistelambert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-14T18:59:27.000Z","updated_at":"2020-07-28T09:04:44.000Z","dependencies_parsed_at":"2022-09-10T19:50:37.453Z","dependency_job_id":null,"html_url":"https://github.com/baptistelambert/react-native-netinfo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baptistelambert%2Freact-native-netinfo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baptistelambert%2Freact-native-netinfo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baptistelambert%2Freact-native-netinfo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baptistelambert%2Freact-native-netinfo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baptistelambert","download_url":"https://codeload.github.com/baptistelambert/react-native-netinfo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250315986,"owners_count":21410473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["connectivity","network","react","react-native","render-prop"],"created_at":"2024-12-25T22:14:45.214Z","updated_at":"2025-10-30T12:47:20.035Z","avatar_url":"https://github.com/baptistelambert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-netinfo\n\nNotifies your app when the network connection goes online or offline.\n\nInspired 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.\n\n## Installation\n\n```\nnpm install react-native-netinfo\n# or with yarn\nyarn add react-native-netinfo\n```\n\n## Usage\n\n### With a render prop\n\n```js\nimport { NetInfoProvider } from 'react-native-netinfo';\n\nconst App = () =\u003e (\n  \u003cView\u003e\n    \u003cNetInfoProvider\n      onChange={({ isConnected, connectionInfo }) =\u003e {\n        console.log(isConnected);\n        console.log(connectionInfo);\n      }}\n      render={({ isConnected, connectionInfo }) =\u003e\n        isConnected ? (\n          \u003cReact.Fragment\u003e\n            \u003cText\u003eWonderful, you are connected!\u003c/Text\u003e\n            \u003cText\u003eConnection type: {connectionInfo.type}\u003c/Text\u003e\n            \u003cText\u003e\n              Effective connection type:{connectionInfo.effectiveType}\n            \u003c/Text\u003e\n          \u003c/React.Fragment\u003e\n        ) : (\n          \u003cText\u003eIt looks like you encounter connectivity problems.\u003c/Text\u003e\n        )\n      }\n    /\u003e\n  \u003c/View\u003e\n);\n```\n\n### With children as a function\n\n```js\nimport { NetInfoProvider } from 'react-native-netinfo';\n\nconst App = () =\u003e (\n  \u003cView\u003e\n    \u003cNetInfoProvider\n      onChange={({ isConnected, connectionInfo }) =\u003e {\n        console.log(isConnected);\n        console.log(connectionInfo);\n      }}\n    \u003e\n      {({ isConnected, connectionInfo }) =\u003e\n        isConnected ? (\n          \u003cReact.Fragment\u003e\n            \u003cText\u003eWonderful, you are connected!\u003c/Text\u003e\n            \u003cText\u003eConnection type: {connectionInfo.type}\u003c/Text\u003e\n            \u003cText\u003e\n              Effective connection type:{connectionInfo.effectiveType}\n            \u003c/Text\u003e\n          \u003c/React.Fragment\u003e\n        ) : (\n          \u003cText\u003eIt looks like you encounter connectivity problems.\u003c/Text\u003e\n        )\n      }\n    \u003c/NetInfoProvider\u003e\n  \u003c/View\u003e\n);\n```\n\n### With component injection\n\n```js\nimport { NetInfoProvider } from 'react-native-netinfo';\n\nconst ConnectedComponent = ({ isConnected, connectionInfo }) =\u003e\n  isConnected ? (\n    \u003cReact.Fragment\u003e\n      \u003cText\u003eWonderful, you are connected!\u003c/Text\u003e\n      \u003cText\u003eConnection type: {connectionInfo.type}\u003c/Text\u003e\n      \u003cText\u003eEffective connection type:{connectionInfo.effectiveType}\u003c/Text\u003e\n    \u003c/React.Fragment\u003e\n  ) : (\n    \u003cText\u003eIt looks like you encounter connectivity problems.\u003c/Text\u003e\n  );\n\nconst App = () =\u003e (\n  \u003cView\u003e\n    \u003cNetInfoProvider\n      onChange={({ isConnected, connectionInfo }) =\u003e {\n        console.log(isConnected);\n        console.log(connectionInfo);\n      }}\n      component={ConnectedComponent}\n    /\u003e\n  \u003c/View\u003e\n);\n```\n\nNB: you should not set both component and render props. If you were to do this, the render prop would be ignored.\n\n## Constants\n\nThis package also exposes constants for connection info's types and effective types.\n\nYou can use them like so:\n\n```js\nimport { CONSTANTS } from 'react-native-netinfo';\n\nconst App = () =\u003e (\n  \u003cView\u003e\n    \u003cText\u003e{CONSTANTS.CONNECTION_INFO.TYPES.WIFI}\u003c/Text\u003e\n    \u003cText\u003e{CONSTANTS.CONNECTION_INFO.EFFECTIVE_TYPES['4G']}\u003c/Text\u003e\n  \u003c/View\u003e\n);\n```\n\nYou 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaptistelambert%2Freact-native-netinfo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaptistelambert%2Freact-native-netinfo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaptistelambert%2Freact-native-netinfo/lists"}