react-native-device-infoでエラー【RNDDeviceInfo is null】│tech1000+

1 はじめに
2 環境
3 発生しているエラー
4 追記
5 そして戦いは終わった
- 5.1 Share this:

はじめに

この記事はまだ解決していませんが、自身の整理を兼ねてまとめています。
解決できれば更新します。
解決済み

react-nativeを使ったネイティブアプリ開発にて、端末の情報を取得したいということになりました。

端末情報を取得するためにはreact-native-device-infoというのを使うとできるらしいですが、なにやらうまく行かず・・・。

react-nativeのバージョン、androidのバージョンによって要所追記する箇所があるのですが、その通りにやっているはず。

環境

react-native 0.62.2
react-native-device-info 5.6.2

発生しているエラー

RNDDeviceInfo is null

依存関係が不足しているというようなエラーだと思いますが

ReacNativeのバージョンが0.59以下の場合は「react-native link」コマンドを叩いてね。

iOSの場合は「pod install」をやってね。

動作検証はAndroidなので、後者は関係なく、react-nativeのバージョンは冒頭に記載の通りなのでこれも関係ないはずです。

もちろんAndroidディレクトリ配下でgradleのcleanをやってみたり、nodeモジュールを消去して再度npm iを叩いてみたりもしましたが変わらず。

ドキュメントにある以下の工程も再度やってみました。

android/build.gradleのextブロック内に追記

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
+        googlePlayServicesVersion = "16.1.0"
+        firebaseIidVersion = "19.0.1"
+        supportLibVersion = '1.0.2'
+        mediaCompatVersion = '1.0.1'
+        supportV4Version = '1.0.0'
    }

android/app/build.gradleに追記

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"
+    implementation project(':react-native-device-info')

android/settings.gradleに追記

include ':app'
include ':react-native-device-info'
project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')

~~app\src\main下のMainApplication.javaに追記~~

+ import com.learnium.RNDeviceInfo.RNDeviceInfo;

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new RNFirebaseAnalyticsPackage());
          packages.add(new RNFirebaseMessagingPackage());
          packages.add(new RNFirebaseNotificationsPackage());
+          packages.add(new RNDeviceInfo());
          return packages;
        }

~~↑ドキュメントでは次のようになってましたが上記に書き換えました~~

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+       new RNDeviceInfo(),
        new MainReactPackage()
      );
    }

build.gradleにgoogle()の追加が一番初めにきていることの確認

allprojects {
    repositories {
        google()
        mavenLocal()
        maven {
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

そして任意のコンポーネントでimport

import DeviceInfo from 'react-native-device-info';

エラーは変わらず。どうしたものか。

vscodeでやっていたのですが、おもむろにAndroidStudioでプロジェクトを開きGradle syncで勝手に解決しないかなとかも考えやってみましたが、これもだめ。

公式ではないドキュメントには権限に関する記述も追記する必要があると書いてあったためやってみる。

~~AndroidManifest.xml~~

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="****">
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.BLUETOOTH"/>
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

↑これもひとまずは必要ありませんでした

さらに、この記事の執筆時のreact-native-device-infoのバージョン5.6.2がリリース５日前のホットなバージョンだったため、一つ前の5.6.1をインストールしてみる。

参考記事
https://aboutreact.com/react-native-device-info/
https://www.npmjs.com/package/react-native-device-info
https://www.thetopsites.net/article/58484657.shtml