react-native-img-cache - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

build/index.d.ts

@@ -25,6 +25,9 @@ /// <reference types="react-native" />
 }
+export interface CustomCachedImageProps extends CachedImageProps {
+    component: new () => Component<any, any>;
+}
 export interface CachedImageState {
     path: string | undefined;
 }
-export declare class CachedImage extends Component<CachedImageProps, CachedImageState> {
+export declare abstract class BaseCachedImage<P extends CachedImageProps> extends Component<P, CachedImageState> {
     private uri;
@@ -35,6 +38,14 @@ private handler;
     private observe(uri, mutable);
+    protected getProps(): any;
     componentWillMount(): void;
-    componentWillReceiveProps(nextProps: CachedImageProps): void;
+    componentWillReceiveProps(nextProps: P): void;
     componentWillUnmount(): void;
+}
+export declare class CachedImage extends BaseCachedImage<CachedImageProps> {
+    constructor();
     render(): JSX.Element;
 }
+export declare class CustomCachedImage<P extends CustomCachedImageProps> extends BaseCachedImage<P> {
+    constructor();
+    render(): JSX.Element;
+}

build/index.js

@@ -121,3 +121,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
 }
-export class CachedImage extends Component {
+export class BaseCachedImage extends Component {
     constructor() {
@@ -142,2 +142,14 @@ super();
     }
+    getProps() {
+        const props = {};
+        Object.keys(this.props).forEach(prop => {
+            if (prop === "source") {
+                props["source"] = this.state.path ? { uri: FILE_PREFIX + this.state.path } : {};
+            }
+            else if (["mutable", "component"].indexOf(prop) === -1) {
+                props[prop] = this.props[prop];
+            }
+        });
+        return props;
+    }
     componentWillMount() {
@@ -155,15 +167,23 @@ const { mutable } = this.props;
     }
+}
+export class CachedImage extends BaseCachedImage {
+    constructor() {
+        super();
+    }
     render() {
-        const props = {};
-        Object.keys(this.props).forEach(prop => {
-            if (prop === "source") {
-                props.source = this.state.path ? { uri: FILE_PREFIX + this.state.path } : {};
-            }
-            else {
-                props[prop] = this.props[prop];
-            }
-        });
+        const props = this.getProps();
         return React.createElement(Image, __assign({}, props), this.props.children);
     }
 }
+export class CustomCachedImage extends BaseCachedImage {
+    constructor() {
+        super();
+    }
+    render() {
+        const { component } = this.props;
+        const props = this.getProps();
+        const Component = component;
+        return React.createElement(Component, __assign({}, props), this.props.children);
+    }
+}
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-native-img-cache",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "CachedImage component for React native",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -41,2 +41,23 @@ # React Native Image Cache
 
+### Custom Image Component
+
+By default, the `CachedImage` component is using the [standard RN Image component](https://facebook.github.io/react-native/docs/image.html).
+It is possible however to use a different component via `CustomCachedImage`. In the example below, we use the `Image` component from [react-native-image-progress](https://github.com/oblador/react-native-image-progress).
+
+```jsx
+import {CustomCachedImage} from "react-native-img-cache";
+
+import Image from 'react-native-image-progress';
+import ProgressBar from 'react-native-progress/Bar';
+
+<CustomCachedImage
+  component={Image}
+  source={{ uri: 'http://loremflickr.com/640/480/dog' }} 
+  indicator={ProgressBar} 
+  style={{
+    width: 320, 
+    height: 240, 
+  }}/>
+```
+
 ### ImageCache
@@ -43,0 +64,0 @@

No alert changes

Improved metrics

Total package byte prevSize

30480

increased by8.02%

Lines of code

234

increased by15.27%

Number of lines in readme file

110

increased by23.6%

No dependency changes