create orgnizer screen and intrigate api

src/screens/profile/SwitchNavigator.tsx

@@ -0,0 +1,67 @@
+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";
+
+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
+    } 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: "#81b0ff" }}
+        thumbColor={isEnabled ? "#007AFF" : "#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
+  },
+});