Patch v0.0.10

xerdnu · Oct 24, 2023 · a9a30ca · a9a30ca
1 parent 7313d18
commit a9a30ca
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [0.0.10] (2023-10-24)
+
+#### Improvements
+
+-   Added the prop `isBackground` to act as a container background similar to the native `ImageBackground` component.
+
+#### Bug Fixes
+
+-   Fixed a bug that caused the error image not to display.
+
+#### Changes
+
+-   Updated documentation.
+
 ## [0.0.9] (2023-10-19)
 
 #### Improvements
@@ -77,6 +91,7 @@
 
 -   Initial release.
 
+[0.0.10]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.9...v0.0.10
 [0.0.9]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.8...v0.0.9
 [0.0.8]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.7...v0.0.8
 [0.0.7]: https://github.com/xerdnu/react-native-blasted-image/compare/v0.0.6...v0.0.7

diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ import BlastedImage from 'react-native-blasted-image';
 | `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`&nbsp;`contain`&nbsp;`center`&nbsp;`stretch`  | cover |
+| `isBackground` | `Boolean`          | (Optional) Makes the image act as a container background similar to the native `ImageBackground` component  | false |
 | `style`      | `Object`          | (Optional) Styles to be applied to the image, e.g., `{borderRadius:20}`.<br>See [View Style Props](https://reactnative.dev/docs/view-style-props) for all available styles.                            | -       |
 
 ## Methods

diff --git a/index.js b/index.js
@@ -22,12 +22,13 @@ const NativeBlastedImage = NativeModules.BlastedImage
     return NativeBlastedImage.loadImage(imageUrl, headers, skipMemoryCache)
     .catch((error) => {
       console.error("Error loading image:", error);
+      throw error;
     });
 };
 
 const BlastedImageView = requireNativeComponent('BlastedImageView');
 
-const BlastedImage = ({ source, width, height, style, resizeMode }) => {
+const BlastedImage = ({ source, width, height, style, resizeMode, isBackground, children }) => {
   const [error, setError] = useState(false);
 
   if (!source || (!source.uri && typeof source !== 'number')) {
@@ -59,7 +60,7 @@ const BlastedImage = ({ source, width, height, style, resizeMode }) => {
   // Flatten styles if provided as an array, otherwise use style as-is
   const flattenedStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
 
-  const defaultStyle = { overflow: 'hidden', backgroundColor: style?.borderColor || 'transparent' }; // Use border color as background
+  const defaultStyle = { overflow: 'hidden', position: 'relative', backgroundColor: style?.borderColor || 'transparent' }; // Use border color as background
 
   const {
     width: styleWidth,  // Get width from style
@@ -100,26 +101,62 @@ const BlastedImage = ({ source, width, height, style, resizeMode }) => {
     height,
   };
 
+  const childrenStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    justifyContent:'center',
+    alignItems:'center',
+    width: adjustedWidth,
+    height: adjustedHeight,
+  };  
+
   return (
-    <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} />
+    <View style={!isBackground ? viewStyle : null}>
+      {isBackground ? (
+        <View style={viewStyle}>
+          {renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode)}
+        </View>
       ) : (
-        <BlastedImageView 
-          sourceUri={source.uri} 
-          width={adjustedWidth}
-          height={adjustedHeight}
-          resizeMode={resizeMode}
-        />
+        renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode)
       )}
+      {isBackground && <View style={childrenStyle}>{children}</View>}
     </View>
   );
 };
 
+function renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode) {
+  if (error) {
+    return (
+      <Image
+        source={require('./assets/image-error.png')}
+        style={{ width: adjustedHeight, height: adjustedHeight }}
+        resizeMode={resizeMode}
+      />
+    );
+  } else if (typeof source === 'number') {
+    return (
+      <Image
+        source={source}
+        style={{ width: adjustedWidth, height: adjustedHeight }}
+        resizeMode={resizeMode}
+      />
+    );
+  } else {
+    return (
+      <BlastedImageView
+        sourceUri={source.uri}
+        width={adjustedWidth}
+        height={adjustedHeight}
+        resizeMode={resizeMode}
+      />
+    );
+  }
+}
+
 BlastedImage.defaultProps = {
-  resizeMode: "cover"
+  resizeMode: "cover",
+  isBackground: false
 };
 
 // clear memory cache

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-blasted-image",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "A simple yet powerful image component for React Native, powered by Glide and SDWebImage",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,9 @@
     "react-native",
     "cached",
     "image",
-    "image-cache"
+    "image-cache",
+    "fastimage",
+    "fast-image"
   ],
   "author": "xerdnu",
   "license": "MIT, BSD, Apache-2.0",