【ReactNative】iOS14 画像が表示されない問題対応

問題

iOS13の時はうまく画像表示されていたが、iOS14にUPDATEしたら画像が表示されなくなってしまった。

解決策

以下の流れでiOS14でも画像が表示されるようになった！

1. npm i -g patch-package

2. プロジェクトディレクトリ直下に"patches"という名前でフォルダ作成
   

3. "patches"の中に、"react-native+0.63.0.patch"という名前でファイル作成

4. 以下のソースコードをまるっと記述する

   diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
   index 21f1a06..2444713 100644
   --- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
   +++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
   @@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
    
    - (void)displayLayer:(CALayer *)layer
    {
   +  if (!_currentFrame) {
   +    _currentFrame = self.image;
   +  }
      if (_currentFrame) {
        layer.contentsScale = self.animatedImageScale;
        layer.contents = (__bridge id)_currentFrame.CGImage;
   diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
   new file mode 100644
   index 0000000..361f5fb
   --- /dev/null
   +++ b/node_modules/react-native/scripts/.packager.env
   @@ -0,0 +1 @@
   +export RCT_METRO_PORT=8081
   

5. CLIで以下のコマンドを実行する

   patch-package

---

上記の流れが完了し、Xcodeで再ビルドすると、画像がうまく表示されるようになった！！

参考サイト

https://github.com/facebook/react-native/issues/29279

もしこれでも上手く行かない場合は、キャッシュクリアで上手くいく場合があります。

ReactNativeのキャッシュクリアについては、以下のサイトにまとめていますので、参考に頂ければ幸いです。

https://zenn.dev/taizo_pro/articles/c69a167f3d5bfd