Core features implemented: - Expo cross-platform setup (iOS, Android, Web) - Bottom tab navigation (Home, Resources, Community, Profile) - Home screen with all major sections: * Hero section with mission statement * Happy Mail integration * Connect/Support section * Podcast information * Features grid * Wings of Remembrance - Resources screen with curated support materials - Community screen with support groups and circles - Profile screen with user account management - Auth layout structure (login, signup, forgot password) Ready for: - Authentication integration with FastAPI backend - API integration for community features - Database connectivity - Testing on iOS, Android, and Web
136 lines
3.4 KiB
TypeScript
136 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View,
|
|
ScrollView,
|
|
Text,
|
|
StyleSheet,
|
|
SafeAreaView,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
header: {
|
|
backgroundColor: '#fff',
|
|
padding: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#e0e0e0',
|
|
},
|
|
headerTitle: {
|
|
fontSize: 24,
|
|
fontWeight: '700',
|
|
color: '#000',
|
|
marginBottom: 8,
|
|
},
|
|
headerDescription: {
|
|
fontSize: 14,
|
|
color: '#666',
|
|
lineHeight: 20,
|
|
},
|
|
section: {
|
|
paddingHorizontal: 16,
|
|
marginTop: 16,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#000',
|
|
marginBottom: 12,
|
|
},
|
|
resourceCard: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
borderLeftWidth: 4,
|
|
borderLeftColor: '#0066cc',
|
|
},
|
|
resourceTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
color: '#000',
|
|
marginBottom: 6,
|
|
},
|
|
resourceDescription: {
|
|
fontSize: 13,
|
|
color: '#666',
|
|
lineHeight: 18,
|
|
},
|
|
resourceLink: {
|
|
marginTop: 10,
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 12,
|
|
backgroundColor: '#f0f0f0',
|
|
borderRadius: 6,
|
|
},
|
|
resourceLinkText: {
|
|
color: '#0066cc',
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|
|
export default function ResourcesScreen() {
|
|
const resources = [
|
|
{
|
|
title: 'Financial Support',
|
|
description: 'Resources for managing medical costs and financial burdens',
|
|
},
|
|
{
|
|
title: 'Mental Health',
|
|
description: 'Mental health services and counseling resources',
|
|
},
|
|
{
|
|
title: 'Medical Information',
|
|
description: 'Reliable health information and diagnosis resources',
|
|
},
|
|
{
|
|
title: 'Support Groups',
|
|
description: 'Connect with others on similar health journeys',
|
|
},
|
|
{
|
|
title: 'Nutrition & Wellness',
|
|
description: 'Health and wellness resources during treatment',
|
|
},
|
|
{
|
|
title: 'Legal Resources',
|
|
description: 'Information about health law and patient rights',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerTitle}>Resources</Text>
|
|
<Text style={styles.headerDescription}>
|
|
We know how scary and overwhelming it can be to receive a diagnosis. We've curated helpful resources to make your journey a little easier.
|
|
</Text>
|
|
</View>
|
|
|
|
{resources.map((resource, index) => (
|
|
<View key={index} style={styles.section}>
|
|
<View style={styles.resourceCard}>
|
|
<Text style={styles.resourceTitle}>{resource.title}</Text>
|
|
<Text style={styles.resourceDescription}>{resource.description}</Text>
|
|
<TouchableOpacity style={styles.resourceLink}>
|
|
<Text style={styles.resourceLinkText}>Learn More →</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
))}
|
|
|
|
<View style={[styles.section, { marginBottom: 40 }]}>
|
|
<Text style={styles.sectionTitle}>More Coming Soon</Text>
|
|
<Text style={{ fontSize: 14, color: '#666', lineHeight: 20 }}>
|
|
Be sure to check back often or sign up to receive updates as we're adding new resources all the time!
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|