ReactNative奮闘記(2日目)

iOS編

RCTLogWarn

/Users/ikko/Desktop/Test2/Cucom-App/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m:60:9:
 error: call to undeclared function 'RCTLogWarn'; ISO C99 and later do not support implicit function declarations 
[-Wimplicit-function-declaration]
        RCTLogWarn(@"'%@' does not exist in NSTimeZone.knownTimeZoneNames. Falling back to localTimeZone=%@", shadowPickerView.timeZoneName, NSTimeZone.localTimeZone.name);
        ^
1 error generated.

RCTLogWarnという関数が存在しないと言われているため、node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m

にアクセスして、該当するコードを削除。パッチを当てる。

$ npx patch-package @react-native-community/datetimepicker

もう一度コードを実行。

Invariant Violation: Tried to register two views with the same name RNDateTimePicker

エラーです。

RNDateTimePicker

キャッシュを削除してみる。

React Nativeでキャッシュをクリアしよう - Qiita

変わらないですね〜。

diff --git a/node_modules/react-native/scripts/react_native_pods.rb b/node_modules/react-native/scripts/react_native_pods.rb
index db9a34a..14cb4b3 100644
--- a/node_modules/react-native/scripts/react_native_pods.rb
+++ b/node_modules/react-native/scripts/react_native_pods.rb
@@ -4,6 +4,7 @@
 # LICENSE file in the root directory of this source tree.
 
 def use_react_native! (options={})
+  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
   # The prefix to react-native
   prefix = options[:path] ||= "../node_modules/react-native"

RNDateTimePickerというpodが2回登録されていることによるエラーみたいです。このパッチが悪さをしている気がするので、パッチを消して動かす方法を考えてみます。

パッチを消してキャッシュ削除してもう一度実行しても同じエラーが出るので、原因はRCTLogWarnを削除した時のパッチにあることが分かりました。
↓RCTLogWarnを削除したときのパッチ

diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
index c139440..3e7caa9 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
@@ -57,7 +57,6 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
       if (timeZone != nil) {
         [shadowPickerView.picker setTimeZone:timeZone];
       } else {
-        RCTLogWarn(@"'%@' does not exist in NSTimeZone.knownTimeZoneNames. Falling back to localTimeZone=%@", shadowPickerView.timeZoneName, NSTimeZone.localTimeZone.name);
         [shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];
       }
     } else {

それっぽい記事を見つけましたが、現状解決していないようです。

一旦RCTLogWarnに関するパッチを削除。dateTimePickerをプロジェクト内で使ってないみたいなので、ワークスペースから削除。キャッシュ削除して再実行。

う、動いたっ！！

android編

Slider

ノート:/Users/ikko/Desktop/Test2/Cucom-App/node_modules/@react-native-community/
slider/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java
は推奨されないAPIを使用またはオーバーライドしています。
ノート:詳細は、-Xlint:deprecationオプションを指定して再コンパイルしてください。

Sliderのライブラリのバージョンをv4.1.12に変更すればうまくいくらしい。
動いたけど、別のエラー。

RNSafeAreaProvider

Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

iOSの時と同じですね。

これに従えば良さそう。

• android/settings.gradle

+ include ':react-native-safe-area-context'
+ project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')

• android/app/build.gradle

dependencies {
+    implementation project(':react-native-safe-area-context')
    ...
}

• android/app/src/main/java/com/[APP_NAME]/MainApplication.java

+ import com.th3rdwave.safeareacontext.SafeAreaContextPackage;

• android/app/src/main/java/com/[APP_NAME]/MainApplication.java (Add this code where the getPackages function exists)

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
    ...
+    packages.add(new SafeAreaContextPackage());
    return packages;
}

動いた！！

感想戦

記事を書きながらエラーと戦うと、頭の中がスッキリして解決までの道のりが段違いに速くなるのを感じました。
これからはちょくちょくnoteに格闘記を投稿していきます。