@oxyhq/services 5.13.0 → 5.13.2

package/src/ui/components/Avatar.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { memo, useMemo } from 'react';
 import { View, Text, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle, type TextStyle, ActivityIndicator, Platform } from 'react-native';
 import { useThemeColors } from '../styles';
 import { fontFamilies } from '../styles/fonts';
@@ -16,7 +17,10 @@ export interface AvatarProps {
     text?: string;
 
     /**
-     * Full name to derive the initials from (takes first letter)
+     * Full name to derive the initials from
+     * For single word: takes first letter
+     * For multiple words: takes first letter of first and last word (e.g., "John Doe" -> "JD")
+     * For usernames starting with @: takes first two letters after @
      */
     name?: string;
 
@@ -67,9 +71,68 @@ export interface AvatarProps {
     isLoading?: boolean;
 }
 
+/**
+ * Extracts initials from a name string
+ * - Single word: first letter (e.g., "John" -> "J")
+ * - Multiple words: first letter of first and last word (e.g., "John Doe" -> "JD")
+ * - Username starting with @: first two letters after @ (e.g., "@johndoe" -> "JO")
+ */
+const getInitials = (nameStr: string): string => {
+    if (!nameStr?.trim()) return '';
+
+    const trimmed = nameStr.trim();
+    const parts = trimmed.split(/\s+/).filter(part => part.length > 0);
+
+    if (parts.length === 0) return '';
+
+    if (parts.length === 1) {
+        const firstPart = parts[0];
+        // Handle username format (@username)
+        if (firstPart.length >= 2 && firstPart.startsWith('@')) {
+            return firstPart.substring(1, 3).toUpperCase();
+        }
+        return firstPart.charAt(0).toUpperCase();
+    }
+
+    // Multiple words: first letter of first and last word
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+
+/**
+ * Generates a consistent color from a string (name)
+ * Uses a simple hash function to create a deterministic color
+ */
+const generateColorFromString = (str: string): string => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    // Generate a vibrant color with good contrast
+    const hue = Math.abs(hash) % 360;
+    // Use high saturation and medium lightness for vibrant, readable colors
+    return `hsl(${hue}, 65%, 55%)`;
+};
+
+/**
+ * Calculates font size based on avatar size for letter avatars
+ * Uses a larger ratio for better visibility
+ */
+const calculateFontSize = (size: number): number => {
+    // Use larger font size for letter avatars (50-55% of size)
+    return size <= 40
+        ? Math.floor(size * 0.5)
+        : Math.floor(size * 0.45);
+};
+
 /**
  * Avatar component that displays either an image or text avatar
- * Falls back to displaying the first letter of the name if no image is provided
+ * Falls back to displaying initials (1-2 letters) derived from the name if no image is provided
+ * Supports flexible sizing via the size prop (default: 40px)
+ * 
+ * @example
+ * <Avatar name="John Doe" size={100} theme="light" />
+ * <Avatar uri="https://example.com/avatar.jpg" size={50} />
  */
 const Avatar: React.FC<AvatarProps> = ({
     uri,
@@ -84,58 +147,111 @@ const Avatar: React.FC<AvatarProps> = ({
     textStyle,
     isLoading = false,
 }) => {
-    // Get theme colors
     const colors = useThemeColors(theme);
 
-    // Use the primary color from theme as default background if not specified
-    const bgColor = backgroundColor || colors.primary;
+    const displayText = useMemo(
+        () => text || (name ? getInitials(name) : ''),
+        [text, name]
+    );
+
+    // Generate a color from the name for letter avatars (only when no backgroundColor is provided and no uri)
+    const generatedBgColor = useMemo(
+        () => {
+            if (backgroundColor) return backgroundColor;
+            if (uri) return colors.primary; // Use primary for image avatars as fallback
+            // Generate color from name for letter avatars
+            const nameForColor = name || text || 'User';
+            return generateColorFromString(nameForColor);
+        },
+        [backgroundColor, uri, name, text, colors.primary]
+    );
 
-    // Calculate font size based on avatar size
-    const fontSize = Math.floor(size * 0.4);
+    // Memoize computed values to avoid recalculation on every render
+    const bgColor = useMemo(
+        () => generatedBgColor,
+        [generatedBgColor]
+    );
 
-    // Determine what text to display for fallback
-    const displayText = text ||
-        (name ? name.charAt(0).toUpperCase() : '');
+    const fontSize = useMemo(
+        () => calculateFontSize(size),
+        [size]
+    );
 
-    // Style for container based on size
-    const containerStyle = {
-        width: size,
-        height: size,
-        borderRadius: size / 2, // Make it circular
-    };
+    const containerStyle = useMemo(
+        () => ({
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+        }),
+        [size]
+    );
 
+    const textStyleComputed = useMemo(
+        () => [
+            styles.text,
+            {
+                fontSize,
+                fontFamily: fontFamilies.phuduBold,
+                color: textColor,
+                textAlign: 'center' as const,
+                lineHeight: size, // Match line height to size for perfect vertical centering
+                ...(Platform.OS === 'android' && { includeFontPadding: false }), // Remove extra padding for better centering (Android only)
+            },
+            textStyle,
+        ],
+        [fontSize, textColor, textStyle, size]
+    );
+
+    // Early return for loading state
     if (isLoading) {
         return (
-            <View style={[styles.container, containerStyle, { backgroundColor: colors.inputBackground }, style]}>
-                <ActivityIndicator color={colors.primary} size={size > 50 ? 'large' : 'small'} />
+            <View
+                style={[
+                    styles.container,
+                    containerStyle,
+                    { backgroundColor: colors.inputBackground },
+                    style
+                ]}
+            >
+                <ActivityIndicator
+                    color={colors.primary}
+                    size={size > 50 ? 'large' : 'small'}
+                />
             </View>
         );
     }
 
-    // If an image URL is provided, use Image component with optional background
+    // Image avatar
     if (uri) {
         return (
-            <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
+            <View
+                style={[
+                    styles.container,
+                    containerStyle,
+                    { backgroundColor: bgColor },
+                    style
+                ]}
+            >
                 <Image
-                    source={{ uri: uri }}
+                    source={{ uri }}
                     style={[styles.image, containerStyle, imageStyle]}
+                    resizeMode="cover"
                 />
             </View>
         );
     }
 
-    // Otherwise show text avatar
+    // Text avatar with initials
     return (
-        <View style={[styles.container, containerStyle, { backgroundColor: bgColor }, style]}>
-            <Text style={[
-                styles.text,
-                {
-                    fontSize,
-                    fontFamily: fontFamilies.phuduBold,
-                },
-                { color: textColor },
-                textStyle
-            ]}>
+        <View
+            style={[
+                styles.container,
+                containerStyle,
+                { backgroundColor: bgColor },
+                style
+            ]}
+        >
+            <Text style={textStyleComputed}>
                 {displayText}
             </Text>
         </View>
@@ -153,9 +269,9 @@ const styles = StyleSheet.create({
         height: '100%',
     },
     text: {
-        // Font family is applied directly in the component to use the constants
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
     },
 });
 
-export default Avatar;
+// Memoize component to prevent unnecessary re-renders when props haven't changed
+export default memo(Avatar);

package/src/ui/components/FollowButton.tsx

@@ -153,6 +153,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
           boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
         },
         default: {
+          shadowColor: '#000',
           shadowOffset: { width: 0, height: 2 },
           shadowOpacity: 0.1,
           shadowRadius: 4,

package/src/ui/components/FontLoader.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useState, useEffect } from 'react';
-import { Text, View, ActivityIndicator, StyleSheet, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import * as Font from 'expo-font';
 
 /**
@@ -21,21 +21,22 @@ const getPhuduFonts = () => {
             'Phudu-Black': require('../../assets/fonts/Phudu/Phudu-Black.ttf'),
         };
     } catch (error) {
+        if (__DEV__) {
         console.warn('Failed to load Phudu fonts:', error);
+        }
         return null;
     }
 };
 
 /**
- * FontLoader component that loads custom fonts before rendering children
+ * FontLoader component that loads custom fonts in the background while rendering children immediately
  * This works in both the package development and when consumed as an npm package
+ * Children render immediately with system fonts as fallback until custom fonts are loaded
  */
 export const FontLoader = ({
     children,
-    fallbackContent,
 }: {
     children: React.ReactNode;
-    fallbackContent?: React.ReactNode;
 }) => {
     const [fontState, setFontState] = useState<'loading' | 'loaded' | 'error'>('loading');
 
@@ -54,8 +55,9 @@ export const FontLoader = ({
 
                 setFontState('loaded');
             } catch (error) {
+                if (__DEV__) {
                 console.error('Error loading fonts:', error);
-                // Fallback to render without custom fonts
+                }
                 setFontState('error');
             }
         };
@@ -63,23 +65,14 @@ export const FontLoader = ({
         loadFonts();
     }, []);
 
-    if (fontState === 'loading') {
-        // Render a loading placeholder while fonts are loading
-        if (fallbackContent) {
-            return <>{fallbackContent}</>;
-        }
-        return (
-            <View style={styles.loaderContainer}>
-                <ActivityIndicator size="small" color="#d169e5" />
-            </View>
-        );
-    }
-
-    if (fontState === 'error') {
+    // Always render children immediately - fonts will load in background
+    // If fonts aren't loaded yet, the app will use system fonts as fallback
+    if (fontState === 'error' && __DEV__) {
         console.warn('Fonts failed to load. Using system fonts instead.');
     }
 
-    // Return children even on error - the app will use system fonts as fallback
+    // Render children immediately, even while fonts are loading
+    // Fonts will apply when they're ready, otherwise system fonts are used
     return <>{children}</>;
 };
 
@@ -148,35 +141,22 @@ export const setupFonts = async () => {
                 `;
 
                 style.textContent = fontFaceRules;
-                // Append to the document head
                 document.head.appendChild(style);
+                if (__DEV__) {
                 console.info('All Phudu web fonts have been dynamically loaded');
+                }
             }
         } else {
-            // For native platforms, guidance for the package users
-            console.info('Fonts should be linked in native projects to use Phudu fonts');
-
             // Attempt to load the fonts anyway (this works if the consumer has linked the assets)
             await Font.loadAsync(phuduFonts);
         }
 
         return true;
     } catch (error: unknown) {
+        if (__DEV__) {
         const errorMessage = error instanceof Error ? error.message : String(error);
         console.warn('Error setting up fonts:', errorMessage);
+        }
         return false;
     }
-};
-
-const styles = StyleSheet.create({
-    loaderContainer: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'transparent',
-    },
-});
+};

package/src/ui/components/OxyProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { useCallback, useRef, useState, useEffect, useMemo, forwardRef, useImperativeHandle, type FC } from 'react';
 import { View, Text, StyleSheet, 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';
@@ -10,7 +10,7 @@ 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';
+import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
 import type { BottomSheetModalMethods as BottomSheetModalRef } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 // Initialize fonts automatically
@@ -23,7 +23,7 @@ setupFonts();
  * 1. As a context provider for authentication and session management across the app
  * 2. As a UI component for authentication and account management using a bottom sheet
  */
-const OxyProvider: React.FC<OxyProviderProps> = (props) => {
+const OxyProvider: FC<OxyProviderProps> = (props) => {
     const {
         oxyServices,
         children,
@@ -335,18 +335,19 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
             onChange={(index) => { isOpenRef.current = index !== -1; }}
             onDismiss={() => { isOpenRef.current = false; }}
         >
-            <BottomSheetScrollView
-                style={[styles.contentContainer]}
-                keyboardShouldPersistTaps="handled"
-                contentContainerStyle={{ paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }}
-            >
-                <View style={styles.centeredContentWrapper}>
+            <BottomSheetView style={[styles.contentContainer]}>
+                <View
+                    style={[
+                        styles.centeredContentWrapper,
+                        { paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }
+                    ]}
+                >
                     <Animated.View
                         style={[
                             styles.animatedContent,
-                            Platform.OS === 'android' ?
-                                { opacity: 1 } :
-                                { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
+                            Platform.OS === 'android'
+                                ? { opacity: 1 }
+                                : { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
                         ]}
                     >
                         {oxyServices ? (
@@ -366,7 +367,7 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
                         )}
                     </Animated.View>
                 </View>
-            </BottomSheetScrollView>
+            </BottomSheetView>
             {showInternalToaster && (
                 <View style={styles.toasterContainer}>
                     <Toaster position="top-center" swipeToDismissDirection="left" />

package/src/ui/components/StepBasedScreen.tsx

@@ -13,11 +13,7 @@ import Animated, {
     useSharedValue,
     useAnimatedStyle,
     withTiming,
-    withSequence,
-    withDelay,
-    withSpring,
     runOnJS,
-    interpolate,
     type SharedValue,
 } from 'react-native-reanimated';
 import { useThemeColors, createAuthStyles } from '../styles';
@@ -51,6 +47,38 @@ interface StepBasedScreenState {
     isTransitioning: boolean;
 }
 
+// Individual animated progress dot
+const AnimatedProgressDot: React.FC<{
+    isActive: boolean;
+    colors: any;
+    styles: any;
+}> = ({ isActive, colors, styles }) => {
+    const width = useSharedValue(isActive ? 12 : 6);
+    const backgroundColor = useSharedValue(isActive ? colors.primary : colors.border);
+
+    useEffect(() => {
+        width.value = withTiming(isActive ? 12 : 6, { duration: 300 });
+        backgroundColor.value = withTiming(
+            isActive ? colors.primary : colors.border,
+            { duration: 300 }
+        );
+    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: width.value,
+        backgroundColor: backgroundColor.value,
+    }));
+
+    return (
+        <Animated.View
+            style={[
+                styles.progressDot,
+                animatedStyle,
+            ]}
+        />
+    );
+};
+
 // Progress indicator component
 const ProgressIndicator: React.FC<{
     currentStep: number;
@@ -60,14 +88,11 @@ const ProgressIndicator: React.FC<{
 }> = ({ currentStep, totalSteps, colors, styles }) => (
     <View style={styles.progressContainer}>
         {Array.from({ length: totalSteps }, (_, index) => (
-            <View
+            <AnimatedProgressDot
                 key={index}
-                style={[
-                    styles.progressDot,
-                    currentStep === index
-                        ? { backgroundColor: colors.primary, width: 24 }
-                        : { backgroundColor: colors.border }
-                ]}
+                isActive={currentStep === index}
+                colors={colors}
+                styles={styles}
             />
         ))}
     </View>
@@ -183,6 +208,20 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             fontWeight: '600' as const,
             textDecorationLine: 'underline' as const,
         },
+        progressContainer: {
+            flexDirection: 'row' as const,
+            width: '100%',
+            justifyContent: 'center' as const,
+            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
+            marginBottom: 24, // Equal spacing below dots
+        },
+        progressDot: {
+            height: 6,
+            width: 6,
+            borderRadius: 3,
+            marginHorizontal: 3,
+            backgroundColor: colors.border,
+        },
     }), [colors, theme]);
 
     // State management
@@ -231,13 +270,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
 
         setState(prev => ({ ...prev, isTransitioning: true }));
 
-        // Scale down current content
-        scaleAnim.value = withSequence(
-            withTiming(0.95, { duration: 150 }),
-            withTiming(0.95, { duration: 50 })
-        );
-
-        // Define a JS function for runOnJS to avoid inline closures
         const applyStepChange = (targetStep: number, totalSteps: number) => {
             setState(prev => ({
                 ...prev,
@@ -245,33 +277,24 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
                 isTransitioning: false,
             }));
             onStepChangeRef.current?.(targetStep, totalSteps);
+
+            // Prepare next step animation
+            fadeAnim.value = 0;
+            scaleAnim.value = 0.98;
+            slideAnim.value = 0;
+
+            fadeAnim.value = withTiming(1, { duration: 220 });
+            scaleAnim.value = withTiming(1, { duration: 220 });
         };
 
-        fadeAnim.value = withSequence(
-            withTiming(0, { duration: 200 }),
-            withTiming(0, { duration: 50 }, (finished) => {
-                if (finished) {
-                    // Call back to JS thread correctly
-                    runOnJS(applyStepChange)(nextStep, steps.length);
-
-                    // Reset animations with proper timing
-                    slideAnim.value = withDelay(16, withTiming(-50, { duration: 0 }));
-                    scaleAnim.value = withDelay(16, withTiming(0.95, { duration: 0 }));
-
-                    // Animate in new content
-                    fadeAnim.value = withDelay(16, withTiming(1, { duration: 300 }));
-                    slideAnim.value = withDelay(16, withSpring(0, {
-                        damping: 15,
-                        stiffness: 200,
-                    }));
-                    scaleAnim.value = withDelay(16, withSpring(1, {
-                        damping: 15,
-                        stiffness: 200,
-                    }));
-                }
-            })
-        );
-    }, [enableAnimations, steps.length]);
+        // Animate current step out
+        scaleAnim.value = withTiming(0.98, { duration: 180 });
+        fadeAnim.value = withTiming(0, { duration: 180 }, (finished) => {
+            if (finished) {
+                runOnJS(applyStepChange)(nextStep, steps.length);
+            }
+        });
+    }, [enableAnimations, steps.length, fadeAnim, scaleAnim, slideAnim]);
 
     // Navigation functions
     const nextStep = useCallback(() => {