React NativeでXcode12でbuildすると画像が表示されない件について

はじめに

iOS14向けの対応を実施するにあたり、Xcodeのバージョンアップをして、buildしたところアプリ内の画像ファイルが一切表示されなくなる事象に出くわしました。

最初に調べたとき参考にあげさせていただいた一つ目の記事に行きつき、対応を行いました。そもそもreact-nativeのバージョンを0.63.X以降にあげれば対応が入っているようなんですが、そこまでコストをかけられないのもあり、今回はパッチでの対応にしました。

環境

react-native : 0.61.4

最初に実行した内容

パッチファイルの作成・実行

プロジェクトのルートディレクトリで以下を実行

$ npx patch-package react-native

npx: 150個のパッケージを5.364秒でインストールしました。
patch-package 6.2.2
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it

• Creating temporary folder
• Installing react-native@0.61.4 with npm
• Diffing your files with clean files
✔ Created file patches/react-native+0.61.4.patch

作成されたpatchファイルに以下を追記する

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..4ef8307 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -269,6 +269,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

以下コマンドでパッチの実行

$ patch -p1 -i patches/react-native+0.61.4.patch

でnode_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:の270行目付近が以下のようになっていることを確認する

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer]; // 記載されていることを確認
  }
}

ここまでいけば後は、runしていただければ画像がでることを確認できます。
となるはずだったのですが、私の開発中アプリではごく一部の画像のみ表示されましたが、ほとんどの画像がいまだ表示されていない状態でした。

react-native-fastimageのための追加対応

いろいろ調べた結果参考の２つ目に行きついたのですが、react-native-fastimageを利用していると追加対応が必要とのこと

iOSディレクトリに移動して、以下を以下を実行して、SDWebImageのバージョンをアップする。一応5.8.3まであげればいいようですが、私は最新まであげてしまいました。

pod update SDWebImage

これでrunして、動作確認したところ無事すべての画像が表示されていました。

参考

https://qiita.com/IZUMIRU/items/ff485f2cc2d35f724044
https://github.com/DylanVann/react-native-fast-image/issues/702