@granite-js/image 0.1.19 → 0.1.21

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @granite-js/image
 
+## 0.1.21
+
+### Patch Changes
+
+- @granite-js/native@0.1.21
+
+## 0.1.20
+
+### Patch Changes
+
+- 1df5883: update package.json meta to supports any moduleResolutions
+- Updated dependencies [1df5883]
+  - @granite-js/native@0.1.20
+
 ## 0.1.19
 
 ### Patch Changes

package/dist/{Image.d.ts → index.d.mts}

@@ -1,10 +1,13 @@
-import { FastImageProps, Source as FastImageSource } from '@granite-js/native/react-native-fast-image';
-type Source = {
-    uri?: string;
-    cache?: FastImageSource['cache'];
+import { FastImageProps, Source } from "@granite-js/native/react-native-fast-image";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/Image.d.ts
+type Source$1 = {
+  uri?: string;
+  cache?: Source['cache'];
 };
-export interface ImageProps extends Omit<FastImageProps, 'source'> {
-    source?: Source;
+interface ImageProps extends Omit<FastImageProps, 'source'> {
+  source?: Source$1;
 }
 /**
  * @public
@@ -62,5 +65,6 @@ export interface ImageProps extends Omit<FastImageProps, 'source'> {
  * }
  * ```
  */
-declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element;
-export { Image };
+declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Image, type ImageProps };

package/dist/index.d.ts

@@ -1 +1,70 @@
-export { Image, type ImageProps } from './Image';
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { FastImageProps, Source } from "@granite-js/native/react-native-fast-image";
+
+//#region src/Image.d.ts
+type Source$1 = {
+  uri?: string;
+  cache?: Source['cache'];
+};
+interface ImageProps extends Omit<FastImageProps, 'source'> {
+  source?: Source$1;
+}
+/**
+ * @public
+ * @category UI
+ * @name Image
+ * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+ * @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+ * @param {object} [props.source] - An object containing information about the image resource to load.
+ * @param {string} [props.source.uri] - The URI address representing the image resource to load.
+ * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+ * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+ * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+ * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+ *
+ * @example
+ * ### Example: Loading and rendering an image
+ *
+ * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+ *
+ * ```tsx
+ * import { Image } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * export function ImageExample() {
+ *   return (
+ *     <View>
+ *       <Image
+ *         source={{ uri: 'my-image-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *
+ *       <Image
+ *         source={{ uri: 'my-svg-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Image, type ImageProps };

package/dist/index.js

@@ -0,0 +1,204 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const __granite_js_native_react_native_fast_image = __toESM(require("@granite-js/native/react-native-fast-image"));
+const react_native = __toESM(require("react-native"));
+const __granite_js_native_react_native_svg = __toESM(require("@granite-js/native/react-native-svg"));
+const react = __toESM(require("react"));
+const react_simplikit = __toESM(require("react-simplikit"));
+const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
+
+//#region src/SvgImage.tsx
+/**
+* @name SvgImage
+* @category Components
+* @description The `SvgImage` component loads and renders SVG images from a given external URL.
+* @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
+*
+* @param {object} props - The `props` object passed to the component.
+* @param {string} props.url - The URI address of the SVG image to load.
+* @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
+* @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
+* @param {object} props.style - Sets the style of the image component.
+* @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
+* @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
+* @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
+*
+* @example
+* ```tsx
+* import { SvgImage } from './SvgImage';
+* import { View } from 'react-native';
+*
+* function MyComponent() {
+*   return (
+*     <View>
+*       <SvgImage
+*         url="https://example.com/icon.svg"
+*         width={100}
+*         height={100}
+*         onError={() => console.log('An error occurred while loading the SVG')}
+*       />
+*     </View>
+*   );
+* }
+* ```
+*/
+function SvgImage({ url, width = "100%", height = "100%", style, testID, onLoadStart: _onLoadStart, onLoadEnd: _onLoadEnd, onError: _onError }) {
+	const svgStyle = {
+		width,
+		height
+	};
+	const [data, setData] = (0, react.useState)(void 0);
+	const [isError, setIsError] = (0, react.useState)(false);
+	const onLoadStart = (0, react_simplikit.usePreservedCallback)(() => _onLoadStart?.());
+	const onLoadEnd = (0, react_simplikit.usePreservedCallback)(() => _onLoadEnd?.());
+	const onError = (0, react_simplikit.usePreservedCallback)(() => _onError?.());
+	const Fallback = (0, react.useCallback)(() => (0, react.createElement)(react_native.View, { style: {
+		width,
+		height
+	} }, null), [width, height]);
+	(0, react.useEffect)(() => {
+		let isMounted = true;
+		/**
+		* First attempts to fetch the XML resource, and if that fails, tries to load directly by passing the URI to the Svg component
+		*/
+		async function fetchSvg() {
+			onLoadStart();
+			try {
+				const response = await fetch(url);
+				const svg = await response.text();
+				if (isMounted) {
+					onLoadEnd();
+					setData(svg);
+				}
+			} catch {
+				setIsError(true);
+			}
+		}
+		fetchSvg();
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		onLoadStart,
+		onLoadEnd,
+		url
+	]);
+	if (data == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {});
+	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__granite_js_native_react_native_svg.SvgUri, {
+		testID,
+		uri: url,
+		style,
+		...svgStyle,
+		onError,
+		onLoad: onLoadEnd,
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__granite_js_native_react_native_svg.SvgXml, {
+		testID,
+		xml: data,
+		style,
+		...svgStyle,
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {})
+	});
+}
+
+//#endregion
+//#region src/Image.tsx
+/**
+* @public
+* @category UI
+* @name Image
+* @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+* @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
+*
+* @param {object} [props] - The `props` object passed to the component.
+* @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+* @param {object} [props.source] - An object containing information about the image resource to load.
+* @param {string} [props.source.uri] - The URI address representing the image resource to load.
+* @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+* @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+* @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+* @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+*
+* @example
+* ### Example: Loading and rendering an image
+*
+* The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+*
+* ```tsx
+* import { Image } from '@granite-js/react-native';
+* import { View } from 'react-native';
+*
+* export function ImageExample() {
+*   return (
+*     <View>
+*       <Image
+*         source={{ uri: 'my-image-link' }}
+*         style={{
+*           width: 300,
+*           height: 300,
+*           borderWidth: 1,
+*         }}
+*         onError={() => {
+*           console.log('Failed to load image');
+*         }}
+*       />
+*
+*       <Image
+*         source={{ uri: 'my-svg-link' }}
+*         style={{
+*           width: 300,
+*           height: 300,
+*           borderWidth: 1,
+*         }}
+*         onError={() => {
+*           console.log('Failed to load image');
+*         }}
+*       />
+*     </View>
+*   );
+* }
+* ```
+*/
+function Image(props) {
+	if (typeof props.source === "object" && props.source.uri?.endsWith(".svg")) {
+		const style = react_native.StyleSheet.flatten(props.style);
+		const width = style?.width;
+		const height = style?.height;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SvgImage, {
+			testID: props.testID,
+			url: props.source.uri,
+			width,
+			height,
+			style: props.style,
+			onLoadStart: props.onLoadStart,
+			onLoadEnd: props.onLoadEnd,
+			onError: props.onError
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__granite_js_native_react_native_fast_image.default, { ...props });
+}
+
+//#endregion
+exports.Image = Image;

package/dist/index.mjs

@@ -0,0 +1,181 @@
+import FastImage from "@granite-js/native/react-native-fast-image";
+import { StyleSheet, View } from "react-native";
+import { SvgUri, SvgXml } from "@granite-js/native/react-native-svg";
+import { createElement, useCallback, useEffect, useState } from "react";
+import { usePreservedCallback } from "react-simplikit";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/SvgImage.tsx
+/**
+* @name SvgImage
+* @category Components
+* @description The `SvgImage` component loads and renders SVG images from a given external URL.
+* @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
+*
+* @param {object} props - The `props` object passed to the component.
+* @param {string} props.url - The URI address of the SVG image to load.
+* @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
+* @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
+* @param {object} props.style - Sets the style of the image component.
+* @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
+* @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
+* @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
+*
+* @example
+* ```tsx
+* import { SvgImage } from './SvgImage';
+* import { View } from 'react-native';
+*
+* function MyComponent() {
+*   return (
+*     <View>
+*       <SvgImage
+*         url="https://example.com/icon.svg"
+*         width={100}
+*         height={100}
+*         onError={() => console.log('An error occurred while loading the SVG')}
+*       />
+*     </View>
+*   );
+* }
+* ```
+*/
+function SvgImage({ url, width = "100%", height = "100%", style, testID, onLoadStart: _onLoadStart, onLoadEnd: _onLoadEnd, onError: _onError }) {
+	const svgStyle = {
+		width,
+		height
+	};
+	const [data, setData] = useState(void 0);
+	const [isError, setIsError] = useState(false);
+	const onLoadStart = usePreservedCallback(() => _onLoadStart?.());
+	const onLoadEnd = usePreservedCallback(() => _onLoadEnd?.());
+	const onError = usePreservedCallback(() => _onError?.());
+	const Fallback = useCallback(() => createElement(View, { style: {
+		width,
+		height
+	} }, null), [width, height]);
+	useEffect(() => {
+		let isMounted = true;
+		/**
+		* First attempts to fetch the XML resource, and if that fails, tries to load directly by passing the URI to the Svg component
+		*/
+		async function fetchSvg() {
+			onLoadStart();
+			try {
+				const response = await fetch(url);
+				const svg = await response.text();
+				if (isMounted) {
+					onLoadEnd();
+					setData(svg);
+				}
+			} catch {
+				setIsError(true);
+			}
+		}
+		fetchSvg();
+		return () => {
+			isMounted = false;
+		};
+	}, [
+		onLoadStart,
+		onLoadEnd,
+		url
+	]);
+	if (data == null) return /* @__PURE__ */ jsx(Fallback, {});
+	if (isError) return /* @__PURE__ */ jsx(SvgUri, {
+		testID,
+		uri: url,
+		style,
+		...svgStyle,
+		onError,
+		onLoad: onLoadEnd,
+		fallback: /* @__PURE__ */ jsx(Fallback, {})
+	});
+	return /* @__PURE__ */ jsx(SvgXml, {
+		testID,
+		xml: data,
+		style,
+		...svgStyle,
+		fallback: /* @__PURE__ */ jsx(Fallback, {})
+	});
+}
+
+//#endregion
+//#region src/Image.tsx
+/**
+* @public
+* @category UI
+* @name Image
+* @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+* @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
+*
+* @param {object} [props] - The `props` object passed to the component.
+* @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+* @param {object} [props.source] - An object containing information about the image resource to load.
+* @param {string} [props.source.uri] - The URI address representing the image resource to load.
+* @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+* @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+* @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+* @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+*
+* @example
+* ### Example: Loading and rendering an image
+*
+* The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+*
+* ```tsx
+* import { Image } from '@granite-js/react-native';
+* import { View } from 'react-native';
+*
+* export function ImageExample() {
+*   return (
+*     <View>
+*       <Image
+*         source={{ uri: 'my-image-link' }}
+*         style={{
+*           width: 300,
+*           height: 300,
+*           borderWidth: 1,
+*         }}
+*         onError={() => {
+*           console.log('Failed to load image');
+*         }}
+*       />
+*
+*       <Image
+*         source={{ uri: 'my-svg-link' }}
+*         style={{
+*           width: 300,
+*           height: 300,
+*           borderWidth: 1,
+*         }}
+*         onError={() => {
+*           console.log('Failed to load image');
+*         }}
+*       />
+*     </View>
+*   );
+* }
+* ```
+*/
+function Image(props) {
+	if (typeof props.source === "object" && props.source.uri?.endsWith(".svg")) {
+		const style = StyleSheet.flatten(props.style);
+		const width = style?.width;
+		const height = style?.height;
+		return /* @__PURE__ */ jsx(SvgImage, {
+			testID: props.testID,
+			url: props.source.uri,
+			width,
+			height,
+			style: props.style,
+			onLoadStart: props.onLoadStart,
+			onLoadEnd: props.onLoadEnd,
+			onError: props.onError
+		});
+	}
+	return /* @__PURE__ */ jsx(FastImage, { ...props });
+}
+
+//#endregion
+export { Image };

package/package.json

@@ -1,27 +1,38 @@
 {
   "name": "@granite-js/image",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "scripts": {
     "prepack": "yarn build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json"
+    "build": "tsdown"
   },
-  "main": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./src/index.ts"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
-    "@granite-js/native": "0.1.19",
+    "@granite-js/native": "0.1.21",
     "@types/react": "18.3.3",
     "eslint": "^9.7.0",
     "react": "18.2.0",
     "react-native": "0.72.6",
+    "tsdown": "^0.14.1",
     "typescript": "5.8.3"
   },
   "peerDependencies": {

package/NOTICE

@@ -1,63 +0,0 @@
-NOTICE
-
-This project makes use of third-party libraries that are licensed under their respective open-source licenses. Below is a list of these libraries, their licenses, and their links for further reference.
-
-================================================================================
-Project Name: @granite-js/image
-Copyright 2025 Viva Republica, Inc
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at:
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-================================================================================
-Third-Party Libraries:
-
-1. **@types/react**
-	
-   - License: MIT
-   - License Text: https://opensource.org/licenses/MIT
-   - Repository: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-	
-2. **eslint**
-	
-   - License: MIT
-   - License Text: https://opensource.org/licenses/MIT
-   - Repository: git+https://github.com/eslint/eslint.git
-	
-3. **react**
-	
-   - License: MIT
-   - License Text: https://opensource.org/licenses/MIT
-   - Repository: https://github.com/facebook/react.git
-	
-4. **react-native**
-	
-   - License: MIT
-   - License Text: https://opensource.org/licenses/MIT
-   - Repository: git+https://github.com/facebook/react-native.git
-	
-5. **react-simplikit**
-	
-   - License: MIT
-   - License Text: https://opensource.org/licenses/MIT
-   - Repository: git+https://github.com/toss/react-simplikit.git
-	
-6. **typescript**
-	
-   - License: Apache-2.0
-   - License Text: https://www.apache.org/licenses/LICENSE-2.0
-   - Repository: https://github.com/microsoft/TypeScript.git
-	
-
-================================================================================
-
-For further details about each license, please refer to the provided links. If there are updates to these dependencies, this file should also be updated.

package/dist/SvgImage.d.ts

@@ -1,47 +0,0 @@
-import { type StyleProp } from 'react-native';
-import type { DimensionValue } from './types';
-export interface SvgImageProps {
-    url: string;
-    width?: DimensionValue;
-    height?: DimensionValue;
-    style?: StyleProp<any>;
-    testID?: string;
-    onLoadStart?: () => void;
-    onLoadEnd?: () => void;
-    onError?: () => void;
-}
-/**
- * @name SvgImage
- * @category Components
- * @description The `SvgImage` component loads and renders SVG images from a given external URL.
- * @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
- *
- * @param {object} props - The `props` object passed to the component.
- * @param {string} props.url - The URI address of the SVG image to load.
- * @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
- * @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
- * @param {object} props.style - Sets the style of the image component.
- * @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
- * @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
- * @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
- *
- * @example
- * ```tsx
- * import { SvgImage } from './SvgImage';
- * import { View } from 'react-native';
- *
- * function MyComponent() {
- *   return (
- *     <View>
- *       <SvgImage
- *         url="https://example.com/icon.svg"
- *         width={100}
- *         height={100}
- *         onError={() => console.log('An error occurred while loading the SVG')}
- *       />
- *     </View>
- *   );
- * }
- * ```
- */
-export declare function SvgImage({ url, width, height, style, testID, onLoadStart: _onLoadStart, onLoadEnd: _onLoadEnd, onError: _onError, }: SvgImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/types.d.ts

@@ -1,3 +0,0 @@
-import type { Animated } from 'react-native';
-export type DimensionValue = string | number | 'auto' | `${number}%` | Animated.AnimatedNode | null;
-export type NumberValue = number | string;

package/image.code-workspace

@@ -1,18 +0,0 @@
-{
-  "folders": [
-    {
-      "path": ".",
-    },
-  ],
-  "settings": {
-    "eslint.useFlatConfig": true,
-    "eslint.nodePath": "../../.yarn/sdks",
-    "typescript.enablePromptUseWorkspaceTsdk": true,
-    "typescript.tsdk": "../../.yarn/sdks/typescript/lib",
-    "prettier.prettierPath": "../../.yarn/sdks/prettier/index.cjs",
-    "prettier.configPath": "../../.prettierrc",
-    "jest.rootPath": ".",
-    "jest.jestCommandLine": "yarn jest",
-    "jest.enable": false,
-  },
-}

package/src/Image.tsx

@@ -1,93 +0,0 @@
-import FastImage, { FastImageProps, Source as FastImageSource } from '@granite-js/native/react-native-fast-image';
-import { StyleSheet } from 'react-native';
-import { SvgImage } from './SvgImage';
-
-type Source = {
-  uri?: string;
-  cache?: FastImageSource['cache'];
-};
-
-export interface ImageProps extends Omit<FastImageProps, 'source'> {
-  source?: Source;
-}
-
-/**
- * @public
- * @category UI
- * @name Image
- * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
- * @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
- *
- * @param {object} [props] - The `props` object passed to the component.
- * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
- * @param {object} [props.source] - An object containing information about the image resource to load.
- * @param {string} [props.source.uri] - The URI address representing the image resource to load.
- * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
- * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
- * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
- * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
- *
- * @example
- * ### Example: Loading and rendering an image
- *
- * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
- *
- * ```tsx
- * import { Image } from '@granite-js/react-native';
- * import { View } from 'react-native';
- *
- * export function ImageExample() {
- *   return (
- *     <View>
- *       <Image
- *         source={{ uri: 'my-image-link' }}
- *         style={{
- *           width: 300,
- *           height: 300,
- *           borderWidth: 1,
- *         }}
- *         onError={() => {
- *           console.log('Failed to load image');
- *         }}
- *       />
- *
- *       <Image
- *         source={{ uri: 'my-svg-link' }}
- *         style={{
- *           width: 300,
- *           height: 300,
- *           borderWidth: 1,
- *         }}
- *         onError={() => {
- *           console.log('Failed to load image');
- *         }}
- *       />
- *     </View>
- *   );
- * }
- * ```
- */
-function Image(props: ImageProps) {
-  if (typeof props.source === 'object' && props.source.uri?.endsWith('.svg')) {
-    const style = StyleSheet.flatten(props.style);
-    const width = style?.width;
-    const height = style?.height;
-
-    return (
-      <SvgImage
-        testID={props.testID}
-        url={props.source.uri!}
-        width={width}
-        height={height}
-        style={props.style}
-        onLoadStart={props.onLoadStart}
-        onLoadEnd={props.onLoadEnd}
-        onError={props.onError}
-      />
-    );
-  }
-
-  return <FastImage {...props} />;
-}
-
-export { Image };

package/src/SvgImage.tsx

@@ -1,124 +0,0 @@
-import { SvgUri, SvgXml } from '@granite-js/native/react-native-svg';
-import { createElement, useEffect, useCallback, useState } from 'react';
-import { View, type ViewStyle, type StyleProp } from 'react-native';
-import { usePreservedCallback } from 'react-simplikit';
-import type { DimensionValue, NumberValue } from './types';
-
-export interface SvgImageProps {
-  url: string;
-  width?: DimensionValue;
-  height?: DimensionValue;
-  style?: StyleProp<any>;
-  testID?: string;
-  onLoadStart?: () => void;
-  onLoadEnd?: () => void;
-  onError?: () => void;
-}
-
-/**
- * @name SvgImage
- * @category Components
- * @description The `SvgImage` component loads and renders SVG images from a given external URL.
- * @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
- *
- * @param {object} props - The `props` object passed to the component.
- * @param {string} props.url - The URI address of the SVG image to load.
- * @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
- * @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
- * @param {object} props.style - Sets the style of the image component.
- * @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
- * @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
- * @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
- *
- * @example
- * ```tsx
- * import { SvgImage } from './SvgImage';
- * import { View } from 'react-native';
- *
- * function MyComponent() {
- *   return (
- *     <View>
- *       <SvgImage
- *         url="https://example.com/icon.svg"
- *         width={100}
- *         height={100}
- *         onError={() => console.log('An error occurred while loading the SVG')}
- *       />
- *     </View>
- *   );
- * }
- * ```
- */
-export function SvgImage({
-  url,
-  width = '100%',
-  height = '100%',
-  style,
-  testID,
-  onLoadStart: _onLoadStart,
-  onLoadEnd: _onLoadEnd,
-  onError: _onError,
-}: SvgImageProps) {
-  const svgStyle = { width, height } as { width: NumberValue; height: NumberValue };
-  const [data, setData] = useState<string | undefined>(undefined);
-  const [isError, setIsError] = useState(false);
-
-  const onLoadStart = usePreservedCallback(() => _onLoadStart?.());
-  const onLoadEnd = usePreservedCallback(() => _onLoadEnd?.());
-  const onError = usePreservedCallback(() => _onError?.());
-
-  // Component to occupy layout space when the image is not yet rendered
-  const Fallback = useCallback(
-    () => createElement(View, { style: { width, height } as ViewStyle }, null),
-    [width, height]
-  );
-
-  useEffect(() => {
-    let isMounted = true;
-
-    /**
-     * First attempts to fetch the XML resource, and if that fails, tries to load directly by passing the URI to the Svg component
-     */
-    async function fetchSvg() {
-      onLoadStart();
-
-      try {
-        const response = await fetch(url);
-        const svg = await response.text();
-
-        if (isMounted) {
-          onLoadEnd();
-          setData(svg);
-        }
-      } catch {
-        setIsError(true);
-      }
-    }
-
-    fetchSvg();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [onLoadStart, onLoadEnd, url]);
-
-  if (data == null) {
-    return <Fallback />;
-  }
-
-  if (isError) {
-    return (
-      <SvgUri
-        testID={testID}
-        uri={url}
-        style={style}
-        {...svgStyle}
-        onError={onError}
-        onLoad={onLoadEnd}
-        fallback={<Fallback />}
-      />
-    );
-  }
-
-  return <SvgXml testID={testID} xml={data} style={style} {...svgStyle} fallback={<Fallback />} />;
-}

package/src/index.ts

@@ -1 +0,0 @@
-export { Image, type ImageProps } from './Image';

package/src/types.ts

@@ -1,6 +0,0 @@
-import type { Animated } from 'react-native';
-
-// FIXME: DimensionValue type is not available in React Native 0.68, so it's defined separately
-export type DimensionValue = string | number | 'auto' | `${number}%` | Animated.AnimatedNode | null;
-
-export type NumberValue = number | string;

package/tsconfig.build.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "rootDir": "./src",
-    "outDir": "./dist"
-  },
-  "exclude": ["**/dist/*", "**/esm/*", "**/*.test.*", "**/*.spec.*", "**/*.e2e.*", "**/__fixtures__/*"],
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src"]
-}