fix: add lead modal - KeyboardAvoidingView + ScrollView to prevent keyboard overlap
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, TouchableOpacity, TextInput,
|
||||
ActivityIndicator, RefreshControl, Alert, Modal
|
||||
ActivityIndicator, RefreshControl, Alert, Modal,
|
||||
KeyboardAvoidingView, Platform, ScrollView,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
@@ -149,9 +150,15 @@ export default function LeadsScreen() {
|
||||
|
||||
{/* Add Lead Modal */}
|
||||
<Modal visible={showAdd} transparent animationType="slide" onRequestClose={() => setShowAdd(false)}>
|
||||
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
|
||||
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}>
|
||||
<TouchableOpacity style={{ flex: 1 }} onPress={() => setShowAdd(false)} />
|
||||
<View style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40 }}>
|
||||
<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 }} />
|
||||
<Text style={{ fontSize: 20, fontWeight: '800', color: '#1E293B', marginBottom: 20 }}>New Lead</Text>
|
||||
|
||||
@@ -192,8 +199,9 @@ export default function LeadsScreen() {
|
||||
>
|
||||
{saving ? <ActivityIndicator color="#fff" /> : <Text style={{ fontSize: 16, fontWeight: '700', color: '#fff' }}>Save Lead</Text>}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
</Modal>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user