Michael Freno
a071aa736e
Build complete Expo/React Native mobile app with: - Auth flow: email/password login, registration, biometric auth - Dashboard: exposure summary, spam stats, voice protection status - DarkWatch: watch list management, exposure feed, alert toggles - SpamShield: call/text history, whitelist/blacklist management - VoicePrint: family member enrollment, voice analysis - Settings: tier management, notification preferences, security - Push notification integration via FCM/APNs - Offline-first state management with Zustand + AsyncStorage - Integration with @shieldai/mobile-api-client for API services - React Navigation with auth-aware routing (stack + bottom tabs) - Dark theme with consistent design system (colors, spacing, typography) - Network status monitoring and offline request queuing Co-Authored-By: Paperclip <noreply@paperclip.ing>
74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
|
|
import { COLORS, SPACING } from '@/constants/theme';
|
|
|
|
interface LoadingOverlayProps {
|
|
visible: boolean;
|
|
}
|
|
|
|
export function LoadingOverlay({ visible }: LoadingOverlayProps) {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<View style={styles.overlay}>
|
|
<ActivityIndicator size="large" color={COLORS.primary} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
interface EmptyStateProps {
|
|
title: string;
|
|
message?: string;
|
|
}
|
|
|
|
export function EmptyState({ title, message }: EmptyStateProps) {
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<View style={styles.emptyContent}>
|
|
<View style={styles.emptyIcon} />
|
|
<View style={styles.emptyText}>
|
|
<Text style={styles.emptyTitle}>{title}</Text>
|
|
{message && <Text style={styles.emptyMessage}>{message}</Text>}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: SPACING.xl,
|
|
},
|
|
emptyContent: {
|
|
alignItems: 'center',
|
|
},
|
|
emptyIcon: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: COLORS.card,
|
|
marginBottom: SPACING.md,
|
|
},
|
|
emptyText: {
|
|
alignItems: 'center',
|
|
},
|
|
emptyTitle: {
|
|
color: COLORS.textSecondary,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
emptyMessage: {
|
|
color: COLORS.textMuted,
|
|
fontSize: 14,
|
|
},
|
|
});
|