performics_dev/PerformicsSrc/src/components/AndroidShareModal.js

import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  StyleSheet,
} from "react-native";
import Share from "react-native-share";
import RNFS from "react-native-fs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

export default function AndroidShareModal({ visible, imageUri, onClose }) {
  const moveToExternal = async (uri) => {
    const filename = "shared_image.jpg"; // or png
    const dest = RNFS.PicturesDirectoryPath + "/" + filename; // public folder
    // Copy file
    await RNFS.copyFile(uri.replace("file://", ""), dest);
    return "file://" + dest; // add file:// for sharing
  };
  const shareOptions = [
    {
      name: "Instagram",
      social: Share.Social.INSTAGRAM,
      icon: "instagram",
      color: "#E1306C",
      package: "com.instagram.android"
    },
    {
      name: "WhatsApp",
      social: Share.Social.WHATSAPP,
      icon: "whatsapp",      // MaterialCommunityIcons name
      color: "#25D366",      // WhatsApp green
      package: "com.whatsapp"
    },
    {
      name: "Facebook",
      social: Share.Social.FACEBOOK,
      icon: "facebook",
      color: "#1877F2",
      package: "com.facebook.katana"
    },
    {
      name: "Twitter / X",
      social: Share.Social.TWITTER,
      icon: "twitter",
      color: "#000",
      package: "com.twitter.android"
    },
  ];


  const shareTo = async (socialApp) => {
    try {
      // Copy file from cache → external
      const finalUri = await moveToExternal(imageUri);
      console.log("finalUri", socialApp)
      await Share.shareSingle({
        url: imageUri,
        social: Share.Social.WHATSAPP,
        type: "image/jpeg",
      });
      onClose();
    } catch (e) {
      console.log("Share Error:", e);
    }
  };

  return (
    <Modal visible={visible} transparent animationType="slide">
      <View style={styles.overlay}>
        <View style={styles.modal}>

          <View style={styles.handle} />

          <Text style={styles.title}>Share your Selfie</Text>

          <View style={styles.optionsRow}>
            {shareOptions.map((opt, index) => (
              <TouchableOpacity
                key={index}
                style={styles.option}
                onPress={() => shareTo(opt.social)}
              >
                <MaterialCommunityIcons
                  name={opt.icon}
                  size={45}
                  color={opt.color}
                />
                <Text style={styles.optionText}>{opt.name}</Text>
              </TouchableOpacity>
            ))}
          </View>

          <TouchableOpacity style={styles.cancelBtn} onPress={onClose}>
            <Text style={styles.cancelText}>Cancel</Text>
          </TouchableOpacity>

        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modal: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
    paddingHorizontal: 20,
    paddingTop: 15,
    paddingBottom: 25,
  },
  handle: {
    width: 45,
    height: 5,
    backgroundColor: "#ccc",
    borderRadius: 3,
    alignSelf: "center",
    marginBottom: 15,
  },
  title: {
    fontSize: 20,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 20,
  },
  optionsRow: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 15,
  },
  option: {
    alignItems: "center",
    width: 90,
  },
  optionText: {
    marginTop: 6,
    fontSize: 15,
    fontWeight: "500",
    textAlign: "center",
  },
  cancelBtn: {
    backgroundColor: "#f2f2f2",
    paddingVertical: 12,
    borderRadius: 10,
  },
  cancelText: {
    color: "red",
    fontSize: 17,
    fontWeight: "600",
    textAlign: "center",
  },
});