related-ui-components 1.9.4 → 1.9.5

package/package.json

@@ -1,123 +1,124 @@
-{
-  "name": "related-ui-components",
-  "main": "./src/index.ts",
-  "version": "1.9.4",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll",
-    "lint": "expo lint",
-    "prepare": "bob build"
-  },
-  "jest": {
-    "preset": "jest-expo",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/lib/"
-    ]
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~4.0.1",
-    "@expo/vector-icons": "^14.0.2",
-    "@gorhom/bottom-sheet": "^5.1.2",
-    "@ptomasroos/react-native-multi-slider": "^2.2.2",
-    "@react-native-community/slider": "4.5.5",
-    "@react-native-picker/picker": "2.9.0",
-    "@react-navigation/native": "^7.0.14",
-    "@shopify/react-native-skia": "1.5.0",
-    "date-fns": "^4.1.0",
-    "expo": "~52.0.46",
-    "expo-checkbox": "^4.0.1",
-    "expo-constants": "~17.0.7",
-    "expo-font": "~13.0.4",
-    "expo-linear-gradient": "~14.0.2",
-    "expo-linking": "~7.0.5",
-    "expo-splash-screen": "~0.29.24",
-    "expo-status-bar": "~2.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.9",
-    "react-native-calendars": "^1.1310.0",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-modal": "^14.0.0-rc.1",
-    "react-native-qrcode-svg": "^6.3.15",
-    "react-native-reanimated": "^3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
-    "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
-    "expo-clipboard": "~7.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@chromatic-com/storybook": "^3.2.5",
-    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/datetimepicker": "8.2.0",
-    "@react-native-community/slider": "4.5.5",
-    "@types/jest": "^29.5.12",
-    "@types/react": "~18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
-    "babel-loader": "^8.4.1",
-    "jest": "^29.2.1",
-    "jest-expo": "~52.0.4",
-    "react-native-builder-bob": "^0.37.0",
-    "react-test-renderer": "18.3.1",
-    "storybook": "^8.6.4",
-    "typescript": "^5.3.3",
-    "vite": "^6.2.1"
-  },
-  "private": false,
-  "source": "./src/index.ts",
-  "module": "./lib/module/index.js",
-  "types": "./lib/typescript/commonjs/index.d.ts",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./lib/typescript/module/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
-    }
-  },
-  "files": [
-    "src",
-    "lib",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__"
-  ],
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "esm": true
-        }
-      ]
-    ]
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ]
-}
+{
+  "name": "related-ui-components",
+  "main": "./src/index.ts",
+  "version": "1.9.5",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint",
+    "prepare": "bob build"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
+    "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
+    "@react-native-community/slider": "4.5.5",
+    "@react-native-picker/picker": "2.9.0",
+    "@react-navigation/native": "^7.0.14",
+    "@shopify/react-native-skia": "1.5.0",
+    "date-fns": "^4.1.0",
+    "expo": "~52.0.46",
+    "expo-checkbox": "^4.0.1",
+    "expo-constants": "~17.0.7",
+    "expo-font": "~13.0.4",
+    "expo-linear-gradient": "~14.0.2",
+    "expo-linking": "~7.0.5",
+    "expo-splash-screen": "~0.29.24",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-calendars": "^1.1310.0",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-modal": "^14.0.0-rc.1",
+    "react-native-qrcode-svg": "^6.3.15",
+    "react-native-reanimated": "^3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "expo-clipboard": "~7.0.1",
+    "expo-image": "~2.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "babel-loader": "^8.4.1",
+    "jest": "^29.2.1",
+    "jest-expo": "~52.0.4",
+    "react-native-builder-bob": "^0.37.0",
+    "react-test-renderer": "18.3.1",
+    "storybook": "^8.6.4",
+    "typescript": "^5.3.3",
+    "vite": "^6.2.1"
+  },
+  "private": false,
+  "source": "./src/index.ts",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}

package/src/components/BrandIcon/BrandIcon.tsx

@@ -2,16 +2,15 @@ import { useTheme, ThemeType } from "../../theme";
 import React from "react";
 import {
   View,
-  Image,
   TouchableOpacity,
   StyleSheet,
   StyleProp,
   ViewStyle,
   ImageSourcePropType,
-  ImageStyle,
   Text,
   TextStyle,
 } from "react-native";
+import { Image, ImageStyle} from 'expo-image';
 
 interface BrandIconProps {
   brandLogo: ImageSourcePropType;
@@ -87,7 +86,7 @@ const BrandIcon: React.FC<BrandIconProps> = ({
             { width: size, height: size, borderRadius: size / 2 },
             imageStyle,
           ]}
-          resizeMode="contain"
+          contentFit="contain"
         />
 
         {selected && (

package/src/components/Card/CardImage.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Image, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { CardImageProps } from './types';
+import { Image, ImageStyle} from 'expo-image';
+
 
 const CardImage: React.FC<CardImageProps> = ({
   source,

package/src/components/Card/templates/DealCard.tsx

@@ -6,9 +6,9 @@ import {
   View,
   Text,
   TextStyle,
-  Image,
   useWindowDimensions,
 } from "react-native";
+import { Image } from 'expo-image';
 import Card from "../Card";
 import { useTheme } from "../../../theme/ThemeContext";
 import ProgressBar, {

package/src/components/Card/types.ts

@@ -1,6 +1,11 @@
-// Card/types.ts
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, TextStyle, ImageStyle, ImageSourcePropType } from 'react-native';
+import { ReactNode } from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ImageSourcePropType,
+} from "react-native";
+import { ImageStyle } from "expo-image";
 
 export interface CardProps {
   children?: ReactNode;
@@ -9,7 +14,7 @@ export interface CardProps {
   disabled?: boolean;
   elevation?: number;
   testID?: string;
-  variant?: 'outlined' | 'elevated' | 'filled' | 'glass';
+  variant?: "outlined" | "elevated" | "filled" | "glass";
   backgroundColor?: string;
   borderColor?: string;
   borderRadius?: number;
@@ -17,12 +22,12 @@ export interface CardProps {
   padding?: number | { horizontal?: number; vertical?: number };
   backgroundImage?: {
     source: ImageSourcePropType;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+    resizeMode?: "cover" | "contain" | "stretch" | "repeat" | "center";
     blurRadius?: number;
     opacity?: number;
     style?: StyleProp<ViewStyle>;
     imageStyle?: ImageStyle;
-  },
+  };
   glassEffect?: {
     opacity?: number;
     blur?: number;
@@ -30,12 +35,12 @@ export interface CardProps {
     borderWidth?: number;
     borderColor?: string;
   };
-  gradient? :{
+  gradient?: {
     colors: string[];
     start?: { x: number; y: number };
     end?: { x: number; y: number };
     style?: object;
-  }
+  };
 }
 
 export interface CardHeaderProps {
@@ -60,7 +65,13 @@ export interface CardFooterProps {
   children: ReactNode;
   style?: StyleProp<ViewStyle>;
   inset?: boolean;
-  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+  justifyContent?:
+    | "flex-start"
+    | "center"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
 }
 
 export interface CardImageProps {
@@ -68,7 +79,7 @@ export interface CardImageProps {
   style?: StyleProp<ImageStyle>;
   height?: number | string;
   width?: number | string;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+  resizeMode?: "cover" | "contain" | "stretch" | "repeat" | "center";
   borderRadius?: number;
   overlay?: ReactNode;
 }

package/src/components/Popup/Popup.tsx

@@ -12,13 +12,12 @@ import {
   TouchableWithoutFeedback,
   Platform,
   StatusBar,
-  Image,
   TextStyle,
   ViewStyle,
-  ImageStyle,
   Animated,
   Easing,
 } from "react-native";
+import { Image, ImageStyle} from 'expo-image';
 import CloseIcon from "../CloseIcon/CloseIcon";
 
 interface PopupProps {
@@ -130,7 +129,7 @@ const Popup: FC<PopupProps> = ({
           <Image
             source={illustrationImage}
             style={[styles.illustrationImage, illustrationStyle]}
-            resizeMode="contain"
+            contentFit="contain"
           />
         </View>
       )}

package/src/components/RedeemedVoucher/RedeemedVoucherSheet.tsx

@@ -4,12 +4,12 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  Image,
   Pressable,
   ImageSourcePropType,
   StyleProp,
   ViewStyle,
 } from "react-native";
+import { Image } from 'expo-image';
 import BottomSheet, {
   BottomSheetView,
   BottomSheetProps,

package/src/components/TravelBooking/CarRentalForm.tsx

@@ -93,7 +93,7 @@ export interface CarRentalFormProps {
   agePickerWrapperStyle?: StyleProp<ViewStyle>; 
   agePickerLabelStyle?: StyleProp<TextStyle>; 
   pickerContainerStyle?: StyleProp<ViewStyle>; 
-  pickerStyle?: StyleProp<ViewStyle>; 
+  pickerStyle?: StyleProp<TextStyle>; 
 }
 
 // --- Component ---

package/src/components/TravelBooking/HotelForm.tsx

@@ -79,7 +79,7 @@ export interface HotelFormProps {
   nationalityPickerWrapperStyle?: StyleProp<ViewStyle>; 
   nationalityPickerLabelStyle?: StyleProp<TextStyle>; 
   pickerContainerStyle?: StyleProp<ViewStyle>;
-  pickerStyle?: StyleProp<ViewStyle>; 
+  pickerStyle?: StyleProp<TextStyle>; 
 }
 
 // Default Nationality Data (can be overridden by prop)