Resolve bottom drawer mount before commit (#3226)

Co-authored-by: Jinwoo-H <jinwoo0825@gmail.com>

mobile/src/components/BottomDrawer.tsx

@@ -22,6 +22,7 @@ import Animated, {
   Extrapolation
 } from 'react-native-reanimated'
 import { colors, spacing } from '../theme/mobile-theme'
+import { resolveBottomDrawerMounted } from './bottom-drawer-mount-state'
 import { useResponsiveLayout } from '../layout/responsive-layout'
 
 const DISMISS_THRESHOLD = 80
@@ -50,16 +51,17 @@ export function BottomDrawer({
   zIndex
 }: Props) {
   const [mounted, setMounted] = useState(visible)
+  const resolvedMounted = resolveBottomDrawerMounted(visible, mounted)
 
-  useEffect(() => {
-    if (visible) {
-      setMounted(true)
-    }
-  }, [visible])
+  // Why: opening drawers should mount before commit; waiting for a passive
+  // Effect adds a null render before every drawer can animate in.
+  if (resolvedMounted !== mounted) {
+    setMounted(resolvedMounted)
+  }
 
   // Why: hidden drawers are rendered by parent screens even while closed; keep
   // their Reanimated/Gesture setup out of hot paths like commit-message typing.
-  if (!mounted) return null
+  if (!resolvedMounted) return null
 
   return (
     <MountedBottomDrawer

mobile/src/components/bottom-drawer-mount-state.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import { resolveBottomDrawerMounted } from './bottom-drawer-mount-state'
+
+describe('resolveBottomDrawerMounted', () => {
+  it('mounts before opening and stays mounted while closing', () => {
+    expect(resolveBottomDrawerMounted(true, false)).toBe(true)
+    expect(resolveBottomDrawerMounted(true, true)).toBe(true)
+    expect(resolveBottomDrawerMounted(false, true)).toBe(true)
+    expect(resolveBottomDrawerMounted(false, false)).toBe(false)
+  })
+})

mobile/src/components/bottom-drawer-mount-state.ts

@@ -0,0 +1,3 @@
+export function resolveBottomDrawerMounted(visible: boolean, mounted: boolean): boolean {
+  return visible || mounted
+}