@oxyhq/services 5.11.11 → 5.12.0

package/src/models/interfaces.ts

@@ -8,6 +8,11 @@ export interface User {
   email?: string;
   // Avatar file id (asset id)
   avatar?: string;
+  // Privacy and security settings
+  privacySettings?: {
+    twoFactorEnabled?: boolean;
+    [key: string]: unknown;
+  };
   name?: {
     first?: string;
     last?: string;
@@ -330,4 +335,4 @@ export interface DeviceSessionLogoutResponse {
 export interface UpdateDeviceNameResponse {
   message: string;
   deviceName: string;
-}
+}

package/src/ui/components/FollowButton.tsx

@@ -76,7 +76,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
       event.stopPropagation?.();
     }
     if (disabled || isLoading) return;
-    
+
     // Press animation
     scale.value = withTiming(0.95, { duration: 100 }, (finished) => {
       if (finished) {
@@ -112,7 +112,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({
   // Animate button on follow/unfollow
   useEffect(() => {
     animationProgress.value = withTiming(isFollowing ? 1 : 0, { duration: 300, easing: Easing.inOut(Easing.ease) });
-  }, [isFollowing, animationProgress]);
+  }, [isFollowing]);
 
   // Animated styles for better performance
   const animatedButtonStyle = useAnimatedStyle(() => {

package/src/ui/components/GroupedItem.tsx

@@ -131,7 +131,8 @@ const styles = StyleSheet.create({
     groupedItemContent: {
         flexDirection: 'row',
         alignItems: 'center',
-        padding: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 12,
         width: '100%',
     },
     groupedItemContentDense: {

package/src/ui/components/Header.tsx

@@ -276,16 +276,17 @@ const styles = StyleSheet.create({
     container: {
         paddingTop: Platform.OS === 'ios' ? 50 : 16,
         paddingBottom: 12,
-        position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
         zIndex: 1000,
         ...Platform.select({
             web: {
-                position: 'absolute' as const,
+                position: 'sticky' as any,
+            },
+            default: {
+                position: 'absolute',
             },
-            default: {},
         }),
     },
     content: {

package/src/ui/components/OxyProvider.tsx

@@ -1,9 +1,8 @@
-import type React from 'react';
-import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { View, Text, StyleSheet, Dimensions, Platform, Animated, StatusBar, Keyboard, KeyboardEvent, AppState } from 'react-native';
+import React, { useCallback, useRef, useState, useEffect, useMemo, forwardRef, useImperativeHandle } 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';
-import type { OxyProviderProps } from '../navigation/types';
+import type { OxyProviderProps, BottomSheetController } from '../navigation/types';
 import { OxyContextProvider, useOxy } from '../context/OxyContext';
 import OxyRouter from '../navigation/OxyRouter';
 import { FontLoader, setupFonts } from './FontLoader';
@@ -36,8 +35,8 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         ...bottomSheetProps
     } = props;
 
-    // Create internal bottom sheet ref
-    const internalBottomSheetRef = useRef<BottomSheetModalRef>(null);
+    // Create typed internal bottom sheet controller ref
+    const internalBottomSheetRef = useRef<BottomSheetController>(null);
 
     // Initialize React Query Client (use provided client or create a default one once)
     const queryClientRef = useRef<QueryClient | null>(null);
@@ -68,6 +67,14 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
         };
     }, []);
 
+    // Mirror internal controller to external ref if provided (back-compat)
+    useEffect(() => {
+        if (props.bottomSheetRef) {
+            props.bottomSheetRef.current = internalBottomSheetRef.current;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.bottomSheetRef]);
+
     // If contextOnly is true, we just provide the context without the bottom sheet UI
     if (contextOnly) {
         return (
@@ -99,7 +106,7 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
                         <BottomSheetModalProvider>
                             <StatusBar translucent backgroundColor="transparent" />
                             <SafeAreaProvider>
-                                <OxyBottomSheet {...bottomSheetProps} bottomSheetRef={internalBottomSheetRef} oxyServices={oxyServices} />
+                                <OxyBottomSheet {...bottomSheetProps} ref={internalBottomSheetRef} oxyServices={oxyServices} />
                                 {children}
                             </SafeAreaProvider>
                         </BottomSheetModalProvider>
@@ -122,17 +129,19 @@ const OxyProvider: React.FC<OxyProviderProps> = (props) => {
  * This is the original OxyProvider UI functionality, now extracted into its own component
  * and reimplemented using BottomSheetModal for better Android compatibility
  */
-const OxyBottomSheet: React.FC<OxyProviderProps> = ({
+type OxyBottomSheetProps = Omit<OxyProviderProps, 'children' | 'contextOnly' | 'queryClient' | 'bottomSheetRef'>;
+
+const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
     oxyServices: providedOxyServices,
     initialScreen = 'SignIn',
     onClose,
     onAuthenticated,
     theme = 'light',
     customStyles = {},
-    bottomSheetRef,
     autoPresent = false,
     showInternalToaster = true,
-}) => {
+    appInsets,
+}, ref) => {
     // Helper function to determine if native driver should be used
     const shouldUseNativeDriver = () => {
         return Platform.OS === 'ios';
@@ -142,96 +151,87 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     const oxyServices = providedOxyServices || contextOxy?.oxyServices;
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModalRef>(null);
-    const navigationRef = useRef<((screen: string, props?: Record<string, unknown>) => void) | null>(null);
+    const isOpenRef = useRef(false);
+    const navigationRef = useRef<((screen: any, props?: Record<string, unknown>) => void) | null>(null);
     // Remove contentHeight, containerWidth, and snap point state/logic
     // Animation values - keep for content fade/slide
     const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
     const slideAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 0 : 50)).current;
-    useEffect(() => {
-        if (bottomSheetRef && modalRef.current) {
-            const methodsToExpose = ['snapToIndex', 'snapToPosition', 'close', 'expand', 'collapse', 'present', 'dismiss'];
-            methodsToExpose.forEach((method) => {
-                if (modalRef.current && typeof modalRef.current[method as keyof typeof modalRef.current] === 'function') {
-                    // @ts-ignore
-                    bottomSheetRef.current = bottomSheetRef.current || {};
-                    // @ts-ignore
-                    bottomSheetRef.current[method] = (...args: any[]) => {
-                        // @ts-ignore
-                        return modalRef.current?.[method]?.(...args);
-                    };
-                }
-            });
-
-            // Add a method to navigate between screens
-            // @ts-ignore
-            bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
-                console.log('_navigateToScreen called with:', screenName, props);
-                if (navigationRef.current) {
-                    console.log('Using navigationRef.current');
-                    navigationRef.current(screenName, props);
-                    return;
-                }
-                console.log('navigationRef.current not available, using event system');
-                if (typeof document !== 'undefined') {
-                    const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
-                    document.dispatchEvent(event);
-                } else {
-                    (globalThis as any).oxyNavigateEvent = { screen: screenName, props };
-                }
-            };
-
-            if (bottomSheetRef.current && typeof bottomSheetRef.current === 'object') {
-                console.log('Bottom sheet ref methods exposed:', Object.keys(bottomSheetRef.current));
+    // Expose a clean, typed imperative API
+    useImperativeHandle(ref, () => ({
+        present: () => {
+            if (!isOpenRef.current) modalRef.current?.present?.();
+        },
+        dismiss: () => modalRef.current?.dismiss?.(),
+        expand: () => {
+            // Ensure presented, then animate content in
+            if (!isOpenRef.current) modalRef.current?.present?.();
+            Animated.parallel([
+                Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: shouldUseNativeDriver(),
+                }),
+                Animated.spring(slideAnim, {
+                    toValue: 0,
+                    friction: 8,
+                    tension: 40,
+                    useNativeDriver: shouldUseNativeDriver(),
+                }),
+            ]).start();
+        },
+        collapse: () => modalRef.current?.collapse?.(),
+        snapToIndex: (index: number) => modalRef.current?.snapToIndex?.(index),
+        snapToPosition: (position: number | string) => modalRef.current?.snapToPosition?.(position as any),
+        navigate: (screen: any, props?: Record<string, any>) => {
+            if (navigationRef.current) {
+                navigationRef.current(screen, props);
+                return;
+            }
+            if (typeof document !== 'undefined') {
+                const event = new CustomEvent('oxy:navigate', { detail: { screen, props } });
+                document.dispatchEvent(event);
+            } else {
+                (globalThis as any).oxyNavigateEvent = { screen, props };
             }
         }
-    }, [bottomSheetRef, modalRef]);
+    }), [fadeAnim, slideAnim]);
     // Keyboard handling (unchanged)
     const [keyboardVisible, setKeyboardVisible] = useState(false);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
     const insets = useSafeAreaInsets();
     useEffect(() => {
-        const keyboardWillShowListener = Keyboard.addListener(
-            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
-            () => {
-                setKeyboardVisible(true);
-                if (modalRef.current) {
-                    requestAnimationFrame(() => {
-                        modalRef.current?.expand?.();
-                    });
-                }
-            }
-        );
-        const keyboardWillHideListener = Keyboard.addListener(
-            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
-            () => {
-                setKeyboardVisible(false);
-            }
-        );
+        // Use 'did' events on iOS to avoid multiple intermediate willShow updates
+        const showEvent = Platform.OS === 'ios' ? 'keyboardDidShow' : 'keyboardDidShow';
+        const hideEvent = Platform.OS === 'ios' ? 'keyboardDidHide' : 'keyboardDidHide';
+        let lastH = 0;
+        let lastTs = 0;
+        const MIN_DELTA = 8;
+        const MIN_INTERVAL = 80; // ms
+        const onShow = (e: KeyboardEvent) => {
+            const h = e?.endCoordinates?.height ?? 0;
+            const now = Date.now();
+            if (Math.abs(h - lastH) < MIN_DELTA && now - lastTs < MIN_INTERVAL) return;
+            lastH = h;
+            lastTs = now;
+            setKeyboardVisible(true);
+            setKeyboardHeight(h);
+        };
+        const onHide = () => {
+            lastH = 0;
+            lastTs = Date.now();
+            setKeyboardVisible(false);
+            setKeyboardHeight(0);
+        };
+        const showSub = Keyboard.addListener(showEvent as any, onShow as any);
+        const hideSub = Keyboard.addListener(hideEvent as any, onHide as any);
         return () => {
-            keyboardWillShowListener.remove();
-            keyboardWillHideListener.remove();
+            showSub.remove();
+            hideSub.remove();
         };
     }, []);
     // Present the modal when component mounts, but only if autoPresent is true
     useEffect(() => {
-        if (bottomSheetRef && modalRef.current) {
-            // @ts-ignore
-            bottomSheetRef.current.expand = () => {
-                modalRef.current?.present();
-                Animated.parallel([
-                    Animated.timing(fadeAnim, {
-                        toValue: 1,
-                        duration: 300,
-                        useNativeDriver: shouldUseNativeDriver(),
-                    }),
-                    Animated.spring(slideAnim, {
-                        toValue: 0,
-                        friction: 8,
-                        tension: 40,
-                        useNativeDriver: shouldUseNativeDriver(),
-                    }),
-                ]).start();
-            };
-        }
         if (autoPresent && modalRef.current) {
             const timer = setTimeout(() => {
                 modalRef.current?.present();
@@ -251,7 +251,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             }, 100);
             return () => clearTimeout(timer);
         }
-    }, [bottomSheetRef, modalRef, fadeAnim, slideAnim, autoPresent]);
+    }, [modalRef, autoPresent]);
     // Close the bottom sheet with animation (unchanged)
     const handleClose = useCallback(() => {
         Animated.timing(fadeAnim, {
@@ -266,7 +266,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 }, Platform.OS === 'android' ? 150 : 100);
             }
         });
-    }, [onClose, fadeAnim]);
+    }, [onClose]);
     // Handle authentication success (unchanged)
     const handleAuthenticated = useCallback((user: any) => {
         fadeAnim.stopAnimation();
@@ -280,7 +280,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 onClose();
             }, 100);
         }
-    }, [onAuthenticated, onClose, fadeAnim, slideAnim]);
+    }, [onAuthenticated, onClose]);
     // Backdrop rendering (unchanged)
     const renderBackdrop = useCallback(
         (props: BottomSheetBackdropProps) => (
@@ -293,19 +293,6 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
         ),
         []
     );
-    // Memoize background style
-    const backgroundStyle = useMemo(() => {
-        const baseColor = customStyles.backgroundColor || (theme === 'light' ? '#FFFFFF' : '#121212');
-        return {
-            backgroundColor: baseColor,
-            opacity: 1,
-            ...Platform.select({
-                android: { elevation: 24 },
-            })
-        };
-    }, [customStyles.backgroundColor, theme]);
-    // Handle sheet index changes (unchanged)
-    const handleSheetChanges = useCallback((index: number) => { }, []);
     // Modernized BottomSheetModal usage
     return (
         <BottomSheetModal
@@ -315,8 +302,9 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             enablePanDownToClose
             backdropComponent={renderBackdrop}
             backgroundStyle={[
-                backgroundStyle,
                 {
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
                     borderTopLeftRadius: 35,
                     borderTopRightRadius: 35,
                 }
@@ -326,27 +314,31 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 width: 40,
                 height: 4,
             }}
-            onChange={handleSheetChanges}
+            handleStyle={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+            }}
             style={styles.bottomSheetContainer}
             keyboardBehavior="interactive"
             keyboardBlurBehavior="restore"
-            android_keyboardInputMode="adjustResize"
+            android_keyboardInputMode="adjustPan"
             enableOverDrag={false}
             enableContentPanningGesture={true}
             enableHandlePanningGesture={true}
             overDragResistanceFactor={2.5}
             enableBlurKeyboardOnGesture={true}
             detached
-            // Uncomment below to use a sticky footer
-            // footerComponent={<YourFooterComponent />}
-            onAnimate={(fromIndex: number, toIndex: number) => {
-                console.log(`Animating from index ${fromIndex} to ${toIndex}`);
-            }}
+            topInset={(insets?.top ?? 0) + (appInsets?.top ?? 0)}
+            bottomInset={((Platform.OS === 'android' ? (keyboardVisible ? keyboardHeight : 0) : 0)) + (appInsets?.bottom ?? 0)}
+            onChange={(index) => { isOpenRef.current = index !== -1; }}
+            onDismiss={() => { isOpenRef.current = false; }}
         >
             <BottomSheetScrollView
-                style={[
-                    styles.contentContainer,
-                ]}
+                style={[styles.contentContainer]}
+                keyboardShouldPersistTaps="handled"
+                contentContainerStyle={{ paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }}
             >
                 <View style={styles.centeredContentWrapper}>
                     <Animated.View
@@ -382,12 +374,13 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             )}
         </BottomSheetModal>
     );
-};
+});
 
 const styles = StyleSheet.create({
     bottomSheetContainer: {
         maxWidth: 800,
         width: '100%',
+        alignSelf: 'center',
         marginHorizontal: 'auto',
     },
     contentContainer: {
@@ -397,7 +390,7 @@ const styles = StyleSheet.create({
     },
     centeredContentWrapper: {
         width: '100%',
-        marginHorizontal: 'auto',
+        alignSelf: 'center',
     },
     animatedContent: {
         width: '100%',

package/src/ui/components/ProfileCard.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useI18n } from '../hooks/useI18n';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies } from '../styles/fonts';
@@ -27,6 +28,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
 }) => {
     const isDarkTheme = theme === 'dark';
     const { oxyServices } = useOxy();
+    const { t } = useI18n();
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
     const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
     const primaryColor = '#0066CC';
@@ -58,7 +60,9 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                                 style={styles.editProfileButton}
                                 onPress={onEditPress}
                             >
-                                <Text style={[styles.editProfileText, { color: primaryColor }]}>Edit Profile</Text>
+                                <Text style={[styles.editProfileText, { color: primaryColor }]}>
+                                    {t('editProfile.title') || 'Edit Profile'}
+                                </Text>
                             </TouchableOpacity>
                         )}
                     </View>

package/src/ui/components/Section.tsx

@@ -27,7 +27,7 @@ const Section: React.FC<SectionProps> = ({
 
 const styles = StyleSheet.create({
     section: {
-        marginBottom: 24,
+        marginBottom: 10,
     },
     firstSection: {
         marginTop: 8,

package/src/ui/components/StepBasedScreen.tsx

@@ -21,6 +21,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useThemeColors, createAuthStyles } from '../styles';
 import type { BaseScreenProps } from '../navigation/types';
+import type { RouteName } from '../navigation/routes';
 
 export interface StepConfig {
     id: string;
@@ -39,7 +40,7 @@ export interface StepBasedScreenProps extends Omit<BaseScreenProps, 'navigate'>
     onStepChange?: (currentStep: number, totalSteps: number) => void;
     onComplete?: (stepData: any[]) => void;
     stepData?: any[];
-    navigate: (screen: string, props?: Record<string, any>) => void;
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
     oxyServices: any; // Required services for step components
 }
 
@@ -128,7 +129,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             lineHeight: 50.4, // 42 * 1.2
             marginBottom: 12,
             textAlign: 'left' as const,
-            letterSpacing: -0.5,
         },
         modernSubtitle: {
             fontSize: 18,
@@ -138,7 +138,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
         },
         modernInputContainer: {
             width: '100%',
-            marginBottom: 24,
         },
         button: {
             flexDirection: 'row' as const,
@@ -237,18 +236,22 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             withTiming(0.95, { duration: 50 })
         );
 
+        // Define a JS function for runOnJS to avoid inline closures
+        const applyStepChange = (targetStep: number, totalSteps: number) => {
+            setState(prev => ({
+                ...prev,
+                currentStep: targetStep,
+                isTransitioning: false,
+            }));
+            onStepChangeRef.current?.(targetStep, totalSteps);
+        };
+
         fadeAnim.value = withSequence(
             withTiming(0, { duration: 200 }),
             withTiming(0, { duration: 50 }, (finished) => {
                 if (finished) {
-                    runOnJS(() => {
-                        setState(prev => ({
-                            ...prev,
-                            currentStep: nextStep,
-                            isTransitioning: false
-                        }));
-                        onStepChangeRef.current?.(nextStep, steps.length);
-                    })();
+                    // Call back to JS thread correctly
+                    runOnJS(applyStepChange)(nextStep, steps.length);
 
                     // Reset animations with proper timing
                     slideAnim.value = withDelay(16, withTiming(-50, { duration: 0 }));
@@ -267,7 +270,7 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
                 }
             })
         );
-    }, [fadeAnim, slideAnim, scaleAnim, enableAnimations, steps.length]);
+    }, [enableAnimations, steps.length]);
 
     // Navigation functions
     const nextStep = useCallback(() => {
@@ -372,8 +375,8 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
 
     return (
         <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: colors.background }]}
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            style={[styles.container]}
+            behavior={undefined}
         >
             <StatusBar
                 barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -32,6 +32,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             gap: 6,
             minWidth: 70,
             borderWidth: 1,
+            flexShrink: 0,
             ...Platform.select({
                 web: {
                     boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
@@ -122,7 +123,8 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
         const baseTextStyle = {
             fontSize: 15,
             fontWeight: '600' as const,
-            flex: 1,
+            // Avoid stretching that can cause wraps on native
+            flexShrink: 1,
         };
 
         let textColor = colors.text;
@@ -140,6 +142,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
         return {
             ...baseTextStyle,
             color: textColor,
+            ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as any } : null),
         };
     };
 
@@ -155,7 +158,8 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
     };
 
     const isBackButton = (button: ButtonConfig) => {
-        return button.text.toLowerCase().includes('back') ||
+        const text = typeof button.text === 'string' ? button.text.toLowerCase() : '';
+        return text.includes('back') ||
             button.icon === 'arrow-back' ||
             button.icon === 'chevron-back';
     };
@@ -180,7 +184,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             // Single button: icon on right
             return (
                 <>
-                    <Text style={getTextStyle(button, colors)}>
+                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
                         {button.text}
                     </Text>
                     {button.icon && (
@@ -203,7 +207,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
                             color={iconColor}
                         />
                     )}
-                    <Text style={getTextStyle(button, colors)}>
+                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
                         {button.text}
                     </Text>
                 </>
@@ -212,7 +216,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             // Second button or forward/action button: text on left, icon on right
             return (
                 <>
-                    <Text style={getTextStyle(button, colors)}>
+                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
                         {button.text}
                     </Text>
                     {button.icon && (
@@ -254,4 +258,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default GroupedPillButtons; 
+export default GroupedPillButtons; 

package/src/ui/components/internal/PinInput.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
-import { useRef } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { View, TextInput, StyleSheet, Platform, type NativeSyntheticEvent, type TextInputKeyPressEventData } from 'react-native';
 
 interface PinInputColors {
@@ -11,7 +10,7 @@ interface PinInputColors {
     border: string;
 }
 
-interface PinInputProps {
+export interface PinInputProps {
     value: string;
     onChange: (val: string) => void;
     length?: number;
@@ -20,9 +19,19 @@ interface PinInputProps {
     colors: PinInputColors;
 }
 
-const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabled, autoFocus, colors }) => {
+export interface PinInputHandle {
+    focus: () => void;
+}
+
+const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, length = 6, disabled, autoFocus, colors }, ref) => {
     const inputs = useRef<Array<TextInput | null>>([]);
 
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputs.current[0]?.focus();
+        }
+    }), []);
+
     const handleChange = (text: string, idx: number) => {
         if (!/^[0-9]*$/.test(text)) return;
         let newValue = value.split('');
@@ -74,7 +83,7 @@ const PinInput: React.FC<PinInputProps> = ({ value, onChange, length = 6, disabl
             ))}
         </View>
     );
-};
+});
 
 const styles = StyleSheet.create({
     pinContainer: {
@@ -109,4 +118,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default PinInput; 
+export default PinInput;