feat: allow headers

Custom headers can be passed to the hoc

Author: mnightingale

src/FileSystem.tsx

@@ -28,6 +28,7 @@ import {
 } from 'rxjs/operators'
 import uuid from 'react-native-uuid'
 import { CacheStrategy } from '.'
+import { HeaderFn } from './types'
 
 export interface CacheFileInfo {
   path: string | null
@@ -289,7 +290,7 @@ export class FileSystem {
   fetchFile(
     url: string,
     fileName: string | null = null,
-    headers?: { [key: string]: string },
+    headers?: RNFS.Headers,
   ): Observable<CacheFileInfo> {
     fileName = fileName || this.getFileNameFromUrl(url)
     const path = this.baseFilePath + fileName
@@ -427,6 +428,7 @@ export class FileSystem {
     componentId: string,
     cacheStrategy: CacheStrategy = 'immutable',
     fileName: string | null = null,
+    headers?: HeaderFn,
   ): Observable<CacheFileInfo> {
     if (!url) {
       return of({
@@ -468,16 +470,27 @@ export class FileSystem {
                     path: 'file://' + this.baseFilePath + fileName,
                     fileName,
                   } as CacheFileInfo),
-                  this.fetchFile(url, fileName, {
-                    'if-modified-since': new Date(stat.mtime).toUTCString(),
-                  }),
+                  from(
+                    new Promise<RNFS.Headers>((resolve) =>
+                      resolve(headers === undefined ? {} : headers()),
+                    ),
+                  ).pipe(
+                    mergeMap((headers) =>
+                      this.fetchFile(url, fileName, {
+                        'if-modified-since': new Date(stat.mtime).toUTCString(),
+                        ...headers,
+                      }),
+                    ),
+                  ),
                 ]).pipe(concatAll())
               }
             }
           }
 
           // Download
-          return this.fetchFile(url, fileName)
+          return from(
+            new Promise<RNFS.Headers>((resolve) => resolve(headers === undefined ? {} : headers())),
+          ).pipe(mergeMap((headers) => this.fetchFile(url, fileName, headers)))
         }),
         publishReplay(1),
         refCount(),

src/index.tsx

@@ -23,6 +23,7 @@ import { Image, ImageStyle, Platform, StyleProp } from 'react-native'
 import { BehaviorSubject, Subscription } from 'rxjs'
 import { skip, takeUntil } from 'rxjs/operators'
 import URL from 'url-parse'
+import { HeaderFn } from './types'
 
 export type CacheStrategy = 'immutable' | 'mutable'
 
@@ -56,6 +57,7 @@ export interface ReactNativeImageCacheHocOptions {
   cachePruneTriggerLimit?: number // Maximum size of image file cache in bytes before pruning occurs. Defaults to 15 MB.
   fileDirName?: string | null // Namespace local file writing to this directory. Defaults to 'react-native-image-cache-hoc'.
   defaultPlaceholder?: ReactNode | null
+  headers?: HeaderFn
 }
 
 const imageCacheHoc = <P extends object>(
@@ -174,6 +176,7 @@ const imageCacheHoc = <P extends object>(
         cachePruneTriggerLimit: options.cachePruneTriggerLimit || 1024 * 1024 * 15, // Maximum size of image file cache in bytes before pruning occurs. Defaults to 15 MB.
         fileDirName: options.fileDirName || null, // Namespace local file writing to this directory. Defaults to 'react-native-image-cache-hoc'.
         defaultPlaceholder: options.defaultPlaceholder || null, // Default placeholder component to render while remote image file is downloading. Can be overridden with placeholder prop. Defaults to <Image> component with style prop passed through.
+        headers: options.headers ?? (() => ({})),
       }
 
       // Init file system lib
@@ -236,7 +239,7 @@ const imageCacheHoc = <P extends object>(
 
           // Init the image cache logic
           this.subscription = this.fileSystem
-            .observable(url, this.componentId, cacheStrategy)
+            .observable(url, this.componentId, cacheStrategy, null, this.options.headers)
             .pipe(takeUntil(this.unmounted$.pipe(skip(1))))
             .subscribe((info) => this.onSourceLoaded(info))
         }
@@ -281,7 +284,7 @@ const imageCacheHoc = <P extends object>(
           FileSystem.lockCacheFile(nextFileName, this.componentId)
 
           this.subscription = this.fileSystem
-            .observable(nextUrl, this.componentId, cacheStrategy)
+            .observable(nextUrl, this.componentId, cacheStrategy, null, this.options.headers)
             .pipe(takeUntil(this.unmounted$.pipe(skip(1))))
             .subscribe((info) => this.onSourceLoaded(info))
         }

src/types.ts

@@ -0,0 +1,3 @@
+import RNFS from 'react-native-fs'
+
+export type HeaderFn = () => RNFS.Headers | Promise<RNFS.Headers>