Get started on stack navigation for settings page
This commit is contained in:
parent
6e41fd3ddf
commit
50d3d69dbd
@ -1,46 +0,0 @@
|
|||||||
import { StyleSheet, Image, Platform } from 'react-native';
|
|
||||||
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
|
|
||||||
import { ThemedText, ThemedView } from '@/components/theme';
|
|
||||||
import { IconSymbol } from '@/components/ui/IconSymbol';
|
|
||||||
import Logout_Button from '@/components/auth/Logout_Button';
|
|
||||||
|
|
||||||
const TabTwoScreen = () => {
|
|
||||||
return (
|
|
||||||
<ParallaxScrollView
|
|
||||||
headerImage={
|
|
||||||
<IconSymbol size={80} color='#808080' name='gear.circle' style={styles.headerImage} />
|
|
||||||
}
|
|
||||||
headerTitle={
|
|
||||||
<ThemedText type='title' style={styles.headerTitle}>
|
|
||||||
Settings
|
|
||||||
</ThemedText>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Logout_Button />
|
|
||||||
</ParallaxScrollView>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default TabTwoScreen;
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
headerImage: {
|
|
||||||
color: '#808080',
|
|
||||||
bottom: 6,
|
|
||||||
left: 38,
|
|
||||||
position: 'absolute',
|
|
||||||
},
|
|
||||||
headerTitle: {
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 20,
|
|
||||||
left: 16,
|
|
||||||
right: 0,
|
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: 48,
|
|
||||||
lineHeight: 64,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
titleContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
39
app/(tabs)/settings/_layout.tsx
Normal file
39
app/(tabs)/settings/_layout.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { Stack } from 'expo-router';
|
||||||
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||||
|
import { Colors } from '@/constants/Colors';
|
||||||
|
|
||||||
|
export default function SettingsLayout() {
|
||||||
|
const scheme = useColorScheme() ?? 'dark';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack
|
||||||
|
screenOptions={{
|
||||||
|
headerStyle: {
|
||||||
|
backgroundColor: Colors[scheme].background,
|
||||||
|
},
|
||||||
|
headerTintColor: Colors[scheme].text,
|
||||||
|
headerTitleStyle: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
// This gives the iOS-style slide-in animation
|
||||||
|
animation: 'slide_from_right',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack.Screen
|
||||||
|
name="index"
|
||||||
|
options={{
|
||||||
|
title: "Settings",
|
||||||
|
headerShown: false,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Stack.Screen
|
||||||
|
name="profile"
|
||||||
|
options={{
|
||||||
|
title: "Profile",
|
||||||
|
headerShown: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Add more screens as needed */}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
91
app/(tabs)/settings/index.tsx
Normal file
91
app/(tabs)/settings/index.tsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import { StyleSheet, TouchableOpacity } from 'react-native';
|
||||||
|
import { useRouter } from 'expo-router';
|
||||||
|
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
|
||||||
|
import { ThemedText, ThemedTextButton, ThemedView } from '@/components/theme';
|
||||||
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||||
|
import Logout_Button from '@/components/auth/Logout_Button';
|
||||||
|
|
||||||
|
const SettingsScreen = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ParallaxScrollView
|
||||||
|
headerImage={
|
||||||
|
<IconSymbol size={80} color='#808080' name='gear.circle' style={styles.headerImage} />
|
||||||
|
}
|
||||||
|
headerTitle={
|
||||||
|
<ThemedText type='title' style={styles.headerTitle}>
|
||||||
|
Settings
|
||||||
|
</ThemedText>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ThemedView style={styles.section}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.settingItem}
|
||||||
|
onPress={() => router.push('/settings/profile')}
|
||||||
|
>
|
||||||
|
<IconSymbol name="person.fill" size={24} color="#007AFF" style={styles.icon} />
|
||||||
|
<ThemedView style={styles.settingContent}>
|
||||||
|
<ThemedText style={styles.settingTitle}>Profile</ThemedText>
|
||||||
|
<ThemedText style={styles.settingSubtitle}>Name, photo, email</ThemedText>
|
||||||
|
</ThemedView>
|
||||||
|
<IconSymbol name="chevron.right" size={20} color="#C7C7CC" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
</ThemedView>
|
||||||
|
|
||||||
|
<ThemedView style={styles.section}>
|
||||||
|
<Logout_Button />
|
||||||
|
</ThemedView>
|
||||||
|
</ParallaxScrollView>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SettingsScreen;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
headerImage: {
|
||||||
|
color: '#808080',
|
||||||
|
bottom: 6,
|
||||||
|
left: 38,
|
||||||
|
position: 'absolute',
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 20,
|
||||||
|
left: 16,
|
||||||
|
right: 0,
|
||||||
|
textAlign: 'center',
|
||||||
|
fontSize: 48,
|
||||||
|
lineHeight: 64,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
marginVertical: 16,
|
||||||
|
borderRadius: 10,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
settingItem: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: 16,
|
||||||
|
backgroundColor: 'rgba(200, 200, 200, 0.1)',
|
||||||
|
marginBottom: 1,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
marginRight: 16,
|
||||||
|
},
|
||||||
|
settingContent: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
settingTitle: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
settingSubtitle: {
|
||||||
|
fontSize: 14,
|
||||||
|
opacity: 0.6,
|
||||||
|
marginTop: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
173
app/(tabs)/settings/profile.tsx
Normal file
173
app/(tabs)/settings/profile.tsx
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { StyleSheet, TouchableOpacity, Image, Alert, ActivityIndicator } from 'react-native';
|
||||||
|
import * as ImagePicker from 'expo-image-picker';
|
||||||
|
import { supabase } from '@/lib/supabase';
|
||||||
|
import { ThemedView, ThemedText, ThemedTextInput } from '@/components/theme';
|
||||||
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
||||||
|
|
||||||
|
export default function ProfileScreen() {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [fullName, setFullName] = useState('');
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [avatar, setAvatar] = useState(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchUserProfile();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchUserProfile = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const { data: { user } } = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('profiles')
|
||||||
|
.select('*')
|
||||||
|
.eq('id', user.id)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
setFullName(data.full_name || '');
|
||||||
|
setEmail(data.email || '');
|
||||||
|
setAvatar(data.avatar_url || null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching profile:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateProfile = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const { data: { user } } = await supabase.auth.getUser();
|
||||||
|
|
||||||
|
if (!user) throw new Error('User not found');
|
||||||
|
|
||||||
|
const updates = {
|
||||||
|
id: user.id,
|
||||||
|
full_name: fullName,
|
||||||
|
email,
|
||||||
|
updated_at: new Date(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('profiles')
|
||||||
|
.upsert(updates);
|
||||||
|
|
||||||
|
if (error) throw error;
|
||||||
|
|
||||||
|
Alert.alert('Success', 'Profile updated successfully!');
|
||||||
|
} catch (error) {
|
||||||
|
Alert.alert('Error updating profile', error.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add image picking functionality here (similar to previous example)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemedView style={styles.container}>
|
||||||
|
<TouchableOpacity style={styles.avatarContainer}>
|
||||||
|
{avatar ? (
|
||||||
|
<Image source={{ uri: avatar }} style={styles.avatar} />
|
||||||
|
) : (
|
||||||
|
<ThemedView style={styles.avatarPlaceholder}>
|
||||||
|
<IconSymbol name="person.fill" size={50} color="#999" />
|
||||||
|
</ThemedView>
|
||||||
|
)}
|
||||||
|
<ThemedText style={styles.changePhotoText}>Change Photo</ThemedText>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<ThemedView style={styles.formSection}>
|
||||||
|
<ThemedText style={styles.label}>Full Name</ThemedText>
|
||||||
|
<ThemedTextInput
|
||||||
|
value={fullName}
|
||||||
|
onChangeText={setFullName}
|
||||||
|
placeholder="Enter your full name"
|
||||||
|
style={styles.input}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ThemedText style={styles.label}>Email</ThemedText>
|
||||||
|
<ThemedTextInput
|
||||||
|
value={email}
|
||||||
|
onChangeText={setEmail}
|
||||||
|
placeholder="Enter your email"
|
||||||
|
keyboardType="email-address"
|
||||||
|
autoCapitalize="none"
|
||||||
|
style={styles.input}
|
||||||
|
/>
|
||||||
|
</ThemedView>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.saveButton}
|
||||||
|
onPress={updateProfile}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<ActivityIndicator color="#fff" />
|
||||||
|
) : (
|
||||||
|
<ThemedText style={styles.saveButtonText}>Save Changes</ThemedText>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</ThemedView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
padding: 16,
|
||||||
|
},
|
||||||
|
avatarContainer: {
|
||||||
|
alignItems: 'center',
|
||||||
|
marginTop: 20,
|
||||||
|
marginBottom: 30,
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
borderRadius: 60,
|
||||||
|
},
|
||||||
|
avatarPlaceholder: {
|
||||||
|
width: 120,
|
||||||
|
height: 120,
|
||||||
|
borderRadius: 60,
|
||||||
|
backgroundColor: '#E1E1E1',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
changePhotoText: {
|
||||||
|
marginTop: 8,
|
||||||
|
color: '#007AFF',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
formSection: {
|
||||||
|
marginBottom: 30,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
marginBottom: 8,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
fontSize: 16,
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
borderRadius: 8,
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
saveButton: {
|
||||||
|
backgroundColor: '#007AFF',
|
||||||
|
paddingVertical: 14,
|
||||||
|
borderRadius: 8,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
saveButtonText: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
});
|
||||||
22
package-lock.json
generated
22
package-lock.json
generated
@ -29,6 +29,7 @@
|
|||||||
"expo-font": "~13.0.3",
|
"expo-font": "~13.0.3",
|
||||||
"expo-haptics": "~14.0.1",
|
"expo-haptics": "~14.0.1",
|
||||||
"expo-image": "~2.0.6",
|
"expo-image": "~2.0.6",
|
||||||
|
"expo-image-picker": "~16.0.6",
|
||||||
"expo-insights": "~0.8.2",
|
"expo-insights": "~0.8.2",
|
||||||
"expo-linking": "~7.0.5",
|
"expo-linking": "~7.0.5",
|
||||||
"expo-location": "~18.0.7",
|
"expo-location": "~18.0.7",
|
||||||
@ -8457,6 +8458,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/expo-image-loader": {
|
||||||
|
"version": "5.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-5.0.0.tgz",
|
||||||
|
"integrity": "sha512-Eg+5FHtyzv3Jjw9dHwu2pWy4xjf8fu3V0Asyy42kO+t/FbvW/vjUixpTjPtgKQLQh+2/9Nk4JjFDV6FwCnF2ZA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"expo": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/expo-image-picker": {
|
||||||
|
"version": "16.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-16.0.6.tgz",
|
||||||
|
"integrity": "sha512-HN4xZirFjsFDIsWFb12AZh19fRzuvZjj2ll17cGr19VNRP06S/VPQU3Tdccn5vwUzQhOBlLu704CnNm278boiQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"expo-image-loader": "~5.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"expo": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/expo-insights": {
|
"node_modules/expo-insights": {
|
||||||
"version": "0.8.2",
|
"version": "0.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/expo-insights/-/expo-insights-0.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/expo-insights/-/expo-insights-0.8.2.tgz",
|
||||||
|
|||||||
@ -63,7 +63,8 @@
|
|||||||
"react-native-svg": "15.8.0",
|
"react-native-svg": "15.8.0",
|
||||||
"react-native-svg-transformer": "^1.5.0",
|
"react-native-svg-transformer": "^1.5.0",
|
||||||
"react-native-web": "~0.19.13",
|
"react-native-web": "~0.19.13",
|
||||||
"react-native-webview": "13.12.5"
|
"react-native-webview": "13.12.5",
|
||||||
|
"expo-image-picker": "~16.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.25.2",
|
"@babel/core": "^7.25.2",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user