@amazon-devices/expo-image 2.0.1758683737

package/build/utils.d.ts

@@ -0,0 +1,17 @@
+import { ImageContentFit, ImageContentPosition, ImageContentPositionObject, ImageProps, ImageTransition } from './Image.types';
+/**
+ * If the `contentFit` is not provided, it's resolved from the equivalent `resizeMode` prop
+ * that we support to provide compatibility with React Native Image.
+ */
+export declare function resolveContentFit(contentFit?: ImageContentFit, resizeMode?: ImageProps['resizeMode']): ImageContentFit;
+/**
+ * It resolves a stringified form of the `contentPosition` prop to an object,
+ * which is the only form supported in the native code.
+ */
+export declare function resolveContentPosition(contentPosition?: ImageContentPosition): ImageContentPositionObject;
+/**
+ * If `transition` or `fadeDuration` is a number, it's resolved to a cross dissolve transition with the given duration.
+ * When `fadeDuration` is used, it logs an appropriate deprecation warning.
+ */
+export declare function resolveTransition(transition?: ImageProps['transition'], fadeDuration?: ImageProps['fadeDuration']): ImageTransition | null;
+//# sourceMappingURL=utils.d.ts.map

package/build/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,oBAAoB,EACpB,0BAA0B,EAE1B,UAAU,EACV,eAAe,EAChB,MAAM,eAAe,CAAC;AAMvB;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,CAAC,EAAE,eAAe,EAC5B,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,GACpC,eAAe,CA0BjB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,eAAe,CAAC,EAAE,oBAAoB,GACrC,0BAA0B,CAiC5B;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,EACrC,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,GACxC,eAAe,GAAG,IAAI,CAYxB"}

package/build/utils.js

@@ -0,0 +1,85 @@
+let loggedResizeModeDeprecationWarning = false;
+let loggedRepeatDeprecationWarning = false;
+let loggedFadeDurationDeprecationWarning = false;
+/**
+ * If the `contentFit` is not provided, it's resolved from the equivalent `resizeMode` prop
+ * that we support to provide compatibility with React Native Image.
+ */
+export function resolveContentFit(contentFit, resizeMode) {
+    if (contentFit) {
+        return contentFit;
+    }
+    if (resizeMode) {
+        if (!loggedResizeModeDeprecationWarning) {
+            console.log('[expo-image]: Prop "resizeMode" is deprecated, use "contentFit" instead');
+            loggedResizeModeDeprecationWarning = true;
+        }
+        switch (resizeMode) {
+            case 'contain':
+            case 'cover':
+                return resizeMode;
+            case 'stretch':
+                return 'fill';
+            case 'center':
+                return 'scale-down';
+            case 'repeat':
+                if (!loggedRepeatDeprecationWarning) {
+                    console.log('[expo-image]: Resize mode "repeat" is no longer supported');
+                    loggedRepeatDeprecationWarning = true;
+                }
+        }
+    }
+    return 'cover';
+}
+/**
+ * It resolves a stringified form of the `contentPosition` prop to an object,
+ * which is the only form supported in the native code.
+ */
+export function resolveContentPosition(contentPosition) {
+    if (typeof contentPosition === 'string') {
+        const contentPositionStringMappings = {
+            center: { top: '50%', left: '50%' },
+            top: { top: 0, left: '50%' },
+            right: { top: '50%', right: 0 },
+            bottom: { bottom: 0, left: '50%' },
+            left: { top: '50%', left: 0 },
+            'top center': { top: 0, left: '50%' },
+            'top right': { top: 0, right: 0 },
+            'top left': { top: 0, left: 0 },
+            'right center': { top: '50%', right: 0 },
+            'right top': { top: 0, right: 0 },
+            'right bottom': { bottom: 0, right: 0 },
+            'bottom center': { bottom: 0, left: '50%' },
+            'bottom right': { bottom: 0, right: 0 },
+            'bottom left': { bottom: 0, left: 0 },
+            'left center': { top: '50%', left: 0 },
+            'left top': { top: 0, left: 0 },
+            'left bottom': { bottom: 0, left: 0 },
+        };
+        const contentPositionObject = contentPositionStringMappings[contentPosition];
+        if (!contentPositionObject) {
+            console.warn(`[expo-image]: Content position "${contentPosition}" is invalid`);
+            return contentPositionStringMappings.center;
+        }
+        return contentPositionObject;
+    }
+    return contentPosition ?? { top: '50%', left: '50%' };
+}
+/**
+ * If `transition` or `fadeDuration` is a number, it's resolved to a cross dissolve transition with the given duration.
+ * When `fadeDuration` is used, it logs an appropriate deprecation warning.
+ */
+export function resolveTransition(transition, fadeDuration) {
+    if (typeof transition === 'number') {
+        return { duration: transition };
+    }
+    if (!transition && typeof fadeDuration === 'number') {
+        if (!loggedFadeDurationDeprecationWarning) {
+            console.warn('[expo-image]: Prop "fadeDuration" is deprecated, use "transition" instead');
+            loggedFadeDurationDeprecationWarning = true;
+        }
+        return { duration: fadeDuration };
+    }
+    return transition ?? null;
+}
+//# sourceMappingURL=utils.js.map

package/build/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ImageContentFit,\n  ImageContentPosition,\n  ImageContentPositionObject,\n  ImageContentPositionString,\n  ImageProps,\n  ImageTransition,\n} from './Image.types';\n\nlet loggedResizeModeDeprecationWarning = false;\nlet loggedRepeatDeprecationWarning = false;\nlet loggedFadeDurationDeprecationWarning = false;\n\n/**\n * If the `contentFit` is not provided, it's resolved from the equivalent `resizeMode` prop\n * that we support to provide compatibility with React Native Image.\n */\nexport function resolveContentFit(\n  contentFit?: ImageContentFit,\n  resizeMode?: ImageProps['resizeMode']\n): ImageContentFit {\n  if (contentFit) {\n    return contentFit;\n  }\n  if (resizeMode) {\n    if (!loggedResizeModeDeprecationWarning) {\n      console.log('[expo-image]: Prop \"resizeMode\" is deprecated, use \"contentFit\" instead');\n      loggedResizeModeDeprecationWarning = true;\n    }\n\n    switch (resizeMode) {\n      case 'contain':\n      case 'cover':\n        return resizeMode;\n      case 'stretch':\n        return 'fill';\n      case 'center':\n        return 'scale-down';\n      case 'repeat':\n        if (!loggedRepeatDeprecationWarning) {\n          console.log('[expo-image]: Resize mode \"repeat\" is no longer supported');\n          loggedRepeatDeprecationWarning = true;\n        }\n    }\n  }\n  return 'cover';\n}\n\n/**\n * It resolves a stringified form of the `contentPosition` prop to an object,\n * which is the only form supported in the native code.\n */\nexport function resolveContentPosition(\n  contentPosition?: ImageContentPosition\n): ImageContentPositionObject {\n  if (typeof contentPosition === 'string') {\n    const contentPositionStringMappings: Record<\n      ImageContentPositionString,\n      ImageContentPositionObject\n    > = {\n      center: { top: '50%', left: '50%' },\n      top: { top: 0, left: '50%' },\n      right: { top: '50%', right: 0 },\n      bottom: { bottom: 0, left: '50%' },\n      left: { top: '50%', left: 0 },\n      'top center': { top: 0, left: '50%' },\n      'top right': { top: 0, right: 0 },\n      'top left': { top: 0, left: 0 },\n      'right center': { top: '50%', right: 0 },\n      'right top': { top: 0, right: 0 },\n      'right bottom': { bottom: 0, right: 0 },\n      'bottom center': { bottom: 0, left: '50%' },\n      'bottom right': { bottom: 0, right: 0 },\n      'bottom left': { bottom: 0, left: 0 },\n      'left center': { top: '50%', left: 0 },\n      'left top': { top: 0, left: 0 },\n      'left bottom': { bottom: 0, left: 0 },\n    };\n    const contentPositionObject = contentPositionStringMappings[contentPosition];\n\n    if (!contentPositionObject) {\n      console.warn(`[expo-image]: Content position \"${contentPosition}\" is invalid`);\n      return contentPositionStringMappings.center;\n    }\n    return contentPositionObject;\n  }\n  return contentPosition ?? { top: '50%', left: '50%' };\n}\n\n/**\n * If `transition` or `fadeDuration` is a number, it's resolved to a cross dissolve transition with the given duration.\n * When `fadeDuration` is used, it logs an appropriate deprecation warning.\n */\nexport function resolveTransition(\n  transition?: ImageProps['transition'],\n  fadeDuration?: ImageProps['fadeDuration']\n): ImageTransition | null {\n  if (typeof transition === 'number') {\n    return { duration: transition };\n  }\n  if (!transition && typeof fadeDuration === 'number') {\n    if (!loggedFadeDurationDeprecationWarning) {\n      console.warn('[expo-image]: Prop \"fadeDuration\" is deprecated, use \"transition\" instead');\n      loggedFadeDurationDeprecationWarning = true;\n    }\n    return { duration: fadeDuration };\n  }\n  return transition ?? null;\n}\n"]}

package/build/web/AnimationManager.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ImageTransition } from '../Image.types';
+type Callbacks = {
+    onReady?: (() => void) | null;
+    onAnimationFinished?: (() => void) | null;
+    onMount?: (() => void) | null;
+    onError?: (() => void) | null;
+};
+export type AnimationManagerNode = [
+    key: string,
+    renderFunction: (renderProps: NonNullable<Callbacks>) => (className: string, style: React.CSSProperties) => React.ReactElement
+];
+export declare function getAnimatorFromTransition(transition: ImageTransition | null | undefined): {
+    startingClass: string;
+    animateInClass: string;
+    animateOutClass: string;
+    containerClass: string;
+    timingFunction: string;
+    animationClass: string;
+    duration: number;
+} | {
+    startingClass: string;
+    animateInClass: string;
+    animateOutClass: string;
+    containerClass: string;
+    timingFunction: "ease-in-out" | "ease-in" | "ease-out" | "linear" | null;
+    animationClass: "cross-dissolve" | "flip-from-top" | "flip-from-right" | "flip-from-bottom" | "flip-from-left" | "curl-up" | "curl-down";
+    duration: number;
+} | null;
+export default function AnimationManager({ children: renderFunction, initial, transition, recyclingKey, }: {
+    children: AnimationManagerNode;
+    initial: AnimationManagerNode | null;
+    transition: ImageTransition | null | undefined;
+    recyclingKey?: string | null | undefined;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=AnimationManager.d.ts.map

package/build/web/AnimationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationManager.d.ts","sourceRoot":"","sources":["../../src/web/AnimationManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,KAAK,SAAS,GAAG;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM;IACX,cAAc,EAAE,CACd,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,KAChC,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,YAAY;CAC3E,CAAC;AAgDF,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS;;;;;;;;;;;;;;;;SA+BvF;AAUD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EAAE,cAAc,EACxB,OAAO,EACP,UAAU,EACV,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CAC1C,qBA4GA"}

package/build/web/AnimationManager.js

@@ -0,0 +1,155 @@
+import React from 'react';
+const SUPPORTED_ANIMATIONS = [
+    'cross-dissolve',
+    'flip-from-left',
+    'flip-from-right',
+    'flip-from-top',
+    'flip-from-bottom',
+];
+function useAnimationManagerNode(node, initialStatus) {
+    const newNode = React.useMemo(() => {
+        if (!node) {
+            return null;
+        }
+        const [animationKey, renderFunction] = node;
+        // key, ReactElement, ref, callbacks
+        return {
+            animationKey,
+            persistedElement: renderFunction,
+            status: (initialStatus || 'mounted'),
+        };
+    }, [node?.[0]]);
+    return newNode;
+}
+function validateTimingFunctionForAnimation(animationClass, timingFunction) {
+    if (animationClass?.includes('flip')) {
+        if (timingFunction?.includes('ease')) {
+            return 'ease-in-out';
+        }
+        return 'linear';
+    }
+    return timingFunction || null;
+}
+function validateAnimationClass(effect) {
+    if (SUPPORTED_ANIMATIONS.includes(effect)) {
+        return effect;
+    }
+    return 'cross-dissolve';
+}
+export function getAnimatorFromTransition(transition) {
+    if (!transition?.duration) {
+        return null;
+    }
+    const animationClass = validateAnimationClass(transition.effect);
+    if (!animationClass) {
+        return {
+            startingClass: '',
+            animateInClass: '',
+            animateOutClass: '',
+            containerClass: '',
+            timingFunction: 'linear',
+            animationClass: '',
+            duration: 0,
+        };
+    }
+    const timingFunction = validateTimingFunctionForAnimation(animationClass, transition.timing);
+    const timingClass = `image-timing-${timingFunction}`;
+    return {
+        startingClass: `${animationClass}-start`,
+        animateInClass: [animationClass, 'transitioning', `${animationClass}-active`, timingClass].join(' '),
+        animateOutClass: [animationClass, `${animationClass}-end`, timingClass].join(' '),
+        containerClass: `${animationClass}-container`,
+        timingFunction,
+        animationClass,
+        duration: transition?.duration || 0,
+    };
+}
+export default function AnimationManager({ children: renderFunction, initial, transition, recyclingKey, }) {
+    const animation = getAnimatorFromTransition(transition);
+    const initialNode = useAnimationManagerNode(initial, 'active');
+    const [nodes, setNodes] = React.useState(initialNode ? [initialNode] : []);
+    const [prevRecyclingKey, setPrevRecyclingKey] = React.useState(recyclingKey ?? '');
+    if (prevRecyclingKey !== (recyclingKey ?? '')) {
+        setPrevRecyclingKey(recyclingKey ?? '');
+        setNodes(initialNode ? [initialNode] : []);
+    }
+    const removeAllNodesOfKeyExceptShowing = (key) => {
+        setNodes((n) => n.filter((node) => (key ? node.animationKey !== key : false) ||
+            node.status === 'in' ||
+            node.status === 'active'));
+    };
+    const newNode = useAnimationManagerNode(renderFunction);
+    React.useEffect(() => {
+        setNodes((n) => {
+            if (!newNode) {
+                return n;
+            }
+            const existingNodeIndex = n.findIndex((node) => node.animationKey === newNode.animationKey);
+            if (existingNodeIndex >= 0) {
+                if (animation) {
+                    return n.map((n2) => n2.animationKey === newNode.animationKey
+                        ? { ...newNode, status: 'in' }
+                        : { ...n2, status: 'out' });
+                }
+                else {
+                    return [{ ...newNode, status: 'in' }];
+                }
+            }
+            return [...n, newNode];
+        });
+    }, [newNode]);
+    function wrapNodeWithCallbacks(node) {
+        if (renderFunction[0] === node.animationKey) {
+            return renderFunction[1]({
+                onReady: () => {
+                    if (animation) {
+                        setNodes((nodes) => nodes.map((n) => (n === newNode ? { ...n, status: 'in' } : { ...n, status: 'out' })));
+                    }
+                    else {
+                        setNodes([{ ...node, status: 'in' }]);
+                    }
+                },
+                onAnimationFinished: () => {
+                    setNodes([{ ...node, status: 'in' }]);
+                },
+                onError: () => {
+                    setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));
+                },
+            });
+        }
+        if (initial?.[0] === node.animationKey) {
+            return initial[1]({
+                onAnimationFinished: () => {
+                    if (node.status === 'out') {
+                        removeAllNodesOfKeyExceptShowing(node.animationKey);
+                    }
+                },
+                onError: () => {
+                    setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));
+                },
+            });
+        }
+        return node.persistedElement({
+            onAnimationFinished: () => {
+                removeAllNodesOfKeyExceptShowing(node.animationKey);
+            },
+        });
+    }
+    const styles = {
+        transitionDuration: `${animation?.duration || 0}ms`,
+        transitionTimingFunction: animation?.timingFunction || 'linear',
+    };
+    const classes = {
+        in: animation?.animateInClass,
+        out: animation?.animateOutClass,
+        mounted: animation?.startingClass,
+    };
+    return (<>
+      {[...nodes]
+            .filter((n) => n.status !== 'errored')
+            .map((n) => (<div className={animation?.containerClass} key={n.animationKey}>
+            {wrapNodeWithCallbacks(n)(classes[n.status], styles)}
+          </div>))}
+    </>);
+}
+//# sourceMappingURL=AnimationManager.js.map

package/build/web/AnimationManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationManager.js","sourceRoot":"","sources":["../../src/web/AnimationManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ImageTransition } from '../Image.types';\n\ntype Callbacks = {\n  onReady?: (() => void) | null;\n  onAnimationFinished?: (() => void) | null;\n  onMount?: (() => void) | null;\n  onError?: (() => void) | null;\n};\n\nexport type AnimationManagerNode = [\n  key: string,\n  renderFunction: (\n    renderProps: NonNullable<Callbacks>\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement,\n];\n\nconst SUPPORTED_ANIMATIONS: ImageTransition['effect'][] = [\n  'cross-dissolve',\n  'flip-from-left',\n  'flip-from-right',\n  'flip-from-top',\n  'flip-from-bottom',\n];\n\ntype NodeStatus = 'mounted' | 'in' | 'active' | 'out' | 'errored';\n\nfunction useAnimationManagerNode(node: AnimationManagerNode | null, initialStatus?: NodeStatus) {\n  const newNode = React.useMemo(() => {\n    if (!node) {\n      return null;\n    }\n    const [animationKey, renderFunction] = node;\n    // key, ReactElement, ref, callbacks\n    return {\n      animationKey,\n      persistedElement: renderFunction,\n      status: (initialStatus || 'mounted') as NodeStatus,\n    };\n  }, [node?.[0]]);\n  return newNode;\n}\n\nfunction validateTimingFunctionForAnimation(\n  animationClass: ImageTransition['effect'],\n  timingFunction: ImageTransition['timing']\n) {\n  if (animationClass?.includes('flip')) {\n    if (timingFunction?.includes('ease')) {\n      return 'ease-in-out';\n    }\n    return 'linear';\n  }\n  return timingFunction || null;\n}\n\nfunction validateAnimationClass(effect: ImageTransition['effect']) {\n  if (SUPPORTED_ANIMATIONS.includes(effect)) {\n    return effect;\n  }\n  return 'cross-dissolve';\n}\n\nexport function getAnimatorFromTransition(transition: ImageTransition | null | undefined) {\n  if (!transition?.duration) {\n    return null;\n  }\n  const animationClass = validateAnimationClass(transition.effect);\n  if (!animationClass) {\n    return {\n      startingClass: '',\n      animateInClass: '',\n      animateOutClass: '',\n      containerClass: '',\n      timingFunction: 'linear',\n      animationClass: '',\n      duration: 0,\n    };\n  }\n\n  const timingFunction = validateTimingFunctionForAnimation(animationClass, transition.timing);\n  const timingClass = `image-timing-${timingFunction}`;\n\n  return {\n    startingClass: `${animationClass}-start`,\n    animateInClass: [animationClass, 'transitioning', `${animationClass}-active`, timingClass].join(\n      ' '\n    ),\n    animateOutClass: [animationClass, `${animationClass}-end`, timingClass].join(' '),\n    containerClass: `${animationClass}-container`,\n    timingFunction,\n    animationClass,\n    duration: transition?.duration || 0,\n  };\n}\n\ntype MountedAnimationNode = {\n  animationKey: string;\n  persistedElement: (\n    renderProps: Callbacks\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement;\n  status: NodeStatus;\n};\n\nexport default function AnimationManager({\n  children: renderFunction,\n  initial,\n  transition,\n  recyclingKey,\n}: {\n  children: AnimationManagerNode;\n  initial: AnimationManagerNode | null;\n  transition: ImageTransition | null | undefined;\n  recyclingKey?: string | null | undefined;\n}) {\n  const animation = getAnimatorFromTransition(transition);\n\n  const initialNode = useAnimationManagerNode(initial, 'active');\n\n  const [nodes, setNodes] = React.useState<MountedAnimationNode[]>(\n    initialNode ? [initialNode] : []\n  );\n\n  const [prevRecyclingKey, setPrevRecyclingKey] = React.useState<string>(recyclingKey ?? '');\n  if (prevRecyclingKey !== (recyclingKey ?? '')) {\n    setPrevRecyclingKey(recyclingKey ?? '');\n    setNodes(initialNode ? [initialNode] : []);\n  }\n\n  const removeAllNodesOfKeyExceptShowing = (key?: string) => {\n    setNodes((n) =>\n      n.filter(\n        (node) =>\n          (key ? node.animationKey !== key : false) ||\n          node.status === 'in' ||\n          node.status === 'active'\n      )\n    );\n  };\n\n  const newNode = useAnimationManagerNode(renderFunction);\n\n  React.useEffect(() => {\n    setNodes((n) => {\n      if (!newNode) {\n        return n;\n      }\n      const existingNodeIndex = n.findIndex((node) => node.animationKey === newNode.animationKey);\n      if (existingNodeIndex >= 0) {\n        if (animation) {\n          return n.map((n2) =>\n            n2.animationKey === newNode.animationKey\n              ? { ...newNode, status: 'in' }\n              : { ...n2, status: 'out' }\n          );\n        } else {\n          return [{ ...newNode, status: 'in' }];\n        }\n      }\n      return [...n, newNode];\n    });\n  }, [newNode]);\n\n  function wrapNodeWithCallbacks(node: MountedAnimationNode) {\n    if (renderFunction[0] === node.animationKey) {\n      return renderFunction[1]({\n        onReady: () => {\n          if (animation) {\n            setNodes((nodes) =>\n              nodes.map((n) => (n === newNode ? { ...n, status: 'in' } : { ...n, status: 'out' }))\n            );\n          } else {\n            setNodes([{ ...node, status: 'in' }]);\n          }\n        },\n        onAnimationFinished: () => {\n          setNodes([{ ...node, status: 'in' }]);\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    if (initial?.[0] === node.animationKey) {\n      return initial[1]({\n        onAnimationFinished: () => {\n          if (node.status === 'out') {\n            removeAllNodesOfKeyExceptShowing(node.animationKey);\n          }\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    return node.persistedElement({\n      onAnimationFinished: () => {\n        removeAllNodesOfKeyExceptShowing(node.animationKey);\n      },\n    });\n  }\n  const styles = {\n    transitionDuration: `${animation?.duration || 0}ms`,\n    transitionTimingFunction: animation?.timingFunction || 'linear',\n  };\n  const classes = {\n    in: animation?.animateInClass,\n    out: animation?.animateOutClass,\n    mounted: animation?.startingClass,\n  };\n\n  return (\n    <>\n      {[...nodes]\n        .filter((n) => n.status !== 'errored')\n        .map((n) => (\n          <div className={animation?.containerClass} key={n.animationKey}>\n            {wrapNodeWithCallbacks(n)(classes[n.status], styles)}\n          </div>\n        ))}\n    </>\n  );\n}\n"]}

package/build/web/ColorTintFilter.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function getTintColorStyle(tintColor?: string | null): {
+    filter?: undefined;
+} | {
+    filter: string;
+};
+type TintColorFilterProps = {
+    tintColor?: string | null;
+};
+export default function TintColorFilter({ tintColor }: TintColorFilterProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=ColorTintFilter.d.ts.map

package/build/web/ColorTintFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTintFilter.d.ts","sourceRoot":"","sources":["../../src/web/ColorTintFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;;;;EAO1D;AAED,KAAK,oBAAoB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,4BAc1E"}

package/build/web/ColorTintFilter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+export function getTintColorStyle(tintColor) {
+    if (!tintColor) {
+        return {};
+    }
+    return {
+        filter: `url(#expo-image-tint-${tintColor})`,
+    };
+}
+export default function TintColorFilter({ tintColor }) {
+    if (!tintColor) {
+        return null;
+    }
+    return (<svg style={styles.svg}>
+      <defs>
+        <filter id={`expo-image-tint-${tintColor}`} x="0" y="0" width="0" height="0">
+          <feFlood floodColor={tintColor} floodOpacity="1" result="flood"/>
+          <feComposite in="flood" in2="SourceAlpha" operator="in"/>
+        </filter>
+      </defs>
+    </svg>);
+}
+const styles = StyleSheet.create({
+    svg: {
+        width: 0,
+        height: 0,
+    },
+});
+//# sourceMappingURL=ColorTintFilter.js.map

package/build/web/ColorTintFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTintFilter.js","sourceRoot":"","sources":["../../src/web/ColorTintFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAC,SAAyB;IACzD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,wBAAwB,SAAS,GAAG;KAC7C,CAAC;AACJ,CAAC;AAID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAwB;IACzE,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CACrB;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,mBAAmB,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAC1E;UAAA,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,EAC/D;UAAA,CAAC,WAAW,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,EACzD;QAAA,EAAE,MAAM,CACV;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,GAAG,EAAE;QACH,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nexport function getTintColorStyle(tintColor?: string | null) {\n  if (!tintColor) {\n    return {};\n  }\n  return {\n    filter: `url(#expo-image-tint-${tintColor})`,\n  };\n}\n\ntype TintColorFilterProps = { tintColor?: string | null };\n\nexport default function TintColorFilter({ tintColor }: TintColorFilterProps) {\n  if (!tintColor) {\n    return null;\n  }\n  return (\n    <svg style={styles.svg}>\n      <defs>\n        <filter id={`expo-image-tint-${tintColor}`} x=\"0\" y=\"0\" width=\"0\" height=\"0\">\n          <feFlood floodColor={tintColor} floodOpacity=\"1\" result=\"flood\" />\n          <feComposite in=\"flood\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n\nconst styles = StyleSheet.create({\n  svg: {\n    width: 0,\n    height: 0,\n  },\n});\n"]}

package/build/web/ImageWrapper.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ImageWrapperProps } from './ImageWrapper.types';
+declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLImageElement>>;
+export default ImageWrapper;
+//# sourceMappingURL=ImageWrapper.d.ts.map

package/build/web/ImageWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWrapper.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAqBzD,QAAA,MAAM,YAAY,4FA0DjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/web/ImageWrapper.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';
+import { getImageWrapperEventHandler } from './getImageWrapperEventHandler';
+import { useHeaders, useImageHashes } from './hooks';
+import { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';
+function getFetchPriorityFromImagePriority(priority = 'normal') {
+    return priority && ['low', 'high'].includes(priority) ? priority : 'auto';
+}
+function getImgPropsFromSource(source) {
+    if (source && 'srcset' in source) {
+        return {
+            srcSet: source.srcset,
+            sizes: source.sizes,
+        };
+    }
+    return {};
+}
+const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPlaceholderContentPosition, priority, style, hashPlaceholderStyle, tintColor, className, accessibilityLabel, cachePolicy, ...props }, ref) => {
+    useEffect(() => {
+        events?.onMount?.forEach((e) => e?.());
+    }, []);
+    // Thumbhash uri always has to start with 'thumbhash:/'
+    const { resolvedSource, isImageHash } = useImageHashes(source);
+    const objectPosition = getObjectPositionFromContentPositionObject(isImageHash ? hashPlaceholderContentPosition : contentPosition);
+    const sourceWithHeaders = useHeaders(resolvedSource, cachePolicy, events?.onError);
+    if (!sourceWithHeaders) {
+        return null;
+    }
+    return (<>
+        <ColorTintFilter tintColor={tintColor}/>
+        <img ref={ref} alt={accessibilityLabel} className={className} src={sourceWithHeaders?.uri || undefined} key={source?.uri} style={{
+            objectPosition,
+            ...absoluteFilledPosition,
+            ...getTintColorStyle(tintColor),
+            ...style,
+            ...(isImageHash ? hashPlaceholderStyle : {}),
+        }} 
+    // @ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
+    fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')} {...getImageWrapperEventHandler(events, sourceWithHeaders)} {...getImgPropsFromSource(source)} {...props}/>
+      </>);
+});
+export default ImageWrapper;
+//# sourceMappingURL=ImageWrapper.js.map

package/build/web/ImageWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAO,MAAM,OAAO,CAAC;AAE9C,OAAO,eAAe,EAAE,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,0CAA0C,EAAE,MAAM,eAAe,CAAC;AAInG,SAAS,iCAAiC,CAAC,WAAyC,QAAQ;IAC1F,OAAO,QAAQ,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAC5E,CAAC;AAED,SAAS,qBAAqB,CAAC,MAAqD;IAClF,IAAI,MAAM,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;QACjC,OAAO;YACL,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,MAAM,EACN,MAAM,EACN,eAAe,EACf,8BAA8B,EAC9B,QAAQ,EACR,KAAK,EACL,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,GAAG,KAAK,EACU,EACpB,GAA0B,EAC1B,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uDAAuD;IACvD,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,0CAA0C,CAC/D,WAAW,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,eAAe,CAC/D,CAAC;IAEF,MAAM,iBAAiB,GAAG,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IACnF,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,EACE;QAAA,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EACtC;QAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,GAAG,CAAC,CAAC,kBAAkB,CAAC,CACxB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,GAAG,CAAC,CAAC,iBAAiB,EAAE,GAAG,IAAI,SAAS,CAAC,CACzC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CACjB,KAAK,CAAC,CAAC;YACL,cAAc;YACd,GAAG,sBAAsB;YACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC;YAC/B,GAAG,KAAK;YACR,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;SAC7C,CAAC;IACF,aAAa;IACb,qDAAqD;IACrD,aAAa,CAAC,CAAC,iCAAiC,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CACvE,IAAI,2BAA2B,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAC3D,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAClC,IAAI,KAAK,CAAC,EAEd;MAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { useEffect, Ref } from 'react';\n\nimport ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';\nimport { ImageWrapperProps } from './ImageWrapper.types';\nimport { getImageWrapperEventHandler } from './getImageWrapperEventHandler';\nimport { useHeaders, useImageHashes } from './hooks';\nimport { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';\nimport { SrcSetSource } from './useSourceSelection';\nimport { ImageNativeProps, ImageSource } from '../Image.types';\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nfunction getImgPropsFromSource(source: ImageSource | SrcSetSource | null | undefined) {\n  if (source && 'srcset' in source) {\n    return {\n      srcSet: source.srcset,\n      sizes: source.sizes,\n    };\n  }\n  return {};\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      tintColor,\n      className,\n      accessibilityLabel,\n      cachePolicy,\n      ...props\n    }: ImageWrapperProps,\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\n\n    // Thumbhash uri always has to start with 'thumbhash:/'\n    const { resolvedSource, isImageHash } = useImageHashes(source);\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isImageHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const sourceWithHeaders = useHeaders(resolvedSource, cachePolicy, events?.onError);\n    if (!sourceWithHeaders) {\n      return null;\n    }\n    return (\n      <>\n        <ColorTintFilter tintColor={tintColor} />\n        <img\n          ref={ref}\n          alt={accessibilityLabel}\n          className={className}\n          src={sourceWithHeaders?.uri || undefined}\n          key={source?.uri}\n          style={{\n            objectPosition,\n            ...absoluteFilledPosition,\n            ...getTintColorStyle(tintColor),\n            ...style,\n            ...(isImageHash ? hashPlaceholderStyle : {}),\n          }}\n          // @ts-ignore\n          // eslint-disable-next-line react/no-unknown-property\n          fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n          {...getImageWrapperEventHandler(events, sourceWithHeaders)}\n          {...getImgPropsFromSource(source)}\n          {...props}\n        />\n      </>\n    );\n  }\n);\n\nexport default ImageWrapper;\n"]}

package/build/web/ImageWrapper.types.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, SyntheticEvent } from 'react';
+import { SrcSetSource } from './useSourceSelection';
+import { ImageContentPositionObject, ImageProps, ImageSource } from '../Image.types';
+export type OnErrorEvent = (({ source }: {
+    source: ImageSource | null;
+}) => void) | undefined | null;
+export type OnLoadEvent = ((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null;
+export type OnTransitionEndEvent = (() => void) | undefined | null;
+export type OnMountEvent = (() => void) | undefined | null;
+export type ImageWrapperEvents = {
+    onLoad?: OnLoadEvent[];
+    onError?: OnErrorEvent[];
+    onTransitionEnd?: OnTransitionEndEvent[];
+    onMount?: OnMountEvent[];
+};
+export type ImageWrapperProps = {
+    source?: ImageSource | SrcSetSource | null;
+    events?: ImageWrapperEvents;
+    contentPosition?: ImageContentPositionObject;
+    hashPlaceholderContentPosition?: ImageContentPositionObject;
+    priority?: string | null;
+    style: CSSProperties;
+    tintColor?: string | null;
+    hashPlaceholderStyle?: CSSProperties;
+    className?: string;
+    accessibilityLabel?: string;
+    cachePolicy?: ImageProps['cachePolicy'];
+};
+//# sourceMappingURL=ImageWrapper.types.d.ts.map

package/build/web/ImageWrapper.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWrapper.types.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErF,MAAM,MAAM,YAAY,GACpB,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GACtD,SAAS,GACT,IAAI,CAAC;AACT,MAAM,MAAM,WAAW,GACnB,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,GAC1D,SAAS,GACT,IAAI,CAAC;AACT,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACzC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,8BAA8B,CAAC,EAAE,0BAA0B,CAAC;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACzC,CAAC"}

package/build/web/ImageWrapper.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageWrapper.types.js.map

package/build/web/ImageWrapper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageWrapper.types.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSProperties, SyntheticEvent } from 'react';\n\nimport { SrcSetSource } from './useSourceSelection';\nimport { ImageContentPositionObject, ImageProps, ImageSource } from '../Image.types';\n\nexport type OnErrorEvent =\n  | (({ source }: { source: ImageSource | null }) => void)\n  | undefined\n  | null;\nexport type OnLoadEvent =\n  | ((event: SyntheticEvent<HTMLImageElement, Event>) => void)\n  | undefined\n  | null;\nexport type OnTransitionEndEvent = (() => void) | undefined | null;\nexport type OnMountEvent = (() => void) | undefined | null;\n\nexport type ImageWrapperEvents = {\n  onLoad?: OnLoadEvent[];\n  onError?: OnErrorEvent[];\n  onTransitionEnd?: OnTransitionEndEvent[];\n  onMount?: OnMountEvent[];\n};\n\nexport type ImageWrapperProps = {\n  source?: ImageSource | SrcSetSource | null;\n  events?: ImageWrapperEvents;\n  contentPosition?: ImageContentPositionObject;\n  hashPlaceholderContentPosition?: ImageContentPositionObject;\n  priority?: string | null;\n  style: CSSProperties;\n  tintColor?: string | null;\n  hashPlaceholderStyle?: CSSProperties;\n  className?: string;\n  accessibilityLabel?: string;\n  cachePolicy?: ImageProps['cachePolicy'];\n};\n"]}

package/build/web/getImageWrapperEventHandler.d.ts

@@ -0,0 +1,8 @@
+import { ImageWrapperEvents } from './ImageWrapper.types';
+import { ImageSource } from '../Image.types';
+export declare function getImageWrapperEventHandler(events: ImageWrapperEvents | undefined, source: ImageSource): {
+    onLoad: (event: any) => void;
+    onTransitionEnd: () => void | undefined;
+    onError: () => void;
+};
+//# sourceMappingURL=getImageWrapperEventHandler.d.ts.map

package/build/web/getImageWrapperEventHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImageWrapperEventHandler.d.ts","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,kBAAkB,GAAG,SAAS,EACtC,MAAM,EAAE,WAAW;;;;EAsBpB"}

package/build/web/getImageWrapperEventHandler.js

@@ -0,0 +1,25 @@
+import { isBlurhashString } from '../utils/resolveSources';
+export function getImageWrapperEventHandler(events, source) {
+    return {
+        onLoad: (event) => {
+            if (typeof window !== 'undefined') {
+                // this ensures the animation will run, since the starting class is applied at least 1 frame before the target class set in the onLoad event callback
+                window.requestAnimationFrame(() => {
+                    events?.onLoad?.forEach((e) => e?.(event));
+                });
+            }
+            else {
+                events?.onLoad?.forEach((e) => e?.(event));
+            }
+        },
+        onTransitionEnd: () => events?.onTransitionEnd?.forEach((e) => e?.()),
+        onError: () => {
+            // A temporary workaround for blurhash blobs throwing opaque errors when used in an img tag.
+            if (source?.uri && isBlurhashString(source?.uri)) {
+                return;
+            }
+            events?.onError?.forEach((e) => e?.({ source: source || null }));
+        },
+    };
+}
+//# sourceMappingURL=getImageWrapperEventHandler.js.map

package/build/web/getImageWrapperEventHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImageWrapperEventHandler.js","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,UAAU,2BAA2B,CACzC,MAAsC,EACtC,MAAmB;IAEnB,OAAO;QACL,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAClC,qJAAqJ;gBACrJ,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC;QACD,eAAe,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QACrE,OAAO,EAAE,GAAG,EAAE;YACZ,4FAA4F;YAC5F,IAAI,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;gBACjD,OAAO;YACT,CAAC;YACD,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC;QACnE,CAAC;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { ImageWrapperEvents } from './ImageWrapper.types';\nimport { ImageSource } from '../Image.types';\nimport { isBlurhashString } from '../utils/resolveSources';\n\nexport function getImageWrapperEventHandler(\n  events: ImageWrapperEvents | undefined,\n  source: ImageSource\n) {\n  return {\n    onLoad: (event) => {\n      if (typeof window !== 'undefined') {\n        // this ensures the animation will run, since the starting class is applied at least 1 frame before the target class set in the onLoad event callback\n        window.requestAnimationFrame(() => {\n          events?.onLoad?.forEach((e) => e?.(event));\n        });\n      } else {\n        events?.onLoad?.forEach((e) => e?.(event));\n      }\n    },\n    onTransitionEnd: () => events?.onTransitionEnd?.forEach((e) => e?.()),\n    onError: () => {\n      // A temporary workaround for blurhash blobs throwing opaque errors when used in an img tag.\n      if (source?.uri && isBlurhashString(source?.uri)) {\n        return;\n      }\n      events?.onError?.forEach((e) => e?.({ source: source || null }));\n    },\n  };\n}\n"]}

package/build/web/hooks.d.ts

@@ -0,0 +1,13 @@
+import { OnErrorEvent } from './ImageWrapper.types';
+import { ImageNativeProps, ImageSource } from '../Image.types';
+export declare function useThumbhash(source: ImageSource | null | undefined): {
+    uri: string;
+} | null;
+export declare function useImageHashes(source: ImageSource | null | undefined): {
+    resolvedSource: ImageSource | {
+        uri: string;
+    } | null | undefined;
+    isImageHash: boolean;
+};
+export declare function useHeaders(source: ImageSource | null | undefined, cachePolicy: ImageNativeProps['cachePolicy'], onError?: OnErrorEvent[]): ImageSource | null | undefined;
+//# sourceMappingURL=hooks.d.ts.map

package/build/web/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/web/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK/D,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS;;SAQlE;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS;;;;;EAUpE;AAED,wBAAgB,UAAU,CACxB,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EACtC,WAAW,EAAE,gBAAgB,CAAC,aAAa,CAAC,EAC5C,OAAO,CAAC,EAAE,YAAY,EAAE,GACvB,WAAW,GAAG,IAAI,GAAG,SAAS,CAqChC"}