@umituz/react-native-design-system 2.4.9 → 2.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.9",
+  "version": "2.4.11",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -53,9 +53,9 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
-    "@react-navigation/bottom-tabs": ">=6.0.0",
-    "@react-navigation/native": ">=6.0.0",
-    "@react-navigation/stack": ">=6.0.0",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/stack": ">=7.0.0",
     "@umituz/react-native-filesystem": "*",
     "@umituz/react-native-haptics": "*",
     "@umituz/react-native-localization": "*",
@@ -99,9 +99,9 @@
     "@gorhom/bottom-sheet": "^5.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
-    "@react-navigation/bottom-tabs": "^6.6.1",
-    "@react-navigation/native": "^6.0.0",
-    "@react-navigation/stack": "^6.4.1",
+    "@react-navigation/bottom-tabs": "^7.9.0",
+    "@react-navigation/native": "^7.1.26",
+    "@react-navigation/stack": "^7.6.13",
     "@testing-library/react": "^16.3.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",

package/src/index.ts

@@ -418,6 +418,10 @@ export {
   PhotoUploadCard,
   type PhotoUploadCardProps,
   type PhotoUploadCardConfig,
+  // Image Picker
+  ImagePickerBox,
+  type ImagePickerBoxProps,
+  type ImagePickerBoxConfig,
   // Step Header
   StepHeader,
   type StepHeaderProps,

package/src/molecules/ImagePickerBox/ImagePickerBox.tsx

@@ -0,0 +1,171 @@
+/**
+ * ImagePickerBox Component
+ * Generic image picker box with gradient design
+ * Props-driven for 100+ apps compatibility
+ *
+ * @package @umituz/react-native-design-system
+ */
+
+import React, { useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  type ViewStyle,
+} from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import { AtomicText } from "../../atoms/AtomicText";
+import { AtomicIcon } from "../../atoms/AtomicIcon";
+import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+
+export interface ImagePickerBoxConfig {
+  readonly variant?: "portrait" | "square" | "landscape";
+  readonly size?: "sm" | "md" | "lg";
+  readonly uploadIcon?: string;
+  readonly editIcon?: string;
+}
+
+export interface ImagePickerBoxProps {
+  readonly imageUri: string | null;
+  readonly isDisabled?: boolean;
+  readonly onPress: () => void;
+  readonly placeholderText: string;
+  readonly gradientColors?: readonly [string, string, ...string[]];
+  readonly config?: ImagePickerBoxConfig;
+}
+
+const VARIANT_STYLES: Record<string, ViewStyle> = {
+  portrait: { width: 200, height: 280, borderRadius: 20 },
+  square: { width: "100%" as unknown as number, aspectRatio: 1, borderRadius: 24 },
+  landscape: { width: "100%" as unknown as number, aspectRatio: 16 / 9, borderRadius: 16 },
+};
+
+const SIZE_MULTIPLIERS = { sm: 0.7, md: 1, lg: 1.3 };
+
+const DEFAULT_CONFIG: ImagePickerBoxConfig = {
+  variant: "portrait",
+  size: "md",
+  uploadIcon: "cloud-upload-outline",
+  editIcon: "image-outline",
+};
+
+export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
+  imageUri,
+  isDisabled = false,
+  onPress,
+  placeholderText,
+  gradientColors = ["#667eea", "#764ba2"],
+  config = DEFAULT_CONFIG,
+}) => {
+  const tokens = useAppDesignTokens();
+  const cfg = useMemo(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
+
+  const multiplier = SIZE_MULTIPLIERS[cfg.size || "md"];
+  const baseStyle = VARIANT_STYLES[cfg.variant || "portrait"];
+  const iconSize = Math.round(32 * multiplier);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          marginVertical: 16,
+          alignItems: "center",
+        },
+        box: {
+          overflow: "hidden",
+          ...baseStyle,
+          backgroundColor: tokens.colors.backgroundSecondary,
+        },
+        imageContainer: {
+          flex: 1,
+          position: "relative",
+        },
+        image: {
+          width: "100%",
+          height: "100%",
+        },
+        imageOverlay: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "30%",
+          justifyContent: "flex-end",
+          alignItems: "flex-end",
+          padding: 12,
+        },
+        editBadge: {
+          borderRadius: 20,
+          padding: 8,
+          backgroundColor: `${gradientColors[1]}E6`,
+        },
+        placeholder: {
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        placeholderContent: {
+          alignItems: "center",
+          justifyContent: "center",
+          paddingHorizontal: 16,
+        },
+        uploadIconContainer: {
+          backgroundColor: "rgba(255,255,255,0.2)",
+          borderRadius: 40,
+          padding: 16,
+          marginBottom: 12,
+        },
+        placeholderText: {
+          textAlign: "center",
+          fontWeight: "600",
+          color: "#FFFFFF",
+        },
+      }),
+    [tokens, baseStyle, gradientColors]
+  );
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.box}
+        onPress={onPress}
+        disabled={isDisabled}
+        activeOpacity={0.8}
+      >
+        {imageUri ? (
+          <View style={styles.imageContainer}>
+            <Image source={{ uri: imageUri }} style={styles.image} />
+            <LinearGradient
+              colors={["transparent", "rgba(0,0,0,0.3)"]}
+              style={styles.imageOverlay}
+            >
+              <View style={styles.editBadge}>
+                <AtomicIcon
+                  name={cfg.editIcon || "image-outline"}
+                  customSize={Math.round(16 * multiplier)}
+                  customColor="#FFFFFF"
+                />
+              </View>
+            </LinearGradient>
+          </View>
+        ) : (
+          <LinearGradient colors={gradientColors} style={styles.placeholder}>
+            <View style={styles.placeholderContent}>
+              <View style={styles.uploadIconContainer}>
+                <AtomicIcon
+                  name={cfg.uploadIcon || "cloud-upload-outline"}
+                  customSize={iconSize}
+                  customColor="#FFFFFF"
+                />
+              </View>
+              <AtomicText type="bodyMedium" style={styles.placeholderText}>
+                {placeholderText}
+              </AtomicText>
+            </View>
+          </LinearGradient>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/molecules/ImagePickerBox/index.ts

@@ -0,0 +1,2 @@
+export { ImagePickerBox } from "./ImagePickerBox";
+export type { ImagePickerBoxProps, ImagePickerBoxConfig } from "./ImagePickerBox";

package/src/molecules/index.ts

@@ -51,6 +51,9 @@ export * from './long-press-menu';
 // Photo Upload
 export * from './PhotoUploadCard';
 
+// Image Picker
+export * from './ImagePickerBox';
+
 // Step Header
 export * from './StepHeader';
 

package/src/molecules/navigation/StackNavigator.tsx

@@ -61,6 +61,7 @@ export function StackNavigator<T extends ParamListBase>({ config }: StackNavigat
 
     return (
         <Stack.Navigator
+            id={config.id}
             initialRouteName={config.initialRouteName as string}
             screenOptions={{
                 ...defaultScreenOptions,

package/src/molecules/navigation/TabsNavigator.tsx

@@ -80,6 +80,7 @@ export function TabsNavigator<T extends ParamListBase>({
 
     return (
         <Tab.Navigator
+            id={config.id}
             initialRouteName={config.initialRouteName as string}
             screenOptions={{
                 ...defaultScreenOptions,

package/src/molecules/navigation/types.ts

@@ -66,6 +66,8 @@ export interface StackScreen<T extends ParamListBase = ParamListBase>
 }
 
 export interface BaseNavigatorConfig<T extends ParamListBase = ParamListBase> {
+  /** Unique identifier for the navigator (required for React Navigation v7+) */
+  id?: string;
   screens: TabScreen[] | StackScreen[];
   initialRouteName?: Extract<keyof T, string>;
   getLabel?: (label: string) => string;

package/src/types/jsx.d.ts

@@ -0,0 +1,19 @@
+/**
+ * React 19 JSX Compatibility for React Native
+ * Fixes JSX namespace issues between React 19 and react-native
+ */
+
+import type { JSX as ReactJSX } from 'react';
+
+declare global {
+  namespace JSX {
+    interface Element extends ReactJSX.Element {}
+    interface ElementClass extends ReactJSX.ElementClass {}
+    interface ElementAttributesProperty extends ReactJSX.ElementAttributesProperty {}
+    interface ElementChildrenAttribute extends ReactJSX.ElementChildrenAttribute {}
+    interface IntrinsicAttributes extends ReactJSX.IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> extends ReactJSX.IntrinsicClassAttributes<T> {}
+  }
+}
+
+export {};