diff --git a/CHANGELOG.md b/CHANGELOG.md
index fee5e51..b34fc99 100644
--- 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
index e7343dd..abd70e1 100644
--- 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` `contain` `center` `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}`.
See [View Style Props](https://reactnative.dev/docs/view-style-props) for all available styles. | - |
## Methods
diff --git a/index.js b/index.js
index 6bb2b89..1a27875 100644
--- 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 (
-
- {error ? (
-
- ) : (typeof source === 'number') ? (
-
+
+ {isBackground ? (
+
+ {renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode)}
+
) : (
-
+ renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode)
)}
+ {isBackground && {children}}
);
};
+function renderImageContent(error, source, adjustedHeight, adjustedWidth, resizeMode) {
+ if (error) {
+ return (
+
+ );
+ } else if (typeof source === 'number') {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+}
+
BlastedImage.defaultProps = {
- resizeMode: "cover"
+ resizeMode: "cover",
+ isBackground: false
};
// clear memory cache
diff --git a/package.json b/package.json
index 43ad191..9f37c4a 100644
--- 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",