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",