372 lines
9.5 KiB
TypeScript
372 lines
9.5 KiB
TypeScript
/*
|
|
* File: ComingSoonScreen.tsx
|
|
* Description: Coming Soon screen component with SVG image placeholder
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
SafeAreaView,
|
|
Image,
|
|
} from 'react-native';
|
|
import { theme } from '../../theme/theme';
|
|
import Icon from 'react-native-vector-icons/Feather';
|
|
|
|
// ============================================================================
|
|
// INTERFACES
|
|
// ============================================================================
|
|
|
|
/**
|
|
* ComingSoonScreenProps Interface
|
|
*
|
|
* Purpose: Defines the props required by the ComingSoonScreen component
|
|
*
|
|
* Props:
|
|
* - title: Main title for the coming soon screen (optional)
|
|
* - subtitle: Subtitle or description text (optional)
|
|
* - onBack: Function to handle back navigation (optional)
|
|
* - showBackButton: Whether to show back button (default: true)
|
|
* - backgroundColor: Custom background color (optional)
|
|
* - textColor: Custom text color (optional)
|
|
* - imageComponent: Custom SVG/image component to render (optional)
|
|
*/
|
|
interface ComingSoonScreenProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
onBack?: () => void;
|
|
showBackButton?: boolean;
|
|
backgroundColor?: string;
|
|
textColor?: string;
|
|
imageComponent?: React.ReactNode;
|
|
}
|
|
|
|
// ============================================================================
|
|
// COMING SOON SCREEN COMPONENT
|
|
// ============================================================================
|
|
|
|
/**
|
|
* ComingSoonScreen Component
|
|
*
|
|
* Purpose: Displays a coming soon message with space for SVG image
|
|
*
|
|
* Features:
|
|
* 1. Customizable title and subtitle
|
|
* 2. Space allocated for SVG image
|
|
* 3. Optional back button with navigation
|
|
* 4. Customizable colors and styling
|
|
* 5. Responsive design for different screen sizes
|
|
* 6. Safe area handling
|
|
* 7. Status bar management
|
|
* 8. Scrollable content for smaller screens
|
|
*
|
|
* Usage:
|
|
* - For features under development
|
|
* - Placeholder screens during app development
|
|
* - Maintenance or update screens
|
|
* - Feature announcements
|
|
*/
|
|
export const ComingSoonScreen: React.FC<ComingSoonScreenProps> = ({
|
|
title = 'Coming Soon',
|
|
subtitle = 'We\'re working hard to bring you something amazing. Stay tuned for updates!',
|
|
onBack,
|
|
showBackButton = true,
|
|
backgroundColor,
|
|
textColor,
|
|
imageComponent,
|
|
}) => {
|
|
// ============================================================================
|
|
// HELPER FUNCTIONS
|
|
// ============================================================================
|
|
|
|
/**
|
|
* handleBack Function
|
|
*
|
|
* Purpose: Handle back navigation if onBack function is provided
|
|
*/
|
|
const handleBack = () => {
|
|
if (onBack) {
|
|
onBack();
|
|
}
|
|
};
|
|
|
|
// ============================================================================
|
|
// RENDER SECTION
|
|
// ============================================================================
|
|
|
|
return (
|
|
<SafeAreaView style={[
|
|
styles.container,
|
|
backgroundColor && { backgroundColor }
|
|
]}>
|
|
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
bounces={false}
|
|
>
|
|
{/* Header with Back Button */}
|
|
{showBackButton && onBack && (
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
onPress={handleBack}
|
|
style={styles.backButton}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Icon
|
|
name="arrow-left"
|
|
size={24}
|
|
color={textColor || theme.colors.textPrimary}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<View style={styles.content}>
|
|
{/* SVG Image Container */}
|
|
<View style={styles.imageContainer}>
|
|
{imageComponent ? (
|
|
imageComponent
|
|
) : (
|
|
<View style={styles.imagePlaceholder}>
|
|
<Image
|
|
source={require('../../assets/images/coming-soon.jpg')}
|
|
style={styles.imagePlaceholder}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* Title */}
|
|
<Text style={[
|
|
styles.title,
|
|
textColor && { color: textColor }
|
|
]}>
|
|
{title}
|
|
</Text>
|
|
|
|
{/* Subtitle */}
|
|
<Text style={[
|
|
styles.subtitle,
|
|
textColor && { color: textColor }
|
|
]}>
|
|
{subtitle}
|
|
</Text>
|
|
|
|
|
|
{/* Action Buttons */}
|
|
<View style={styles.buttonContainer}>
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.button,
|
|
styles.primaryButton,
|
|
{ backgroundColor: textColor || theme.colors.primary }
|
|
]}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={[
|
|
styles.buttonText,
|
|
{ color: backgroundColor || theme.colors.background }
|
|
]}>
|
|
Get Notified
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.button,
|
|
styles.secondaryButton,
|
|
{ borderColor: textColor || theme.colors.primary }
|
|
]}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={[
|
|
styles.secondaryButtonText,
|
|
{ color: textColor || theme.colors.primary }
|
|
]}>
|
|
Learn More
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES SECTION
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
// Main container
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.colors.background,
|
|
},
|
|
|
|
// Scroll view
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Scroll content
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
paddingHorizontal: theme.spacing.lg,
|
|
},
|
|
|
|
// Header section
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingTop: theme.spacing.lg,
|
|
paddingBottom: theme.spacing.md,
|
|
},
|
|
|
|
// Back button
|
|
backButton: {
|
|
padding: theme.spacing.sm,
|
|
borderRadius: theme.borderRadius.medium,
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
...theme.shadows.small,
|
|
},
|
|
|
|
// Main content
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: theme.spacing.xxl,
|
|
},
|
|
|
|
// Image container
|
|
imageContainer: {
|
|
width: 280,
|
|
height: 280,
|
|
borderRadius: theme.borderRadius.large,
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.xl,
|
|
...theme.shadows.medium,
|
|
},
|
|
|
|
// Image placeholder
|
|
imagePlaceholder: {
|
|
width: '100%',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
// Placeholder text
|
|
placeholderText: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
marginTop: theme.spacing.sm,
|
|
textAlign: 'center',
|
|
},
|
|
|
|
// Title
|
|
title: {
|
|
fontSize: theme.typography.fontSize.displayLarge,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.textPrimary,
|
|
textAlign: 'center',
|
|
marginBottom: theme.spacing.md,
|
|
lineHeight: theme.typography.fontSize.displayLarge * 1.2,
|
|
},
|
|
|
|
// Subtitle
|
|
subtitle: {
|
|
fontSize: theme.typography.fontSize.bodyLarge,
|
|
fontFamily: theme.typography.fontFamily.regular,
|
|
color: theme.colors.textSecondary,
|
|
textAlign: 'center',
|
|
marginBottom: theme.spacing.xl,
|
|
lineHeight: theme.typography.fontSize.bodyLarge * 1.4,
|
|
paddingHorizontal: theme.spacing.md,
|
|
},
|
|
|
|
// Info container
|
|
infoContainer: {
|
|
marginBottom: theme.spacing.xl,
|
|
width: '100%',
|
|
},
|
|
|
|
// Info item
|
|
infoItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
|
|
// Info text
|
|
infoText: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textSecondary,
|
|
marginLeft: theme.spacing.sm,
|
|
},
|
|
|
|
// Button container
|
|
buttonContainer: {
|
|
width: '100%',
|
|
gap: theme.spacing.md,
|
|
},
|
|
|
|
// Base button
|
|
button: {
|
|
paddingVertical: theme.spacing.md,
|
|
paddingHorizontal: theme.spacing.lg,
|
|
borderRadius: theme.borderRadius.medium,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 48,
|
|
...theme.shadows.primary,
|
|
},
|
|
|
|
// Primary button
|
|
primaryButton: {
|
|
backgroundColor: theme.colors.primary,
|
|
},
|
|
|
|
// Secondary button
|
|
secondaryButton: {
|
|
backgroundColor: 'white',
|
|
borderWidth: 2,
|
|
borderColor: theme.colors.primary,
|
|
},
|
|
|
|
// Button text
|
|
buttonText: {
|
|
fontSize: theme.typography.fontSize.bodyLarge,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.background,
|
|
},
|
|
|
|
// Secondary button text
|
|
secondaryButtonText: {
|
|
fontSize: theme.typography.fontSize.bodyLarge,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.primary,
|
|
},
|
|
});
|
|
|
|
export default ComingSoonScreen;
|
|
|
|
/*
|
|
* End of File: ComingSoonScreen.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|