helper funtion

src/screens/management/ManagementScreen.tsx

@@ -24,6 +24,7 @@ import { MyGroupCard } from "../../components/MyGroupCard";
 import { JoinedGroupCard } from "../../components/JoinedGroupCard";
 import { RequestCard } from "../../components/RequestCard";
 import { useSelector } from "react-redux";
+import Ionicons from "@react-native-vector-icons/ionicons";
 
 type GroupManagementNavProp = StackNavigationProp<RootStackParamList>;
 type ActiveTab = "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
@@ -172,6 +173,32 @@ const ManagementScreen: FC = () => {
         ))}
       </View>
       <View style={styles.contentArea}>
+        {
+          activeTab === "Requests" && userRole === "ORGANIZER" ? (
+            <TouchableOpacity
+              style={{
+                position: "absolute",
+                bottom: 85,
+                right: 20,
+                backgroundColor: colors.pastelOrange,
+                width: 60,
+                height: 60,
+                borderRadius: 30,
+                justifyContent: "center",
+                alignItems: "center",
+                shadowColor: "#000",
+                shadowOpacity: 0.2,
+                shadowRadius: 5,
+                shadowOffset: { width: 0, height: 3 },
+                elevation: 5, // for Android shadow
+              }}
+              onPress={() => navigation.navigate("YourContacts" as never)}
+            >
+              <Ionicons name="person-add" size={28} color={colors.textDark} />
+            </TouchableOpacity>
+          ) : null
+        }
+
         {renderContent()}
       </View>
     </AppView>

src/screens/management/YourContacts.tsx

@@ -0,0 +1,274 @@
+
+
+import React, { useState, useEffect } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    FlatList,
+    TouchableOpacity,
+    Modal,
+    PermissionsAndroid,
+    Platform,
+    NativeModules,
+    Linking,
+    Alert,
+} from "react-native";
+import AppView from "../../components/AppView";
+
+const { ContactsModule } = NativeModules;
+
+const APP_URL = "https://play.google.com/store/apps/details?id=com.yourapp"; // replace with your real app url
+
+const YourContacts = () => {
+    const [contacts, setContacts] = useState<any[]>([]);
+    const [selectedContact, setSelectedContact] = useState<any>(null);
+    const [modalVisible, setModalVisible] = useState(false);
+
+    useEffect(() => {
+        handleFetchContacts();
+    }, []);
+
+    const handleFetchContacts = async () => {
+        try {
+            if (Platform.OS === "android") {
+                const granted = await PermissionsAndroid.request(
+                    PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
+                    {
+                        title: "Contacts Permission",
+                        message: "This app would like to view your contacts.",
+                        buttonPositive: "OK",
+                    }
+                );
+
+                if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+                    console.log("Contacts permission denied");
+                    return;
+                }
+            }
+
+            const fetchedContacts = await ContactsModule.getContacts();
+            setContacts(fetchedContacts);
+        } catch (error) {
+            console.error("Error fetching contacts:", error);
+        }
+    };
+
+    const APP_URL = "https://play.google.com/store/apps/details?id=com.yourapp"; // your app link
+    const WHATSAPP_URL = "https://play.google.com/store/apps/details?id=com.whatsapp"; // fallback store link
+
+    const handleSend = async (contact: any) => {
+        if (!contact) return;
+
+        const message = `Hey ${contact.name}, check out this awesome app! Download here: ${APP_URL}`;
+
+        // direct send to contact if you want
+        const url = `whatsapp://send?phone=${contact.phone}&text=${encodeURIComponent(
+            message
+        )}`;
+
+        try {
+            const supported = await Linking.canOpenURL("whatsapp://send");
+            if (supported) {
+                // WhatsApp installed
+                await Linking.openURL(url);
+            } else {
+                // WhatsApp not installed → send user to Play Store/App Store
+                if (Platform.OS === "android") {
+                    await Linking.openURL(WHATSAPP_URL);
+                } else if (Platform.OS === "ios") {
+                    await Linking.openURL("itms-apps://apps.apple.com/app/whatsapp-messenger/id310633997");
+                }
+            }
+        } catch (err) {
+            console.error("Error sending to WhatsApp:", err);
+            Alert.alert("Error", "Something went wrong while trying to open WhatsApp");
+        }
+
+        setModalVisible(false);
+    };
+
+
+    const renderContact = ({ item }: { item: any }) => (
+        <View style={styles.contactRow}>
+            <View style={styles.avatar}>
+                <Text style={styles.avatarText}>
+                    {item.name ? item.name.charAt(0).toUpperCase() : "?"}
+                </Text>
+            </View>
+            <View style={styles.contactInfo}>
+                <Text style={styles.contactName}>{item.name}</Text>
+                <Text style={styles.contactPhone}>{item.phone}</Text>
+            </View>
+            <TouchableOpacity
+                style={styles.inviteButton}
+                onPress={() => {
+                    setSelectedContact(item);
+                    setModalVisible(true);
+                }}
+            >
+                <Text style={styles.inviteText}>Invite</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    return (
+        <AppView>
+            <View>
+              <Text style={styles.header}>Select Contact</Text>  
+              
+            </View>
+            
+            <FlatList
+                data={contacts}
+                keyExtractor={(item, index) => index.toString()}
+                renderItem={renderContact}
+            />
+
+            {/* Send Modal */}
+            <Modal
+                transparent={true}
+                visible={modalVisible}
+                animationType="slide"
+                onRequestClose={() => setModalVisible(false)}
+            >
+                <View style={styles.modalOverlay}>
+                    <View style={styles.modalContent}>
+                        <Text style={styles.modalTitle}>Send Invite</Text>
+                        {selectedContact && (
+                            <Text style={styles.modalText}>
+                                Send invite to {selectedContact.name} ({selectedContact.phone})
+                            </Text>
+                        )}
+                        <View style={styles.modalActions}>
+                            <TouchableOpacity
+                                style={styles.cancelButton}
+                                onPress={() => setModalVisible(false)}
+                            >
+                                <Text style={styles.cancelText}>Cancel</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity
+                                style={styles.sendButton}
+                                onPress={() => handleSend(selectedContact)}
+                            >
+                                <Text style={styles.sendText}>Send</Text>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </AppView>
+    );
+};
+
+
+export default YourContacts;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+        paddingHorizontal: 10,
+        paddingTop: 20,
+    },
+    header: {
+        fontSize: 20,
+        fontWeight: "bold",
+        marginBottom: 15,
+    },
+    contactRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        borderBottomWidth: 0.5,
+        borderBottomColor: "#ddd",
+    },
+    avatar: {
+        width: 45,
+        height: 45,
+        borderRadius: 25,
+        backgroundColor: "#25D366",
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 12,
+    },
+    avatarText: {
+        color: "#fff",
+        fontSize: 18,
+        fontWeight: "bold",
+    },
+    contactInfo: {
+        flex: 1,
+    },
+    contactName: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+    contactPhone: {
+        fontSize: 13,
+        color: "gray",
+    },
+    inviteButton: {
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#25D366",
+    },
+    inviteText: {
+        color: "#25D366",
+        fontWeight: "bold",
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    modalContent: {
+        width: "80%",
+        backgroundColor: "#fff",
+        borderRadius: 10,
+        padding: 20,
+        alignItems: "center",
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: "bold",
+        marginBottom: 10,
+    },
+    modalText: {
+        fontSize: 15,
+        marginBottom: 20,
+        textAlign: "center",
+    },
+    modalActions: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+    },
+    cancelButton: {
+        flex: 1,
+        marginRight: 10,
+        paddingVertical: 10,
+        borderRadius: 8,
+        backgroundColor: "#ddd",
+        alignItems: "center",
+    },
+    cancelText: {
+        fontWeight: "bold",
+        color: "#333",
+    },
+    sendButton: {
+        flex: 1,
+        marginLeft: 10,
+        paddingVertical: 10,
+        borderRadius: 8,
+        backgroundColor: "#25D366",
+        alignItems: "center",
+    },
+    sendText: {
+        fontWeight: "bold",
+        color: "#fff",
+    },
+});