I am working on a React Native application which displays a bunch of images on one of the screens, URLs of these images are fetched from an external vendor via an API.
Recently, the vendor moved from Amazon S3 to Google Cloud Storage to serve the images and now the images are not rendering in the Release build of Android app.
We are using the Image component from React Native Library to display the images.
<Image
testID={props.imageTestId}
style={styles.cardImage}
source={resultImageSource}
width={props.imageWidth}
height={props.imageHeight}
resizeMode={resizeMode}
defaultSource={defaultPlaceholderImage} />
I tried to look for error/warnings related to fetching/rendering the images but couldn't find any.
I compared network calls for both old S3 URLs and new GCS URLs. The only major difference I could spot is that S3 uses HTTP/1.1 and GCS is using HTTP/2.
Just to be 100% sure that HTTP/2 is actually the cause, I created my own S3 bucket to serve images and put AWS CloudFront CDN in front of that(to control the HTTP version).
Also added logs in all event handlers of the Image component(onLoadStart, onLoad, onLoadEnd, onProgress, onError)
In case of HTTP/2 only onLoadStart executes, after that there are no logs, not even onError.
It would be really helpful if I can get some pointers on what could be the next steps to diagnose this.
Note: It works fine in the debug builds of Android, and it works fine on all iOS builds.
SDK/Library Versions and Environment Info
Android:
compileSdkVersion 30
minSdkVersion 23
targetSdkVersion 30
OkHttp 4.9.1
build.gradle
buildTypes {
debug {
debuggable true
minifyEnabled false
...
}
release {
debuggable false
minifyEnabled true
...
}
}
React Native:
"react": "16.8.6",
"react-native": "0.60.0"
Build Env:
App is built in a CI pipeline using Fastlane