Estoy trabajando en una aplicación React Native que muestra un montón de imágenes en una de las pantallas, las URL de estas imágenes se obtienen de un proveedor externo a través de una API.

Recientemente, el proveedor pasó de Amazon S3 a Google Cloud Storage para servir las imágenes y ahora las imágenes no se muestran en la versión de lanzamiento de la aplicación de Android .

Estamos utilizando el componente Image de React Native Library para mostrar las imágenes.

 <Image testID={props.imageTestId} style={styles.cardImage} source={resultImageSource} width={props.imageWidth} height={props.imageHeight} resizeMode={resizeMode} defaultSource={defaultPlaceholderImage} />

Traté de buscar errores/advertencias relacionadas con la obtención/renderización de las imágenes, pero no pude encontrar ninguna.

Comparé las llamadas de red tanto para las antiguas URL de S3 como para las nuevas URL de GCS. La única diferencia importante que pude detectar es que S3 usa HTTP/1.1 y GCS usa HTTP/2 .

Solo para estar 100% seguro de que HTTP/2 es realmente la causa, creé mi propio depósito S3 para servir imágenes y puse AWS CloudFront CDN delante de eso (para controlar la versión HTTP).

• Intenté representar una imagen usando la nueva URL de CloudFront sobre HTTP/1.1, funcionó bien.
• Luego activé HTTP/2 en la configuración de CloudFront, y esta vez la imagen no se representó con la misma URL.

También se agregaron registros en todos los controladores de eventos del componente Imagen ( onLoadStart, onLoad, onLoadEnd, onProgress, onError ). En el caso de HTTP/2, solo se ejecuta onLoadStart , después de eso no hay registros, ni siquiera onError .

Sería muy útil si puedo obtener algunos consejos sobre cuáles podrían ser los próximos pasos para diagnosticar esto.

Nota: funciona bien en las compilaciones de depuración de Android y funciona bien en todas las compilaciones de iOS.

SDK/versiones de biblioteca e información del entorno

Androide:

 compileSdkVersion 30 minSdkVersion 23 targetSdkVersion 30 OkHttp 4.9.1

construir.gradle

 buildTypes { debug { debuggable true minifyEnabled false ... } release { debuggable false minifyEnabled true ... } }

reaccionar nativo:

 "react": "16.8.6", "react-native": "0.60.0"

Construir entorno:

La aplicación está integrada en una tubería de CI usando Fastlane