RG-T131 Fixing chat textbox

src/app/(app)/_layout.tsx

@@ -23,7 +23,7 @@ import { Text } from '@/components/ui/text';
 import { useAnalytics } from '@/hooks/use-analytics';
 import { useAppLifecycle } from '@/hooks/use-app-lifecycle';
 import { useSignalRLifecycle } from '@/hooks/use-signalr-lifecycle';
-import { getAppHeaderHeight } from '@/lib/app-shell-layout';
+import { getAppHeaderHeight, getAppTabBarHeight } from '@/lib/app-shell-layout';
 import { useAuthStore } from '@/lib/auth';
 import { enforceCommandAppAccess } from '@/lib/auth/command-app-access';
 import { logger } from '@/lib/logging';
@@ -382,7 +382,7 @@ export default function TabLayout() {
       tabBarStyle: {
         paddingBottom: Math.max(insets.bottom, 5),
         paddingTop: 5,
-        height: isLandscape ? 65 : Math.max(60 + insets.bottom, 60),
+        height: getAppTabBarHeight(insets.bottom, isLandscape),
         elevation: 2,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: -1 },

src/app/(app)/chatbot.tsx

@@ -2,7 +2,8 @@ import { Redirect, useFocusEffect } from 'expo-router';
 import { RefreshCw, Send, Sparkles } from 'lucide-react-native';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FlatList, Platform } from 'react-native';
+import { FlatList, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { copyToClipboard } from '@/components/chat/chat-utils';
 import { MessageActionsSheet } from '@/components/chat/message-actions-sheet';
@@ -13,10 +14,11 @@ import { Center } from '@/components/ui/center';
 import { FocusAwareStatusBar } from '@/components/ui/focus-aware-status-bar';
 import { HStack } from '@/components/ui/hstack';
 import { Input, InputField } from '@/components/ui/input';
-import { KeyboardAvoidingView } from '@/components/ui/keyboard-avoiding-view';
+import { BottomAnchoredKeyboardView } from '@/components/ui/keyboard-avoiding-view';
 import { Pressable } from '@/components/ui/pressable';
 import { Spinner } from '@/components/ui/spinner';
 import { Text } from '@/components/ui/text';
+import { getAppTabBarHeight } from '@/lib/app-shell-layout';
 import { type ChatMessageResultData } from '@/models/v4/chat';
 import useAuthStore from '@/stores/auth/store';
 import { useChatStore } from '@/stores/chat/store';
@@ -26,6 +28,11 @@ import { useToastStore } from '@/stores/toast/store';
 
 export default function ChatbotScreen() {
   const { t } = useTranslation();
+  // The assistant is a hidden tab, so the tab bar still sits below it and the keyboard
+  // already covers that strip — pad for the remainder only.
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const tabBarHeight = getAppTabBarHeight(insets.bottom, width > height);
   const currentUserId = useAuthStore((s) => s.userId);
   const chatbotChannelId = useChatStore((s) => s.chatbotChannelId);
   const chatbotTyping = useChatStore((s) => s.chatbotTyping);
@@ -112,7 +119,7 @@ export default function ChatbotScreen() {
         </Pressable>
       </HStack>
 
-      <KeyboardAvoidingView className="flex-1" behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={90}>
+      <BottomAnchoredKeyboardView offset={tabBarHeight}>
         {inverted.length === 0 ? (
           <Center className="flex-1 px-8">
             <Sparkles size={48} color="#a78bfa" />
@@ -141,7 +148,7 @@ export default function ChatbotScreen() {
             <Send size={20} color="#ffffff" />
           </Pressable>
         </HStack>
-      </KeyboardAvoidingView>
+      </BottomAnchoredKeyboardView>
 
       {/* Restricted actions for assistant messages: copy, pin (moderator), flag. */}
       <MessageActionsSheet

src/app/_layout.tsx

@@ -29,6 +29,7 @@ import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
 import { loadKeepAliveState } from '@/lib/hooks/use-keep-alive';
 import { loadSelectedTheme } from '@/lib/hooks/use-selected-theme';
 import { logger } from '@/lib/logging';
+import { registerNavigationReadyCheck } from '@/lib/navigation';
 import { getDeviceUuid, setDeviceUuid } from '@/lib/storage/app';
 import { loadBackgroundGeolocationState } from '@/lib/storage/background-geolocation';
 import { uuidv4 } from '@/lib/utils';
@@ -128,6 +129,11 @@ function RootLayout() {
       navigationIntegration.registerNavigationContainer(ref);
     }
 
+    // Cold-start deep links (a push-notification tap that launched the app) fire before
+    // this tree mounts. Publish the container's own readiness so routerPushWithRetry can
+    // wait for a real signal instead of a thrown error expo-router never raises.
+    registerNavigationReadyCheck(() => ref?.isReady?.() ?? false);
+
     // Clear the badge count on app startup (native only — notifee has no web implementation)
     if (Platform.OS !== 'web') {
       notifee

src/app/chat/[channelId].tsx

@@ -3,7 +3,7 @@ import { type Href, Redirect, Stack, useFocusEffect, useLocalSearchParams, useRo
 import { Archive, ArrowLeft, Circle, ShieldCheck } from 'lucide-react-native';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FlatList, Platform } from 'react-native';
+import { FlatList } from 'react-native';
 
 import { getPresence, uploadAttachment } from '@/api/chat/chat';
 import { AckBanner } from '@/components/chat/ack-banner';
@@ -19,7 +19,7 @@ import { Button, ButtonText } from '@/components/ui/button';
 import { Center } from '@/components/ui/center';
 import { HStack } from '@/components/ui/hstack';
 import { Icon } from '@/components/ui/icon';
-import { KeyboardAvoidingView } from '@/components/ui/keyboard-avoiding-view';
+import { BottomAnchoredKeyboardView } from '@/components/ui/keyboard-avoiding-view';
 import { Pressable } from '@/components/ui/pressable';
 import { Spinner } from '@/components/ui/spinner';
 import { Text } from '@/components/ui/text';
@@ -392,7 +392,7 @@ export default function ChannelConversationScreen() {
 
       <AckBanner acks={channelAcks} onAcknowledge={(messageId) => useChatStore.getState().acknowledgeMessage(messageId)} />
 
-      <KeyboardAvoidingView className="flex-1" behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={90}>
+      <BottomAnchoredKeyboardView>
         {loading && inverted.length === 0 ? (
           <Center className="flex-1">
             <Spinner />
@@ -420,7 +420,7 @@ export default function ChannelConversationScreen() {
           onTyping={(isTyping) => channelId && useChatStore.getState().sendTyping(channelId, isTyping)}
           disabled={isFrozen || (channel?.IsLocked && !isModerator)}
         />
-      </KeyboardAvoidingView>
+      </BottomAnchoredKeyboardView>
 
       <GifPickerSheet isOpen={gifOpen} onClose={() => setGifOpen(false)} onSelect={handleSendGif} />
 

src/app/chat/thread/[messageId].tsx

@@ -1,15 +1,15 @@
 import { Redirect, Stack, useLocalSearchParams } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FlatList, Platform } from 'react-native';
+import { FlatList } from 'react-native';
 
 import { getChannel, getThread } from '@/api/chat/chat';
 import { buildLocationMetadata } from '@/components/chat/chat-utils';
 import { MessageBubble } from '@/components/chat/message-bubble';
 import { MessageComposer } from '@/components/chat/message-composer';
 import { Box } from '@/components/ui/box';
 import { Divider } from '@/components/ui/divider';
-import { KeyboardAvoidingView } from '@/components/ui/keyboard-avoiding-view';
+import { BottomAnchoredKeyboardView } from '@/components/ui/keyboard-avoiding-view';
 import { Spinner } from '@/components/ui/spinner';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
@@ -164,7 +164,7 @@ export default function ThreadScreen() {
     <Box className="size-full flex-1 bg-background-0">
       <Stack.Screen options={{ title: t('chat.thread'), headerShown: true, headerBackTitle: '' }} />
 
-      <KeyboardAvoidingView className="flex-1" behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={90}>
+      <BottomAnchoredKeyboardView>
         {root ? (
           <VStack className="border-b border-outline-200 bg-background-50 py-2">
             <Text className="px-4 text-xs font-semibold uppercase text-typography-400">{t('chat.original_message')}</Text>
@@ -179,7 +179,7 @@ export default function ThreadScreen() {
         {/* Threads carry text and location only; omitting the image/GIF callbacks keeps
             those actions out of the composer instead of showing dead buttons. */}
         <MessageComposer onSendText={handleSendText} onSendLocation={handleSendLocation} onTyping={() => undefined} placeholder={t('chat.reply_placeholder')} allowUrgent={false} disabled={!channel || isFrozen} />
-      </KeyboardAvoidingView>
+      </BottomAnchoredKeyboardView>
     </Box>
   );
 }

src/components/ui/keyboard-avoiding-view/__tests__/bottom-anchored.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+
+import { BottomAnchoredKeyboardView, keyboardPaddingBottom } from '../bottom-anchored';
+
+jest.mock('react-native-keyboard-controller', () => ({
+  useReanimatedKeyboardAnimation: () => ({ height: { value: 0 }, progress: { value: 0 } }),
+}));
+
+describe('keyboardPaddingBottom', () => {
+  it('leaves no gap while the keyboard is closed', () => {
+    expect(keyboardPaddingBottom(0, 0)).toBe(0);
+  });
+
+  it('pads by the full keyboard height, which the library reports negative', () => {
+    expect(keyboardPaddingBottom(-320, 0)).toBe(320);
+  });
+
+  it('subtracts chrome the keyboard already covers, such as a bottom tab bar', () => {
+    expect(keyboardPaddingBottom(-320, 60)).toBe(260);
+  });
+
+  it('never pads when the offset alone exceeds the keyboard', () => {
+    expect(keyboardPaddingBottom(-40, 60)).toBe(0);
+  });
+
+  it('clamps at zero so an unexpected positive height cannot pull the content down', () => {
+    expect(keyboardPaddingBottom(40, 0)).toBe(0);
+  });
+});
+
+describe('BottomAnchoredKeyboardView', () => {
+  it('renders its children', () => {
+    render(
+      <BottomAnchoredKeyboardView>
+        <Text>composer</Text>
+      </BottomAnchoredKeyboardView>
+    );
+
+    expect(screen.getByText('composer')).toBeTruthy();
+  });
+});

src/components/ui/keyboard-avoiding-view/bottom-anchored.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React from 'react';
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
+
+interface BottomAnchoredKeyboardViewProps {
+  children: React.ReactNode;
+  /**
+   * Height in dp of any chrome sitting between this container and the bottom of the
+   * display — a bottom tab bar, most often. The keyboard already covers that chrome, so
+   * it is space this view must not pad for a second time.
+   */
+  offset?: number;
+  style?: ViewStyle;
+}
+
+/**
+ * Padding a bottom-anchored container owes the keyboard.
+ *
+ * `animatedHeight` is the library's keyboard value: 0 when closed, and negative while the
+ * keyboard is up, since it is published for `translateY`. Marked as a worklet so the
+ * animated style can call it on the UI thread.
+ */
+export const keyboardPaddingBottom = (animatedHeight: number, offset: number): number => {
+  'worklet';
+
+  return Math.max(-animatedHeight - offset, 0);
+};
+
+/**
+ * Keyboard avoidance for a container whose bottom edge *is* the bottom of the screen.
+ *
+ * `KeyboardAvoidingView` derives its padding from where it believes it sits on screen:
+ * `frame.y + frame.height` versus `screenHeight - keyboardHeight`. Its `automaticOffset`
+ * prop is what makes that frame absolute — it asks the native side for
+ * `getLocationOnScreen` once per layout, over a promise. Under a native-stack header on
+ * Android that measurement is the entire fix, and when it is stale, rejected, or resolved
+ * mid-transition the padding comes up short by the header plus the status bar, which is
+ * exactly enough for the keyboard to sit over the composer.
+ *
+ * This view measures nothing. The container already ends at the bottom of the screen, so
+ * the gap it owes is precisely the keyboard height, on both platforms.
+ *
+ * Only for full-bleed screen content. Anything that does not reach the bottom of the
+ * screen (bottom sheets, inset cards) still needs a measuring variant — see
+ * `useKeyboardHeight` for the sheet case, which lives in its own native window.
+ */
+export const BottomAnchoredKeyboardView: React.FC<BottomAnchoredKeyboardViewProps> = ({ children, offset = 0, style }) => {
+  // Also arms Android's resize mode, the way `KeyboardAvoidingView` did.
+  const { height } = useReanimatedKeyboardAnimation();
+  const animatedStyle = useAnimatedStyle(() => ({ paddingBottom: keyboardPaddingBottom(height.value, offset) }), [offset]);
+
+  return <Reanimated.View style={[styles.fill, style, animatedStyle]}>{children}</Reanimated.View>;
+};
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+});

src/components/ui/keyboard-avoiding-view/index.tsx

@@ -1,2 +1,5 @@
 'use client';
 export { KeyboardAvoidingView } from 'react-native';
+// Prefer this on screens that run edge-to-edge to the bottom of the display: it skips
+// the screen-position measurement entirely. See the file for why that matters on Android.
+export { BottomAnchoredKeyboardView } from './bottom-anchored';

src/lib/__tests__/app-shell-layout.test.ts

@@ -1,4 +1,4 @@
-import { getAppHeaderHeight } from '@/lib/app-shell-layout';
+import { getAppHeaderHeight, getAppTabBarHeight } from '@/lib/app-shell-layout';
 
 describe('getAppHeaderHeight', () => {
   it('keeps the safe-area inset while using a compact portrait header', () => {
@@ -10,3 +10,17 @@ describe('getAppHeaderHeight', () => {
     expect(getAppHeaderHeight(-10, false)).toBe(44);
   });
 });
+
+describe('getAppTabBarHeight', () => {
+  it('adds the bottom safe-area inset in portrait', () => {
+    expect(getAppTabBarHeight(34, false)).toBe(94);
+  });
+
+  it('uses the fixed landscape height, ignoring the inset', () => {
+    expect(getAppTabBarHeight(34, true)).toBe(65);
+  });
+
+  it('treats a negative inset as zero', () => {
+    expect(getAppTabBarHeight(-10, false)).toBe(60);
+  });
+});