@draftbit/core 50.6.1 → 50.6.2-bbb0a5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "50.6.1",
+  "version": "50.6.2-bbb0a5.2+bbb0a57",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -42,7 +42,7 @@
     "@date-io/date-fns": "^1.3.13",
     "@dotlottie/react-player": "1.6.1",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "50.6.1",
+    "@draftbit/theme": "^50.6.2-bbb0a5.2+bbb0a57",
     "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "5.0.0-alpha.7",
     "@lottiefiles/react-lottie-player": "3.5.3",
@@ -55,6 +55,7 @@
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
     "expo-av": "~13.10.6",
+    "expo-image": "1.10.6",
     "lodash.isequal": "^4.5.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
@@ -122,5 +123,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "34c5fe73043fbb66d05c432482196a1d2349e6b0"
+  "gitHead": "bbb0a57567d569643de097c356fd097ce68d6619"
 }

package/src/components/Image.js

@@ -1,6 +1,7 @@
 /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
 import React from "react";
-import { Image as NativeImage, StyleSheet, } from "react-native";
+import { StyleSheet } from "react-native";
+import { Image as ExpoImage, } from "expo-image";
 import Config from "./Config";
 import AspectRatio from "./AspectRatio";
 const generateDimensions = ({ aspectRatio, width, height, }) => {
@@ -26,15 +27,29 @@ const generateDimensions = ({ aspectRatio, width, height, }) => {
     }
     return { width, height };
 };
-const Image = ({ source, resizeMode = "cover", style, ...props }) => {
+const resizeModeToContentFit = (resizeMode) => {
+    // Convert deprecated resizeMode prop to contentFit prop used in expo-image
+    // Maps RN Image resizeMode values to their equivalent expo-image contentFit values
+    const mapping = {
+        cover: "cover",
+        contain: "contain",
+        stretch: "fill",
+        repeat: "none",
+        center: "scale-down",
+    };
+    return mapping[resizeMode] || "cover";
+};
+const Image = ({ source, resizeMode = "cover", style, placeholder, transition = 300, contentFit = "cover", contentPosition = "center", cachePolicy = "memory-disk", allowDownscaling = true, recyclingKey, ...props }) => {
     let imageSource = source === null || source === undefined
         ? Config.placeholderImageURL
         : source;
     const styles = StyleSheet.flatten(style || {});
     const { aspectRatio, width, height } = generateDimensions(styles);
+    // Use contentFit if provided, otherwise fall back to resizeMode
+    const finalContentFit = contentFit || resizeModeToContentFit(resizeMode);
     if (aspectRatio) {
         return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
-            React.createElement(NativeImage, { ...props, source: imageSource, resizeMode: resizeMode, style: [
+            React.createElement(ExpoImage, { ...props, source: imageSource, contentFit: finalContentFit, placeholder: placeholder, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, recyclingKey: recyclingKey, style: [
                     style,
                     {
                         height: "100%",
@@ -42,7 +57,7 @@ const Image = ({ source, resizeMode = "cover", style, ...props }) => {
                     },
                 ] })));
     }
-    return (React.createElement(NativeImage, { ...props, source: source, resizeMode: resizeMode, style: style }));
+    return (React.createElement(ExpoImage, { ...props, source: source, contentFit: finalContentFit, placeholder: placeholder, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, recyclingKey: recyclingKey, style: style }));
 };
 export default Image;
 //# sourceMappingURL=Image.js.map

package/src/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["Image.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,IAAI,WAAW,EAEpB,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,WAAW,MAAM,eAAe,CAAC;AAQxC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,WAAW,EACX,KAAK,EACL,MAAM,GACS,EAIf,EAAE;IACF,IAAI,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE;QACpC,OAAO;YACL,WAAW;YACX,KAAK,EAAE,MAAM;SACd,CAAC;KACH;IAED,IAAI,WAAW,IAAI,MAAM,EAAE;QACzB,OAAO;YACL,WAAW;YACX,MAAM;YACN,KAAK,EAAE,WAAW,GAAG,MAAM;SAC5B,CAAC;KACH;IAED,IAAI,WAAW,IAAI,KAAK,EAAE;QACxB,OAAO;YACL,WAAW;YACX,KAAK;YACL,MAAM,EAAE,KAAK,GAAG,WAAW;SAC5B,CAAC;KACH;IAED,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,KAAK,GAAyB,CAAC,EACnC,MAAM,EACN,UAAU,GAAG,OAAO,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,WAAW,GACb,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS;QACrC,CAAC,CAAC,MAAM,CAAC,mBAAmB;QAC5B,CAAC,CAAC,MAAM,CAAC;IAEb,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC/C,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,kBAAkB,CACvD,MAAwB,CACzB,CAAC;IAEF,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;YACzD,oBAAC,WAAW,OACN,KAAK,EACT,MAAM,EAAE,WAAkC,EAC1C,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE;oBACL,KAAK;oBACL;wBACE,MAAM,EAAE,MAAM;wBACd,KAAK,EAAE,MAAM;qBACd;iBACF,GACD,CACU,CACf,CAAC;KACH;IAED,OAAO,CACL,oBAAC,WAAW,OACN,KAAK,EACT,MAAM,EAAE,MAA6B,EACrC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["Image.tsx"],"names":[],"mappings":"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"}

package/src/components/Image.tsx

@@ -1,14 +1,12 @@
 /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
 import React from "react";
+import { StyleSheet, ImageSourcePropType, DimensionValue } from "react-native";
 import {
-  Image as NativeImage,
-  ImageProps,
-  StyleSheet,
-  ImageSourcePropType,
-  DimensionValue,
-} from "react-native";
+  Image as ExpoImage,
+  ImageContentPosition,
+  ImageProps as ExpoImageProps,
+} from "expo-image";
 import Config from "./Config";
-
 import AspectRatio from "./AspectRatio";
 
 type ImageStyleProp = {
@@ -17,6 +15,32 @@ type ImageStyleProp = {
   aspectRatio?: number;
 };
 
+interface ExtendedImageProps extends ExpoImageProps {
+  placeholder?: {
+    blurhash?: string;
+    thumbhash?: string;
+  };
+  transition?:
+    | number
+    | {
+        duration?: number;
+        effect?:
+          | "cross-dissolve"
+          | "flip-from-top"
+          | "flip-from-right"
+          | "flip-from-bottom"
+          | "flip-from-left"
+          | "curl-up"
+          | "curl-down";
+        timing?: "ease-in-out" | "ease-in" | "ease-out" | "linear";
+      };
+  contentFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+  contentPosition?: ImageContentPosition;
+  cachePolicy?: "none" | "disk" | "memory" | "memory-disk";
+  allowDownscaling?: boolean;
+  recyclingKey?: string;
+}
+
 const generateDimensions = ({
   aspectRatio,
   width,
@@ -52,10 +76,32 @@ const generateDimensions = ({
   return { width, height };
 };
 
-const Image: React.FC<ImageProps> = ({
+const resizeModeToContentFit = (
+  resizeMode: "cover" | "contain" | "stretch" | "repeat" | "center"
+) => {
+  // Convert deprecated resizeMode prop to contentFit prop used in expo-image
+  // Maps RN Image resizeMode values to their equivalent expo-image contentFit values
+  const mapping = {
+    cover: "cover",
+    contain: "contain",
+    stretch: "fill",
+    repeat: "none",
+    center: "scale-down",
+  };
+  return mapping[resizeMode] || "cover";
+};
+
+const Image: React.FC<ExtendedImageProps> = ({
   source,
   resizeMode = "cover",
   style,
+  placeholder,
+  transition = 300,
+  contentFit = "cover",
+  contentPosition = "center",
+  cachePolicy = "memory-disk",
+  allowDownscaling = true,
+  recyclingKey,
   ...props
 }) => {
   let imageSource =
@@ -68,13 +114,22 @@ const Image: React.FC<ImageProps> = ({
     styles as ImageStyleProp
   );
 
+  // Use contentFit if provided, otherwise fall back to resizeMode
+  const finalContentFit = contentFit || resizeModeToContentFit(resizeMode);
+
   if (aspectRatio) {
     return (
       <AspectRatio style={[style, { width, height, aspectRatio }]}>
-        <NativeImage
+        <ExpoImage
           {...props}
           source={imageSource as ImageSourcePropType}
-          resizeMode={resizeMode}
+          contentFit={finalContentFit}
+          placeholder={placeholder}
+          transition={transition}
+          contentPosition={contentPosition}
+          cachePolicy={cachePolicy}
+          allowDownscaling={allowDownscaling}
+          recyclingKey={recyclingKey}
           style={[
             style,
             {
@@ -88,10 +143,16 @@ const Image: React.FC<ImageProps> = ({
   }
 
   return (
-    <NativeImage
+    <ExpoImage
       {...props}
       source={source as ImageSourcePropType}
-      resizeMode={resizeMode}
+      contentFit={finalContentFit}
+      placeholder={placeholder}
+      transition={transition}
+      contentPosition={contentPosition}
+      cachePolicy={cachePolicy}
+      allowDownscaling={allowDownscaling}
+      recyclingKey={recyclingKey}
       style={style}
     />
   );