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-haptics": "~14.0.1",
|
||||
"expo-image": "~2.0.6",
|
||||
"expo-image-picker": "~16.0.6",
|
||||
"expo-insights": "~0.8.2",
|
||||
"expo-linking": "~7.0.5",
|
||||
"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": {
|
||||
"version": "0.8.2",
|
||||
"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-transformer": "^1.5.0",
|
||||
"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": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user