@oxyhq/services 5.11.9 → 5.11.11

package/lib/typescript/ui/screens/steps/SignUpSecurityStep.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+interface SignUpSecurityStepProps {
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+    stepData?: any;
+    updateStepData: (data: any) => void;
+    password: string;
+    confirmPassword: string;
+    setPassword: (password: string) => void;
+    setConfirmPassword: (confirmPassword: string) => void;
+    showPassword: boolean;
+    showConfirmPassword: boolean;
+    setShowPassword: (show: boolean) => void;
+    setShowConfirmPassword: (show: boolean) => void;
+    setErrorMessage: (message: string) => void;
+    validatePassword: (password: string) => boolean;
+}
+declare const SignUpSecurityStep: React.FC<SignUpSecurityStepProps>;
+export default SignUpSecurityStep;
+//# sourceMappingURL=SignUpSecurityStep.d.ts.map

package/lib/typescript/ui/screens/steps/SignUpSecurityStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpSecurityStep.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/steps/SignUpSecurityStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,uBAAuB;IAE7B,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAGhE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAGpC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sBAAsB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAG3C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CACnD;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqJzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/typescript/ui/screens/steps/SignUpSummaryStep.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+interface SignUpSummaryStepProps {
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+    allStepData: any[];
+    isLoading: boolean;
+}
+declare const SignUpSummaryStep: React.FC<SignUpSummaryStepProps>;
+export default SignUpSummaryStep;
+//# sourceMappingURL=SignUpSummaryStep.d.ts.map

package/lib/typescript/ui/screens/steps/SignUpSummaryStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpSummaryStep.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/steps/SignUpSummaryStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,sBAAsB;IAE5B,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAGhE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IAGnB,WAAW,EAAE,GAAG,EAAE,CAAC;IAGnB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsGvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/ui/screens/steps/SignUpWelcomeStep.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+interface SignUpWelcomeStepProps {
+    colors: any;
+    styles: any;
+    theme: string;
+    navigate: (screen: string, props?: Record<string, any>) => void;
+    nextStep: () => void;
+    currentStep: number;
+    totalSteps: number;
+}
+declare const SignUpWelcomeStep: React.FC<SignUpWelcomeStepProps>;
+export default SignUpWelcomeStep;
+//# sourceMappingURL=SignUpWelcomeStep.d.ts.map

package/lib/typescript/ui/screens/steps/SignUpWelcomeStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpWelcomeStep.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/steps/SignUpWelcomeStep.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,sBAAsB;IAE5B,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAGhE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4CvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/ui/styles/authStyles.d.ts

@@ -241,7 +241,7 @@ export declare const createAuthStyles: (colors: AuthThemeColors, theme: string)
         fontWeight: "bold" | undefined;
         fontSize: number;
         marginBottom: number;
-        textAlign: "center";
+        textAlign: "left";
         letterSpacing: number;
     };
     modernUsernameSubtext: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "5.11.9",
+  "version": "5.11.11",
   "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -47,6 +47,10 @@
   "repository": "https://github.com/oxyhq/oxyhqservices",
   "author": "OxyHQ",
   "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
   "bugs": {
     "url": "https://github.com/oxyhq/oxyhqservices/issues"
   },
@@ -84,7 +88,10 @@
     "sonner-native": "^0.20.0",
     "tailwindcss": "^4.1.11",
     "zod": "^3.25.64",
-    "zustand": "^5.0.6"
+    "zustand": "^5.0.6",
+    "@tanstack/react-query": "^5.59.0",
+    "@amir-hossein-karimi/bottom-sheet": "^9.1.2",
+    "@gorhom/bottom-sheet": "^5.1.6"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -121,7 +128,7 @@
     "axios": "^1.9.0",
     "invariant": "^2.2.4",
     "jwt-decode": "^4.0.0",
-    "react": ">=18.3.0",
+    "react": ">=18.0.0",
     "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.16.1",
     "react-native-reanimated": ">=3.16.0",

package/src/models/interfaces.ts

@@ -6,11 +6,8 @@ export interface User {
   id: string;
   username: string;
   email?: string;
-  avatar?: {
-    id?: string;
-    url?: string;
-    [key: string]: unknown;
-  };
+  // Avatar file id (asset id)
+  avatar?: string;
   name?: {
     first?: string;
     last?: string;
@@ -221,6 +218,8 @@ export interface AssetLink {
   createdAt: string;
 }
 
+export type AssetMetadata = Record<string, string | number | boolean | null | undefined>;
+
 export interface AssetVariant {
   type: string;
   key: string;
@@ -228,7 +227,7 @@ export interface AssetVariant {
   height?: number;
   readyAt?: string;
   size?: number;
-  metadata?: Record<string, any>;
+  metadata?: AssetMetadata;
 }
 
 export interface Asset {
@@ -245,7 +244,7 @@ export interface Asset {
   updatedAt: string;
   links: AssetLink[];
   variants: AssetVariant[];
-  metadata?: Record<string, any>;
+  metadata?: AssetMetadata;
 }
 
 export interface AssetInitRequest {
@@ -265,7 +264,7 @@ export interface AssetCompleteRequest {
   originalName: string;
   size: number;
   mime: string;
-  metadata?: Record<string, any>;
+  metadata?: AssetMetadata;
 }
 
 export interface AssetLinkRequest {

package/src/models/session.ts

@@ -15,10 +15,7 @@ export interface StorageKeys {
 export interface MinimalUserData {
   id: string;
   username: string;
-  avatar?: {
-    id?: string;
-    url?: string;
-  };
+  avatar?: string; // file id
 }
 
 export interface SessionLoginResponse {

package/src/ui/components/AnimationExample.tsx

@@ -0,0 +1,195 @@
+import type React from 'react';
+import { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  withSequence,
+  withDelay,
+  interpolateColor,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated';
+
+// Example component showcasing improved Reanimated usage
+const AnimationExample: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // Shared values for better performance
+  const opacity = useSharedValue(1);
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const rotation = useSharedValue(0);
+  const progress = useSharedValue(0);
+  const colorProgress = useSharedValue(0);
+
+  // Animated styles with proper interpolation
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [
+        { scale: scale.value },
+        { translateX: translateX.value },
+        { rotate: `${rotation.value}deg` },
+      ],
+    };
+  });
+
+  const progressStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progress.value * 100}%`,
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        ['#3498db', '#e74c3c']
+      ),
+    };
+  });
+
+  const backgroundStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        colorProgress.value,
+        [0, 1],
+        ['#ecf0f1', '#f39c12']
+      ),
+    };
+  });
+
+  // Complex animation sequence
+  const animateSequence = () => {
+    'worklet';
+
+    // Staggered animations for smooth transitions
+    opacity.value = withTiming(0.5, { duration: 200 });
+    scale.value = withSpring(0.8, { damping: 15, stiffness: 150 });
+
+    // Delayed follow-up animations
+    translateX.value = withDelay(
+      100,
+      withSpring(50, { damping: 20, stiffness: 100 }, (finished) => {
+        if (finished) {
+          translateX.value = withSpring(0, { damping: 15, stiffness: 150 });
+        }
+      })
+    );
+
+    // Sequential animations
+    rotation.value = withSequence(
+      withTiming(10, { duration: 150 }),
+      withTiming(-10, { duration: 150 }),
+      withTiming(0, { duration: 150 })
+    );
+
+    // Progress animation with easing
+    progress.value = withTiming(1, {
+      duration: 1000,
+      easing: Easing.out(Easing.exp)
+    }, (finished) => {
+      if (finished) {
+        runOnJS(setCurrentStep)(currentStep + 1);
+      }
+    });
+
+    // Color transition
+    colorProgress.value = withTiming(1, { duration: 800 });
+
+    // Reset animations
+    setTimeout(() => {
+      opacity.value = withSpring(1);
+      scale.value = withSpring(1);
+      progress.value = withTiming(0, { duration: 500 });
+      colorProgress.value = withTiming(0, { duration: 500 });
+    }, 1500);
+  };
+
+  return (
+    <Animated.View style={[styles.container, backgroundStyle]}>
+      <Text style={styles.title}>Advanced Reanimated Example</Text>
+      <Text style={styles.subtitle}>Step: {currentStep}</Text>
+
+      <Animated.View style={[styles.box, animatedStyle]}>
+        <Text style={styles.boxText}>Animated Box</Text>
+      </Animated.View>
+
+      <View style={styles.progressContainer}>
+        <Animated.View style={[styles.progressBar, progressStyle]} />
+      </View>
+
+      <TouchableOpacity style={styles.button} onPress={animateSequence}>
+        <Text style={styles.buttonText}>Animate Sequence</Text>
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: '#2c3e50',
+  },
+  subtitle: {
+    fontSize: 16,
+    marginBottom: 30,
+    color: '#7f8c8d',
+  },
+  box: {
+    width: 150,
+    height: 150,
+    backgroundColor: '#3498db',
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 30,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  boxText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  progressContainer: {
+    width: '100%',
+    height: 10,
+    backgroundColor: '#ecf0f1',
+    borderRadius: 5,
+    marginBottom: 30,
+    overflow: 'hidden',
+  },
+  progressBar: {
+    height: '100%',
+    borderRadius: 5,
+  },
+  button: {
+    backgroundColor: '#e74c3c',
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    borderRadius: 25,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default AnimationExample;

package/src/ui/components/FollowButton.tsx

@@ -24,6 +24,10 @@ import { toast } from '../../lib/sonner';
 import { useFollow } from '../hooks/useFollow';
 import { useThemeColors } from '../styles/theme';
 
+// Create animated TouchableOpacity
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedText = Animated.createAnimatedComponent(Text);
+
 export interface FollowButtonProps {
   userId: string;
   initiallyFollowing?: boolean;
@@ -65,6 +69,30 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   const animationProgress = useSharedValue(isFollowing ? 1 : 0);
   const scale = useSharedValue(1);
 
+  // Button press handler with animation
+  const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
+    if (preventParentActions && event && event.preventDefault) {
+      event.preventDefault();
+      event.stopPropagation?.();
+    }
+    if (disabled || isLoading) return;
+    
+    // Press animation
+    scale.value = withTiming(0.95, { duration: 100 }, (finished) => {
+      if (finished) {
+        scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+      }
+    });
+
+    try {
+      await toggleFollow?.();
+      if (onFollowChange) onFollowChange(!isFollowing);
+    } catch (err: unknown) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      toast.error(error.message || 'Failed to update follow status');
+    }
+  }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions, scale]);
+
   // Initialize Zustand state with initial value if not already set
   useEffect(() => {
     if (userId && !isFollowing && initiallyFollowing) {
@@ -86,24 +114,35 @@ const FollowButton: React.FC<FollowButtonProps> = ({
     animationProgress.value = withTiming(isFollowing ? 1 : 0, { duration: 300, easing: Easing.inOut(Easing.ease) });
   }, [isFollowing, animationProgress]);
 
-  // Button press handler
-  const handlePress = useCallback(async (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
-    if (preventParentActions && event && event.preventDefault) {
-      event.preventDefault();
-      event.stopPropagation?.();
-    }
-    if (disabled || isLoading) return;
-    try {
-      await toggleFollow?.();
-      if (onFollowChange) onFollowChange(!isFollowing);
-    } catch (err: unknown) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      toast.error(error.message || 'Failed to update follow status');
-    }
-  }, [disabled, isLoading, toggleFollow, onFollowChange, isFollowing, preventParentActions]);
+  // Animated styles for better performance
+  const animatedButtonStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+      backgroundColor: interpolateColor(
+        animationProgress.value,
+        [0, 1],
+        [colors.background, colors.primary]
+      ),
+      borderColor: interpolateColor(
+        animationProgress.value,
+        [0, 1],
+        [colors.border, colors.primary]
+      ),
+    };
+  }, [colors]);
+
+  const animatedTextStyle = useAnimatedStyle(() => {
+    return {
+      color: interpolateColor(
+        animationProgress.value,
+        [0, 1],
+        [colors.text, '#FFFFFF']
+      ),
+    };
+  }, [colors]);
 
-  // Get button style based on size and follow state
-  const getButtonStyle = (): StyleProp<ViewStyle> => {
+  // Get base button style (without state-specific colors since they're animated)
+  const getBaseButtonStyle = (): StyleProp<ViewStyle> => {
     const baseStyle = {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
@@ -148,27 +187,11 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       };
     }
 
-    // State-specific colors
-    let stateStyle = {};
-    if (isFollowing) {
-      stateStyle = {
-        backgroundColor: colors.primary,
-        borderColor: colors.primary,
-        shadowColor: colors.primary,
-      };
-    } else {
-      stateStyle = {
-        backgroundColor: colors.background,
-        borderColor: colors.border,
-        shadowColor: colors.border,
-      };
-    }
-
-    return [baseStyle, sizeStyle, stateStyle, style];
+    return [baseStyle, sizeStyle, style];
   };
 
-  // Get text style based on size and follow state
-  const getTextStyle = (): StyleProp<TextStyle> => {
+  // Get base text style (without state-specific colors since they're animated)
+  const getBaseTextStyle = (): StyleProp<TextStyle> => {
     const baseTextStyle = {
       fontFamily: fontFamilies.phuduSemiBold,
       fontWeight: '600' as const,
@@ -185,15 +208,12 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       sizeTextStyle = { fontSize: 15 };
     }
 
-    // State-specific text color
-    const textColor = isFollowing ? '#FFFFFF' : colors.text;
-
-    return [baseTextStyle, sizeTextStyle, { color: textColor }, textStyle];
+    return [baseTextStyle, sizeTextStyle, textStyle];
   };
 
   return (
-    <TouchableOpacity
-      style={getButtonStyle()}
+    <AnimatedTouchableOpacity
+      style={[getBaseButtonStyle(), animatedButtonStyle]}
       onPress={handlePress}
       disabled={disabled || isLoading}
       activeOpacity={0.8}
@@ -204,11 +224,11 @@ const FollowButton: React.FC<FollowButtonProps> = ({
           color={isFollowing ? '#FFFFFF' : colors.primary}
         />
       ) : (
-        <Text style={getTextStyle()}>
+        <AnimatedText style={[getBaseTextStyle(), animatedTextStyle]}>
           {isFollowing ? 'Following' : 'Follow'}
-        </Text>
+        </AnimatedText>
       )}
-    </TouchableOpacity>
+    </AnimatedTouchableOpacity>
   );
 };
 

package/src/ui/components/GroupedItem.tsx

@@ -117,6 +117,7 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         marginBottom: 2,
         overflow: 'hidden',
+        width: '100%',
     },
     firstGroupedItem: {
         borderTopLeftRadius: 24,

package/src/ui/components/GroupedSection.tsx

@@ -28,7 +28,7 @@ interface GroupedSectionProps {
 
 const GroupedSection: React.FC<GroupedSectionProps> = ({ items, theme }) => {
     return (
-        <View>
+        <View style={{ width: '100%' }}>
             {items.map((item, index) => (
                 <GroupedItem
                     key={item.id}

package/src/ui/components/Header.tsx

@@ -22,7 +22,16 @@ export interface HeaderProps {
         loading?: boolean;
         disabled?: boolean;
         text?: string;
+        key?: string;
     };
+    rightActions?: Array<{
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string; // optional identifier
+    }>;
     theme: 'light' | 'dark';
     showBackButton?: boolean;
     showCloseButton?: boolean;
@@ -38,6 +47,7 @@ const Header: React.FC<HeaderProps> = ({
     onBack,
     onClose,
     rightAction,
+    rightActions,
     theme,
     showBackButton = true,
     showCloseButton = false,
@@ -100,26 +110,24 @@ const Header: React.FC<HeaderProps> = ({
         );
     };
 
-    const renderRightAction = () => {
-        if (!rightAction) return null;
-
-        const isTextAction = rightAction.text;
-
+    const renderRightActionButton = (action: NonNullable<HeaderProps['rightAction']>, idx: number) => {
+        const isTextAction = action.text;
         return (
             <TouchableOpacity
+                key={action.key || idx}
                 style={[
                     styles.rightActionButton,
                     isTextAction ? styles.textActionButton : styles.iconActionButton,
                     {
                         backgroundColor: isTextAction ? colors.primary : colors.surface,
-                        opacity: rightAction.disabled ? 0.5 : 1
+                        opacity: action.disabled ? 0.5 : 1
                     }
                 ]}
-                onPress={rightAction.onPress}
-                disabled={rightAction.disabled || rightAction.loading}
+                onPress={action.onPress}
+                disabled={action.disabled || action.loading}
                 activeOpacity={0.7}
             >
-                {rightAction.loading ? (
+                {action.loading ? (
                     <View style={styles.loadingContainer}>
                         <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
                         <View style={[styles.loadingDot, { backgroundColor: isTextAction ? '#FFFFFF' : colors.primary }]} />
@@ -127,15 +135,27 @@ const Header: React.FC<HeaderProps> = ({
                     </View>
                 ) : isTextAction ? (
                     <Text style={[styles.actionText, { color: '#FFFFFF' }]}>
-                        {rightAction.text}
+                        {action.text}
                     </Text>
                 ) : (
-                    <Ionicons name={rightAction.icon as any} size={18} color={colors.primary} />
+                    <Ionicons name={action.icon as any} size={18} color={colors.primary} />
                 )}
             </TouchableOpacity>
         );
     };
 
+    const renderRightActions = () => {
+        if (rightActions?.length) {
+            return (
+                <View style={styles.rightActionsRow}>
+                    {rightActions.map((a, i) => renderRightActionButton(a, i))}
+                </View>
+            );
+        }
+        if (rightAction) return renderRightActionButton(rightAction, 0);
+        return null;
+    };
+
     const renderTitle = () => {
         const titleStyle = variant === 'large' ? styles.titleLarge :
             variant === 'minimal' ? styles.titleMinimal :
@@ -245,7 +265,7 @@ const Header: React.FC<HeaderProps> = ({
             ]}>
                 {renderBackButton()}
                 {renderTitle()}
-                {renderRightAction()}
+                {renderRightActions()}
                 {renderCloseButton()}
             </View>
         </View>
@@ -263,7 +283,7 @@ const styles = StyleSheet.create({
         zIndex: 1000,
         ...Platform.select({
             web: {
-                position: 'sticky' as any,
+                position: 'absolute' as const,
             },
             default: {},
         }),
@@ -400,6 +420,10 @@ const styles = StyleSheet.create({
         borderRadius: 2,
         opacity: 0.6,
     },
+    rightActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
 });
 
 export default Header;