iOS App: React-Native <Image> loading stops loading after a period of time in App

Question

We have built an iOS app using react-native and the react-native-tra k-player package along with the component. THe app was built successful and tested on the the iphpne 12 Max along with many other iphone models as the app is already available in the Apple Store under "Trop Rockit Radio". The app has an issue where after a period of time the component fails to load images into the app with a 'Netweork request failed' error. The app loads 1024x1024 pixel images every three or so minutes and is triggered whenever the react-native-track-player alerts that new metadata is received from our ShoutCast based radio station. Once the error occurred, we use the same device's webrrower to go to the web domain where the image database is held and the browser gets a 'Request timed out' error. This forces us to go into the iphone's setting and perform the 'Rest network settings' action. After the reset completes. everything starats working again for a while until the error occurs again.

Our image database comes from our website domain: rockitstudios.com and our music content from our ShoutCast provider.

Other symptoms include: If we minimize the app, the music player part of the app stop playing too and the app's widgets are somewhat un-responsive.

When we built the app, we used the Xcode capability settings to enable backgroud audio, background pictures and backgroud processes so that the app works when minimized.

It almost seems that there is an iOS custodial monitoring process that is killing the Image loading process after being triggered by it, then the same custodial process seems to stop other active processes associated with the app. Is this the case? If so. how do we solve the proben?

This issue occurs for both the Cellular Data and the Wi-Fi networks, and occurs on multiple networks around the globe, so it is not limited to a single network at one location.

I'd be happy tp post code snippets of the area in question as necessary.

The same react-native app's code was also successfully built on the Android platform and does not have any issues it too is in the Google Play store under the same title.

our iOS development (react-native + Xcode) environment from react-native info):

IOS version 14.4
Xcode version 12.4

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 481.24 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.5.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS
7.2
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: ^0.63.4 => 0.63.4
    react-native-macos: Not Found


npmGlobalPackages:
    *react-native*: Not Found

UPDATE: We performed some more testing and troubleshooting. Given that most of our customers are using iOS 14.4 and recent iphones (iPhone 11 and 12). We let the app play until the image loading fails, then we used the iPnone's Safari brouwser to go to the domain where the image database fails, "https://rockitstudios.com" and the page stopped working and returned 'Reqest timed out' error. We also went to our other domains including: "https://nomps.com", "https", "https://rockitbroadcasting.com" and noticed all of these domains have the sme timeout issue. However, when going to sites like google.com, facebook.com. and other websites we have no request timeout issues. This tells us that we have a singe hosting service that is hosting all of our domain that is having the timeout issue on our hosting service. When performing the 'Reset Network Settings' in the iPhone's settings panel, all of these domains start working again and the App's image loading starts working. Is this an iOS 14.4 SSL/TSL issue? All of our domains have their SSL certificates in place. Any ideas on debugging this or has a known solution to this issue? Also, our Android apps do not have this issue. You can try the "Trop Rockit Radio" app in the Apple Store and see the issue first hand.

Answer 1

Had a similar issue in my React Native app. The app is pretty image heavy, and we could pretty consistently (but not all the time) reproduce a bug where the app successfully loaded ~100 network images but then all future image load requests would time out. You could sometimes make the app "snap out" of this state by toggling between WiFi/cellular, or backgrounding the app and returning. Quitting the app and restarting produced the same result again: about 100 images loaded and then nothing. iOS only - did not happen on Android.

After lots of digging the fix was server side: we disabled the HTTP/3 (with QUIC) setting on our Cloudflare instance.