react-native-fast-image 8.13.1 → 8.14.0

package/README.md

@@ -265,6 +265,31 @@ In this case the image will still be styled and laid out the same way as `FastIm
 
 If supplied, changes the color of all the non-transparent pixels to the given color.
 
+## `FastImageBackground`
+
+An image with content on top of it, like React Native's `ImageBackground`: a view that the image fills, with the children on top.
+
+Use it rather than giving `FastImage` children: in the next major version, `FastImage` won't render children, since the image will be a single native view ([#1137](https://github.com/DylanVann/react-native-fast-image/pull/1137)), which can't hold them. `FastImageBackground` works the same in both.
+
+```jsx
+import { FastImageBackground } from 'react-native-fast-image'
+
+const Banner = () => (
+    <FastImageBackground
+        source={{ uri: 'https://unsplash.it/400/200?image=1' }}
+        style={{ width: 200, height: 100 }}
+        imageStyle={{ borderRadius: 8 }}
+    >
+        <Text>On top of the image</Text>
+    </FastImageBackground>
+)
+```
+
+- `style`: the view's style (it sizes the view, which the image fills).
+- `imageStyle`: the image's style.
+- `imageRef`: a ref to the image.
+- The other props are `FastImage`'s, for the image.
+
 ## Static Methods
 
 ### `FastImage.preload: (source[]) => Promise<result[]>`

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java

@@ -18,7 +18,6 @@ import com.bumptech.glide.RequestManager;
 import com.bumptech.glide.load.model.GlideUrl;
 import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
-import com.bumptech.glide.request.Request;
 import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.request.target.DrawableImageViewTarget;
 import com.bumptech.glide.request.target.SizeReadyCallback;
@@ -472,7 +471,9 @@ class FastImageViewWithUrl extends AppCompatImageView {
     }
 
     public void clearView(@Nullable RequestManager requestManager) {
-        if (requestManager != null && getTag() != null && getTag() instanceof Request) {
+        // Glide keeps the view's request under its own tag id, not getTag().
+        // Without a request this does nothing.
+        if (requestManager != null) {
             requestManager.clear(this);
         }
     }

package/dist/index.cjs.js

@@ -1,3 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -169,6 +173,26 @@ const styles = react_native.StyleSheet.create({
 	},
 	imageContainer: { overflow: "hidden" }
 });
+const FastImageWithRef = FastImageComponent;
+/**
+* An image with content on top of it, like React Native's `ImageBackground`: a
+* view that the image fills, with the children on top. Use it rather than
+* giving `FastImage` children, which it won't render in the next major version
+* (the image will be a single native view). The other props go to the image;
+* the ref is the view's.
+*/
+const FastImageBackground = (0, react.forwardRef)(({ style, imageStyle, imageRef, children, importantForAccessibility, ...props }, ref) => /* @__PURE__ */ react.default.createElement(react_native.View, {
+	accessibilityIgnoresInvertColors: true,
+	importantForAccessibility,
+	style,
+	ref
+}, /* @__PURE__ */ react.default.createElement(FastImageWithRef, {
+	...props,
+	importantForAccessibility,
+	style: [react_native.StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
 const FastImageView = (0, react_native.requireNativeComponent)("FastImageView", FastImage, { nativeOnly: {
 	onFastImageLoadStart: true,
 	onFastImageProgress: true,
@@ -177,4 +201,5 @@ const FastImageView = (0, react_native.requireNativeComponent)("FastImageView",
 	onFastImageLoadEnd: true
 } });
 //#endregion
-module.exports = FastImage;
+exports.FastImageBackground = FastImageBackground;
+exports.default = FastImage;

package/dist/index.cjs.js.flow

@@ -96,6 +96,15 @@ export type FastImageProps = $ReadOnly<{|
     testID?: ?string,
 |}>
 
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
 declare export default class FastImage extends React$Component<FastImageProps> {
     static resizeMode: ResizeMode;
     static priority: Priority;

package/dist/index.d.ts

@@ -155,4 +155,22 @@ export interface FastImageStaticProperties {
     clearDiskCache: () => Promise<void>;
 }
 declare const FastImage: React.ComponentType<FastImageProps> & FastImageStaticProperties;
+export interface FastImageBackgroundProps extends Omit<FastImageProps, 'style' | 'children'> {
+    /** The container's style; the image fills it. */
+    style?: StyleProp<ViewStyle>;
+    /** The image's style. */
+    imageStyle?: StyleProp<ImageStyle>;
+    /** A ref to the image (the FastImage inside). */
+    imageRef?: React.Ref<any>;
+    /** Content shown on top of the image. */
+    children?: React.ReactNode;
+}
+/**
+ * An image with content on top of it, like React Native's `ImageBackground`: a
+ * view that the image fills, with the children on top. Use it rather than
+ * giving `FastImage` children, which it won't render in the next major version
+ * (the image will be a single native view). The other props go to the image;
+ * the ref is the view's.
+ */
+export declare const FastImageBackground: React.ComponentType<FastImageBackgroundProps>;
 export default FastImage;

package/dist/index.js

@@ -146,6 +146,26 @@ const styles = StyleSheet.create({
 	},
 	imageContainer: { overflow: "hidden" }
 });
+const FastImageWithRef = FastImageComponent;
+/**
+* An image with content on top of it, like React Native's `ImageBackground`: a
+* view that the image fills, with the children on top. Use it rather than
+* giving `FastImage` children, which it won't render in the next major version
+* (the image will be a single native view). The other props go to the image;
+* the ref is the view's.
+*/
+const FastImageBackground = forwardRef(({ style, imageStyle, imageRef, children, importantForAccessibility, ...props }, ref) => /* @__PURE__ */ React.createElement(View, {
+	accessibilityIgnoresInvertColors: true,
+	importantForAccessibility,
+	style,
+	ref
+}, /* @__PURE__ */ React.createElement(FastImageWithRef, {
+	...props,
+	importantForAccessibility,
+	style: [StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
 const FastImageView = requireNativeComponent("FastImageView", FastImage, { nativeOnly: {
 	onFastImageLoadStart: true,
 	onFastImageProgress: true,
@@ -154,4 +174,4 @@ const FastImageView = requireNativeComponent("FastImageView", FastImage, { nativ
 	onFastImageLoadEnd: true
 } });
 //#endregion
-export { FastImage as default };
+export { FastImageBackground, FastImage as default };

package/dist/index.js.flow

@@ -96,6 +96,15 @@ export type FastImageProps = $ReadOnly<{|
     testID?: ?string,
 |}>
 
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
 declare export default class FastImage extends React$Component<FastImageProps> {
     static resizeMode: ResizeMode;
     static priority: Priority;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.13.1",
+    "version": "8.14.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",