android fix bottom sheet blocking ui

Author: markokraemer

apps/mobile/app.json

@@ -29,6 +29,7 @@
     },
     "android": {
       "edgeToEdgeEnabled": true,
+      "softwareKeyboardLayoutMode": "pan",
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"

apps/mobile/app/home.tsx

@@ -11,6 +11,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import type { Agent } from '@/api/types';
 import type { Conversation } from '@/components/menu/types';
 import { FeedbackDrawer } from '@/components/chat/tool-views/complete-tool/FeedbackDrawer';
+import { useFeedbackDrawerStore } from '@/stores/feedback-drawer-store';
 
 export default function AppScreen() {
   const { colorScheme } = useColorScheme();
@@ -20,6 +21,7 @@ export default function AppScreen() {
   const { threadId } = useLocalSearchParams<{ threadId?: string }>();
   const chat = useChat();
   const pageNav = usePageNavigation();
+  const { isOpen: isFeedbackDrawerOpen } = useFeedbackDrawerStore();
   const homePageRef = React.useRef<HomePageRef>(null);
 
   // Worker config drawer state for MenuPage
@@ -175,7 +177,7 @@ export default function AppScreen() {
           />
         )}
       </Drawer>
-      <FeedbackDrawer />
+      {isFeedbackDrawerOpen && <FeedbackDrawer />}
     </>
   );
 }

apps/mobile/components/agents/AgentDrawer.tsx

@@ -36,7 +36,7 @@ import {
 } from 'lucide-react-native';
 import { useColorScheme } from 'nativewind';
 import * as React from 'react';
-import { Pressable, View, ScrollView, Keyboard, Alert } from 'react-native';
+import { Pressable, View, ScrollView, Keyboard, Alert, TouchableOpacity, Platform } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   withTiming,
@@ -428,29 +428,32 @@ export function AgentDrawer({
 
       {advancedFeaturesEnabled && (
         <>
-          <AnimatedPressable
-            style={[
-              integrationsAnimatedStyle,
-              {
-                borderColor: hasFreeTier
-                  ? colorScheme === 'dark'
-                    ? '#22c55e'
-                    : '#16a34a'
-                  : colorScheme === 'dark'
-                    ? '#454444'
-                    : '#c2c2c2',
-                borderWidth: hasFreeTier ? 1.5 : 1,
-                backgroundColor: hasFreeTier
-                  ? colorScheme === 'dark'
-                    ? 'rgba(34, 197, 94, 0.1)'
-                    : 'rgba(22, 163, 74, 0.1)'
-                  : 'transparent',
-              },
-            ]}
-            className="mt-4 h-16 flex-1 flex-row items-center justify-center gap-2 rounded-2xl"
+          <TouchableOpacity
+            style={{
+              marginTop: 16,
+              height: 64,
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 8,
+              borderRadius: 16,
+              borderColor: hasFreeTier
+                ? colorScheme === 'dark'
+                  ? '#22c55e'
+                  : '#16a34a'
+                : colorScheme === 'dark'
+                  ? '#454444'
+                  : '#c2c2c2',
+              borderWidth: hasFreeTier ? 1.5 : 1,
+              backgroundColor: hasFreeTier
+                ? colorScheme === 'dark'
+                  ? 'rgba(34, 197, 94, 0.1)'
+                  : 'rgba(22, 163, 74, 0.1)'
+                : 'transparent',
+            }}
             onPress={handleIntegrationsPress}
-            onPressIn={handleIntegrationsPressIn}
-            onPressOut={handleIntegrationsPressOut}>
+            activeOpacity={0.7}>
             {hasFreeTier ? (
               <Lock size={18} color={colorScheme === 'dark' ? '#22c55e' : '#16a34a'} />
             ) : (
@@ -469,7 +472,7 @@ export function AgentDrawer({
               }}>
               {t('integrations.connectApps')}
             </Text>
-          </AnimatedPressable>
+          </TouchableOpacity>
           <View
             style={{ backgroundColor: colorScheme === 'dark' ? '#232324' : '#e0e0e0' }}
             className="my-3 h-px w-full"
@@ -669,6 +672,10 @@ export function AgentDrawer({
         width: 36,
         height: 5,
         borderRadius: 3,
+      }}
+      style={{
+        zIndex: 9999,
+        elevation: Platform.OS === 'android' ? 9999 : undefined,
       }}>
       {/* Use BottomSheetFlatList directly for composio, composio-detail, and composio-connector views */}
       {['composio', 'composio-detail', 'composio-connector'].includes(currentView) ? (

apps/mobile/components/agents/AgentSelector.tsx

@@ -2,7 +2,7 @@ import { Text } from '@/components/ui/text';
 import { Icon } from '@/components/ui/icon';
 import { ChevronDown } from 'lucide-react-native';
 import * as React from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable, View, Platform, TouchableOpacity } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -13,8 +13,12 @@ import { useAgent } from '@/contexts/AgentContext';
 import { KortixLogo } from '@/components/ui/KortixLogo';
 import { useColorScheme } from 'nativewind';
 
+// NOTE: AnimatedPressable blocks touches on Android - use TouchableOpacity instead
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
+// Android hit slop for better touch targets
+const ANDROID_HIT_SLOP = Platform.OS === 'android' ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined;
+
 interface AgentSelectorProps {
   onPress?: () => void;
   compact?: boolean;
@@ -42,16 +46,11 @@ export function AgentSelector({ onPress, compact = true }: AgentSelectorProps) {
 
   if (!agent) {
     return (
-      <AnimatedPressable
-        onPressIn={() => {
-          scale.value = withSpring(0.95, { damping: 15, stiffness: 400 });
-        }}
-        onPressOut={() => {
-          scale.value = withSpring(1, { damping: 15, stiffness: 400 });
-        }}
+      <TouchableOpacity
         onPress={onPress}
-        className="flex-row items-center gap-1.5 rounded-full px-3.5 py-2"
-        style={animatedStyle}
+        style={{ flexDirection: 'row', alignItems: 'center', gap: 6, borderRadius: 18, paddingHorizontal: 14, paddingVertical: 8 }}
+        hitSlop={ANDROID_HIT_SLOP}
+        activeOpacity={0.7}
       >
         <View className="w-6 h-6 bg-muted rounded-full items-center justify-center">
           <Text className="text-muted-foreground text-xs font-roobert-bold">?</Text>
@@ -63,22 +62,16 @@ export function AgentSelector({ onPress, compact = true }: AgentSelectorProps) {
           className="text-foreground/60"
           strokeWidth={2}
         />
-      </AnimatedPressable>
+      </TouchableOpacity>
     );
   }
 
   if (compact) {
     return (
-      <AnimatedPressable
-        onPressIn={() => {
-          scale.value = withSpring(0.95, { damping: 15, stiffness: 400 });
-        }}
-        onPressOut={() => {
-          scale.value = withSpring(1, { damping: 15, stiffness: 400 });
-        }}
+      <TouchableOpacity
         onPress={onPress}
-        className="relative"
-        style={animatedStyle}
+        hitSlop={ANDROID_HIT_SLOP}
+        activeOpacity={0.7}
       >
         <AgentAvatar agent={agent} size={26} />
         <View className="absolute -bottom-0.5 -right-0.5 rounded-full items-center justify-center" style={{ width: 13, height: 13 }}>
@@ -89,21 +82,16 @@ export function AgentSelector({ onPress, compact = true }: AgentSelectorProps) {
             strokeWidth={2.5}
           />
         </View>
-      </AnimatedPressable>
+      </TouchableOpacity>
     );
   }
 
   return (
-    <AnimatedPressable
-      onPressIn={() => {
-        scale.value = withSpring(0.95, { damping: 15, stiffness: 400 });
-      }}
-      onPressOut={() => {
-        scale.value = withSpring(1, { damping: 15, stiffness: 400 });
-      }}
+    <TouchableOpacity
       onPress={onPress}
-      className="flex-row items-center gap-1.5 rounded-2xl px-3.5 py-2"
-      style={animatedStyle}
+      style={{ flexDirection: 'row', alignItems: 'center', gap: 6, borderRadius: 16, paddingHorizontal: 14, paddingVertical: 8 }}
+      hitSlop={ANDROID_HIT_SLOP}
+      activeOpacity={0.7}
     >
       <AgentAvatar agent={agent} size={19} />
       <Text className="text-foreground text-sm font-roobert-medium">{agent.name}</Text>
@@ -113,7 +101,7 @@ export function AgentSelector({ onPress, compact = true }: AgentSelectorProps) {
         className="text-foreground/60 pt-0.5"
         strokeWidth={2}
       />
-    </AnimatedPressable>
+    </TouchableOpacity>
   );
 }
 

apps/mobile/components/chat/ChatInput.tsx

@@ -5,7 +5,7 @@ import { AudioLines, CornerDownLeft, Paperclip, X, Loader2 } from 'lucide-react-
 import { StopIcon } from '@/components/ui/StopIcon';
 import { useColorScheme } from 'nativewind';
 import * as React from 'react';
-import { Keyboard, Pressable, ScrollView, TextInput, View, ViewStyle, type ViewProps, type NativeSyntheticEvent, type TextInputContentSizeChangeEventData, type TextInputSelectionChangeEventData } from 'react-native';
+import { Keyboard, Pressable, ScrollView, TextInput, View, ViewStyle, Platform, TouchableOpacity, type ViewProps, type NativeSyntheticEvent, type TextInputContentSizeChangeEventData, type TextInputSelectionChangeEventData } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -25,6 +25,15 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 // Spring config - defined once outside component
 const SPRING_CONFIG = { damping: 15, stiffness: 400 };
 
+// Android hit slop for better touch targets
+const ANDROID_HIT_SLOP = Platform.OS === 'android' ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined;
+
+// #region agent log
+const debugLog = (location: string, message: string, data: any, hypothesisId: string) => {
+  fetch('http://127.0.0.1:7242/ingest/75c4e084-f8e3-4454-ac60-13feff134172',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location,message,data,timestamp:Date.now(),sessionId:'debug-session',hypothesisId})}).catch(()=>{});
+};
+// #endregion
+
 export interface ChatInputRef {
   focus: () => void;
 }
@@ -375,10 +384,11 @@ export const ChatInput = React.memo(React.forwardRef<ChatInputRef, ChatInputProp
     <View
       className="relative rounded-[30px] overflow-hidden bg-card border border-border"
       style={containerStyle}
+      collapsable={false}
       {...props}
     >
       <View className="absolute inset-0" />
-      <View className="p-4 flex-1">
+      <View className="p-4 flex-1" collapsable={false}>
         {isRecording ? (
           <RecordingMode
             audioLevels={audioLevels}
@@ -470,6 +480,7 @@ const RecordingMode = React.memo(({
         onPress={onCancelRecording}
         className="bg-primary/5 rounded-full items-center justify-center"
         style={[{ width: 40, height: 40 }, cancelAnimatedStyle]}
+        hitSlop={ANDROID_HIT_SLOP}
       >
         <Icon as={X} size={16} className="text-foreground" strokeWidth={2} />
       </AnimatedPressable>
@@ -479,6 +490,7 @@ const RecordingMode = React.memo(({
         onPress={onSendAudio}
         className="bg-primary rounded-full items-center justify-center"
         style={[{ width: 40, height: 40 }, stopAnimatedStyle]}
+        hitSlop={ANDROID_HIT_SLOP}
       >
         <Icon as={CornerDownLeft} size={16} className="text-primary-foreground" strokeWidth={2} />
       </AnimatedPressable>
@@ -549,6 +561,7 @@ const NormalMode = React.memo(({
       <ScrollView
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        nestedScrollEnabled={true}
       >
         <TextInput
           ref={textInputRef}
@@ -567,28 +580,34 @@ const NormalMode = React.memo(({
           onContentSizeChange={handleContentSizeChange}
           className="text-foreground text-base"
           style={textInputStyle}
+          textAlignVertical="top"
+          underlineColorAndroid="transparent"
         />
       </ScrollView>
     </View>
 
     <View className="absolute bottom-4 left-4 right-4 flex-row items-center justify-between">
       <View className="flex-row items-center gap-2">
-        <AnimatedPressable
-          onPressIn={onAttachPressIn}
-          onPressOut={onAttachPressOut}
+        {/* Use TouchableOpacity on Android - AnimatedPressable blocks touches */}
+        <TouchableOpacity
           onPress={() => {
+            // #region agent log
+            debugLog('ChatInput.tsx:attachPress', 'ATTACH BUTTON PRESSED', { isAuthenticated, isDisabled }, 'H8');
+            // #endregion
             if (!isAuthenticated) {
               console.warn('⚠️ User not authenticated - cannot attach');
               return;
             }
             onAttachPress?.();
           }}
           disabled={isDisabled}
-          className="border border-border rounded-[18px] w-10 h-10 items-center justify-center"
-          style={attachButtonStyle}
+          style={{ width: 40, height: 40, borderWidth: 1, borderRadius: 18, alignItems: 'center', justifyContent: 'center', opacity: isDisabled ? 0.4 : 1 }}
+          className="border-border"
+          hitSlop={ANDROID_HIT_SLOP}
+          activeOpacity={0.7}
         >
           <Icon as={Paperclip} size={16} className="text-foreground" />
-        </AnimatedPressable>
+        </TouchableOpacity>
       </View>
 
       <View className="flex-row items-center gap-2">
@@ -597,13 +616,19 @@ const NormalMode = React.memo(({
           compact={false}
         />
 
-        <AnimatedPressable
-          onPressIn={onSendPressIn}
-          onPressOut={onSendPressOut}
-          onPress={onButtonPress}
+        {/* Use TouchableOpacity on Android - AnimatedPressable blocks touches */}
+        <TouchableOpacity
+          onPress={() => {
+            // #region agent log
+            debugLog('ChatInput.tsx:sendPress', 'SEND/MIC BUTTON PRESSED', { isSendingMessage, isTranscribing, isAgentRunning }, 'H8');
+            // #endregion
+            onButtonPress();
+          }}
           disabled={isSendingMessage || isTranscribing}
-          className={`rounded-[18px] items-center justify-center ${isAgentRunning ? 'bg-foreground' : 'bg-primary'}`}
-          style={[{ width: 40, height: 40 }, sendAnimatedStyle]}
+          style={{ width: 40, height: 40, borderRadius: 18, alignItems: 'center', justifyContent: 'center' }}
+          className={isAgentRunning ? 'bg-foreground' : 'bg-primary'}
+          hitSlop={ANDROID_HIT_SLOP}
+          activeOpacity={0.7}
         >
           {isSendingMessage || isTranscribing ? (
             <AnimatedView style={rotationAnimatedStyle}>
@@ -616,7 +641,7 @@ const NormalMode = React.memo(({
               <Icon as={ButtonIcon as any} size={buttonIconSize} className={buttonIconClass} strokeWidth={2} />
             )
           )}
-        </AnimatedPressable>
+        </TouchableOpacity>
       </View>
     </View>
   </>