Fix form keyboard issues and sticky footers in agent screens
This commit is contained in:
Abin Toppo
@@ -0,0 +1,219 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, StyleSheet, Text, FlatList } from 'react-native';
|
||||
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
import type { ServicesStackParamList } from '../../../navigation/types';
|
||||
import { ScreenShell, Card, Button } from '../../../components';
|
||||
import { AppModal } from '../../../components/Modal';
|
||||
import { useToast } from '../../../hooks/useToast';
|
||||
import { useTheme } from '../../../theme';
|
||||
|
||||
type Props = NativeStackScreenProps<ServicesStackParamList, 'CertificateList'>;
|
||||
|
||||
export default function CertificateListScreen({ route }: Props) {
|
||||
const { title, category } = route.params;
|
||||
const theme = useTheme();
|
||||
const toast = useToast();
|
||||
const [viewingDoc, setViewingDoc] = useState<string | null>(null);
|
||||
|
||||
const mockDocs = Array.from({ length: 4 }).map((_, i) => ({
|
||||
id: String(i),
|
||||
name: `FY ${26 - i}-${27 - i} ${title}`,
|
||||
date: `Generated Apr ${2026 - i}`,
|
||||
size: `${(1.2 + i * 0.3).toFixed(1)} MB`,
|
||||
}));
|
||||
|
||||
const handleDownload = (docName: string) => {
|
||||
toast('Download Started', 'success', `${docName} is being securely downloaded to your device.`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScreenShell title={title} subtitle={`${mockDocs.length} documents available`}>
|
||||
<FlatList
|
||||
data={mockDocs}
|
||||
keyExtractor={item => item.id}
|
||||
contentContainerStyle={{ gap: 16, paddingBottom: 24 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
renderItem={({ item }) => (
|
||||
<Card variant="glass" style={styles.card}>
|
||||
<View style={styles.cardTop}>
|
||||
<View style={[styles.docIcon, { backgroundColor: `${theme.colors.primary}10`, borderColor: `${theme.colors.primary}20` }]}>
|
||||
<Ionicons name="document-text" size={26} color={theme.colors.primary} />
|
||||
</View>
|
||||
<View style={styles.docInfo}>
|
||||
<Text style={[styles.docTitle, { color: theme.colors.textPrimary }]}>{item.name}</Text>
|
||||
<Text style={[styles.docMeta, { color: theme.colors.textSecondary }]}>
|
||||
{item.date} • {item.size}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.divider, { backgroundColor: theme.colors.cardBorder }]} />
|
||||
|
||||
<View style={styles.actionRow}>
|
||||
<Button
|
||||
title="View"
|
||||
variant="ghost"
|
||||
fullWidth={false}
|
||||
style={[styles.actionBtn, { borderColor: theme.colors.cardBorder }]}
|
||||
onPress={() => setViewingDoc(item.name)}
|
||||
leftAccessory={<Ionicons name="eye-outline" size={18} color={theme.colors.textPrimary} style={{ marginRight: 2 }} />}
|
||||
/>
|
||||
<Button
|
||||
title="Download"
|
||||
variant="secondary"
|
||||
fullWidth={false}
|
||||
style={styles.actionBtn}
|
||||
onPress={() => handleDownload(item.name)}
|
||||
leftAccessory={<Ionicons name="cloud-download-outline" size={18} color={theme.colors.textPrimary} style={{ marginRight: 2 }} />}
|
||||
/>
|
||||
</View>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
|
||||
<AppModal
|
||||
visible={!!viewingDoc}
|
||||
title="Document Preview"
|
||||
onClose={() => setViewingDoc(null)}
|
||||
>
|
||||
<View style={[styles.certificatePreview, { backgroundColor: theme.colors.background, borderColor: theme.colors.cardBorder }]}>
|
||||
<View style={[styles.certHeader, { borderBottomColor: theme.colors.cardBorder }]}>
|
||||
<Ionicons name="business" size={20} color={theme.colors.primary} />
|
||||
<Text style={[styles.certBankName, { color: theme.colors.primary }]}>CBS BANK LTD.</Text>
|
||||
</View>
|
||||
<Text style={[styles.certTitle, { color: theme.colors.textPrimary }]}>{title}</Text>
|
||||
<View style={{ gap: 8, marginTop: 12 }}>
|
||||
<Text style={[styles.certText, { color: theme.colors.textSecondary }]}>
|
||||
This officially certifies that the document <Text style={{fontWeight: '700', color: theme.colors.textPrimary}}>{viewingDoc}</Text> has been cryptographically generated and is valid.
|
||||
</Text>
|
||||
<Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Reference Category: <Text style={{fontWeight: '700'}}>{category.toUpperCase()}</Text></Text>
|
||||
<Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Account Bearer: Lincpay User</Text>
|
||||
<Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Account #: XXXX-XXXX-1234</Text>
|
||||
</View>
|
||||
<View style={styles.certFooter}>
|
||||
<View style={[styles.sealBox, { borderColor: theme.colors.primary }]}>
|
||||
<Ionicons name="ribbon-outline" size={20} color={theme.colors.primary} />
|
||||
</View>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<Text style={[styles.signature, { color: theme.colors.textPrimary }]}>Auth. Signatory</Text>
|
||||
<View style={{ width: 80, height: 1, backgroundColor: theme.colors.textSecondary, marginTop: 4 }} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Button
|
||||
title="Download Full PDF"
|
||||
variant="primary"
|
||||
onPress={() => {
|
||||
if (viewingDoc) handleDownload(viewingDoc);
|
||||
setViewingDoc(null);
|
||||
}}
|
||||
style={{ marginTop: 8 }}
|
||||
leftAccessory={<Ionicons name="cloud-download-outline" size={18} color="#fff" style={{ marginRight: 4 }} />}
|
||||
/>
|
||||
<Button
|
||||
title="Close"
|
||||
variant="ghost"
|
||||
onPress={() => setViewingDoc(null)}
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</AppModal>
|
||||
</ScreenShell>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
padding: 16,
|
||||
gap: 16,
|
||||
borderWidth: 1,
|
||||
},
|
||||
cardTop: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
},
|
||||
docIcon: {
|
||||
width: 52,
|
||||
height: 52,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
docInfo: {
|
||||
flex: 1,
|
||||
gap: 6,
|
||||
},
|
||||
docTitle: {
|
||||
fontWeight: '700',
|
||||
fontSize: 16,
|
||||
letterSpacing: -0.3,
|
||||
},
|
||||
docMeta: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
},
|
||||
divider: {
|
||||
height: 1,
|
||||
width: '100%',
|
||||
opacity: 0.6,
|
||||
},
|
||||
actionRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
actionBtn: {
|
||||
flex: 1,
|
||||
height: 44,
|
||||
},
|
||||
certificatePreview: {
|
||||
padding: 20,
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
marginVertical: 12,
|
||||
},
|
||||
certHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
borderBottomWidth: 1,
|
||||
paddingBottom: 8,
|
||||
marginBottom: 12,
|
||||
},
|
||||
certBankName: {
|
||||
fontWeight: '900',
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
certTitle: {
|
||||
fontWeight: '800',
|
||||
fontSize: 18,
|
||||
textAlign: 'center',
|
||||
},
|
||||
certText: {
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
certFooter: {
|
||||
marginTop: 24,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
sealBox: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderStyle: 'dashed',
|
||||
},
|
||||
signature: {
|
||||
fontStyle: 'italic',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user