common component
This commit is contained in:
Jaanu423
@@ -12,13 +12,16 @@ import {
|
||||
useSafeAreaInsets,
|
||||
} from 'react-native-safe-area-context';
|
||||
import AppNavigator from './src/navigation/AppNavigator';
|
||||
import { PaperProvider } from 'react-native-paper';
|
||||
|
||||
function App() {
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<AppNavigator />
|
||||
<PaperProvider>
|
||||
<AppNavigator />
|
||||
</PaperProvider>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,35 @@
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
|
||||
<application
|
||||
android:name=".MainApplication"
|
||||
<application
|
||||
android:name=".MainApplication"
|
||||
android:label="@string/app_name"
|
||||
android:icon="@mipmap/ic_launcher"
|
||||
android:roundIcon="@mipmap/ic_launcher_round"
|
||||
android:allowBackup="false"
|
||||
android:theme="@style/AppTheme"
|
||||
android:supportsRtl="true">
|
||||
<activity
|
||||
android:name=".MainActivity"
|
||||
android:label="@string/app_name"
|
||||
android:icon="@mipmap/ic_launcher"
|
||||
android:roundIcon="@mipmap/ic_launcher_round"
|
||||
android:allowBackup="false"
|
||||
android:theme="@style/AppTheme"
|
||||
android:supportsRtl="true">
|
||||
<activity
|
||||
android:name=".MainActivity"
|
||||
android:label="@string/app_name"
|
||||
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
|
||||
android:launchMode="singleTask"
|
||||
android:windowSoftInputMode="adjustResize"
|
||||
android:exported="true">
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
</activity>
|
||||
</application>
|
||||
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
|
||||
android:launchMode="singleTask"
|
||||
android:windowSoftInputMode="adjustResize"
|
||||
android:exported="true">
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN" />
|
||||
<category android:name="android.intent.category.LAUNCHER" />
|
||||
</intent-filter>
|
||||
<intent-filter android:autoVerify="true">
|
||||
<action android:name="android.intent.action.VIEW" />
|
||||
<category android:name="android.intent.category.DEFAULT" />
|
||||
<category android:name="android.intent.category.BROWSABLE" />
|
||||
<data android:scheme="https"
|
||||
android:host="api.godemo.in"
|
||||
android:pathPrefix="/EProcurementSB" />
|
||||
</intent-filter>
|
||||
|
||||
</activity>
|
||||
</application>
|
||||
</manifest>
|
||||
Generated
+106
-1
@@ -9,7 +9,9 @@
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||
"@react-native-picker/picker": "^2.11.2",
|
||||
"@react-native-vector-icons/ionicons": "^12.3.0",
|
||||
"@react-native-vector-icons/material-icons": "^12.3.0",
|
||||
"@react-native/new-app-screen": "0.81.1",
|
||||
"@react-navigation/bottom-tabs": "^7.4.7",
|
||||
"@react-navigation/elements": "^2.6.4",
|
||||
@@ -24,8 +26,11 @@
|
||||
"react-native-elements": "^3.4.3",
|
||||
"react-native-image-picker": "^8.2.1",
|
||||
"react-native-keychain": "^10.0.0",
|
||||
"react-native-linear-gradient": "^2.8.3",
|
||||
"react-native-paper": "^5.14.5",
|
||||
"react-native-safe-area-context": "^5.6.1",
|
||||
"react-native-screens": "^4.16.0"
|
||||
"react-native-screens": "^4.16.0",
|
||||
"react-native-walkthrough-tooltip": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
@@ -1997,6 +2002,28 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@callstack/react-theme-provider": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
|
||||
"integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"deepmerge": "^3.2.0",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
|
||||
"integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@egjs/hammerjs": {
|
||||
"version": "2.0.17",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
|
||||
@@ -2953,6 +2980,19 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-picker/picker": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.2.tgz",
|
||||
"integrity": "sha512-2zyFdW4jgHjF+NeuDZ4nl3hJ+8suey69bI3yljqhNyowfklW2NwNrdDUaJ2iwtPCpk2pt7834aPF8TI6iyZRhA==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"example"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-vector-icons/common": {
|
||||
"version": "12.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-vector-icons/common/-/common-12.3.0.tgz",
|
||||
@@ -3079,6 +3119,22 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-vector-icons/material-icons": {
|
||||
"version": "12.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-vector-icons/material-icons/-/material-icons-12.3.0.tgz",
|
||||
"integrity": "sha512-W9rhgfc8zKKXhZa/099un/RSNFgO6aHhJR2r6rodvTlO+ZRXq2GbU38CMBwhomJxyErcfmlR7En6wSdtLykYVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-native-vector-icons/common": "^12.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets-registry": {
|
||||
"version": "0.81.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.1.tgz",
|
||||
@@ -13059,6 +13115,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-freeze": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
|
||||
@@ -13204,6 +13266,36 @@
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-linear-gradient": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz",
|
||||
"integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-paper": {
|
||||
"version": "5.14.5",
|
||||
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz",
|
||||
"integrity": "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"example",
|
||||
"docs"
|
||||
],
|
||||
"dependencies": {
|
||||
"@callstack/react-theme-provider": "^3.0.9",
|
||||
"color": "^3.1.2",
|
||||
"use-latest-callback": "^0.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-safe-area-context": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-ratings": {
|
||||
"version": "8.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-8.0.4.tgz",
|
||||
@@ -13310,6 +13402,19 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-walkthrough-tooltip": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.6.0.tgz",
|
||||
"integrity": "sha512-8DHpcqsF+2VULYnKJCSZtllhlFUFiZcWCwOlw5RLkS451ElxPWJn9ShOFVZtkPMcwQAirq3SovumVM7Y/li0Fw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.1",
|
||||
"react-fast-compare": "^2.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": ">=16.8.24"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native/node_modules/commander": {
|
||||
"version": "12.1.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
|
||||
|
||||
+6
-1
@@ -11,7 +11,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||
"@react-native-picker/picker": "^2.11.2",
|
||||
"@react-native-vector-icons/ionicons": "^12.3.0",
|
||||
"@react-native-vector-icons/material-icons": "^12.3.0",
|
||||
"@react-native/new-app-screen": "0.81.1",
|
||||
"@react-navigation/bottom-tabs": "^7.4.7",
|
||||
"@react-navigation/elements": "^2.6.4",
|
||||
@@ -26,8 +28,11 @@
|
||||
"react-native-elements": "^3.4.3",
|
||||
"react-native-image-picker": "^8.2.1",
|
||||
"react-native-keychain": "^10.0.0",
|
||||
"react-native-linear-gradient": "^2.8.3",
|
||||
"react-native-paper": "^5.14.5",
|
||||
"react-native-safe-area-context": "^5.6.1",
|
||||
"react-native-screens": "^4.16.0"
|
||||
"react-native-screens": "^4.16.0",
|
||||
"react-native-walkthrough-tooltip": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
import { StatusBar, StyleSheet, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
type AppViewProps = {
|
||||
children: React.ReactNode;
|
||||
backgroundColor?: string;
|
||||
barStyle?: "default" | "light-content" | "dark-content";
|
||||
};
|
||||
|
||||
export default function AppView({
|
||||
children,
|
||||
backgroundColor = "#f5f5f5",
|
||||
barStyle = "dark-content",
|
||||
}: AppViewProps) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.safeArea, { backgroundColor }]}>
|
||||
<StatusBar
|
||||
translucent={false}
|
||||
backgroundColor={backgroundColor}
|
||||
barStyle={barStyle}
|
||||
/>
|
||||
<View style={styles.container}>{children}</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 8,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, ViewStyle } from "react-native";
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
backgroundColor?: string;
|
||||
textColor?: string;
|
||||
loading?: boolean;
|
||||
style?: ViewStyle;
|
||||
};
|
||||
|
||||
export default function CustomButton({
|
||||
title,
|
||||
onPress,
|
||||
backgroundColor = "#6C63FF",
|
||||
textColor = "#fff",
|
||||
loading = false,
|
||||
style,
|
||||
}: CustomButtonProps) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.button, { backgroundColor }, style]}
|
||||
onPress={onPress}
|
||||
disabled={loading}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={textColor} />
|
||||
) : (
|
||||
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginVertical: 5,
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
@@ -6,12 +6,15 @@ import {
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { TextInputProps } from "react-native";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
|
||||
type CustomInputProps = {
|
||||
type CustomInputProps = TextInputProps & {
|
||||
label: string;
|
||||
value: string;
|
||||
placeholder: string;
|
||||
onChangeText: (text: string) => void;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
const CustomInput: React.FC<CustomInputProps> = ({
|
||||
@@ -19,29 +22,38 @@ const CustomInput: React.FC<CustomInputProps> = ({
|
||||
value,
|
||||
placeholder,
|
||||
onChangeText,
|
||||
icon,
|
||||
...rest
|
||||
}) => (
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.inputLabel}>{label}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
placeholderTextColor="#999"
|
||||
onChangeText={onChangeText}
|
||||
/>
|
||||
<View style={styles.inputWrapper}>
|
||||
{icon && <Ionicons name={icon} size={20} color="#555" style={styles.inputIcon} />}
|
||||
<TextInput
|
||||
style={[styles.input, icon && { paddingLeft: 36 }]}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
placeholderTextColor="#999"
|
||||
onChangeText={onChangeText}
|
||||
{...rest}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
type?: "primary" | "secondary" | "danger";
|
||||
type?: "primary" | "secondary" | "danger" | "outline";
|
||||
icon?: string | null;
|
||||
style?: object;
|
||||
};
|
||||
|
||||
const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
title,
|
||||
onPress,
|
||||
type = "primary",
|
||||
icon,
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
@@ -52,15 +64,18 @@ const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.buttonText,
|
||||
type === "secondary" && styles.buttonTextSecondary,
|
||||
type === "danger" && styles.buttonTextDanger,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<View style={styles.buttonContent}>
|
||||
{icon && <Ionicons name={icon || 'user'} size={20} color={type === "secondary" ? "#333" : "#fff"} style={{ marginRight: 8 }} />}
|
||||
<Text
|
||||
style={[
|
||||
styles.buttonText,
|
||||
type === "secondary" && styles.buttonTextSecondary,
|
||||
type === "danger" && styles.buttonTextDanger,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
@@ -110,11 +125,23 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
inputContainer: { marginBottom: 12 },
|
||||
inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
inputIcon: {
|
||||
position: "absolute",
|
||||
left: 10,
|
||||
zIndex: 1,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
paddingLeft: 12,
|
||||
backgroundColor: "#fdfdfd",
|
||||
color: "#000",
|
||||
fontSize: 15,
|
||||
@@ -136,9 +163,13 @@ const styles = StyleSheet.create({
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
buttonContent: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
|
||||
buttonTextSecondary: { color: "#333" },
|
||||
buttonTextDanger: { color: "#fff" },
|
||||
});
|
||||
|
||||
export { CustomInput, CustomButton, styles };
|
||||
export { CustomInput, styles, CustomButton };
|
||||
@@ -4,9 +4,12 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import { View, Text, Button } from "react-native";
|
||||
import LoginScreen from "../screens/LoginScreen";
|
||||
import OtpVerificationScreen from "../screens/OtpVarificationScreen";
|
||||
import BottomTabs from "./BottomTabs";
|
||||
import SplashScreen from "../screens/SplashScreen";
|
||||
import Profile from "../screens/profile/Profile";
|
||||
import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
|
||||
import GroupCreation from "../screens/GroupCreation";
|
||||
import GroupReview from "../screens/GroupReview";
|
||||
import BottomTabs from "./BottomTabs";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
export type RootStackParamList = {
|
||||
@@ -15,6 +18,10 @@ export type RootStackParamList = {
|
||||
Home: undefined
|
||||
HomeTabs: undefined
|
||||
splash: undefined
|
||||
OrganizerRegister:undefined
|
||||
Profile: undefined;
|
||||
GroupCreation: undefined;
|
||||
GroupReview: undefined;
|
||||
|
||||
};
|
||||
|
||||
@@ -32,14 +39,25 @@ function HomeScreen() {
|
||||
|
||||
|
||||
export default function AppNavigator() {
|
||||
const linking = {
|
||||
prefixes: ["myapp://", "https://api.godemo.in"], // supports both
|
||||
config: {
|
||||
screens: {
|
||||
Profile: "EProcurementSB", // dynamic route
|
||||
},
|
||||
},
|
||||
};
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<NavigationContainer linking={linking} >
|
||||
<Stack.Navigator initialRouteName="Splash">
|
||||
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Profile" component={Profile} />
|
||||
<Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Profile" component={Profile} options={{ headerShown: false }}/>
|
||||
<Stack.Screen name="GroupCreation" component={GroupCreation}options={{ headerShown: false }} />
|
||||
<Stack.Screen name="GroupReview" component={GroupReview}options={{ headerShown: false }} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
|
||||
@@ -1,24 +1,35 @@
|
||||
import React from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { View, Text } from "react-native";
|
||||
import {Ionicons} from '@react-native-vector-icons/ionicons';
|
||||
import { View, Text, StyleSheet, Platform } from "react-native";
|
||||
import { Ionicons } from '@react-native-vector-icons/ionicons';
|
||||
import GroupScreen from "../screens/GroupScreen";
|
||||
import Profile from "../screens/profile/Profile";
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
// Dummy screens for now
|
||||
const TAB_CONFIG = {
|
||||
activeColor: "#eb87a3ff", // coffee-like orange
|
||||
inactiveColor: "#000000ff",
|
||||
backgroundColor: "#e3e9efff",
|
||||
height: 80,
|
||||
iconSize: 30,
|
||||
labelSize: 12,
|
||||
labelWeight: "600",
|
||||
};
|
||||
|
||||
// Dummy Screens
|
||||
function HomeScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>🏠 Home</Text>
|
||||
<View style={styles.screen}>
|
||||
<Text style={styles.text}>🏠 Home</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>⚙️ Settings</Text>
|
||||
<View style={styles.screen}>
|
||||
<Text style={styles.text}>⚙️ Settings</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -28,24 +39,72 @@ export default function BottomTabs() {
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
headerShown: false,
|
||||
tabBarShowLabel: true,
|
||||
tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
|
||||
tabBarActiveTintColor: "#FF7A00",
|
||||
tabBarInactiveTintColor: "gray",
|
||||
tabBarIcon: ({ color, size }) => {
|
||||
let iconName: React.ComponentProps<typeof Ionicons>['name'] = "home-outline";
|
||||
tabBarStyle: styles.tabBar,
|
||||
tabBarActiveTintColor: TAB_CONFIG.activeColor,
|
||||
tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
|
||||
tabBarLabelStyle: {
|
||||
fontSize: TAB_CONFIG.labelSize,
|
||||
fontWeight: TAB_CONFIG.labelWeight as any,
|
||||
marginBottom: Platform.OS === "ios" ? 0 : 5,
|
||||
},
|
||||
tabBarIcon: ({ color, focused }) => {
|
||||
let iconName:
|
||||
| "home"
|
||||
| "home-outline"
|
||||
| "person"
|
||||
| "person-outline"
|
||||
| "settings"
|
||||
| "settings-outline"
|
||||
| "people"
|
||||
| "people-outline" = "home-outline";
|
||||
|
||||
if (route.name === "Home") iconName = "home-outline";
|
||||
else if (route.name === "Profile") iconName = "person-outline";
|
||||
else if (route.name === "Settings") iconName = "settings-outline";
|
||||
if (route.name === "Home") iconName = focused ? "home" : "home-outline";
|
||||
else if (route.name === "Profile")
|
||||
iconName = focused ? "person" : "person-outline";
|
||||
else if (route.name === "Settings")
|
||||
iconName = focused ? "settings" : "settings-outline";
|
||||
else if (route.name === "Group")
|
||||
iconName = focused ? "people" : "people-outline";
|
||||
|
||||
return <Ionicons name={iconName} size={size} color={color} />;
|
||||
return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Tab.Screen name="Home" component={HomeScreen} />
|
||||
<Tab.Screen name="Profile" component={Profile} />
|
||||
<Tab.Screen name="Group" component={GroupScreen} />
|
||||
<Tab.Screen name="Settings" component={SettingsScreen} />
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#dae4ed",
|
||||
},
|
||||
text: {
|
||||
fontSize: 20,
|
||||
fontWeight: "600",
|
||||
color: "#111",
|
||||
},
|
||||
tabBar: {
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: TAB_CONFIG.height,
|
||||
backgroundColor: TAB_CONFIG.backgroundColor,
|
||||
borderTopLeftRadius: 30,
|
||||
borderTopRightRadius: 30,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.10,
|
||||
shadowOffset: { width: 0, height: -2 },
|
||||
shadowRadius: 8,
|
||||
elevation: 20,
|
||||
paddingTop:10,
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
import { Picker } from "@react-native-picker/picker";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
|
||||
export default function GroupCreationForm() {
|
||||
const navigation = useNavigation<any>();
|
||||
|
||||
const [form, setForm] = useState({
|
||||
contributionAmount: "",
|
||||
customCycleDays: "",
|
||||
cycleType: "CUSTOM",
|
||||
description: "",
|
||||
endDate: "",
|
||||
groupName: "",
|
||||
maxParticipants: "",
|
||||
minParticipants: "",
|
||||
startDate: "",
|
||||
visibility: "PRIVATE",
|
||||
});
|
||||
|
||||
const handleChange = (key: string, value: string) => {
|
||||
setForm({ ...form, [key]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: "#f5f6fa", paddingTop: Platform.OS === "android" ? 40 : 0 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false}>
|
||||
<Text style={styles.title}>Group Creation</Text>
|
||||
|
||||
{/* Group Info */}
|
||||
<Text style={styles.label}>Group Name</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter your group name"
|
||||
value={form.groupName}
|
||||
onChangeText={(val) => handleChange("groupName", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Description</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { height: 80 }]}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter a short description for the group"
|
||||
value={form.description}
|
||||
multiline
|
||||
onChangeText={(val) => handleChange("description", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Visibility</Text>
|
||||
<View style={styles.pickerWrapper}>
|
||||
<Picker
|
||||
selectedValue={form.visibility}
|
||||
onValueChange={(val) => handleChange("visibility", val)}
|
||||
style={styles.picker}
|
||||
>
|
||||
<Picker.Item label="Private (Only invited can join)" value="PRIVATE" />
|
||||
<Picker.Item label="Public (Anyone can find)" value="PUBLIC" />
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
{/* Participants */}
|
||||
<Text style={styles.label}>Minimum Participants</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter minimum number of participants"
|
||||
keyboardType="numeric"
|
||||
value={form.minParticipants}
|
||||
onChangeText={(val) => handleChange("minParticipants", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Maximum Participants</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter maximum number of participants"
|
||||
keyboardType="numeric"
|
||||
value={form.maxParticipants}
|
||||
onChangeText={(val) => handleChange("maxParticipants", val)}
|
||||
/>
|
||||
|
||||
{/* Contribution */}
|
||||
<Text style={styles.label}>Contribution Amount (₹)</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter contribution amount (₹)"
|
||||
keyboardType="numeric"
|
||||
value={form.contributionAmount}
|
||||
onChangeText={(val) => handleChange("contributionAmount", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Cycle Type</Text>
|
||||
<View style={styles.pickerWrapper}>
|
||||
<Picker
|
||||
selectedValue={form.cycleType}
|
||||
onValueChange={(val) => handleChange("cycleType", val)}
|
||||
style={styles.picker}
|
||||
>
|
||||
<Picker.Item label="Custom (Set custom cycle days)" value="CUSTOM" />
|
||||
<Picker.Item label="Monthly" value="MONTHLY" />
|
||||
<Picker.Item label="Quarterly" value="QUARTERLY" />
|
||||
<Picker.Item label="Half Yearly" value="HALF_YEARLY" />
|
||||
<Picker.Item label="Yearly" value="YEARLY" />
|
||||
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
{form.cycleType === "CUSTOM" && (
|
||||
<>
|
||||
<Text style={styles.label}>Custom Cycle Days</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="Enter number of days for custom cycle"
|
||||
keyboardType="numeric"
|
||||
value={form.customCycleDays}
|
||||
onChangeText={(val) => handleChange("customCycleDays", val)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Timeline */}
|
||||
<Text style={styles.label}>Start Date</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="YYYY-MM-DD (e.g. 2025-09-12)"
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
value={form.startDate}
|
||||
onChangeText={(val) => handleChange("startDate", val)}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>End Date</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor={"#a3a3a3ff"}
|
||||
placeholder="YYYY-MM-DD (e.g. 2025-12-31)"
|
||||
value={form.endDate}
|
||||
onChangeText={(val) => handleChange("endDate", val)}
|
||||
/>
|
||||
|
||||
{/* Next Button
|
||||
<TouchableOpacity
|
||||
onPress={() => navigation.navigate("GroupReview", { form })}
|
||||
style={styles.nextBtn}
|
||||
>
|
||||
<Text style={styles.btnText}>➡ Review</Text>
|
||||
</TouchableOpacity> */}
|
||||
<CustomButton
|
||||
title="➡ Review"
|
||||
onPress={() => navigation.navigate("GroupReview", { form })}
|
||||
/>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 20 },
|
||||
title: { fontSize: 22, fontWeight: "bold", marginBottom: 15, color: "#333" },
|
||||
label: { fontSize: 14, fontWeight: "600", marginBottom: 5, color: "#444" },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
marginBottom: 15,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#fff",
|
||||
elevation: 1,
|
||||
},
|
||||
pickerWrapper: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 12,
|
||||
marginBottom: 15,
|
||||
backgroundColor: "#fff",
|
||||
elevation: 1,
|
||||
},
|
||||
picker: { height: 60, width: "100%" },
|
||||
nextBtn: {
|
||||
backgroundColor: "#eb87a3ff",
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
btnText: { color: "#fff", fontWeight: "bold", fontSize: 16 },
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
import { View, Text, StyleSheet, TouchableOpacity, Alert, ScrollView } from "react-native";
|
||||
import axios from "axios";
|
||||
import { GROUP_CREATION_URL } from "../utils/ApiUrls";
|
||||
import App from "../../App";
|
||||
import AppView from "../components/AppView";
|
||||
import { apiCall } from "../utils/ApiHelper";
|
||||
|
||||
export default function GroupReview({ route, navigation }: any) {
|
||||
const { form } = route.params;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const payload = {
|
||||
...form,
|
||||
contributionAmount: Number(form.contributionAmount),
|
||||
customCycleDays: Number(form.customCycleDays),
|
||||
maxParticipants: Number(form.maxParticipants),
|
||||
minParticipants: Number(form.minParticipants),
|
||||
};
|
||||
await apiCall(GROUP_CREATION_URL, "POST", payload);
|
||||
};
|
||||
|
||||
const renderRow = (label: string, value: string | number) => (
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.label}>{label}</Text>
|
||||
<Text style={styles.value}>{value}</Text>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<AppView>
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
<Text style={styles.title}>Review Your Group</Text>
|
||||
<View style={styles.reviewBox}>
|
||||
{renderRow("Group Name", form.groupName)}
|
||||
{renderRow("Description", form.description)}
|
||||
{renderRow("Min Participants", form.minParticipants)}
|
||||
{renderRow("Max Participants", form.maxParticipants)}
|
||||
{renderRow("Contribution", `₹${form.contributionAmount}`)}
|
||||
{renderRow("Cycle Type", form.cycleType)}
|
||||
{form.cycleType === "CUSTOM" && renderRow("Custom Cycle", `${form.customCycleDays} days`)}
|
||||
{renderRow("Start Date", form.startDate)}
|
||||
{renderRow("End Date", form.endDate)}
|
||||
{renderRow("Visibility", form.visibility)}
|
||||
</View>
|
||||
|
||||
<TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
|
||||
<Text style={styles.btnText}> Submit</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</AppView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flexGrow: 1, padding: 20, backgroundColor: "#f5f5f5" },
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 20,
|
||||
color: "#222",
|
||||
textAlign: "center",
|
||||
},
|
||||
reviewBox: {
|
||||
padding: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#fff",
|
||||
marginBottom: 25,
|
||||
elevation: 3,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 5,
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#eee",
|
||||
},
|
||||
label: { fontSize: 16, fontWeight: "600", color: "#444" },
|
||||
value: { fontSize: 16, fontWeight: "500", color: "#111" },
|
||||
submitBtn: {
|
||||
backgroundColor: "#008e02",
|
||||
paddingVertical: 18,
|
||||
borderRadius: 14,
|
||||
alignItems: "center",
|
||||
elevation: 2,
|
||||
},
|
||||
btnText: { color: "#fff", fontWeight: "bold", fontSize: 18 },
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, StyleSheet } from "react-native";
|
||||
import { FAB, Portal, Provider } from "react-native-paper";
|
||||
import Tooltip from "react-native-walkthrough-tooltip";
|
||||
import { MaterialIcons } from '@react-native-vector-icons/material-icons';
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
|
||||
export default function GroupScreen() {
|
||||
const [tooltipVisible, setTooltipVisible] = useState(false);
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
return (
|
||||
<Provider>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Groups</Text>
|
||||
|
||||
|
||||
<FAB
|
||||
style={styles.fab}
|
||||
icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
|
||||
onPress={() => {
|
||||
navigation.navigate('GroupCreation')
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
</View>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#dae4ed",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
},
|
||||
fab: {
|
||||
position: "absolute",
|
||||
right: 20,
|
||||
bottom: 90,
|
||||
width: 70,
|
||||
height: 70,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#dae4ed",
|
||||
borderRadius: 60,
|
||||
},
|
||||
tooltipText: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,149 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import axios from "axios";
|
||||
import { ORGRAGISTRATION } from "../utils/ApiUrls";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
|
||||
const theme = {
|
||||
primary: "#111",
|
||||
accent: "#FF7A00",
|
||||
background: "#F9F9F9",
|
||||
text: "#1A1A1A",
|
||||
subText: "#6B6B6B",
|
||||
outline: "#E5E5E5",
|
||||
};
|
||||
|
||||
export default function OrganizerRegisterScreen() {
|
||||
const [bankAccountNumber, setBankAccountNumber] = useState("");
|
||||
const [bankName, setBankName] = useState("");
|
||||
const [branchCode, setBranchCode] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const handleSubmit = async () => {
|
||||
if (!bankAccountNumber || !bankName || !branchCode) {
|
||||
Alert.alert("Error", "All fields are required.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 🔑 get token from Keychain
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
const token = creds ? creds.password : null;
|
||||
|
||||
if (!token) {
|
||||
Alert.alert("Error", "No token found. Please log in again.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
bankAccountNumber,
|
||||
bankName,
|
||||
branchCode,
|
||||
};
|
||||
|
||||
const res = await axios.post(
|
||||
ORGRAGISTRATION, // your API endpoint
|
||||
payload,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`, // 👈 token added here
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
console.log("✅ Organizer Registered:", res.data);
|
||||
Alert.alert("Success", "Organizer registered successfully!");
|
||||
} catch (err: any) {
|
||||
console.error("❌ Register Error:", err?.response?.data || err.message);
|
||||
Alert.alert("Error", "Failed to register. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: theme.background }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
<Text style={styles.title}>Organizer Registration 📝</Text>
|
||||
|
||||
<TextInput
|
||||
placeholder="Bank Account Number"
|
||||
style={styles.input}
|
||||
value={bankAccountNumber}
|
||||
onChangeText={setBankAccountNumber}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
placeholder="Bank Name"
|
||||
style={styles.input}
|
||||
value={bankName}
|
||||
onChangeText={setBankName}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
placeholder="Branch Code"
|
||||
style={styles.input}
|
||||
value={branchCode}
|
||||
onChangeText={setBranchCode}
|
||||
/>
|
||||
|
||||
<Pressable style={styles.button} onPress={handleSubmit} disabled={loading}>
|
||||
<Text style={styles.buttonText}>{loading ? "Submitting..." : "Submit"}</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontWeight: "700",
|
||||
color: theme.text,
|
||||
marginBottom: 20,
|
||||
textAlign: "center",
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: theme.outline,
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
marginBottom: 15,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.primary,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontWeight: "600",
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
@@ -1,12 +1,13 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
|
||||
|
||||
const SplashScreen = () => {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1
|
||||
|
||||
useEffect(() => {
|
||||
const checkLogin = async () => {
|
||||
@@ -16,7 +17,7 @@ const SplashScreen = () => {
|
||||
console.log("🔑 Found token:", creds.password);
|
||||
navigation.replace("Home"); // go to bottom tabs if logged in
|
||||
} else {
|
||||
navigation.replace("Login"); // go to login if not logged in
|
||||
navigation.replace("Login");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error checking login:", error);
|
||||
@@ -24,12 +25,22 @@ const SplashScreen = () => {
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(checkLogin, 1500); // show splash for 1.5s
|
||||
}, [navigation]);
|
||||
// Start fade out animation
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 0,
|
||||
duration: 1500, // fade out in 1.5s
|
||||
useNativeDriver: true,
|
||||
delay: 1500, // wait before fading
|
||||
}).start(() => {
|
||||
checkLogin(); // only navigate after animation
|
||||
});
|
||||
}, [navigation, fadeAnim]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Circle Collect</Text>
|
||||
<Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
|
||||
Circle Collect
|
||||
</Animated.Text>
|
||||
<ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
|
||||
</View>
|
||||
);
|
||||
@@ -42,7 +53,7 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#111111",
|
||||
backgroundColor: "#FFFFFF", // white background
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
|
||||
+237
-329
@@ -10,113 +10,16 @@ import {
|
||||
ActivityIndicator,
|
||||
StatusBar,
|
||||
TextInput,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import {Ionicons} from "@react-native-vector-icons/ionicons";
|
||||
import { Ionicons } from "@react-native-vector-icons/ionicons";
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import { IconProps } from "react-native-elements";
|
||||
import { base_URL } from "../../utils/ApiUrls";
|
||||
import { CustomButton, CustomInput } from "../../components/common/Custom";
|
||||
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
type?: "primary" | "secondary" | "danger" | "outline";
|
||||
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
||||
style?: any;
|
||||
};
|
||||
|
||||
const CustomButton = ({
|
||||
title,
|
||||
onPress,
|
||||
type = "primary",
|
||||
icon,
|
||||
style
|
||||
}: CustomButtonProps) => {
|
||||
const getButtonStyle = () => {
|
||||
switch (type) {
|
||||
case "secondary":
|
||||
return [styles.button, styles.buttonSecondary];
|
||||
case "danger":
|
||||
return [styles.button, styles.buttonDanger];
|
||||
case "outline":
|
||||
return [styles.button, styles.buttonOutline];
|
||||
default:
|
||||
return styles.button;
|
||||
}
|
||||
};
|
||||
|
||||
const getTextStyle = () => {
|
||||
switch (type) {
|
||||
case "secondary":
|
||||
return [styles.buttonText, styles.buttonTextSecondary];
|
||||
case "danger":
|
||||
return [styles.buttonText, styles.buttonTextDanger];
|
||||
case "outline":
|
||||
return [styles.buttonText, styles.buttonTextOutline];
|
||||
default:
|
||||
return styles.buttonText;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[getButtonStyle(), style]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{icon && (
|
||||
<Ionicons
|
||||
name={icon}
|
||||
size={18}
|
||||
color={
|
||||
Array.isArray(getTextStyle())
|
||||
? getTextStyle().find((s: any) => s && typeof s === "object" && "color" in s)?.color || "#fff"
|
||||
: (getTextStyle() as any).color || "#fff"
|
||||
}
|
||||
style={styles.buttonIcon}
|
||||
/>
|
||||
)}
|
||||
<Text style={getTextStyle()}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
// Custom Input Component
|
||||
type CustomInputProps = {
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
onChangeText?: (text: string) => void;
|
||||
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const CustomInput = ({
|
||||
label,
|
||||
placeholder,
|
||||
value,
|
||||
onChangeText,
|
||||
icon,
|
||||
...props
|
||||
}: CustomInputProps) => {
|
||||
return (
|
||||
<View style={styles.inputContainer}>
|
||||
{label && <Text style={styles.inputLabel}>{label}</Text>}
|
||||
<View style={styles.inputWrapper}>
|
||||
{icon && <Ionicons name={icon} size={20} color="#666" style={styles.inputIcon} />}
|
||||
<TextInput
|
||||
style={[styles.input, icon && styles.inputWithIcon]}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#999"
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
{...props}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
@@ -236,64 +139,64 @@ const Profile = () => {
|
||||
};
|
||||
|
||||
const handleUpdateImage = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!user?.filePath) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
setImageUpdating(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: user.filePath,
|
||||
type: "image/jpeg",
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
`${base_URL}user/update/userImg`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
);
|
||||
const token = credentials.password;
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
if (!user?.filePath) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
// If API returns updated image, set it
|
||||
if (result.data?.imageBlob) {
|
||||
setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
|
||||
setImageUpdating(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: user.filePath,
|
||||
type: "image/jpeg",
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
`${base_URL}user/update/userImg`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
|
||||
// If API returns updated image, set it
|
||||
if (result.data?.imageBlob) {
|
||||
setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev);
|
||||
} else {
|
||||
// Otherwise, keep the local filePath until next fetch
|
||||
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
|
||||
}
|
||||
|
||||
// Refresh profile from API as well
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
// Otherwise, keep the local filePath until next fetch
|
||||
setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev);
|
||||
Alert.alert("Error", result.message || "Failed to update profile image");
|
||||
}
|
||||
|
||||
// Refresh profile from API as well
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", result.message || "Failed to update profile image");
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
} finally {
|
||||
setImageUpdating(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
} finally {
|
||||
setImageUpdating(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
@@ -301,15 +204,15 @@ const Profile = () => {
|
||||
}, []);
|
||||
|
||||
console.log("user image :", user?.filePath);
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
}
|
||||
if (user?.filePath) {
|
||||
return user.filePath;
|
||||
}
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
const getProfileImage = () => {
|
||||
if (user?.imageBlob) {
|
||||
return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
}
|
||||
if (user?.filePath) {
|
||||
return user.filePath;
|
||||
}
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
|
||||
if (fetching || !user) {
|
||||
@@ -332,182 +235,187 @@ const getProfileImage = () => {
|
||||
<Ionicons name="refresh" size={24} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.scrollContainer}>
|
||||
{/* Profile Card */}
|
||||
<View style={styles.profileCard}>
|
||||
{/* Profile Image Section */}
|
||||
<View style={styles.profileImageSection}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
source={{ uri: getProfileImage() }}
|
||||
style={styles.avatar}
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
// disabled={imageUpdating}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
{/* Profile Details */}
|
||||
<View style={styles.detailsSection}>
|
||||
<Text style={styles.sectionTitle}>Personal Information</Text>
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
|
||||
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Email</Text>
|
||||
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Mobile</Text>
|
||||
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Username</Text>
|
||||
<Text style={styles.detailText}>{user.username}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Address</Text>
|
||||
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Gender</Text>
|
||||
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Role</Text>
|
||||
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Profile Card */}
|
||||
<View style={styles.profileCard}>
|
||||
{/* Profile Image Section */}
|
||||
<View style={styles.profileImageSection}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<Image
|
||||
source={{ uri: getProfileImage() }}
|
||||
style={styles.avatar}
|
||||
onError={() => console.log("Error loading image")}
|
||||
/>
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
icon="create"
|
||||
style={styles.editButton}
|
||||
title={imageUpdating ? "Updating..." : "Update Image"}
|
||||
onPress={handleUpdateImage}
|
||||
icon={imageUpdating ? undefined : "cloud-upload"}
|
||||
style={styles.updateImageButton}
|
||||
// disabled={imageUpdating}
|
||||
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Edit Form */}
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
</View>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
{!editing ? (
|
||||
<>
|
||||
{/* Profile Details */}
|
||||
<View style={styles.detailsSection}>
|
||||
<Text style={styles.sectionTitle}>Personal Information</Text>
|
||||
<View style={{ marginBottom: 16 }}>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
<Text style={{ color: "#64748b", marginBottom: 16 }}>Become Organizer</Text>
|
||||
</View>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, email: text })}
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
/>
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="person" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailText}>{user.firstName} {user.lastName}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, username: text })}
|
||||
icon="at"
|
||||
/>
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="mail" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Email</Text>
|
||||
<Text style={styles.detailText}>{user.email || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, address: text })}
|
||||
icon="location"
|
||||
multiline
|
||||
/>
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="call" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Mobile</Text>
|
||||
<Text style={styles.detailText}>{user.mobile || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, gender: text })}
|
||||
icon="male-female"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="at-circle" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Username</Text>
|
||||
<Text style={styles.detailText}>{user.username}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="location" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Address</Text>
|
||||
<Text style={styles.detailText}>{user.address || "Not provided"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="male-female" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Gender</Text>
|
||||
<Text style={styles.detailText}>{user.gender || "Not specified"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.detailRow}>
|
||||
<Ionicons name="key" size={20} color="#6366f1" style={styles.detailIcon} />
|
||||
<View>
|
||||
<Text style={styles.detailLabel}>Role</Text>
|
||||
<Text style={styles.detailText}>{user.role || "User"}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.editButtons}>
|
||||
<CustomButton
|
||||
title="Save Changes"
|
||||
onPress={updateProfile}
|
||||
icon="save"
|
||||
style={styles.saveButton}
|
||||
title="Edit Profile"
|
||||
onPress={() => setEditing(true)}
|
||||
icon="create"
|
||||
style={styles.editButton}
|
||||
/>
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="outline"
|
||||
onPress={() => setEditing(false)}
|
||||
icon="close"
|
||||
style={styles.cancelButton}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Edit Form */}
|
||||
<View style={styles.editSection}>
|
||||
<Text style={styles.sectionTitle}>Edit Profile</Text>
|
||||
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, firstName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, lastName: text })}
|
||||
icon="person"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, email: text })}
|
||||
icon="mail"
|
||||
keyboardType="email-address"
|
||||
/>
|
||||
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, username: text })}
|
||||
icon="at"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, address: text })}
|
||||
icon="location"
|
||||
multiline
|
||||
/>
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text) => setUser({ ...user, gender: text })}
|
||||
icon="male-female"
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.editButtons}>
|
||||
<CustomButton
|
||||
title="Save Changes"
|
||||
onPress={updateProfile}
|
||||
icon="save"
|
||||
style={styles.saveButton}
|
||||
/>
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="outline"
|
||||
onPress={() => setEditing(false)}
|
||||
icon="close"
|
||||
style={styles.cancelButton}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -515,7 +423,8 @@ const getProfileImage = () => {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f8fafc"
|
||||
backgroundColor: "#f8fafc",
|
||||
marginBottom: '30%',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
@@ -551,9 +460,7 @@ const styles = StyleSheet.create({
|
||||
refreshButton: {
|
||||
padding: 4,
|
||||
},
|
||||
scrollContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
profileCard: {
|
||||
borderRadius: 20,
|
||||
margin: 16,
|
||||
@@ -636,6 +543,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
editSection: {
|
||||
marginBottom: 20,
|
||||
flex: 1,
|
||||
},
|
||||
editButtons: {
|
||||
gap: 12,
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import axios, { AxiosRequestConfig } from "axios";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
|
||||
/**
|
||||
* Generic API call function with proper error handling and optional auth.
|
||||
* @param url - API endpoint
|
||||
* @param method - HTTP method: GET, POST, PUT, DELETE
|
||||
* @param data - Request body for POST/PUT
|
||||
* @param config - Optional Axios config (headers, params, etc.)
|
||||
*/
|
||||
export async function apiCall<T>(
|
||||
url: string,
|
||||
method: "GET" | "POST" | "PUT" | "DELETE" = "GET",
|
||||
data?: any,
|
||||
config?: AxiosRequestConfig
|
||||
): Promise<T | null> {
|
||||
try {
|
||||
// Get saved credentials from Keychain
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
...(creds ? { Authorization: `Bearer ${creds.password}` } : {}),
|
||||
...config?.headers,
|
||||
};
|
||||
|
||||
const response = await axios({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
...config,
|
||||
headers,
|
||||
});
|
||||
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
if (error.response) {
|
||||
// Server responded with a status other than 2xx
|
||||
console.error(
|
||||
"API Error:",
|
||||
`Status: ${error.response.status}`,
|
||||
`Data: ${JSON.stringify(error.response.data)}`
|
||||
);
|
||||
} else if (error.request) {
|
||||
// Request was made but no response received
|
||||
console.error("API Error: No response received", error.request);
|
||||
} else {
|
||||
// Something else went wrong while setting up the request
|
||||
console.error("API Error:", error.message);
|
||||
}
|
||||
return null; // return null so the caller can handle it
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user