73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { View, Text, StyleSheet, Switch } from "react-native";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
|
|
import colors from "../../components/colors";
|
|
|
|
type RootStackParamList = {
|
|
BecomeOrg: undefined;
|
|
Profile: undefined;
|
|
};
|
|
|
|
type SwitchNavigatorProps = {
|
|
role: string;
|
|
status: string;
|
|
};
|
|
|
|
const SwitchNavigator: React.FC<SwitchNavigatorProps> = ({ role, status }) => {
|
|
const navigation =
|
|
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
|
|
const [isEnabled, setIsEnabled] = useState(false);
|
|
|
|
const toggleSwitch = () => {
|
|
const newValue = !isEnabled;
|
|
setIsEnabled(newValue);
|
|
|
|
if (newValue) {
|
|
navigation.navigate("BecomeOrg"); // Navigate when ON
|
|
setTimeout(() => {
|
|
setIsEnabled(false);
|
|
}, 2000);
|
|
// Reset switch to OFF after navigation
|
|
} else {
|
|
navigation.navigate("Profile"); // Navigate when OFF
|
|
}
|
|
};
|
|
|
|
console.log("status :", status);
|
|
console.log("role :", role);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.text}>
|
|
{!isEnabled && role !== "USER"
|
|
? "Become an Organizer"
|
|
: `Request Organizer Role ${status}`}
|
|
</Text>
|
|
<Switch
|
|
trackColor={{ false: "#767577", true: colors.textLight }}
|
|
thumbColor={isEnabled ? colors.pastelBlue : "#f4f3f4"}
|
|
ios_backgroundColor="#3e3e3e"
|
|
onValueChange={toggleSwitch}
|
|
value={isEnabled}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default SwitchNavigator;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
justifyContent: 'flex-end',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
gap: 10,
|
|
},
|
|
text: {
|
|
fontSize: 18,
|
|
flexShrink: 1, // Wrap text if too long
|
|
},
|
|
});
|