React-Native環境構築奮闘記(1日目)

2023年10月10日 21:37

既存のReact-Nativeのプロジェクトを実行しようとしたら色々エラーが出たので、動くまでの奮闘記を書いていきます(予定)。

開発環境

M1チップのmacbook Airを使っています。

$ npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1
    Memory: 240.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.13.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.3 AI-223.8836.35.2231.10811636
    Xcode: 15.0/15A240d - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.20.1 - /usr/bin/javac
    Python: 3.11.5 - /Users/ikko/anaconda3/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Android編

1. Invariant Violation

androidのbuildは成功しますが、実行時に以下のようなエラーが出ます。

[Tue Oct 10 2023 20:00:17.881]  ERROR    Invariant Violation: TurboModuleRegistry.getEnforcing(...): 
'RNCDatePicker' could not be found. Verify that a module by this name is registered in the native binary.

なんかモジュールが見つからないらしいです。その下にも色々エラー出てますけど、このエラーに関連してそうです。iPhone版のエラーを解決するためにpatchを当てていたところが怪しいので、patchを消してみます。

$ rm ./yarn.lock
$ rm -rf ./node_modules/
$ yarn run:android

変化なし。ちなみに、パッチファイルはこんな感じ。エラーを起こしてる場所のコード無くても動きそうなので、消します。

diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
index c139440..75818bd 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
@@ -56,9 +56,6 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
       NSTimeZone *timeZone = [NSTimeZone timeZoneWithName:shadowPickerView.timeZoneName];
       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 {
       [shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];

expoのバージョン下げれば良いって言ってるけど、expoなんて入れてないしな〜。

これ試してみよう。キャッシュをクリア！
、、、だめでした。

無難にライブラリのバージョン下げてみるか。

$ yarn add @react-native-community/datetimepicker@6.x

buildエラー

  シンボル:   メソッド hasActiveReactInstance()
  場所: クラス ReactApplicationContext
/Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogModule.java:58: エラー: シンボルを見つけられません
      if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {

ちょっと調べてたけど詰んでそうなので、バージョン戻します。後回し。

iOS編

1. RNDateTimePickerエラー

** BUILD FAILED **


The following build commands failed:
        CompileC /Users/ikko/Library/Developer/Xcode/DerivedData/Cucom-djblyojibqpqqvdzjlgfelikuwax/Build/
Intermediates.noindex/Pods.build/Debug-iphonesimulator/RNDateTimePicker.build/Objects-normal/x86_64/
RNDateTimePickerShadowView.o /Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/
datetimepicker/ios/RNDateTimePickerShadowView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler 
(in target 'RNDateTimePicker' from project 'Pods')
(1 failure)

/Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/ datetimepicker/ios/RNDateTimePickerShadowView.m

が悪さをしていそうなので、下のようにパッチを当てます。

 diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
index c139440..75818bd 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
@@ -56,9 +56,6 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
       NSTimeZone *timeZone = [NSTimeZone timeZoneWithName:shadowPickerView.timeZoneName];
       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 {
       [shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];

success Successfully launched the app on the simulator
よし！ん？

[Tue Oct 10 2023 20:52:33.202]  ERROR    Invariant Violation: Tried to register two 
views with the same name RNDateTimePicker

なんかエラー出た。キャッシュとかの問題なのかな。

だめです。もしかしたら、パッチを当ててるせいで重複して読み込まれてるのかな。でもパッチ消したら動かないしな〜。一旦コマンドラインじゃなくてxCodeから動かしてみるか。
同じエラー、、、

ラチが開かないので、初めからやり直します。

2. react-native-safe-area-context.

なぜかこのpodファイルだけインストールされないので、インストールするようにパッチを当てます。

node_modules/react-native/scripts/react_native_pods.rb に以下を追加。

def use_react_native! (options={})
+  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

パッチを当てる。

$ npx patch-package react-native
$ yarn

[!] CocoaPods could not find compatible versions for pod "react-native-safe-area-context":
  In Podfile:
    react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)

Specs satisfying the `react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)` dependency were found, but they required a higher minimum deployment target.

バージョン関係のエラー。
ios/Podfile を以下のように変更。

- platform :ios, '11.0'

+ platform :ios, '13.0'

The following build commands failed:
        CompileC /Users/ikko/Library/Developer/Xcode/DerivedData/
Cucom-czprnwmoemquywazvhqmaqollnmk/Build/Intermediates.noindex/Pods.build/
Debug-iphonesimulator/RNDateTimePicker.build/Objects-normal/x86_64/
RNDateTimePickerShadowView.o /Users/ikko/Desktop/Test2/Cucom-App/
node_modules/@react-native-community/datetimepicker/ios/
RNDateTimePickerShadowView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler 
(in target 'RNDateTimePicker' from project 'Pods')
(1 failure)

だめだー！xCodeで開いてみる。

RNDateTimePickerShadowView.m:60:9: error: call to undeclared function 
'RCTLogWarn'; ISO C99 and later do not support implicit function declarations

うーん、難しい。今日は終わります。

この記事が気に入ったらサポートをしてみませんか？