diff --git a/mobile/app/index.tsx b/mobile/app/index.tsx index 0d26bd7..e0a7895 100644 --- a/mobile/app/index.tsx +++ b/mobile/app/index.tsx @@ -1,6 +1,7 @@ import React, { useState, useMemo } from 'react'; -import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Image, ActivityIndicator } from 'react-native'; +import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Image, ActivityIndicator, KeyboardAvoidingView, Platform } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { MaterialIcons } from '@expo/vector-icons'; import { useFiles, useFileImage } from '../hooks/useFiles'; @@ -98,6 +99,7 @@ function matchesQuery(file: FileItem, query: string, filters: SearchFilters): bo export function HomeScreen() { const navigation = useNavigation(); + const insets = useSafeAreaInsets(); const { data, isLoading, error } = useFiles(); const [searchQuery, setSearchQuery] = useState(''); const [filters, setFilters] = useState({ name: true, ocrText: true, tags: true }); @@ -135,11 +137,17 @@ export function HomeScreen() { } return ( - + item} contentContainerStyle={styles.list} + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag" ListEmptyComponent={ @@ -177,6 +185,7 @@ export function HomeScreen() { onClear={() => setSearchQuery('')} filters={filters} onFiltersChange={setFilters} + bottomPadding={insets.bottom+8} /> @@ -201,7 +210,7 @@ export function HomeScreen() { Scan - + ); } diff --git a/mobile/components/SearchBar.tsx b/mobile/components/SearchBar.tsx index 2b79190..61131cf 100644 --- a/mobile/components/SearchBar.tsx +++ b/mobile/components/SearchBar.tsx @@ -17,6 +17,7 @@ interface SearchBarProps { onClear: () => void; filters: SearchFilters; onFiltersChange: (f: SearchFilters) => void; + bottomPadding?: number; } const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName }[] = [ @@ -25,7 +26,7 @@ const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName { key: 'tags', label: 'Tags', icon: 'label-outline' }, ]; -export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange }: SearchBarProps) { +export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, bottomPadding = 0 }: SearchBarProps) { const animatedHeight = useRef(new Animated.Value(0)).current; const [panelOpen, setPanelOpen] = React.useState(false); @@ -50,7 +51,7 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha const hasActiveFilter = filters.name || filters.ocrText || filters.tags; return ( - +