浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】「@react-native-community/netinfo」ライブラリでインターネットとの接続状態を確認する

現在開発中のアプリに不具合が発生し、どうやらその原因がインターネット接続がされていない状態でデータ書き込みを行おうとしていたことみたいだったので、それの対処法としてネット接続されているかを確認する処理を追加しました。
使用したライブラリは「@react-native-community/netinfo」です。
GitHub のページはこちらから

react-native-netinfo/react-native-netinfo: React Native Network Info API for Android & iOS
https://github.com/react-native-netinfo/react-native-netinfo

 

ライブラリのインストール方法は、下記コマンドを実行するだけです。

npm install --save @react-native-community/netinfo
// iOS の場合は下記も実行
npx pod-install

上記が完了したら、あとはインターネット接続があるかどうかを確認したいページにコードを追加します。
まず、下記コードを追加し、ライブラリをインポートします。

import NetInfo from "@react-native-community/netinfo";

あとは任意のタイミングで下記を実行してください。

NetInfo.fetch().then(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
});

state.type で、キャリア通信や Wi-Fi 等の接続先が確認できます。
state.isConnected では、接続されているかどうかを確認できます。戻り値は bool です。
私は state.isConnected しか使いませんでしたが、ちゃんと接続済みかどうかが true/false で取得できました。

あとは、この結果によって任意の処理を実行してください。

 

以上、React Native でインターネットとの接続状態を確認できるライブラリ「@react-native-community/netinfo」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)