isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Email to bottomCustomTabBar, Added EmailScreen. Pending setting drawer on main page

Browse Source
This commit is contained in:
Isky
2024-07-28 21:06:59 +08:00
parent f20b0ad4e8
commit 8f7aa6862b
9 changed files with 308 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1 +1 @@
BASE_URL=http://192.168.1.30:8080
BASE_URL=https://localhost:8443

9
App.tsx
View File

@@ -1,10 +1,12 @@
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer'; // Import Drawer Navigator
import { Provider } from 'react-redux';
import QRScannerScreen from './screens/QRScannerScreen';
import HistoryScreen from './screens/HistoryScreen';
import SettingsScreen from './screens/SettingsScreen';
import EmailScreen from './screens/EmailScreen'; // Import the Email screen
import SettingsScreen from './screens/SettingsScreen'; // Import the Settings screen
import { QRCodeContext } from './types';
import CustomTabBar from './components/CustomTabBar';
import store from './store';
@@ -19,6 +21,7 @@ enableScreens();
Amplify.configure(config);
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator(); // Create Drawer Navigator
const App: React.FC = () => {
const [scannedData, setScannedData] = useState<string>('');
@@ -39,7 +42,7 @@ const App: React.FC = () => {
<Tab.Screen name="QRScanner">
{(props) => <QRScannerScreen {...props} clearScanData={clearScanData} />}
</Tab.Screen>
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Email" component={EmailScreen} />
</Tab.Navigator>
</NavigationContainer>
</QRCodeContext.Provider>
@@ -47,4 +50,4 @@ const App: React.FC = () => {
);
};
export default withAuthenticator(App);
export default withAuthenticator(App);

4
api/qrCodeAPI.tsx
View File

@@ -1,7 +1,7 @@
import axios from 'axios';
import Constants from 'expo-constants';
const { API_BASE_URL } = Constants.expoConfig.extra;
//const API_BASE_URL = 'http://192.168.1.30:8080/v1/qrcodetypes';
//const { API_BASE_URL } = Constants.expoConfig.extra;
const API_BASE_URL = 'https://localhost:8443';
const API_URL_DETECT = "/v1/qrcodetypes/detect";
const API_URL_VERIFY_URL = "/v1/qrcodetypes/verifyURL"

50
components/CustomTabBar.tsx
View File

@@ -1,23 +1,23 @@
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
// Define custom props for CustomTabBar
interface CustomTabBarProps extends BottomTabBarProps {
clearScanData: () => void;
}
// Custom tab bar component with typings
const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
return (
<View style={styles.tabBar}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
route.name === 'Email'
? 'Gmail'
: options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
@@ -25,13 +25,13 @@ const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, naviga
const isFocused = state.index === index;
// Event handler for tab press
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true
});
// Event handler for tab press
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
@@ -53,7 +53,9 @@ const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, naviga
});
};
const iconName = route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
// Define the icon for each tab
const iconName =
route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
return (
<TouchableOpacity
@@ -66,7 +68,11 @@ const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, naviga
onLongPress={onLongPress}
style={styles.tabButton}
>
<Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
{route.name === 'Email' ? (
<MaterialIcons name="email" size={24} color={isFocused ? '#ff69b4' : '#222'} />
) : (
<Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
)}
{/* Check if label is a string before rendering */}
{typeof label === 'string' ? (
<Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
@@ -77,13 +83,15 @@ const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, naviga
);
})}
<View style={styles.floatingButton}>
<TouchableOpacity onPress={() => {
clearScanData();
navigation.reset({
index: 0,
routes: [{ name: 'QRScanner' }],
});
}}>
<TouchableOpacity
onPress={() => {
clearScanData();
navigation.reset({
index: 0,
routes: [{ name: 'QRScanner' }],
});
}}
>
<Ionicons name="camera" size={28} color="#fff" />
</TouchableOpacity>
</View>

106
package-lock.json generated
View File

@@ -16,7 +16,9 @@
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/netinfo": "11.3.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.4.1",
"@reduxjs/toolkit": "^2.2.6",
"aws-amplify": "^6.4.2",
"axios": "^1.7.2",
@@ -31,6 +33,7 @@
"react": "18.2.0",
"react-native": "^0.74.3",
"react-native-dotenv": "^3.4.11",
"react-native-gesture-handler": "^2.17.1",
"react-native-get-random-values": "^1.11.0",
"react-native-qrcode-svg": "^6.3.1",
"react-native-safe-area-context": "^4.10.4",
@@ -3665,6 +3668,17 @@
"node": ">=6.9.0"
}
},
"node_modules/@egjs/hammerjs": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
"dependencies": {
"@types/hammerjs": "^2.0.36"
},
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/@expo/bunyan": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -7324,10 +7338,29 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@react-navigation/drawer": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.7.2.tgz",
"integrity": "sha512-o4g2zgTZa2+oLd+8V33etrSM38KIqu8S/zCBTsdsHUoQyVE7JNRiv3Qgq/jMvEb8PZCqWmm7jHItcgzrBuwyOQ==",
"dependencies": {
"@react-navigation/elements": "^1.3.31",
"color": "^4.2.3",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-gesture-handler": ">= 1.0.0",
"react-native-reanimated": ">= 1.0.0",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/elements": {
"version": "1.3.30",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.30.tgz",
"integrity": "sha512-plhc8UvCZs0UkV+sI+3bisIyn78wz9O/BiWZXpounu72k/R/Sj5PuZYFJ1fi6psvriUveMCGh4LeZckAZu2qiQ==",
"version": "1.3.31",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.31.tgz",
"integrity": "sha512-bUzP4Awlljx5RKEExw8WYtif8EuQni2glDaieYROKTnaxsu9kEIA515sXQgUDZU4Ob12VoL7+z70uO3qrlfXcQ==",
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
@@ -7369,6 +7402,24 @@
"nanoid": "^3.1.23"
}
},
"node_modules/@react-navigation/stack": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.4.1.tgz",
"integrity": "sha512-upMEHOKMtuMu4c9gmoPlO/JqI6mDlSqwXg1aXKOTQLXAF8H5koOLRfrmi7AkdiE9A7lDXWUAZoGuD9O88cYvDQ==",
"dependencies": {
"@react-navigation/elements": "^1.3.31",
"color": "^4.2.3",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-gesture-handler": ">= 1.0.0",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.6.tgz",
@@ -8720,6 +8771,11 @@
"integrity": "sha512-SMWlRBukG9KV8ZNjwemp2AzDibp/czIAeKKTw09nCPbWxVskIxactCJCGOp4y6I1hCMY7T7UGfySvBLXNeUbEw==",
"license": "MIT"
},
"node_modules/@types/hammerjs": {
"version": "2.0.45",
"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
"integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
},
"node_modules/@types/istanbul-lib-coverage": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -12186,6 +12242,14 @@
"node": ">=8"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hosted-git-info": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -16260,6 +16324,21 @@
"@babel/runtime": "^7.20.6"
}
},
"node_modules/react-native-gesture-handler": {
"version": "2.17.1",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.17.1.tgz",
"integrity": "sha512-pWfniN6NuVKUq40KACuD3NCMe+bWNQCpD3cmxL6aLSCTwPKYmf7l4Lp0/E/almpjvxhybJZtFLU0w4tmxnIKaA==",
"dependencies": {
"@egjs/hammerjs": "^2.0.17",
"hoist-non-react-statics": "^3.3.0",
"invariant": "^2.2.4",
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-get-random-values": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.11.0.tgz",
@@ -16286,6 +16365,27 @@
"react-native-svg": ">=13.2.0"
}
},
"node_modules/react-native-reanimated": {
"version": "3.14.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz",
"integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==",
"peer": true,
"dependencies": {
"@babel/plugin-transform-arrow-functions": "^7.0.0-0",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
"@babel/plugin-transform-optional-chaining": "^7.0.0-0",
"@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
"@babel/plugin-transform-template-literals": "^7.0.0-0",
"@babel/preset-typescript": "^7.16.7",
"convert-source-map": "^2.0.0",
"invariant": "^2.2.4"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0",
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-safe-area-context": {
"version": "4.10.8",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.10.8.tgz",

3
package.json
View File

@@ -19,7 +19,9 @@
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/netinfo": "11.3.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.4.1",
"@reduxjs/toolkit": "^2.2.6",
"aws-amplify": "^6.4.2",
"axios": "^1.7.2",
@@ -34,6 +36,7 @@
"react": "18.2.0",
"react-native": "^0.74.3",
"react-native-dotenv": "^3.4.11",
"react-native-gesture-handler": "^2.17.1",
"react-native-get-random-values": "^1.11.0",
"react-native-qrcode-svg": "^6.3.1",
"react-native-safe-area-context": "^4.10.4",

28
screens/EmailScreen.tsx Normal file
View File

@@ -0,0 +1,28 @@
// EmailScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const EmailScreen: React.FC = () => {
return (
<View style={styles.container}>
<Text style={styles.header}>Email Screen T^T</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
justifyContent: 'center',
alignItems: 'center',
},
header: {
fontSize: 24,
fontWeight: 'bold',
color: '#ff69b4',
},
});
export default EmailScreen;

20
screens/QRScannerScreen.tsx
View File

@@ -53,6 +53,16 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
console.log("Scan data cleared");
};
useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('Settings')}>
<Ionicons name="settings" size={24} color="#000" style={{ marginRight: 10 }} />
</TouchableOpacity>
),
});
}, [navigation]);
// Handle QR Code Payload
const handlePayload = async (payload: string) => {
setScanned(true);
@@ -180,9 +190,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat
return (
<View style={styles.container}>
<View style={styles.banner}>
<Text style={styles.headerText}>SafeQR v0.89</Text>
</View>
<Text style={styles.headerText}>SafeQR v0.89</Text>
<Text style={styles.welcomeText}>Welcome to SafeQR code Scanner</Text>
<View style={styles.cameraContainer}>
@@ -230,14 +238,12 @@ const styles = StyleSheet.create({
backgroundColor: '#f8f0fc',
padding: 20,
},
banner: {
alignItems: 'center',
marginBottom: 20,
},
headerText: {
fontSize: 24,
fontWeight: 'bold',
color: '#ff69b4',
textAlign: 'center',
marginBottom: 20,
},
splashContainer: {
flex: 1,

304
screens/SettingsScreen.tsx
View File

@@ -1,200 +1,142 @@
import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
import { useAuthenticator } from '@aws-amplify/ui-react-native';
import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
import { fetchAuthSession, getCurrentUser, signInWithRedirect } from 'aws-amplify/auth';
import { useEffect, useState } from 'react';
import { Buffer } from 'buffer';
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';
function SignOutButton() {
const { signOut } = useAuthenticator();
return <Button title="Sign Out" onPress={signOut} />;
// Define custom props for CustomTabBar
interface CustomTabBarProps extends BottomTabBarProps {
clearScanData: () => void;
}
const handleSignInWithRedirect = async () => {
try {
await signInWithRedirect();
} catch (error) {
console.error('Error during sign in:', error);
}
};
const SettingsScreen: React.FC = () => {
const { userAttributes } = useFetchUserAttributes();
const [googleAccessToken, setGoogleAccessToken] = useState<string | null>(null);
useEffect(() => {
const getGoogleAccessToken = async () => {
try {
const currentUser = await getCurrentUser();
console.log('Current user:', currentUser);
const { tokens } = await fetchAuthSession();
const test = await fetchAuthSession();
console.log('Tokens:', tokens);
console.log("aws access token: ", tokens.accessToken.toString());
console.log("test ", test);
if (tokens?.idToken) {
const idToken = tokens.idToken.toString();
console.log('ID Token:', idToken);
const parts = idToken.split('.');
if (parts.length !== 3) {
throw new Error('ID token is not a valid JWT');
}
const payload = parts[1];
const decodedPayload = Buffer.from(payload, 'base64').toString('utf8');
console.log('Decoded payload:', decodedPayload);
let parsedPayload;
try {
parsedPayload = JSON.parse(decodedPayload);
} catch (parseError) {
console.error('Error parsing payload:', parseError);
console.error(`Parse error: ${parseError.message}\nPayload: ${decodedPayload}`);
return;
}
console.log('Parsed payload:', parsedPayload);
// Options for toLocaleString
const options: Intl.DateTimeFormatOptions = {
timeZone: 'Asia/Singapore', // UTC+8 timezone
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
};
if (parsedPayload["custom:access_token"]) {
console.log('Google Access Token:', parsedPayload["custom:access_token"]);
console.log('Google Refresh Token: ', parsedPayload["custom:refresh_token"]);
setGoogleAccessToken(parsedPayload["custom:access_token"]);
console.log("auth_time: ", new Date(parsedPayload.auth_time * 1000).toLocaleString('en-US', options));
console.log("iat: ", new Date(parsedPayload.iat * 1000).toLocaleString('en-US', options));
console.log("expiry: ", new Date(parsedPayload.exp * 1000).toLocaleString('en-US', options));
console.log("date created: ", new Date(1721715837500).toLocaleString('en-US', options));
} else {
console.error('No Google access token found in the payload');
}
} else {
console.error('No ID token found in the session');
}
} catch (error) {
console.error('Error getting Google access token:', error);
}
};
if (userAttributes) {
getGoogleAccessToken();
}
}, [userAttributes]);
const handleLinkPress = (url: string) => {
Linking.openURL(url);
};
// Custom tab bar component with typings
const CustomTabBar: React.FC<CustomTabBarProps> = ({ state, descriptors, navigation, clearScanData }) => {
return (
<View style={styles.container}>
<Text style={styles.header}>Settings</Text>
<View style={styles.profileSection}>
<Text style={styles.sectionTitle}>Profile</Text>
{userAttributes ? (
<View>
<Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
{googleAccessToken && (
<Text>Google Access Token: {googleAccessToken.substring(0, 10)}...</Text>
<View style={styles.tabBar}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
// Event handler for tab press
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
if (route.name === 'QRScanner') {
clearScanData();
navigation.reset({
index: 0,
routes: [{ name: 'QRScanner' }],
});
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
// Define the icon for each tab
const iconName =
route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings';
return (
<TouchableOpacity
key={index}
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={styles.tabButton}
>
{route.name === 'Settings' ? (
<MaterialIcons name="email" size={24} color={isFocused ? '#ff69b4' : '#222'} />
) : (
<Ionicons name={iconName} size={24} color={isFocused ? '#ff69b4' : '#222'} />
)}
<SignOutButton />
</View>
) : (
<TouchableOpacity style={styles.loginButton} onPress={handleSignInWithRedirect}>
<Text style={styles.loginButtonText}>Log In</Text>
{/* Check if label is a string before rendering */}
{typeof label === 'string' && route.name !== 'Settings' ? (
<Text style={{ color: isFocused ? '#ff69b4' : '#222' }}>
{label}
</Text>
) : null}
</TouchableOpacity>
)}
</View>
<View style={styles.divider} />
<View style={styles.aboutUsSection}>
<Text style={styles.sectionTitle}>About Us</Text>
<TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/')}>
<Text style={styles.linkText}>safeqr.github.io/marketing</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/privacy-policy')}>
<Text style={styles.linkText}>Privacy Policy</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/terms-of-service')}>
<Text style={styles.linkText}>Terms Of Service</Text>
);
})}
<View style={styles.floatingButton}>
<TouchableOpacity
onPress={() => {
clearScanData();
navigation.reset({
index: 0,
routes: [{ name: 'QRScanner' }],
});
}}
>
<Ionicons name="camera" size={28} color="#fff" />
</TouchableOpacity>
</View>
<Text style={styles.versionText}>Version 1.2</Text>
</View>
);
};
const styles = StyleSheet.create({
userName: {
fontSize: 16,
marginBottom: 10,
},
container: {
flex: 1,
backgroundColor: '#f8f0fc',
padding: 20,
},
header: {
fontSize: 24,
fontWeight: 'bold',
color: '#ff69b4',
marginBottom: 20,
},
profileSection: {
marginBottom: 20,
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#000',
marginBottom: 10,
},
loginButton: {
backgroundColor: '#ff69b4',
paddingVertical: 8,
paddingHorizontal: 20,
borderRadius: 20,
tabBar: {
position: 'absolute',
bottom: 20,
left: 20,
right: 20,
height: 70,
borderRadius: 35,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
elevation: 5,
},
tabButton: {
flex: 1,
justifyContent: 'center',
alignSelf: 'flex-start',
alignItems: 'center',
},
loginButtonText: {
color: '#000',
fontSize: 16,
},
divider: {
height: 1,
backgroundColor: '#ccc',
marginVertical: 20,
},
aboutUsSection: {
marginBottom: 20,
},
linkText: {
fontSize: 16,
color: '#0000ff',
marginBottom: 10,
},
versionText: {
textAlign: 'center',
fontSize: 14,
color: '#aaa',
marginTop: 20,
floatingButton: {
position: 'absolute',
bottom: 30,
left: '50%',
marginLeft: -30,
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: '#ff69b4',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 5,
elevation: 3,
},
});
export default SettingsScreen;
export default CustomTabBar;