fix: Allow static headers

Author: mnightingale

src/FileSystem.tsx

@@ -12,7 +12,7 @@ import pathLib from 'path'
 import RNFS from 'react-native-fs'
 import sha1 from 'crypto-js/sha1'
 import URL from 'url-parse'
-import { from, Observable, of, ReplaySubject } from 'rxjs'
+import { defer, from, Observable, of, ReplaySubject } from 'rxjs'
 import {
   switchMap,
   catchError,
@@ -421,14 +421,15 @@ export class FileSystem {
    * @param componentId {String} - Unique id of the requestor.
    * @param cacheStrategy {CacheStrategy} - The cache strategy to use, defaults to 'immutable'.
    * @param fileName {String} - defaults to a sha1 hash of the url param with extension of same filetype.
+   * @param headers {HeaderFn} - Headers to include with requests
    * @returns {Observable<CacheFileInfo>} observable that resolves to an object that contains the local path of the downloaded file and the filename.
    */
   observable(
     url: string,
     componentId: string,
     cacheStrategy: CacheStrategy = 'immutable',
     fileName: string | null = null,
-    headers?: HeaderFn,
+    headers: HeaderFn = {},
   ): Observable<CacheFileInfo> {
     if (!url) {
       return of({
@@ -470,11 +471,7 @@ export class FileSystem {
                     path: 'file://' + this.baseFilePath + fileName,
                     fileName,
                   } as CacheFileInfo),
-                  from(
-                    new Promise<RNFS.Headers>((resolve) =>
-                      resolve(headers === undefined ? {} : headers()),
-                    ),
-                  ).pipe(
+                  defer(async () => (headers instanceof Function ? await headers() : headers)).pipe(
                     mergeMap((headers) =>
                       this.fetchFile(url, fileName, {
                         'if-modified-since': new Date(stat.mtime).toUTCString(),
@@ -488,9 +485,9 @@ export class FileSystem {
           }
 
           // Download
-          return from(
-            new Promise<RNFS.Headers>((resolve) => resolve(headers === undefined ? {} : headers())),
-          ).pipe(mergeMap((headers) => this.fetchFile(url, fileName, headers)))
+          return defer(async () => (headers instanceof Function ? await headers() : headers)).pipe(
+            mergeMap((headers) => this.fetchFile(url, fileName, headers)),
+          )
         }),
         publishReplay(1),
         refCount(),

src/index.tsx

@@ -80,6 +80,12 @@ const imageCacheHoc = <P extends object>(
   if (options.defaultPlaceholder && typeof options.defaultPlaceholder !== 'object') {
     throw new Error('defaultPlaceholder option must be a ReactNode')
   }
+  if (
+    options.headers &&
+    !(typeof options.headers === 'function' || typeof options.headers === 'object')
+  ) {
+    throw new Error('headers option must be a function or object')
+  }
 
   return class extends React.PureComponent<
     P & ReactNativeImageCacheHocProps,
@@ -176,7 +182,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 ?? (() => ({})),
+        headers: options.headers ?? {},
       }
 
       // Init file system lib

src/types.ts

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

tests/CacheableImage.test.tsx

@@ -52,12 +52,19 @@ describe('CacheableImage', function () {
       }),
     ).toThrow('defaultPlaceholder option must be a ReactNode')
 
+    expect(() =>
+      imageCacheHoc(Image, {
+        headers: 1 as any,
+      }),
+    ).toThrow('headers option must be a function or object')
+
     const validOptions: ReactNativeImageCacheHocOptions = {
       validProtocols: ['http', 'https'],
       fileHostWhitelist: ['i.redd.it', 'localhost'],
       cachePruneTriggerLimit: 1024 * 1024 * 10,
       fileDirName: 'test-dir',
       defaultPlaceholder: <Text>Default Placeholder</Text>,
+      headers: { foo: 'bar' },
     }
 
     // Valid options shouldn't throw an error