kibin/fiberops-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add lead modal - KeyboardAvoidingView + ScrollView to prevent keyboard overlap

Browse Source
This commit is contained in:
Nemo
2026-03-24 14:26:33 +08:00
parent c1da787656
commit 16cf1c0616
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/(app)/leads/index.tsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'; import { useState } from 'react';
import { import {
View, Text, FlatList, TouchableOpacity, TextInput, View, Text, FlatList, TouchableOpacity, TextInput,
ActivityIndicator, RefreshControl, Alert, Modal ActivityIndicator, RefreshControl, Alert, Modal,
KeyboardAvoidingView, Platform, ScrollView,
} from 'react-native'; } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -149,9 +150,15 @@ export default function LeadsScreen() {
{/* Add Lead Modal */} {/* Add Lead Modal */}
<Modal visible={showAdd} transparent animationType="slide" onRequestClose={() => setShowAdd(false)}> <Modal visible={showAdd} transparent animationType="slide" onRequestClose={() => setShowAdd(false)}>
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}> <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<TouchableOpacity style={{ flex: 1 }} onPress={() => setShowAdd(false)} /> <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}>
<View style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40 }}> <TouchableOpacity style={{ flex: 1 }} onPress={() => setShowAdd(false)} />
<ScrollView
keyboardShouldPersistTaps="handled"
style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24 }}
contentContainerStyle={{ padding: 24, paddingBottom: 48 }}
bounces={false}
>
<View style={{ width: 40, height: 4, backgroundColor: '#E2E8F0', borderRadius: 2, alignSelf: 'center', marginBottom: 20 }} /> <View style={{ width: 40, height: 4, backgroundColor: '#E2E8F0', borderRadius: 2, alignSelf: 'center', marginBottom: 20 }} />
<Text style={{ fontSize: 20, fontWeight: '800', color: '#1E293B', marginBottom: 20 }}>New Lead</Text> <Text style={{ fontSize: 20, fontWeight: '800', color: '#1E293B', marginBottom: 20 }}>New Lead</Text>
@@ -186,14 +193,15 @@ export default function LeadsScreen() {
style={{ borderWidth: 1, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 12, fontSize: 15, color: '#1E293B', marginBottom: 20, minHeight: 72, textAlignVertical: 'top' }} style={{ borderWidth: 1, borderColor: '#E2E8F0', borderRadius: 12, paddingHorizontal: 14, paddingVertical: 12, fontSize: 15, color: '#1E293B', marginBottom: 20, minHeight: 72, textAlignVertical: 'top' }}
/> />
<TouchableOpacity <TouchableOpacity
onPress={addLead} disabled={saving} onPress={addLead} disabled={saving}
style={{ backgroundColor: saving ? '#94A3B8' : '#0891B2', borderRadius: 14, paddingVertical: 17, alignItems: 'center' }} style={{ backgroundColor: saving ? '#94A3B8' : '#0891B2', borderRadius: 14, paddingVertical: 17, alignItems: 'center' }}
> >
{saving ? <ActivityIndicator color="#fff" /> : <Text style={{ fontSize: 16, fontWeight: '700', color: '#fff' }}>Save Lead</Text>} {saving ? <ActivityIndicator color="#fff" /> : <Text style={{ fontSize: 16, fontWeight: '700', color: '#fff' }}>Save Lead</Text>}
</TouchableOpacity> </TouchableOpacity>
</ScrollView>
</View> </View>
</View> </KeyboardAvoidingView>
</Modal> </Modal>
</SafeAreaView> </SafeAreaView>
); );