React Native Image requests over a single HTTP/2 connection

Question

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.)

---

Edit - More Information:

Our CloudFront distribution supports HTTP/2:

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

Tolyl

Seems like source prop excepts headers prop. Have you tried using that? – Harrovian

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? – Dotation

@Michael-sqlbot HTTP/2 is listed as a supported version on our cloudfront distribution, yes. I've added edits to the question details. – Tolyl

@Tolyl did you find a solution? We are experiencing the exact same issue – Heterogenesis

@AlbertoDallaporta no :/ ended up queuing up the images to load in the right order – Tolyl