iOS14でReact Nativeアプリで画像が表示されない

パッチファイル作成

以下コマンドでルートディレクトリ配下に patches/react-native+0.61.5.patch を作成する。

$ npx patch-package react-native

npx: 150個のパッケージを3.464秒でインストールしました。
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.5 with npm
• Diffing your files with clean files
✔ Created file patches/react-native+0.61.5.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];
   }
 }

以下のコマンドを叩き、 node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m に反映させる。267行目付近。

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

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

再ビルド

$ cd ios; pod install
$ react-native start --reset-cache
$ npx react-native run-ios

参考

• iOS14でReact Nativeアプリをビルドすると、Imageが表示されない場合の対処