morethanadiagnosis-hub/mobile/app/(tabs)/resources.tsx
admin 7eaacb08e1 feat: initialize React Native mobile app with Expo
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
2025-11-18 18:44:04 +00:00

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>
);
}