[image] Add prefetch function parameter for HTTP headers (#28133)

apps/test-suite/tests/Image.js

@@ -195,6 +195,21 @@ export async function test(t, { setPortalChild, cleanupPortal }) {
           t.expect(path).toBe(null);
         }
       });
+
+      t.it('prefetches an image with headers and resolves promise to true', async () => {
+        await Image.clearDiskCache();
+        const result = await Image.prefetch(REMOTE_KNOWN_SOURCE.uri, {
+          headers: {
+            Referer: 'https://expo.dev',
+          },
+        });
+        t.expect(result).toBe(true);
+
+        if (Platform.OS === 'android' || Platform.OS === 'ios') {
+          const path = await Image.getCachePathAsync(REMOTE_KNOWN_SOURCE.uri);
+          t.expect(typeof path).toBe('string');
+        }
+      });
     });
 
     t.describe('generateBlurhashAsync', async () => {

packages/expo-image/CHANGELOG.md

@@ -7,6 +7,7 @@
 ### 🎉 New features
 
 - On `iOS`, support loading assets in the native project. This already worked on android. ([#27251](https://github.com/expo/expo/pull/27251) by [@alanjhughes](https://github.com/alanjhughes))
+- Support prefetching images with HTTP headers. ([#28133](https://github.com/expo/expo/pull/28133) by [@toy0605](https://github.com/toy0605))
 
 ### 🐛 Bug fixes
 

packages/expo-image/android/src/main/java/expo/modules/image/ExpoImageModule.kt

@@ -7,6 +7,8 @@ import com.bumptech.glide.load.DataSource
 import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.load.engine.GlideException
 import com.bumptech.glide.load.model.GlideUrl
+import com.bumptech.glide.load.model.Headers
+import com.bumptech.glide.load.model.LazyHeaders
 import com.bumptech.glide.request.RequestListener
 import com.bumptech.glide.request.target.Target
 import com.facebook.react.uimanager.PixelUtil
@@ -29,16 +31,24 @@ class ExpoImageModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("ExpoImage")
 
-    AsyncFunction("prefetch") { urls: List<String>, cachePolicy: CachePolicy, promise: Promise ->
+    AsyncFunction("prefetch") { urls: List<String>, cachePolicy: CachePolicy, headersMap: Map<String, String>?, promise: Promise ->
       val context = appContext.reactContext ?: return@AsyncFunction false
 
       var imagesLoaded = 0
       var failed = false
 
+      val headers = headersMap?.let {
+        LazyHeaders.Builder().apply {
+          it.forEach { (key, value) ->
+            addHeader(key, value.toString())
+          }
+        }.build()
+      } ?: Headers.DEFAULT
+
       urls.forEach {
         Glide
           .with(context)
-          .load(GlideUrl(it)) //  Use `load` instead of `download` to store the asset in the memory cache
+          .load(GlideUrl(it, headers)) //  Use `load` instead of `download` to store the asset in the memory cache
           // We added `quality` and `downsample` to create the same cache key as in final image load.
           .encodeQuality(100)
           .downsample(NoopDownsampleStrategy)