feat(image): headers property support. Thanks to @Logikgate

Author: farfromrefug

packages/image/blueprint.md

@@ -372,7 +372,7 @@ Number value used as the downsampled width of the imageModule drawable.
 <@nativescript-community/ui-image:Img decodeHeight="100"/>
 ```
 
-- **headers** (iOS only)
+- **headers**
 
 Object that defines custom request headers to be sent with the image download request.
 

packages/image/platforms/android/include.gradle

@@ -1,6 +1,6 @@
 import groovy.json.JsonSlurper
 dependencies {
-	def frescoVersion =  project.hasProperty("frescoVersion") ? project.frescoVersion : "3.0.0"
+	def frescoVersion =  project.hasProperty("frescoVersion") ? project.frescoVersion : "3.1.3"
 
 	implementation("com.facebook.fresco:fresco:$frescoVersion") {
         exclude group: 'com.facebook.soloader', module: 'soloader'

packages/image/platforms/android/java/com/nativescript/image/DraweeView.java

@@ -272,6 +272,7 @@ protected void onDraw(Canvas canvas) {
     public void setUri(android.net.Uri uri, String jsonOptions, com.facebook.drawee.controller.ControllerListener listener) {
     ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(uri).setRotationOptions( com.facebook.imagepipeline.common.RotationOptions.autoRotate());
         JSONObject object = null;
+        JSONObject headers = null;
         if (jsonOptions.length() > 2) {
             try {
                 object = new JSONObject(jsonOptions);
@@ -297,9 +298,9 @@ public void setUri(android.net.Uri uri, String jsonOptions, com.facebook.drawee.
                 int blurDownSampling = object.optInt("blurDownSampling", 1);
                 requestBuilder = requestBuilder.setPostprocessor(new com.nativescript.image.ScalingBlurPostprocessor(2, blurRadius, blurDownSampling));
             }
+            headers = object.optJSONObject("headers");
         }
-        // ImageRequest request = requestBuilder.build();
-        ImageRequest request = NetworkImageRequest.fromBuilderWithHeaders(requestBuilder, object.optJSONObject("headers"));
+        ImageRequest request = NetworkImageRequest.fromBuilderWithHeaders(requestBuilder, headers);
 
         // if (object != null && object.optBoolean("async") == false) {
         //     DataSource<CloseableReference<CloseableImage>> dataSource =

packages/image/platforms/android/java/com/nativescript/image/NetworkImageRequest.java

@@ -10,6 +10,8 @@
 import java.util.Map;
 import java.util.Iterator;
 
+import android.util.Log;
+
 /** Extended ImageRequest with request headers */
 public class NetworkImageRequest extends ImageRequest {
 

packages/image/platforms/android/java/com/nativescript/image/OkHttpNetworkFetcher.java

@@ -2,6 +2,7 @@
 
 import android.net.Uri;
 import android.os.SystemClock;
+import android.util.Log;
 import com.facebook.imagepipeline.producers.NetworkFetcher;
 import java.util.Collections;
 import java.util.HashMap;
@@ -34,8 +35,8 @@ public void fetch(
       final NetworkFetcher.Callback callback) {
     fetchState.submitTime = SystemClock.elapsedRealtime();
     final Uri uri = fetchState.getUri();
-    Map<String, String> requestHeaders = null;
-    if (fetchState.getContext().getImageRequest() instanceof NetworkImageRequest) {
+      Map<String, String> requestHeaders = null;
+      if (fetchState.getContext().getImageRequest() instanceof NetworkImageRequest) {
       NetworkImageRequest networkImageRequest =
           (NetworkImageRequest) fetchState.getContext().getImageRequest();
       requestHeaders = networkImageRequest.getHeaders();
@@ -45,7 +46,6 @@ public void fetch(
     }
     final Request request =
         new Request.Builder()
-            .cacheControl(new CacheControl.Builder().noStore().build())
             .url(uri.toString())
             .headers(Headers.of(requestHeaders))
             .get()

packages/image/platforms/android/native-api-usage.json

@@ -27,7 +27,11 @@
         "com.facebook.drawee.backends.pipeline.info:ImagePerfData",
         "com.facebook.drawee.controller:ControllerListener",
         "com.nativescript.image:DraweeView",
+        "com.nativescript.image:OkHttpNetworkFetcher",
         "com.nativescript.image:ScalingBlurPostprocessor",
+        "com.facebook.imagepipeline.producers:NetworkFetcher",
+        "com.facebook.imagepipeline.backends.okhttp3:OkHttpImagePipelineConfigFactory",
+        "okhttp3:OkHttpClient",
         "android.graphics.drawable:Animatable",
         "com.facebook.imagepipeline.image:ImageInfo",
         "com.facebook.common.util:UriUtil",

src/image/index-common.ts

@@ -163,7 +163,7 @@ export class EventData implements IEventData {
 export type Stretch = 'none' | 'fill' | 'aspectFill' | 'aspectFit';
 
 export const srcProperty = new Property<ImageBase, string | ImageSource | ImageAsset>({ name: 'src' });
-export const headersProperty = new Property<ImageBase, Map<string, string>>({ name: 'headers' });
+export const headersProperty = new Property<ImageBase, Record<string, string>>({ name: 'headers' });
 export const lowerResSrcProperty = new Property<ImageBase, string>({ name: 'lowerResSrc' });
 export const placeholderImageUriProperty = new Property<ImageBase, string>({ name: 'placeholderImageUri' });
 export const failureImageUriProperty = new Property<ImageBase, string>({ name: 'failureImageUri' });
@@ -301,6 +301,7 @@ export abstract class ImageBase extends View {
     public alwaysFade: boolean;
     public noCache: boolean;
     public tintColor: Color;
+    headers: Record<string, string>;
 
     public readonly isLoading: boolean;
 

src/image/index.android.ts

@@ -19,6 +19,7 @@ import {
     blurRadiusProperty,
     fadeDurationProperty,
     failureImageUriProperty,
+    headersProperty,
     imageRotationProperty,
     lowerResSrcProperty,
     needRequestImage,
@@ -553,6 +554,11 @@ export class Img extends ImageBase {
         this.initImage();
     }
 
+    @needRequestImage
+    [headersProperty.setNative](value) {
+        this.initImage();
+    }
+
     [backgroundInternalProperty.setNative](value: Background) {
         super[backgroundInternalProperty.setNative](value);
         this.nativeViewProtected.setClipToOutline(value?.hasBorderRadius());
@@ -735,7 +741,8 @@ export class Img extends ImageBase {
                     lowerResSrc: this.lowerResSrc ? getUri(this.lowerResSrc, false) : undefined,
                     blurDownSampling: this.blurDownSampling,
                     autoPlayAnimations: this.autoPlayAnimations,
-                    tapToRetryEnabled: this.tapToRetryEnabled
+                    tapToRetryEnabled: this.tapToRetryEnabled,
+                    headers: this.headers
                 });
                 view.setUri(uri, options, this.controllerListener);
                 // const async = this.loadMode === 'async';

src/image/index.d.ts

@@ -195,7 +195,7 @@ export class Img extends View {
     decodeHeight: number;
 
     /**
-     * IOS: add custom headers to the image download request
+     * add custom headers to the image download request
      */
     headers: Record<string, string>;
 

src/image/index.ios.ts

@@ -277,7 +277,6 @@ export class Img extends ImageBase {
     mCacheKey: string;
 
     contextOptions = null;
-    headers: Map<string, string> = new Map<string, string>();
 
     get cacheKey() {
         return this.mCacheKey;
@@ -525,11 +524,11 @@ export class Img extends ImageBase {
                     });
                 }
 
-                if (this.headers.size > 0) {
+                if (this.headers) {
                     const requestModifier = SDWebImageDownloaderRequestModifier.requestModifierWithBlock((request: NSURLRequest): NSURLRequest => {
                         const newRequest = request.mutableCopy() as NSMutableURLRequest;
-                        this.headers.forEach((value, key) => {
-                            newRequest.addValueForHTTPHeaderField(value, key);
+                        Object.keys(this.headers).forEach((k) => {
+                            newRequest.addValueForHTTPHeaderField(this.headers[k], k);
                         });
 
                         return newRequest.copy();
@@ -589,12 +588,8 @@ export class Img extends ImageBase {
         this.progressBarColor = value;
     }
 
-    [headersProperty.getDefault](): Map<string, string> {
-        return new Map<string, string>();
-    }
-
+    @needRequestImage
     [headersProperty.setNative](value) {
-        this.headers = value;
     }
 
     [failureImageUriProperty.setNative]() {