Patch v0.0.6

xerdnu · Oct 16, 2023 · ba68d23 · ba68d23
1 parent 2fa7c6f
commit ba68d23
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [0.0.6] (2023-10-16)
+
+#### Improvements
+
+-   Added support for local images using `require`
+
+#### Changes
+
+-   Updated documentation.
+
 ## [0.0.5] (2023-10-16)
 
 #### Bug Fixes
@@ -39,6 +49,7 @@
 
 -   Initial release.
 
+[0.0.6]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.5...v0.0.6
 [0.0.5]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.4...v0.0.5
 [0.0.4]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.3...v0.0.4
 [0.0.3]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.2...v0.0.3

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Caching has always been a challenge for me with the Image component in React Nat
 
 ## Features
 
-- **Performance**: Bypasses the React Native Image component for immediate and lightning-fast image display.
+- **Performance**: Bypasses the React Native Image component for remote images, ensuring immediate and lightning-fast display.
 - **Cross-Platform**: Works on both Android (with [Glide](https://github.com/bumptech/glide)) and iOS (with [SDWebImage](https://github.com/SDWebImage/SDWebImage))
 - **Customizable**: Wrapped within a `View` for added layout and style customization.
 - **Robust Caching**: Benefits from both memory and disk caching for maximum performance.
@@ -34,8 +34,18 @@ Here's a simple example to get you started:
 ```jsx
 import BlastedImage from 'react-native-blasted-image';
 
+// Remote image
 <BlastedImage 
-  source={{ uri: 'https://example.com/image.jpg' }} 
+  source={{ uri: 'https://example.com/image.png' }} 
+  resizeMode="cover"
+  width={200}
+  height={200}
+  style={{ borderRadius: 10 }}
+/>
+
+// Local image
+<BlastedImage 
+  source={ require('./assets/image.png') } 
   resizeMode="cover"
   width={200}
   height={200}
@@ -46,7 +56,7 @@ import BlastedImage from 'react-native-blasted-image';
 ## Paramaters
 | Parameter    | Type              | Description                                                                                         | Default |
 |--------------|-------------------|-----------------------------------------------------------------------------------------------------|---------|
-| `source`     | `Object`          | (**Required**) Object containing a `uri` string for the remote image.                                   | -       |
+| `source`     | `Object` or `require` | (**Required**) Can be an object containing a `uri` string for remote images or local images using `require`.     | -       |
 | `width`      | `Number`          | (Optional) Specifies the width of the image. `Overrides width in style`                                                        | 100     |
 | `height`     | `Number`          | (Optional) Specifies the height of the image. `Overrides height in style`                                                      | 100     |
 | `resizeMode` | `String`          | (Optional) Resize the image with one of the options: `cover` `contain` `center` `stretch`  | cover |
@@ -63,7 +73,7 @@ BlastedImage.preload([
 ```
 | Method                          | PropType                  | Description                                              |
 |---------------------------------|---------------------------|----------------------------------------------------------|
-| `BlastedImage.preload()`        | `Array<{ uri: string }>`  | Preloads images from an array of URIs.                   |
+| `BlastedImage.preload()`        | `Array<{ uri: string }>`  | Preloads remote images from an array of URIs.                   |
 | `BlastedImage.clearDiskCache()` | -                         | Clears the disk cache for all images.                    |
 | `BlastedImage.clearMemoryCache()`| -                         | Clears the memory cache for all images.                  |
 | `BlastedImage.clearAllCaches()` | -                         | Clears both disk and memory caches for all images.       |
@@ -84,7 +94,7 @@ useEffect(() => {
 ```
 | Event                          | Description                                              |
 |---------------------------------|-------------------------------------------------------------------|
-| `BlastedEventLoaded`        | Triggered when images are successfully loaded.                  |
+| `BlastedEventLoaded`        | Triggered when remote images are successfully loaded.                  |
 | `BlastedEventClearedMemory` | Triggered when the memory cache for all images is cleared.                    |
 | `BlastedEventClearedDisk`| Triggered when the disk cache for all images is cleared.                  |
 | `BlastedEventClearedAll` | Triggered when both disk and memory caches for all images are cleared.       |

diff --git a/index.js b/index.js
@@ -27,12 +27,20 @@ const BlastedImageView = requireNativeComponent('BlastedImageView');
 const BlastedImage = ({ source, width, height, style, resizeMode }) => {
   const [error, setError] = useState(false);
 
-  if (!source || !source.uri) {
-    console.log("Source not specified correctly -> <BlastedImage source={{ uri: 'https://example.com/image.jpg' }} />");
+  if (!source || (!source.uri && typeof source !== 'number')) {
+    if (!source) {
+        console.error("Source not specified for BlastedImage.");
+    } else {
+        console.error("Source should be either a URI <BlastedImage source={{ uri: 'https://example.com/image.jpg' }} /> or a local image using <BlastedImage source={ require('https://example.com/image.jpg') } />");
+    }
     return null;
   }
 
   useEffect(() => {
+    if (typeof source === 'number') {
+      return;
+    }
+
     const fetchImage = async () => {
       try {
         await loadImage(source.uri, source.headers);
@@ -83,6 +91,8 @@ const BlastedImage = ({ source, width, height, style, resizeMode }) => {
     <View style={viewStyle}>
       {error ? (
         <Image source={require('./assets/image-error.png')} style={{width:adjustedHeight,height:adjustedHeight}} resizeMode={resizeMode} />
+      ) : (typeof source === 'number') ? (
+        <Image source={source} style={{ width: adjustedWidth, height: adjustedHeight }} resizeMode={resizeMode} />
       ) : (
         <BlastedImageView 
           sourceUri={source.uri} 

diff --git a/package.json b/package.json
@@ -1,13 +1,16 @@
 {
   "name": "react-native-blasted-image",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A simple yet powerful image component for React Native, powered by Glide and SDWebImage",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "react-native"
+    "react-native",
+    "cached",
+    "image",
+    "image-cache"
   ],
   "author": "xerdnu",
   "license": "MIT, BSD, Apache-2.0",