fix(image): [android] cache control headers are being overwritten

[mateoguzmana]

Summary:

While trying to write some test cases for ReactOkHttpNetworkFetcher, I found that the cache control headers are not being sent over the network request correctly. These cache control headers are always being overwritten by the rest of the headers hence all the logic to set this custom cache control doesn't seem to be working as expected.

As per the Request headers docs, this seems to be the explanation:

/** Removes all headers on this builder and adds [headers]. */
open fun headers(headers: Headers) = commonHeaders(headers)

With the new approach by setting the headers first, we ensure that the cache control headers don't get overwritten but they would get added on top of the passed headers.

Notice that currently it seems to be overwriting these headers even if there are not headers passed from the Image component (AKA null/empty).

See my reproduction example in the test plan.

Changelog:

[ANDROID] [FIXED] - ReactOkHttpNetworkFetcher – cache control headers getting overwritten by the rest of the headers

Test Plan:

By creating the following component, we log the request headers using FLog with the previous and the new approach. See the difference on the outputs below:

Component:

<Image
  source={{
    uri: 'https://www.facebook.com/assets/fb_lite_messaging/E2EE-settings@3x.png?cacheBust=reload',
    cache: 'reload',
    headers: {
      'some-header': 'some-header-value',
    },
  }}
/>

Setting the headers last (current approach):

val request =
        Request.Builder()
            .cacheControl(cacheControlBuilder.build())
            .url(uri.toString())
            .headers(headers)
            .get()
            .build()
FLog.w("RequestHeaders", request.headers.toString())

Output (notice that the Cache-Control header is not present):

RequestHeaders  com.facebook.react.uiapp  W  some-header: some-header-value

---

New approach by setting the headers first:

val request =
        Request.Builder()
            .headers(headers)
            .cacheControl(cacheControlBuilder.build())
            .url(uri.toString())
            .get()
            .build()
FLog.w("RequestHeaders", request.headers.toString())

Output (Cache-Control is present now along with the passed headers):

RequestHeaders  com.facebook.react.uiapp   W  some-header: some-header-value
Cache-Control: no-cache, no-store

[facebook-github-bot]

@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@javache merged this pull request in 81cb166.

[react-native-bot]

This pull request was successfully merged by @mateoguzmana in 81cb166

^{When will my fix make it into a release? | How to file a pick request?}