@umituz/react-native-image 1.3.15 → 1.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-image",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -81,6 +81,7 @@ export { ImageGallery, type ImageGalleryProps } from './presentation/components/
 export { TextEditorSheet, type TextEditorSheetProps } from './presentation/components/editor/TextEditorSheet';
 export { StickerPickerSheet, type StickerPickerSheetProps } from './presentation/components/editor/StickerPickerSheet';
 export { FilterPickerSheet, type FilterPickerSheetProps } from './presentation/components/editor/FilterPickerSheet';
+export { AtomicImage, type AtomicImageProps } from './presentation/components/image/AtomicImage';
 
 export { useImage } from './presentation/hooks/useImage';
 export { useImageTransform } from './presentation/hooks/useImageTransform';

package/src/presentation/components/image/AtomicImage.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image';
+import { StyleSheet, ViewStyle } from 'react-native';
+
+export type AtomicImageProps = ExpoImageProps & {
+  rounded?: boolean;
+};
+
+export const AtomicImage: React.FC<AtomicImageProps> = ({
+  style,
+  rounded,
+  contentFit = 'cover',
+  transition = 300,
+  ...props
+}) => {
+  const flattenedStyle = StyleSheet.flatten(style) as ViewStyle;
+  
+  return (
+    <ExpoImage
+      style={[
+        style,
+        rounded && { borderRadius: flattenedStyle?.width ? Number(flattenedStyle.width) / 2 : 9999 }
+      ]}
+      contentFit={contentFit}
+      transition={transition}
+      {...props}
+    />
+  );
+};