npm - @umituz/react-native-design-system - Versions diffs - 2.9.58 → 2.9.60 - Mend

@umituz/react-native-design-system 2.9.58 → 2.9.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.58",
+  "version": "2.9.60",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -66,7 +66,6 @@
     "@expo/vector-icons": ">=15.0.0",
     "@react-native-async-storage/async-storage": ">=1.18.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
-    "@react-native-community/slider": ">=4.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/stack": ">=7.0.0",
@@ -82,9 +81,7 @@
     "expo-device": ">=5.0.0",
     "expo-font": ">=12.0.0",
     "expo-image": ">=3.0.0",
-    "expo-image-manipulator": ">=12.0.0",
     "expo-image-picker": ">=14.0.0",
-    "expo-media-library": ">=15.0.0",
     "expo-network": ">=8.0.0",
     "expo-secure-store": ">=14.0.0",
     "expo-sharing": ">=12.0.0",
@@ -92,7 +89,6 @@
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-gesture-handler": ">=2.20.0",
-    "react-native-haptic-feedback": ">=2.0.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": ">=15.0.0",
     "rn-emoji-keyboard": ">=1.7.0",
@@ -111,7 +107,6 @@
     "@expo/vector-icons": "^15.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
-    "@react-native-community/slider": "^4.5.5",
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
     "@react-navigation/stack": "^7.6.13",
@@ -134,27 +129,21 @@
     "eslint-plugin-react-native": "^5.0.0",
     "expo-application": "~5.9.1",
     "expo-clipboard": "~8.0.7",
-    "expo-crypto": "~14.0.0",
+    "expo-crypto": "~14.0.8",
     "expo-device": "~7.0.2",
     "expo-file-system": "^19.0.21",
-    "expo-font": "~14.0.0",
-    "expo-haptics": "~14.0.0",
+    "expo-font": "~14.0.9",
     "expo-image": "~3.0.11",
-    "expo-image-manipulator": "~13.0.0",
-    "expo-image-picker": "~16.0.0",
-    "expo-localization": "~16.0.1",
-    "expo-media-library": "~17.0.0",
-    "expo-modules-core": "^3.0.29",
+    "expo-localization": "~17.0.7",
     "expo-network": "~8.0.0",
-    "expo-secure-store": "~14.0.0",
+    "expo-secure-store": "~14.0.8",
     "expo-sharing": "~14.0.8",
-    "expo-video": "~3.0.0",
+    "expo-video": "~3.0.15",
     "i18next": "^25.0.0",
     "react": "19.1.0",
     "react-i18next": "^16.0.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.20.0",
-    "react-native-haptic-feedback": "^2.3.3",
     "react-native-safe-area-context": "^5.6.0",
     "react-native-svg": "15.12.1",
     "rn-emoji-keyboard": "^1.7.0",

package/src/atoms/image/AtomicImage.tsx CHANGED Viewed

@@ -9,11 +9,8 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
   style,
   rounded,
   contentFit = 'cover',
-  transition = 300,
   ...props
 }) => {
   return (
     <ExpoImage
       style={[
@@ -21,7 +18,6 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
         rounded && { borderRadius: 9999 }
       ]}
       contentFit={contentFit}
-      transition={transition}
       {...props}
     />
   );

package/src/image/presentation/components/ImageGallery.tsx CHANGED Viewed

@@ -62,7 +62,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                 source={{ uri: item.uri }}
                 style={styles.fullImage}
                 contentFit="contain"
-                transition={0}
                 cachePolicy="memory-disk"
             />
         </View>

package/src/image/presentation/components/editor/TextEditorTabs.tsx CHANGED Viewed

@@ -2,60 +2,111 @@
  * Presentation - Text Editor Tabs
  */
-import React from 'react';
-import { View, TextInput, ScrollView, TouchableOpacity } from 'react-native';
-import Slider from '@react-native-community/slider';
-import { AtomicText } from '../../../../atoms/AtomicText';
-import { AtomicIcon } from '../../../../atoms/AtomicIcon';
-import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
+import React from "react";
+import {
+  View,
+  TextInput,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon } from "../../../../atoms/AtomicIcon";
+import { useAppDesignTokens } from "../../../../theme/hooks/useAppDesignTokens";
 interface TabProps {
   t: (key: string) => string;
 }
-export const TextContentTab: React.FC<TabProps & { text: string; onTextChange: (t: string) => void }> = ({ text, onTextChange, t: translate }) => {
+export const TextContentTab: React.FC<
+  TabProps & { text: string; onTextChange: (t: string) => void }
+> = ({ text, onTextChange, t }) => {
   const tokens = useAppDesignTokens();
   return (
     <View style={{ gap: tokens.spacing.lg }}>
       <TextInput
         value={text}
         onChangeText={onTextChange}
-        placeholder={translate('editor.text_placeholder')}
-        style={{
-          ...tokens.typography.bodyLarge,
-          borderWidth: 1,
-          borderColor: tokens.colors.border,
-          borderRadius: tokens.radius.md,
-          padding: tokens.spacing.md,
-          minHeight: 120,
-          textAlignVertical: 'top',
-        }}
+        placeholder={t("editor.text_placeholder")}
+        style={[
+          styles.textInput,
+          {
+            ...tokens.typography.bodyLarge,
+            borderColor: tokens.colors.border,
+            borderRadius: tokens.borders.radius.md,
+            padding: tokens.spacing.md,
+            minHeight: 120,
+            color: tokens.colors.textPrimary,
+          },
+        ]}
         multiline
       />
     </View>
   );
 };
-export const TextStyleTab: React.FC<TabProps & {
-  fontSize: number; setFontSize: (s: number) => void;
-  color: string; setColor: (c: string) => void;
-  fontFamily: string; setFontFamily: (f: string) => void;
-}> = ({ fontSize, setFontSize, color, setColor, fontFamily, setFontFamily }) => {
+export const TextStyleTab: React.FC<
+  TabProps & {
+    fontSize: number;
+    setFontSize: (s: number) => void;
+    color: string;
+    setColor: (c: string) => void;
+    fontFamily: string;
+    setFontFamily: (f: string) => void;
+  }
+> = ({ fontSize, setFontSize, color, setColor, fontFamily, setFontFamily }) => {
   const tokens = useAppDesignTokens();
-  const colors = ['#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#0000FF', '#00FF00', '#FF00FF', '#FFA500'];
-  const fonts = ['System', 'serif', 'sans-serif', 'monospace'];
+  const colors = [
+    "#FFFFFF",
+    "#000000",
+    "#FF0000",
+    "#FFFF00",
+    "#0000FF",
+    "#00FF00",
+    "#FF00FF",
+    "#FFA500",
+  ];
+  const fonts = ["System", "serif", "sans-serif", "monospace"];
+  const fontSizes = [12, 14, 16, 18, 20, 24, 28, 32];
   return (
     <View style={{ gap: tokens.spacing.xl }}>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Font</AtomicText>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
-          {fonts.map(f => (
-            <TouchableOpacity key={f} onPress={() => setFontFamily(f)} style={{
-              paddingHorizontal: tokens.spacing.md, paddingVertical: tokens.spacing.xs, borderRadius: tokens.radius.full,
-              borderWidth: 1, borderColor: fontFamily === f ? tokens.colors.primary : tokens.colors.border,
-              backgroundColor: fontFamily === f ? tokens.colors.primaryContainer : tokens.colors.surface
-            }}>
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.sm,
+          }}
+        >
+          Font
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {fonts.map((f) => (
+            <TouchableOpacity
+              key={f}
+              onPress={() => setFontFamily(f)}
+              style={[
+                styles.fontButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.xs,
+                  borderRadius: tokens.borders.radius.full,
+                  borderWidth: 1,
+                  borderColor:
+                    fontFamily === f
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  backgroundColor:
+                    fontFamily === f
+                      ? tokens.colors.primary
+                      : tokens.colors.surface,
+                },
+              ]}
+            >
               <AtomicText style={{ fontFamily: f }}>{f}</AtomicText>
             </TouchableOpacity>
           ))}
@@ -63,55 +114,312 @@ export const TextStyleTab: React.FC<TabProps & {
       </View>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Color</AtomicText>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
-          {colors.map(c => (
-            <TouchableOpacity key={c} onPress={() => setColor(c)} style={{
-              width: 40, height: 40, borderRadius: 20, backgroundColor: c,
-              borderWidth: color === c ? 3 : 1, borderColor: tokens.colors.primary
-            }} />
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.sm,
+          }}
+        >
+          Color
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {colors.map((c) => (
+            <TouchableOpacity
+              key={c}
+              onPress={() => setColor(c)}
+              style={[
+                styles.colorButton,
+                {
+                  width: 40,
+                  height: 40,
+                  borderRadius: 20,
+                  backgroundColor: c,
+                  borderWidth: color === c ? 3 : 1,
+                  borderColor: tokens.colors.primary,
+                },
+              ]}
+            />
           ))}
         </ScrollView>
       </View>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Size: {fontSize}px</AtomicText>
-        <Slider value={fontSize} onValueChange={setFontSize} minimumValue={12} maximumValue={100} step={1} minimumTrackTintColor={tokens.colors.primary} />
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Size: {fontSize}px
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {fontSizes.map((s) => (
+            <TouchableOpacity
+              key={s}
+              onPress={() => setFontSize(s)}
+              style={[
+                styles.sizeButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor:
+                    fontSize === s
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  backgroundColor:
+                    fontSize === s
+                      ? tokens.colors.primary
+                      : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{
+                  color: fontSize === s ? "white" : tokens.colors.textPrimary,
+                  fontWeight: "600",
+                }}
+              >
+                {s}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
       </View>
     </View>
   );
 };
-export const TextTransformTab: React.FC<TabProps & {
-  scale: number; setScale: (s: number) => void;
-  rotation: number; setRotation: (r: number) => void;
-  opacity: number; setOpacity: (o: number) => void;
-  onDelete?: () => void;
-}> = ({ scale, setScale, rotation, setRotation, opacity, setOpacity, onDelete }) => {
+export const TextTransformTab: React.FC<
+  TabProps & {
+    scale: number;
+    setScale: (s: number) => void;
+    rotation: number;
+    setRotation: (r: number) => void;
+    opacity: number;
+    setOpacity: (o: number) => void;
+    onDelete?: () => void;
+  }
+> = ({
+  scale,
+  setScale,
+  rotation,
+  setRotation,
+  opacity,
+  setOpacity,
+  onDelete,
+}) => {
   const tokens = useAppDesignTokens();
+  const scales = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  const rotations = [0, 45, 90, 135, 180, 225, 270, 315];
+  const opacities = [0.2, 0.4, 0.6, 0.8, 1];
   return (
     <View style={{ gap: tokens.spacing.xl }}>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Scale: {scale.toFixed(2)}x</AtomicText>
-        <Slider value={scale} onValueChange={setScale} minimumValue={0.2} maximumValue={3} step={0.1} minimumTrackTintColor={tokens.colors.primary} />
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Scale: {scale.toFixed(2)}x
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {scales.map((s) => (
+            <TouchableOpacity
+              key={s}
+              onPress={() => setScale(s)}
+              style={[
+                styles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor:
+                    scale === s ? tokens.colors.primary : tokens.colors.border,
+                  backgroundColor:
+                    scale === s ? tokens.colors.primary : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{
+                  color: scale === s ? "white" : tokens.colors.textPrimary,
+                }}
+              >
+                {s.toFixed(1)}x
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
       </View>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Rotation: {Math.round(rotation)}°</AtomicText>
-        <Slider value={rotation} onValueChange={setRotation} minimumValue={0} maximumValue={360} step={1} minimumTrackTintColor={tokens.colors.primary} />
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Rotation: {Math.round(rotation)}°
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {rotations.map((r) => (
+            <TouchableOpacity
+              key={r}
+              onPress={() => setRotation(r)}
+              style={[
+                styles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor:
+                    rotation === r
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  backgroundColor:
+                    rotation === r
+                      ? tokens.colors.primary
+                      : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{
+                  color: rotation === r ? "white" : tokens.colors.textPrimary,
+                }}
+              >
+                {r}°
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
       </View>
       <View>
-        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Opacity: {(opacity * 100).toFixed(0)}%</AtomicText>
-        <Slider value={opacity} onValueChange={setOpacity} minimumValue={0} maximumValue={1} step={0.05} minimumTrackTintColor={tokens.colors.primary} />
+        <AtomicText
+          style={{
+            ...tokens.typography.labelMedium,
+            marginBottom: tokens.spacing.xs,
+          }}
+        >
+          Opacity: {(opacity * 100).toFixed(0)}%
+        </AtomicText>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: tokens.spacing.sm }}
+        >
+          {opacities.map((o) => (
+            <TouchableOpacity
+              key={o}
+              onPress={() => setOpacity(o)}
+              style={[
+                styles.transformButton,
+                {
+                  paddingHorizontal: tokens.spacing.md,
+                  paddingVertical: tokens.spacing.sm,
+                  borderRadius: tokens.borders.radius.md,
+                  borderWidth: 1,
+                  borderColor:
+                    opacity === o
+                      ? tokens.colors.primary
+                      : tokens.colors.border,
+                  backgroundColor:
+                    opacity === o
+                      ? tokens.colors.primary
+                      : tokens.colors.surface,
+                },
+              ]}
+            >
+              <AtomicText
+                style={{
+                  color: opacity === o ? "white" : tokens.colors.textPrimary,
+                }}
+              >
+                {Math.round(o * 100)}%
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
       </View>
       {onDelete && (
-        <TouchableOpacity onPress={onDelete} style={{
-          flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: tokens.spacing.sm,
-          padding: tokens.spacing.md, borderRadius: tokens.radius.md, borderWidth: 1, borderColor: tokens.colors.error
-        }}>
+        <TouchableOpacity
+          onPress={onDelete}
+          style={[
+            styles.deleteButton,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: tokens.spacing.sm,
+              padding: tokens.spacing.md,
+              borderRadius: tokens.borders.radius.md,
+              borderWidth: 1,
+              borderColor: tokens.colors.error,
+            },
+          ]}
+        >
           <AtomicIcon name="trash" size={20} color="error" />
-          <AtomicText style={{ ...tokens.typography.labelMedium, color: tokens.colors.error }}>Delete Layer</AtomicText>
+          <AtomicText
+            style={{
+              ...tokens.typography.labelMedium,
+              color: tokens.colors.error,
+            }}
+          >
+            Delete Layer
+          </AtomicText>
         </TouchableOpacity>
       )}
     </View>
   );
 };
+const styles = StyleSheet.create({
+  textInput: {
+    borderWidth: 1,
+    textAlignVertical: "top",
+  },
+  fontButton: {
+    paddingVertical: 8,
+    minWidth: 80,
+    alignItems: "center",
+  },
+  colorButton: {
+    width: 40,
+    height: 40,
+  },
+  sizeButton: {
+    minWidth: 50,
+    alignItems: "center",
+  },
+  transformButton: {
+    minWidth: 60,
+    alignItems: "center",
+  },
+  deleteButton: {
+    alignSelf: "flex-start",
+  },
+});

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

@@ -9,11 +9,8 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
   style,
   rounded,
   contentFit = 'cover',
-  transition = 300,
   ...props
 }) => {
   return (
     <ExpoImage
       style={[
@@ -21,7 +18,6 @@ export const AtomicImage: React.FC<AtomicImageProps> = ({
         rounded && { borderRadius: 9999 }
       ]}
       contentFit={contentFit}
-      transition={transition}
       {...props}
     />
   );

package/src/media/infrastructure/services/MediaSaveService.ts CHANGED Viewed

@@ -1,14 +1,15 @@
 /**
  * Media Save Service
- * Save images and videos to device gallery
+ * Saves media to device storage using expo-file-system
  */
-import * as MediaLibrary from "expo-media-library";
-import { MediaType, MediaLibraryPermission } from "../../domain/entities/Media";
+import * as FileSystem from "expo-file-system";
+import { Platform } from "react-native";
+import { MediaLibraryPermission } from "../../domain/entities/Media";
 export interface SaveResult {
   success: boolean;
-  assetId?: string;
+  path?: string;
   error?: string;
 }
@@ -24,24 +25,14 @@ export class MediaSaveService {
    * Request media library write permission
    */
   static async requestPermission(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } = await MediaLibrary.requestPermissionsAsync();
-      return MediaSaveService.mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
+    return MediaLibraryPermission.GRANTED;
   }
   /**
    * Get current permission status
    */
   static async getPermissionStatus(): Promise<MediaLibraryPermission> {
-    try {
-      const { status } = await MediaLibrary.getPermissionsAsync();
-      return MediaSaveService.mapPermissionStatus(status);
-    } catch {
-      return MediaLibraryPermission.DENIED;
-    }
+    return MediaLibraryPermission.GRANTED;
   }
   /**
@@ -49,9 +40,9 @@ export class MediaSaveService {
    */
   static async saveImage(
     uri: string,
-    options?: SaveOptions
+    options?: SaveOptions,
   ): Promise<SaveResult> {
-    return MediaSaveService.saveToGallery(uri, MediaType.IMAGE, options);
+    return MediaSaveService.saveToStorage(uri, "image", options);
   }
   /**
@@ -59,41 +50,42 @@ export class MediaSaveService {
    */
   static async saveVideo(
     uri: string,
-    options?: SaveOptions
+    options?: SaveOptions,
   ): Promise<SaveResult> {
-    return MediaSaveService.saveToGallery(uri, MediaType.VIDEO, options);
+    return MediaSaveService.saveToStorage(uri, "video", options);
   }
   /**
-   * Save media (image or video) to gallery
+   * Save media (image or video) to storage
    */
-  static async saveToGallery(
+  private static async saveToStorage(
     uri: string,
-    _mediaType: MediaType = MediaType.ALL,
-    options?: SaveOptions
+    mediaType: "image" | "video",
+    options?: SaveOptions,
   ): Promise<SaveResult> {
     try {
-      const permission = await MediaSaveService.requestPermission();
+      const timestamp = Date.now();
+      const extension = mediaType === "image" ? "jpg" : "mp4";
+      const filename = `${mediaType}_${timestamp}.${extension}`;
-      if (permission === MediaLibraryPermission.DENIED) {
+      const directory = FileSystem.documentDirectory;
+      if (!directory) {
         return {
           success: false,
-          error: "Permission denied to save media",
+          error: "Document directory not available",
         };
       }
-      const asset = await MediaLibrary.createAssetAsync(uri);
+      const destination = `${directory}${filename}`;
-      if (options?.album) {
-        const album = await MediaSaveService.getOrCreateAlbum(options.album);
-        if (album) {
-          await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
-        }
-      }
+      await FileSystem.copyAsync({
+        from: uri,
+        to: destination,
+      });
       return {
         success: true,
-        assetId: asset.id,
+        path: destination,
       };
     } catch (error) {
       const message = error instanceof Error ? error.message : "Unknown error";
@@ -103,52 +95,4 @@ export class MediaSaveService {
       };
     }
   }
-  /**
-   * Get or create album
-   */
-  private static async getOrCreateAlbum(
-    albumName: string
-  ): Promise<MediaLibrary.Album | null> {
-    try {
-      const albums = await MediaLibrary.getAlbumsAsync();
-      const existingAlbum = albums.find((album) => album.title === albumName);
-      if (existingAlbum) {
-        return existingAlbum;
-      }
-      const asset = await MediaLibrary.getAssetsAsync({ first: 1 });
-      if (asset.assets.length > 0) {
-        const newAlbum = await MediaLibrary.createAlbumAsync(
-          albumName,
-          asset.assets[0],
-          false
-        );
-        return newAlbum;
-      }
-      return null;
-    } catch {
-      return null;
-    }
-  }
-  /**
-   * Map permission status
-   */
-  private static mapPermissionStatus(
-    status: MediaLibrary.PermissionStatus
-  ): MediaLibraryPermission {
-    switch (status) {
-      case MediaLibrary.PermissionStatus.GRANTED:
-        return MediaLibraryPermission.GRANTED;
-      case MediaLibrary.PermissionStatus.DENIED:
-        return MediaLibraryPermission.DENIED;
-      case MediaLibrary.PermissionStatus.UNDETERMINED:
-        return MediaLibraryPermission.DENIED;
-      default:
-        return MediaLibraryPermission.DENIED;
-    }
-  }
 }

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx CHANGED Viewed

@@ -82,7 +82,6 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
           source={item.source}
           style={item.style}
           contentFit="cover"
-          transition={300}
         />
       ))}
     </View>

package/src/onboarding/presentation/components/OnboardingBackground.tsx CHANGED Viewed

@@ -53,7 +53,6 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
           source={currentSlide.backgroundImage}
           style={StyleSheet.absoluteFill}
           contentFit="cover"
-          transition={500}
           cachePolicy="memory-disk"
           priority="high"
         />