@oxyhq/services 5.11.8 → 5.11.10

package/src/ui/components/AnimationExample.tsx

@@ -0,0 +1,194 @@
+import React, { 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 && 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>
@@ -400,6 +420,10 @@ const styles = StyleSheet.create({
         borderRadius: 2,
         opacity: 0.6,
     },
+    rightActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
 });
 
 export default Header; 

package/src/ui/components/OxyProvider.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent, AppState } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import type { OxyProviderProps } from '../navigation/types';
@@ -8,6 +8,7 @@ import { OxyContextProvider, useOxy } from '../context/OxyContext';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
 import { Toaster } from '../../lib/sonner';
+import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
 
 // Import bottom sheet components directly - no longer a peer dependency
 import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView, BottomSheetScrollView } from '@gorhom/bottom-sheet';
@@ -38,47 +39,80 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
     // Create internal bottom sheet ref
     const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
 
+    // Initialize React Query Client (use provided client or create a default one once)
+    const queryClientRef = useRef<QueryClient | null>(null);
+    if (!queryClientRef.current) {
+        queryClientRef.current = props.queryClient ?? new QueryClient({
+            defaultOptions: {
+                queries: {
+                    staleTime: 30_000,
+                    gcTime: 5 * 60_000,
+                    retry: 2,
+                    refetchOnReconnect: true,
+                    refetchOnWindowFocus: false,
+                },
+                mutations: {
+                    retry: 1,
+                },
+            },
+        });
+    }
+
+    // Hook React Query focus manager into React Native AppState
+    useEffect(() => {
+        const subscription = AppState.addEventListener('change', (state) => {
+            focusManager.setFocused(state === 'active');
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, []);
+
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
         return (
+            <QueryClientProvider client={queryClientRef.current}>
+                <OxyContextProvider
+                    oxyServices={oxyServices}
+                    baseURL={baseURL}
+                    storageKeyPrefix={storageKeyPrefix}
+                    onAuthStateChange={onAuthStateChange}
+                >
+                    {children}
+                </OxyContextProvider>
+            </QueryClientProvider>
+        );
+    }
+
+    // Otherwise, provide both the context and the bottom sheet UI
+    return (
+        <QueryClientProvider client={queryClientRef.current}>
             <OxyContextProvider
                 oxyServices={oxyServices}
                 baseURL={baseURL}
                 storageKeyPrefix={storageKeyPrefix}
                 onAuthStateChange={onAuthStateChange}
+                bottomSheetRef={internalBottomSheetRef}
             >
-                {children}
+                <FontLoader>
+                    <GestureHandlerRootView style={styles.gestureHandlerRoot}>
+                        <BottomSheetModalProvider>
+                            <StatusBar translucent backgroundColor="transparent" />
+                            <SafeAreaProvider>
+                                <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
+                                {children}
+                            </SafeAreaProvider>
+                        </BottomSheetModalProvider>
+                        {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
+                        {!showInternalToaster && (
+                            <View style={styles.toasterContainer}>
+                                <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                            </View>
+                        )}
+                    </GestureHandlerRootView>
+                </FontLoader>
             </OxyContextProvider>
-        );
-    }
-
-    // Otherwise, provide both the context and the bottom sheet UI
-    return (
-        <OxyContextProvider
-            oxyServices={oxyServices}
-            baseURL={baseURL}
-            storageKeyPrefix={storageKeyPrefix}
-            onAuthStateChange={onAuthStateChange}
-            bottomSheetRef={internalBottomSheetRef}
-        >
-            <FontLoader>
-                <GestureHandlerRootView style={styles.gestureHandlerRoot}>
-                    <BottomSheetModalProvider>
-                        <StatusBar translucent backgroundColor="transparent" />
-                        <SafeAreaProvider>
-                            <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
-                            {children}
-                        </SafeAreaProvider>
-                    </BottomSheetModalProvider>
-                    {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
-                    {!showInternalToaster && (
-                        <View style={styles.toasterContainer}>
-                            <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
-                        </View>
-                    )}
-                </GestureHandlerRootView>
-            </FontLoader>
-        </OxyContextProvider>
+        </QueryClientProvider>
     );
 };
 

package/src/ui/components/ProfileCard.tsx

@@ -2,18 +2,15 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from './Avatar';
+import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
 
 interface ProfileCardProps {
     user: {
         username: string;
         email?: string;
-        name?: {
-            full?: string;
-        };
-        avatar?: {
-            url?: string;
-        };
+        name?: { full?: string };
+        avatar?: string; // file id
     };
     theme: 'light' | 'dark';
     onEditPress?: () => void;
@@ -29,6 +26,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
     showCloseButton = false,
 }) => {
     const isDarkTheme = theme === 'dark';
+    const { oxyServices } = useOxy();
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
     const primaryColor = '#0066CC';
@@ -43,7 +41,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
             ]}>
                 <View style={styles.userProfile}>
                     <Avatar
-                        uri={user?.avatar?.url}
+                        uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
                         name={user?.name?.full || user?.username}
                         size={60}
                         theme={theme}
@@ -56,7 +54,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                             </Text>
                         )}
                         {onEditPress && (
-                            <TouchableOpacity 
+                            <TouchableOpacity
                                 style={styles.editProfileButton}
                                 onPress={onEditPress}
                             >

package/src/ui/components/index.ts

@@ -12,6 +12,5 @@ export { default as Avatar } from './Avatar';
 export { default as FollowButton } from './FollowButton';
 export { FontLoader, setupFonts } from './FontLoader';
 export { default as OxyLogo } from './OxyLogo';
-export { default as OxyProvider } from './OxyProvider';
 export { default as OxySignInButton } from './OxySignInButton';
 export { default as OxyPayButton } from './OxyPayButton';