react-nativeexpo

React Native: error while updating property src of a view managed by RCTImageView


this one has been asked a bit here and around the web, but it seems every case is different. On a brand new Expo app, I can reliably crash it on Android (iOS is fine) with the following code:

export default function App() {
    const imageSource: ImageSourcePropType = [
        {
            scale: 1,
            uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=5fed1e5a71c1f4f36779adc528223badbff3cb8681608146e60fbee189d551be19daf2abe470a3df3e7bbe4c71c26d4a465e85486124a2fba93b5858d5d9b6e97e5b004fc25ce516f288ba1667ea98d7792c78d92f4857642dfe108b84ae9f66252154e6c8d6b049a30ec1322faf121e3f1f8d9384f1108ff18838ebf657efcf9ed9b9bb609b6e1de5e4c606738b0914df1464f1192b60b7713018bbfcac002ea82690ce501dc9c09eac7de80a1fcaa75d0b8b8effd5f1733aeee217089ab9636a9d7c691b776c7af22ff3ec8417f8d09369d8e9569775d77cc7626bf5702de1cbaaef955ac4aa7470b1b8582478a7967df6e342657b8a9d608d561d13d6a364',
        },
        {
            scale: 2,
            uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie%402x.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=2e1569010bf6dd29095548719a5d0d104123c105c7aaa278c0cd7d4c46f7df2ba00075a755913ed0014b2365784a3b4390bd11a2e7a59ddb11e6a9d1df2aaf974c3a6c7a0fb1a5a0b236b6f73d43a364fa38a5bd627417253042224312c9ca483b37ae78b2115ecd1f5badad1603862c287d3309dfb3fd2d85058234889e0483c49261c05d46acb8784a521c5326a9a636233efbdb9033b6e27156bce5ca9be9a9a1d036ea5f651f5b49e0dc80d35b0916c4b7c17422439ce533a1f46461679cfb64653562af20c7da136c213806f72c3f5f0501760d1657bb7dd85abae8da3ac2a79ac21322a0e4041a4a5bcc553e59bef4b1cfdff2816dc19c726a3cc1d901',
        },
        {
            scale: 3,
            uri: 'https://storage.googleapis.com/flwc-app-media/audio-speakers/2022-08/jessie%403x.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=nodejs-api%40flwc-production.iam.gserviceaccount.com%2F20220916%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220916T104214Z&X-Goog-Expires=1800&X-Goog-SignedHeaders=host&X-Goog-Signature=69eaecd6b88c6c6c5dbbc735944d04a0233936fe4bec51607e8c023bb27fd392d2e0570cc0798b34193dbdc78c6049de3d53c4f9250f01a2f6e33062a9b95267ad45e2000f04c4df5b9de6cc6f63bc30dc52211504291689c1fc2d63888e4070151cc676d98fd333f0371c4262a45a4a7fb304de433554d5c3a288fc19cc3696c5c9137dc46aae518dbd6dbbe8894390cf68fdb13db1d12ba420cdd9bdeef6e7190c28c2346a7a1024317cfdba658be444e41446a93545049049b17cc0b257b32d51cc1be7d5dcf93d833d56a276b6a98dee6b25b65d730a50951622de5a346051a28f8c6c4c4e345f16b3233e64a91425a0e80b3664f5f0bfa96779119b6095',
        },
    ]

    return <Image source={imageSource} />
}

If passing a single-element array as ImageSourcePropType, then the crash won't happen. So, specifically on Android, a multi-element array as image source makes the app crash.

Any clue what it could be?


Solution

  • Answering my own question: I've filled a React Native issue, and was told this is the intended behavior, as width and height are required when loading files from the network. I'm not sure why the single-element array doesn't cause a crash, nor why this used to work just fine under React Native 0.65, but the solution is to specific the dimensions of each image. Note that on iOS this works fine even without image dimensions.