React Native の Android 版ですべての画像が表示されない問題

画像をいっぱい表示するような（つまりごく一般的な）画面で、一部の画像しか表示されない問題が発生していました。

グレーの部分が画像が表示できてないところ

こんな感じにランダムに歯抜けになっちゃいます。歯抜けの仕方はリロードするたびに変わります。とってもストレスです。

環境

React Nativeのバージョン: 0.63.4
端末のAndroidバージョン: 12

解決

GitHub のこのスレッドに答えがありました。

[Android] not all images are shown · Issue #13600 · facebook/react-native

AndroidManifest.xml の <application> の属性に android:largeHeap="true" を1行追加するだけで改善しました。

$ vi android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.xx">

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- （中略） -->

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher"
        android:largeHeap="true"    <-追加
        android:allowBackup="false"
        android:theme="@style/AppTheme"
        tools:replace="android:allowBackup">

        <!-- （中略） -->

    </application>
</manifest>

android:largeHeap="true" は文字通り、ヒープ領域（メモリ領域）を大きめに取る設定のようです。（参考: <application>  |  Android デベロッパー  |  Android Developers）

これだけでストレスなく画像が表示されるようになりました！

こころなしかアプリのパフォーマンスも改善したような？

やったね。