8

We have many React Native <Image> components rendering per screen and are witnessing performance issues due to many simultaneous http requests. Opening and closing a connection is expensive, and having too many simultaneous connections can hit limitations that cause timeouts.

HTTP/2 features multiplexing, allowing multiple requests and response messages between the client and server to be in flight at the same time over a single connection, instead of multiple connections, which improves page load times.

CloudFront supports HTTP/2, HTTP/1.1, and HTTP/1 by default depending on the version the client sends up in the request header.

We noticed that our React Native app is sending HTTP/1.1 as the version in the request headers for any GET on an <Image>. Unlike popular apps, we're opening and closing a single connection for each GET. How do we make sure React Native Image requests use HTTP/2 and share a connection?

(Our images all share the same CloudFront domain.)

enter image description here

Edit - More Information:

Our CloudFront distribution supports HTTP/2:

enter image description here

And it appears the client and server are agreeing on h2:

enter image description here

sgarza62
  • 5,998
  • 8
  • 49
  • 69
  • 2
    Seems like `source` prop excepts [`headers`](https://github.com/facebook/react-native/blob/726d0012106316a40e36286f5eba0e881ef3bbba/Libraries/Image/ImageSource.js#L42) prop. Have you tried using that? – bennygenel Mar 12 '19 at 10:41
  • CloudFront supports HTTP/2 but it is not something that depends on a "request header" -- the two HTTP versions are not wire-compatible. You're showing `ALPN` `h2` which suggests you are *trying* to use it... so, first question: have you actually enabled the HTTP/2 feature on your CloudFront distribution? – Michael - sqlbot Mar 12 '19 at 23:12
  • @Michael-sqlbot HTTP/2 is listed as a supported version on our cloudfront distribution, yes. I've added edits to the question details. – sgarza62 Mar 13 '19 at 01:06
  • @sgarza62 did you find a solution? We are experiencing the exact same issue – Alberto Dallaporta Sep 05 '22 at 17:42
  • @AlbertoDallaporta no :/ ended up queuing up the images to load in the right order – sgarza62 Sep 26 '22 at 05:03

0 Answers0