@oxyhq/services 5.21.5 → 5.21.6

package/lib/typescript/module/ui/navigation/bottomSheetManager.d.ts

@@ -1,74 +1,25 @@
 import type { RouteName } from './routes';
 /**
- * Bottom Sheet Manager - Pure state management module
- *
- * Uses Zustand (vanilla) for robust state management without React dependencies.
- * This ensures the manager can be imported safely anywhere.
+ * Bottom Sheet State Manager
  */
-export interface NavigationHistoryEntry {
-    screen: RouteName;
-    props: Record<string, unknown>;
-    step?: number;
-}
-export interface BottomSheetRouterState {
+export interface BottomSheetState {
     currentScreen: RouteName | null;
     screenProps: Record<string, unknown>;
     currentStep?: number;
-    navigationHistory: NavigationHistoryEntry[];
+    history: Array<{
+        screen: RouteName;
+        props: Record<string, unknown>;
+        step?: number;
+    }>;
     isOpen: boolean;
 }
-export declare const bottomSheetStore: import("zustand/vanilla").StoreApi<BottomSheetRouterState>;
-type BottomSheetRefObject = {
-    current: {
-        present: () => void;
-        dismiss: () => void;
-    } | null;
-} | null;
-/**
- * Set the bottom sheet ref so showBottomSheet can control it
- */
-export declare const setBottomSheetRef: (ref: BottomSheetRefObject) => void;
-/**
- * Update the bottom sheet state
- * (Kept for backward compatibility, but prefer using store directly if possible)
- */
-export declare const updateBottomSheetState: (updates: Partial<BottomSheetRouterState>) => void;
-/**
- * Subscribe to bottom sheet state changes
- * (Wrapper around store.subscribe for backward compatibility)
- */
-export declare const subscribeToBottomSheetState: (listener: (state: BottomSheetRouterState) => void) => () => void;
-/**
- * Get the current bottom sheet state
- * (Wrapper around store.getState for backward compatibility)
- */
-export declare const getBottomSheetState: () => BottomSheetRouterState;
-/**
- * Show the bottom sheet with a specific screen (internal - no route validation)
- */
-export declare const managerShowBottomSheet: (screen: RouteName, props?: Record<string, unknown>, options?: {
-    addToHistory?: boolean;
-    step?: number;
-}) => void;
-/**
- * Close the bottom sheet (internal)
- */
-export declare const managerCloseBottomSheet: () => void;
-/**
- * Go back in navigation history
- * Returns true if back navigation was successful, false if history is empty
- */
-export declare const managerGoBack: () => boolean;
-/**
- * Public API for showing bottom sheets
- */
+export declare const bottomSheetStore: import("zustand/vanilla").StoreApi<BottomSheetState>;
+export declare const getState: () => BottomSheetState;
 export declare const showBottomSheet: (screenOrConfig: RouteName | {
     screen: RouteName;
     props?: Record<string, unknown>;
 }) => void;
-/**
- * Public API for closing bottom sheets
- */
 export declare const closeBottomSheet: () => void;
-export {};
+export declare const goBack: () => boolean;
+export declare const updateState: (updates: Partial<BottomSheetState>) => void;
 //# sourceMappingURL=bottomSheetManager.d.ts.map

package/lib/typescript/module/ui/navigation/bottomSheetManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottomSheetManager.d.ts","sourceRoot":"","sources":["../../../../../src/ui/navigation/bottomSheetManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI1C;;;;;GAKG;AAEH,MAAM,WAAW,sBAAsB;IACnC,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB;IACnC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,sBAAsB,EAAE,CAAC;IAC5C,MAAM,EAAE,OAAO,CAAC;CACnB;AAYD,eAAO,MAAM,gBAAgB,4DAA0D,CAAC;AAGxF,KAAK,oBAAoB,GAAG;IAAE,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,CAAC;AAGpG;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,KAAK,oBAAoB,SAE1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,SAAS,OAAO,CAAC,sBAAsB,CAAC,SAE9E,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,GAAI,UAAU,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,eAE5F,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAAO,sBAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAC/B,QAAQ,SAAS,EACjB,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,UAAU;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KACpD,IAiCF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,QAAO,IAY1C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAO,OAoBhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GACxB,gBAAgB,SAAS,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,KACnF,IAmBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,IAEnC,CAAC"}
+{"version":3,"file":"bottomSheetManager.d.ts","sourceRoot":"","sources":["../../../../../src/ui/navigation/bottomSheetManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI1C;;GAEG;AAEH,MAAM,WAAW,gBAAgB;IAC7B,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrF,MAAM,EAAE,OAAO,CAAC;CACnB;AAUD,eAAO,MAAM,gBAAgB,sDAAoD,CAAC;AAElF,eAAO,MAAM,QAAQ,wBAAoC,CAAC;AAE1D,eAAO,MAAM,eAAe,GACxB,gBAAgB,SAAS,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAAE,KACnF,IA4BF,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,IAEnC,CAAC;AAEF,eAAO,MAAM,MAAM,QAAO,OAezB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,SAAS,OAAO,CAAC,gBAAgB,CAAC,SAE7D,CAAC"}

package/lib/typescript/module/ui/screens/AccountSettingsScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSettingsScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/AccountSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;mBA8Cc,MAAM;qBAAmB,MAAM;;AAsgExG,wBAAiD"}
+{"version":3,"file":"AccountSettingsScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/AccountSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;mBA6Cc,MAAM;qBAAmB,MAAM;;AAqgExG,wBAAiD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/services",
-  "version": "5.21.5",
+  "version": "5.21.6",
   "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",
@@ -252,4 +252,4 @@
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1"
   }
-}
+}

package/src/ui/components/BottomSheetRouter.tsx

@@ -1,12 +1,5 @@
-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
 import { BackHandler, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    runOnJS,
-    type SharedValue,
-} from 'react-native-reanimated';
 import { useStore } from 'zustand';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent, isValidRoute } from '../navigation/routes';
@@ -15,15 +8,12 @@ import { useColorScheme } from '../hooks/use-color-scheme';
 import { Colors } from '../constants/theme';
 import BottomSheet, { type BottomSheetRef } from './BottomSheet';
 import {
-    setBottomSheetRef as setManagerRef,
-    updateBottomSheetState,
-    subscribeToBottomSheetState,
-    managerShowBottomSheet,
-    managerCloseBottomSheet,
-    managerGoBack,
-    type BottomSheetRouterState,
-    getBottomSheetState,
     bottomSheetStore,
+    getState,
+    showBottomSheet,
+    closeBottomSheet,
+    goBack,
+    updateState,
 } from '../navigation/bottomSheetManager';
 
 export interface BottomSheetRouterProps {
@@ -31,365 +21,153 @@ export interface BottomSheetRouterProps {
     onDismiss?: () => void;
 }
 
-// Re-export types for backward compatibility
-export type { BottomSheetRouterState };
-export { subscribeToBottomSheetState };
-
-// Re-export BottomSheetRef for backward compatibility
-export type { BottomSheetRef };
-
 /**
- * BottomSheetRouter - Manages navigation within bottom sheet modals
- * 
- * Uses custom BottomSheet component built with react-native-reanimated v4.
- * State is managed by bottomSheetManager (single source of truth).
- * 
- * Features:
- * - Screen navigation with history stack
- * - Step-based navigation for multi-step screens
- * - Android back button handling
- * - Minimal props passing (screens use useOxy() for context)
+ * BottomSheetRouter - Navigation container for bottom sheet screens
  */
-// Animated screen container for smooth transitions
-const AnimatedScreenContainer: React.FC<{
-    children: React.ReactNode;
-    fadeAnim: SharedValue<number>;
-    scaleAnim: SharedValue<number>;
-    screenKey: string;
-}> = ({ children, fadeAnim, scaleAnim, screenKey }) => {
-    const animatedStyle = useAnimatedStyle(() => ({
-        opacity: fadeAnim.value,
-        transform: [
-            { scale: scaleAnim.value }
-        ]
-    }));
-
-    return (
-        <Animated.View
-            key={screenKey}
-            style={[{ flexShrink: 1 }, animatedStyle]}
-        >
-            {children}
-        </Animated.View>
-    );
-};
-
-const BottomSheetRouterComponent: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
-    const bottomSheetRef = useRef<BottomSheetRef>(null);
+const BottomSheetRouter: React.FC<BottomSheetRouterProps> = ({ onScreenChange, onDismiss }) => {
+    const sheetRef = useRef<BottomSheetRef>(null);
     const colorScheme = useColorScheme();
     const colors = Colors[colorScheme ?? 'light'];
+    const prevScreenRef = useRef<RouteName | null>(null);
 
-    // Animation values for screen transitions
-    const fadeAnim = useSharedValue(1);
-    const scaleAnim = useSharedValue(1);
-    const previousScreenRef = useRef<RouteName | null>(null);
-    const isTransitioningRef = useRef(false);
-
-    // Create stable ref object for manager compatibility
-    // Manager expects: { current: { present: () => void; dismiss: () => void } | null } | null
-    const managerRefObject = useRef({
-        current: {
-            present: () => bottomSheetRef.current?.present(),
-            dismiss: () => bottomSheetRef.current?.dismiss(),
-        },
-    });
-
-    // Single source of truth - subscribe to manager state using Zustand
-    const state = useStore(bottomSheetStore);
+    const { currentScreen, screenProps, currentStep, isOpen } = useStore(bottomSheetStore);
 
-    // Animate screen transition when screen changes
-    const animateScreenTransition = useCallback((newScreen: RouteName | null, newState: BottomSheetRouterState) => {
-        // ... implementation uses newState which comes from the store ...
-        // We can just rely on the re-render from useStore, no need to manually set local state
-        // However, the animation logic relied on queueing state updates.
-        // Let's adapt it.
-        onScreenChange?.(newScreen);
-
-        // Note: The original logic tried to defer the state update (setState) until animation completed.
-        // With Zustand, the global state is already updated.
-        // The animation logic needs to react to the state change.
-
-        // Since useStore forces a re-render with the NEW state, we are already "in" the new state.
-        // To animate "out" the old screen, we would need to have captured the previous screen
-        // before the re-render, OR we accept that the transition might be slightly different.
-
-        // Actually, the original logic had `setState` to control when the UI updates.
-        // With global store, the UI updates immediately.
-        // For now, let's trust the re-render. If animation is jerky, we can revisit.
-        // But wait, the original logic:
-        // 1. Check if transitioning. If so, wait.
-        // 2. If valid change, start exit animation -> then update local state -> then enter animation.
-
-        // With Zustand, we can't "delay" the state update because it's global.
-        // So `state` (from useStore) is ALREADY the new state.
-        // We need to detect that `state.currentScreen` changed from our `previousScreenRef`.
-
-    }, [onScreenChange]);
+    const ScreenComponent = useMemo(
+        () => (currentScreen ? getScreenComponent(currentScreen) : null),
+        [currentScreen]
+    );
 
-    // Handle screen transitions based on state changes
+    // Notify screen changes
     useEffect(() => {
-        const newScreen = state.currentScreen;
-        const previousScreen = previousScreenRef.current;
-        const isScreenChange = previousScreen !== null && previousScreen !== newScreen && newScreen !== null;
-
-        if (isScreenChange) {
-            // Logic to handle transition...
-            // Since we are already re-rendered with new state, we might see a flash of new content.
-            // Ideally we shouldn't have updated the global store until animation started...
-            // BUT `bottomSheetManager` updates the store immediately.
+        if (prevScreenRef.current !== currentScreen) {
+            onScreenChange?.(currentScreen);
+            prevScreenRef.current = currentScreen;
+        }
+    }, [currentScreen, onScreenChange]);
 
-            // For this fix, let's keep it simple: Just update the refs. 
-            // The complex animation logic in the original file was trying to bridge imperative calls with React state.
+    // Control visibility
+    useEffect(() => {
+        if (!sheetRef.current) return;
 
-            previousScreenRef.current = newScreen;
-        } else if (previousScreen === null && newScreen !== null) {
-            // Opening first time
-            fadeAnim.value = 1;
-            scaleAnim.value = 1;
-            previousScreenRef.current = newScreen;
-            onScreenChange?.(newScreen);
+        if (isOpen) {
+            sheetRef.current.present();
         } else {
-            previousScreenRef.current = newScreen;
+            sheetRef.current.dismiss();
         }
+    }, [isOpen]);
 
-        setManagerRef(managerRefObject.current);
-    }, [state.currentScreen, onScreenChange, fadeAnim, scaleAnim]);
-
-    // Clean up on unmount
+    // Android back button
     useEffect(() => {
-        return () => {
-            setManagerRef(null);
-        };
-    }, []);
-
-    // Handle explicit dismiss - only update state, don't call dismiss again
-    const handleDismiss = useCallback(() => {
-        // Only update state, don't call dismiss() as it's already being dismissed
-        updateBottomSheetState({
-            currentScreen: null,
-            screenProps: {},
-            currentStep: undefined,
-            navigationHistory: [],
-            isOpen: false,
+        if (!isOpen) return;
+        const handler = BackHandler.addEventListener('hardwareBackPress', () => {
+            handleGoBack();
+            return true;
         });
-        onDismiss?.();
-    }, [onDismiss]);
-
-    // Get current screen component (lazy-loaded)
-    const ScreenComponent = state.currentScreen ? getScreenComponent(state.currentScreen) : null;
+        return () => handler.remove();
+    }, [isOpen]);
 
-    // Navigation handler - validates route and updates manager state
-    // For step-based screens, step changes are treated as navigation events (added to history)
     const navigate = useCallback((screen: RouteName, props?: Record<string, unknown>) => {
         if (!isValidRoute(screen)) {
-            if (__DEV__) {
-                console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
-            }
+            if (__DEV__) console.warn(`[BottomSheetRouter] Invalid route: ${screen}`);
             return;
         }
-
-        const isSameScreen = screen === state.currentScreen;
-        const newStep = typeof props?.initialStep === 'number' ? props.initialStep : undefined;
-        const currentStep = state.currentStep ?? (typeof state.screenProps?.initialStep === 'number' ? state.screenProps.initialStep : undefined);
-
-        // For step-based screens: if same screen but different step, treat as navigation (add to history)
-        // This allows step navigation to be handled by router with animations
-        const isStepChange = isSameScreen && newStep !== undefined && newStep !== currentStep;
-
-        managerShowBottomSheet(screen, props, {
-            addToHistory: !isSameScreen || isStepChange, // Add to history if different screen OR step change
-        });
-    }, [state.currentScreen, state.currentStep, state.screenProps]);
-
-    // Step change handler for step-based screens
-    // This is called by StepBasedScreen to notify router of step changes
-    // The router now handles step navigation through navigate/goBack, so this is mainly for compatibility
-    const handleStepChange = useCallback((step: number, _totalSteps?: number) => {
-        // Step changes are now handled through navigate/goBack, but we still update currentStep
-        // for screens that might query it directly
-        if (state.currentScreen) {
-            updateBottomSheetState({
-                currentStep: step,
-                screenProps: {
-                    ...state.screenProps,
-                    initialStep: step,
-                }
-            });
-        }
-    }, [state.currentScreen, state.screenProps]);
-
-    // Check if the bottom sheet can be dismissed (no navigation history or steps to go back to)
-    const canDismiss = useCallback((): boolean => {
-        // Use global state to avoid stale closures during transitions
-        const currentState = getBottomSheetState();
-
-        // Check if there's navigation history
-        if (currentState.navigationHistory.length > 0) {
-            return false;
-        }
-
-        // Check if there are steps to go back to
-        const initialStep = typeof currentState.screenProps?.initialStep === 'number'
-            ? currentState.screenProps.initialStep
-            : undefined;
-        const currentStep = currentState.currentStep ?? initialStep ?? 0;
-        const isStepBased = initialStep !== undefined || currentState.currentStep !== undefined;
-
-        if (isStepBased && typeof currentStep === 'number' && currentStep > 0) {
-            return false;
-        }
-
-        // No history and on step 0 (or not step-based) - can dismiss
-        return true;
+        showBottomSheet({ screen, props });
     }, []);
 
-    // Go back handler with priority:
-    // 1. Screen history (navigate to previous screen)
-    // 2. Step navigation (navigate to previous step)
-    // 3. Close sheet (no history/step available)
-    const goBack = useCallback(() => {
-        // Use global state to avoid stale closures during transitions
-        const currentState = getBottomSheetState();
+    const handleGoBack = useCallback(() => {
+        const state = getState();
 
-        // Priority 1: Screen history
-        if (currentState.navigationHistory.length > 0) {
-            const wentBack = managerGoBack();
-            if (wentBack) {
-                return true;
-            }
+        // Try history first
+        if (state.history.length > 0) {
+            goBack();
+            return true;
         }
 
-        // Priority 2: Step navigation
-        const initialStep = typeof currentState.screenProps?.initialStep === 'number'
-            ? currentState.screenProps.initialStep
-            : undefined;
-        const currentStep = currentState.currentStep ?? initialStep ?? 0;
-        const isStepBased = initialStep !== undefined || currentState.currentStep !== undefined;
-
-        if (isStepBased && typeof currentStep === 'number' && currentStep > 0) {
-            const previousStep = currentStep - 1;
-            updateBottomSheetState({
-                screenProps: {
-                    ...currentState.screenProps,
-                    initialStep: previousStep,
-                },
-                currentStep: previousStep,
+        // Try step back
+        const step = state.currentStep ?? 0;
+        if (step > 0) {
+            updateState({
+                currentStep: step - 1,
+                screenProps: { ...state.screenProps, initialStep: step - 1 },
             });
             return true;
         }
 
-        // Priority 3: Close sheet
-        managerCloseBottomSheet();
+        // Close
+        closeBottomSheet();
         return true;
     }, []);
 
-    // Android hardware back button handler
-    useEffect(() => {
-        if (!state.isOpen) {
-            return;
-        }
-
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-            return goBack();
-        });
-
-        return () => {
-            backHandler.remove();
-        };
-    }, [state.isOpen, goBack]);
+    const canDismiss = useCallback((): boolean => {
+        const state = getState();
+        if (state.history.length > 0) return false;
+        const step = state.currentStep ?? 0;
+        return step <= 0;
+    }, []);
 
-    // Present modal when state changes to open
-    // This must be before any early returns to follow rules of hooks
-    useEffect(() => {
-        if (state.isOpen && bottomSheetRef.current) {
-            bottomSheetRef.current.present();
+    const handleDismissAttempt = useCallback((): boolean => {
+        if (!canDismiss()) {
+            handleGoBack();
+            return false;
         }
-    }, [state.isOpen]);
-
+        return true;
+    }, [canDismiss, handleGoBack]);
 
-    // Minimal screen props - only navigation-specific
-    // Screens should use useOxy() hook for OxyContext values (user, sessions, etc.)
-    // Calculate initialStep first, ensuring it's always a number or undefined
-    const calculatedInitialStep = typeof state.currentStep === 'number'
-        ? state.currentStep
-        : (typeof state.screenProps?.initialStep === 'number'
-            ? state.screenProps.initialStep
-            : undefined);
+    const handleDismiss = useCallback(() => {
+        closeBottomSheet();
+        onDismiss?.();
+    }, [onDismiss]);
 
-    // Extract screenProps without initialStep to avoid conflicts
-    const { initialStep: _, ...otherScreenProps } = state.screenProps;
+    const handleStepChange = useCallback((step: number) => {
+        const state = getState();
+        updateState({
+            currentStep: step,
+            screenProps: { ...state.screenProps, initialStep: step },
+        });
+    }, []);
 
     const scrollTo = useCallback((y: number, animated?: boolean) => {
-        bottomSheetRef.current?.scrollTo(y, animated);
+        sheetRef.current?.scrollTo(y, animated);
     }, []);
 
-    const screenProps: BaseScreenProps & { scrollTo: (y: number, animated?: boolean) => void } = {
-        navigate,
-        goBack,
-        onClose: () => managerCloseBottomSheet(),
-        onAuthenticated: () => managerCloseBottomSheet(),
-        theme: colorScheme ?? 'light',
-        currentScreen: state.currentScreen ?? undefined,
-        initialStep: calculatedInitialStep,
-        onStepChange: handleStepChange,
-        scrollTo, // Pass scrollTo method
-        ...otherScreenProps,
-    };
-
-    // renderBackground must be called before any conditional returns (React hooks rule)
     const renderBackground = useCallback(
         (props: { style?: StyleProp<ViewStyle> }) => (
-            <View
-                style={[
-                    styles.background,
-                    { backgroundColor: colors.background },
-                    props.style,
-                ]}
-            />
+            <View style={[styles.background, { backgroundColor: colors.background }, props.style]} />
         ),
-        [colors.background],
+        [colors.background]
     );
 
-    // Handle dismissal attempt - check if we can dismiss or need to go back
-    const handleDismissAttempt = useCallback((): boolean => {
-        if (!canDismiss()) {
-            // There's navigation history or steps to go back to - navigate back instead
-            goBack();
-            return false; // Prevent dismissal
-        }
-        // No history or steps - allow dismissal
-        return true;
-    }, [canDismiss, goBack]);
-
-    // Don't render if no screen is set
-    if (!ScreenComponent || !state.currentScreen) {
-        return null;
-    }
+    const screenPropsValue = useMemo((): BaseScreenProps & { scrollTo: typeof scrollTo } => {
+        const { initialStep: _, ...rest } = screenProps;
+        return {
+            navigate,
+            goBack: handleGoBack,
+            onClose: closeBottomSheet,
+            onAuthenticated: closeBottomSheet,
+            theme: colorScheme ?? 'light',
+            currentScreen: currentScreen ?? undefined,
+            initialStep: currentStep ?? (screenProps?.initialStep as number | undefined),
+            onStepChange: handleStepChange,
+            scrollTo,
+            ...rest,
+        };
+    }, [navigate, handleGoBack, colorScheme, currentScreen, currentStep, screenProps, handleStepChange, scrollTo]);
 
     return (
         <BottomSheet
-            ref={bottomSheetRef}
-            enablePanDownToClose={true}
+            ref={sheetRef}
+            enablePanDownToClose
+            enableHandlePanningGesture
             backgroundComponent={renderBackground}
-            enableHandlePanningGesture={true}
             style={styles.container}
             onDismiss={handleDismiss}
             onDismissAttempt={handleDismissAttempt}
         >
-            <AnimatedScreenContainer
-                fadeAnim={fadeAnim}
-                scaleAnim={scaleAnim}
-                screenKey={state.currentScreen}
-            >
-                <ScreenComponent {...screenProps} />
-            </AnimatedScreenContainer>
+            {ScreenComponent && currentScreen && <ScreenComponent {...screenPropsValue} />}
         </BottomSheet>
     );
 };
 
-const BottomSheetRouter = React.memo(BottomSheetRouterComponent);
-BottomSheetRouter.displayName = 'BottomSheetRouter';
-
 const styles = StyleSheet.create({
     container: {
         maxWidth: 800,
@@ -404,4 +182,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default BottomSheetRouter;
+export default React.memo(BottomSheetRouter);

package/src/ui/components/GroupedItem.tsx

@@ -4,7 +4,6 @@ import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore - MaterialCommunityIcons is available at runtime
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useColorScheme } from '../hooks/use-color-scheme';
-import { useHapticPress } from '../hooks/use-haptic-press';
 import { darkenColor } from '../utils/colorUtils';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { Colors } from '../constants/theme';
@@ -87,13 +86,10 @@ const GroupedItemComponent = ({
         </View>
     );
 
-    const handlePressIn = useHapticPress();
-
     if (onPress && !disabled) {
         return (
             <TouchableOpacity
                 style={itemStyles}
-                onPressIn={disabled ? undefined : handlePressIn}
                 onPress={onPress}
                 activeOpacity={0.7}
                 accessibilityRole="button"