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
This commit is contained in:
admin
parent
229fd6ced4
commit
7eaacb08e1
8 changed files with 17382 additions and 0 deletions
17
mobile/app/(auth)/_layout.tsx
Normal file
17
mobile/app/(auth)/_layout.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Stack } from 'expo-router';
|
||||||
|
|
||||||
|
export default function AuthLayout() {
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: false,
|
||||||
|
gestureEnabled: false,
|
||||||
|
animationEnabled: true,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack.Screen name="login" />
|
||||||
|
<Stack.Screen name="signup" />
|
||||||
|
<Stack.Screen name="forgot-password" />
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
69
mobile/app/(tabs)/_layout.tsx
Normal file
69
mobile/app/(tabs)/_layout.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { Tabs } from 'expo-router';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
|
||||||
|
export default function TabLayout() {
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: true,
|
||||||
|
tabBarActiveTintColor: '#0066cc',
|
||||||
|
tabBarInactiveTintColor: '#999',
|
||||||
|
headerStyle: {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
borderBottomColor: '#e0e0e0',
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
headerTitleStyle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tabs.Screen
|
||||||
|
name="index"
|
||||||
|
options={{
|
||||||
|
title: 'Home',
|
||||||
|
tabBarLabel: 'Home',
|
||||||
|
headerTitle: 'MoreThanADiagnosis',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="home" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Tabs.Screen
|
||||||
|
name="resources"
|
||||||
|
options={{
|
||||||
|
title: 'Resources',
|
||||||
|
tabBarLabel: 'Resources',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="book" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Tabs.Screen
|
||||||
|
name="community"
|
||||||
|
options={{
|
||||||
|
title: 'Community',
|
||||||
|
tabBarLabel: 'Community',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="people" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Tabs.Screen
|
||||||
|
name="profile"
|
||||||
|
options={{
|
||||||
|
title: 'Profile',
|
||||||
|
tabBarLabel: 'Profile',
|
||||||
|
tabBarIcon: ({ color, size }) => (
|
||||||
|
<Ionicons name="person" size={size} color={color} />
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
161
mobile/app/(tabs)/community.tsx
Normal file
161
mobile/app/(tabs)/community.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
ScrollView,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
SafeAreaView,
|
||||||
|
TouchableOpacity,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
marginTop: 16,
|
||||||
|
},
|
||||||
|
communityCard: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
communityCardHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
communityIcon: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: '#f0f0f0',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
communityTitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
communityDescription: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: '#666',
|
||||||
|
lineHeight: 20,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
memberCount: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#999',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
joinButton: {
|
||||||
|
backgroundColor: '#0066cc',
|
||||||
|
paddingVertical: 10,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderRadius: 6,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
joinButtonText: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: '#000',
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function CommunityScreen() {
|
||||||
|
const communities = [
|
||||||
|
{
|
||||||
|
title: 'Support Group',
|
||||||
|
description: 'Join our growing community of folks navigating chronic illness and cancer. Connect, share, and find strength together.',
|
||||||
|
members: '2,341 members',
|
||||||
|
icon: '👥',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'The Living Room',
|
||||||
|
description: 'Exclusive support circle for members. A safe space to share your journey, connect with others, and find support.',
|
||||||
|
members: '856 members',
|
||||||
|
icon: '🛋️',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'The Journal',
|
||||||
|
description: 'Read inspiring stories from our community members as they navigate their journeys. Share your own story.',
|
||||||
|
members: '1,203 stories',
|
||||||
|
icon: '📖',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Podcast Community',
|
||||||
|
description: 'Discuss episodes of our podcast and connect with listeners who share your experiences.',
|
||||||
|
members: '432 members',
|
||||||
|
icon: '🎙️',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false}>
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.headerTitle}>Community</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Join Our Communities</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{communities.map((community, index) => (
|
||||||
|
<View key={index} style={styles.section}>
|
||||||
|
<View style={styles.communityCard}>
|
||||||
|
<View style={styles.communityCardHeader}>
|
||||||
|
<View style={styles.communityIcon}>
|
||||||
|
<Text style={{ fontSize: 20 }}>{community.icon}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.communityTitle}>{community.title}</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.communityDescription}>{community.description}</Text>
|
||||||
|
<Text style={styles.memberCount}>{community.members}</Text>
|
||||||
|
<TouchableOpacity style={styles.joinButton}>
|
||||||
|
<Text style={styles.joinButtonText}>Join Community</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<View style={[styles.section, { marginBottom: 40 }]}>
|
||||||
|
<View style={styles.communityCard}>
|
||||||
|
<Text style={styles.communityTitle}>Community Guidelines</Text>
|
||||||
|
<Text style={[styles.communityDescription, { marginTop: 8 }]}>
|
||||||
|
• Be respectful and supportive{'\n'}
|
||||||
|
• Share your authentic story{'\n'}
|
||||||
|
• Respect others' privacy{'\n'}
|
||||||
|
• No medical advice{'\n'}
|
||||||
|
• Check in, not out
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
244
mobile/app/(tabs)/index.tsx
Normal file
244
mobile/app/(tabs)/index.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
ScrollView,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
StyleSheet,
|
||||||
|
SafeAreaView,
|
||||||
|
StatusBar,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#f5f5f5',
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
paddingBottom: 20,
|
||||||
|
},
|
||||||
|
heroSection: {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
padding: 20,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: '#e0e0e0',
|
||||||
|
},
|
||||||
|
heroTitle: {
|
||||||
|
fontSize: 28,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: '#000',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
heroSubtitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#666',
|
||||||
|
lineHeight: 24,
|
||||||
|
marginBottom: 15,
|
||||||
|
},
|
||||||
|
primaryButton: {
|
||||||
|
backgroundColor: '#0066cc',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
borderRadius: 8,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
primaryButtonText: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
marginTop: 20,
|
||||||
|
paddingHorizontal: 15,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: '#000',
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
sectionDescription: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#666',
|
||||||
|
lineHeight: 20,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
cardContainer: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 12,
|
||||||
|
borderLeftWidth: 4,
|
||||||
|
borderLeftColor: '#0066cc',
|
||||||
|
},
|
||||||
|
cardTitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#000',
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
cardDescription: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: '#666',
|
||||||
|
lineHeight: 18,
|
||||||
|
},
|
||||||
|
featureGrid: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
featureCard: {
|
||||||
|
width: '48%',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 16,
|
||||||
|
marginBottom: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
featureIcon: {
|
||||||
|
fontSize: 32,
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
featureTitle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#000',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
ctaButton: {
|
||||||
|
backgroundColor: '#0066cc',
|
||||||
|
paddingVertical: 10,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderRadius: 6,
|
||||||
|
marginTop: 8,
|
||||||
|
},
|
||||||
|
ctaButtonText: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: '600',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function HomeScreen() {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<StatusBar barStyle="dark-content" backgroundColor="#fff" />
|
||||||
|
<ScrollView style={styles.scrollContent} showsVerticalScrollIndicator={false}>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<View style={styles.heroSection}>
|
||||||
|
<Text style={styles.heroTitle}>You are more than a diagnosis.</Text>
|
||||||
|
<Text style={styles.heroSubtitle}>
|
||||||
|
Connecting Through Stories, Thriving Through Community
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity style={styles.primaryButton}>
|
||||||
|
<Text style={styles.primaryButtonText}>Join Our Community</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Happy Mail Section */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>💌 Happy Mail</Text>
|
||||||
|
<View style={styles.cardContainer}>
|
||||||
|
<Text style={styles.cardTitle}>Free Joy-Filled Snail Mail</Text>
|
||||||
|
<Text style={styles.cardDescription}>
|
||||||
|
Nerisa sends personalized snail mail to folks navigating cancer and chronic illness.
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.cardDescription, { marginTop: 8, fontWeight: '600' }]}>
|
||||||
|
Who can receive:
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.cardDescription, { marginTop: 4 }]}>
|
||||||
|
✓ Cancer diagnosis or treatment{'\n'}
|
||||||
|
✓ Chronic illness or rare disease{'\n'}
|
||||||
|
✓ Medical limbo or recovery
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity style={styles.ctaButton}>
|
||||||
|
<Text style={styles.ctaButtonText}>Order Happy Mail</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Connect Section */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>🤝 Connect</Text>
|
||||||
|
<View style={styles.cardContainer}>
|
||||||
|
<Text style={styles.cardTitle}>Safe & Supportive Space</Text>
|
||||||
|
<Text style={styles.cardDescription}>
|
||||||
|
"We're here to create a safe, supportive space where you can connect with others, share your story, and find hope. Cancer and chronic illness can feel so isolating, but together, we're stronger."
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity style={styles.ctaButton}>
|
||||||
|
<Text style={styles.ctaButtonText}>Learn More</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Podcast Section */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>🎙️ Podcast</Text>
|
||||||
|
<View style={styles.cardContainer}>
|
||||||
|
<Text style={styles.cardTitle}>More Than A Diagnosis Podcast</Text>
|
||||||
|
<Text style={styles.cardDescription}>
|
||||||
|
Hosted by Jes and Den, who share real stories about life beyond the medical chart.
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity style={styles.ctaButton}>
|
||||||
|
<Text style={styles.ctaButtonText}>Listen Now</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>What We Offer</Text>
|
||||||
|
<View style={styles.featureGrid}>
|
||||||
|
<View style={styles.featureCard}>
|
||||||
|
<Text style={styles.featureIcon}>📚</Text>
|
||||||
|
<Text style={styles.featureTitle}>Resources</Text>
|
||||||
|
<Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||||
|
Curated support materials
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.featureCard}>
|
||||||
|
<Text style={styles.featureIcon}>👥</Text>
|
||||||
|
<Text style={styles.featureTitle}>Community</Text>
|
||||||
|
<Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||||
|
Support groups & circles
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.featureCard}>
|
||||||
|
<Text style={styles.featureIcon}>📖</Text>
|
||||||
|
<Text style={styles.featureTitle}>Stories</Text>
|
||||||
|
<Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||||
|
The Journal & experiences
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.featureCard}>
|
||||||
|
<Text style={styles.featureIcon}>🎁</Text>
|
||||||
|
<Text style={styles.featureTitle}>Shop</Text>
|
||||||
|
<Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
||||||
|
Purpose-driven apparel
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Wings of Remembrance */}
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>🕊️ Wings of Remembrance</Text>
|
||||||
|
<View style={styles.cardContainer}>
|
||||||
|
<Text style={styles.cardTitle}>Honor Those Who Shaped Us</Text>
|
||||||
|
<Text style={styles.cardDescription}>
|
||||||
|
Share a tribute, memory, or reflection to honor those who shaped our journey.
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity style={styles.ctaButton}>
|
||||||
|
<Text style={styles.ctaButtonText}>Share Your Tribute</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
260
mobile/app/(tabs)/profile.tsx
Normal file
260
mobile/app/(tabs)/profile.tsx
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
ScrollView,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
SafeAreaView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Alert,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#f5f5f5',
|
||||||
|
},
|
||||||
|
profileHeader: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
paddingVertical: 24,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
alignItems: 'center',
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: '#e0e0e0',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
borderRadius: 40,
|
||||||
|
backgroundColor: '#0066cc',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
avatarText: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 32,
|
||||||
|
fontWeight: '700',
|
||||||
|
},
|
||||||
|
profileName: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: '#000',
|
||||||
|
marginBottom: 4,
|
||||||
|
},
|
||||||
|
profileStatus: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#666',
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
marginTop: 16,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#999',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
menuItem: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
paddingVertical: 14,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: '#f0f0f0',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
menuItemFirst: {
|
||||||
|
borderTopLeftRadius: 12,
|
||||||
|
borderTopRightRadius: 12,
|
||||||
|
},
|
||||||
|
menuItemLast: {
|
||||||
|
borderBottomLeftRadius: 12,
|
||||||
|
borderBottomRightRadius: 12,
|
||||||
|
borderBottomWidth: 0,
|
||||||
|
},
|
||||||
|
menuIcon: {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
menuLabel: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: '#000',
|
||||||
|
flex: 1,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
menuArrow: {
|
||||||
|
color: '#999',
|
||||||
|
},
|
||||||
|
signOutButton: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
marginTop: 8,
|
||||||
|
borderRadius: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#ff4444',
|
||||||
|
},
|
||||||
|
signOutText: {
|
||||||
|
color: '#ff4444',
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function ProfileScreen() {
|
||||||
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||||
|
|
||||||
|
const handleSignOut = () => {
|
||||||
|
Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
|
||||||
|
{ text: 'Cancel', onPress: () => {} },
|
||||||
|
{
|
||||||
|
text: 'Sign Out',
|
||||||
|
onPress: () => {
|
||||||
|
setIsLoggedIn(false);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isLoggedIn) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<View style={styles.profileHeader}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Ionicons name="person" size={40} color="#fff" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.profileName}>Welcome</Text>
|
||||||
|
<Text style={styles.profileStatus}>Sign in to access your profile</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.menuItem, styles.menuItemFirst, styles.menuItemLast]}
|
||||||
|
onPress={() => setIsLoggedIn(true)}
|
||||||
|
>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="log-in" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Sign In</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>About</Text>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemFirst]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="information-circle" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>About Us</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.menuItem}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="shield-checkmark" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Privacy Policy</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemLast]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="document-text" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Terms of Service</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false}>
|
||||||
|
<View style={styles.profileHeader}>
|
||||||
|
<View style={styles.avatar}>
|
||||||
|
<Text style={styles.avatarText}>👤</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.profileName}>John Doe</Text>
|
||||||
|
<Text style={styles.profileStatus}>Active Member</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Account</Text>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemFirst]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="person" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Edit Profile</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.menuItem}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="notifications" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Notifications</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemLast]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="lock-closed" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Change Password</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Preferences</Text>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemFirst]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="moon" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Dark Mode</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemLast]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="language" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Language</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Help</Text>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemFirst]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="help-circle" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Help & Support</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={[styles.menuItem, styles.menuItemLast]}>
|
||||||
|
<View style={styles.menuIcon}>
|
||||||
|
<Ionicons name="mail" size={20} color="#0066cc" />
|
||||||
|
</View>
|
||||||
|
<Text style={styles.menuLabel}>Contact Us</Text>
|
||||||
|
<Ionicons name="chevron-forward" size={20} style={styles.menuArrow} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={[styles.section, { marginBottom: 40 }]}>
|
||||||
|
<TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
|
||||||
|
<Text style={styles.signOutText}>Sign Out</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
136
mobile/app/(tabs)/resources.tsx
Normal file
136
mobile/app/(tabs)/resources.tsx
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
mobile/app/_layout.tsx
Normal file
23
mobile/app/_layout.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { Stack } from 'expo-router';
|
||||||
|
import { StatusBar } from 'expo-status-bar';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export const unstable_settings = {
|
||||||
|
initialRouteName: '(tabs)',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout() {
|
||||||
|
useEffect(() => {
|
||||||
|
// Setup any global configuration here
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<StatusBar barStyle="dark-content" />
|
||||||
|
<Stack>
|
||||||
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||||
|
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
16472
mobile/package-lock.json
generated
Normal file
16472
mobile/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue