cally/components/pages/calendar/UploadImageDialog.tsx

import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Button,
  ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";

interface IUploadDialogProps {
  show: boolean;
  setShow: (value: boolean) => void;
}

const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [imageTitle, setImageTitle] = useState<string | null>(null);

  const handleImagePick = async () => {
    const permissionResult =
      await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    // Check if the user canceled the image picker
    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
      setImageTitle(result.assets[0].fileName || "Untitled");
    }
  };

  return (
    <Dialog
      visible={uploadDialogProps.show}
      onDismiss={() => uploadDialogProps.setShow(false)}
      panDirection={PanningProvider.Directions.DOWN}
      center
    >
      <Card
        style={{
          paddingHorizontal: 40,
          paddingTop: 20,
          paddingBottom: 10,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <View centerH>
          <Text text60 marginB-20>
            Upload an Image
          </Text>
          {!selectedImage && (
            <TouchableOpacity onPress={handleImagePick}>
              <View
                style={styles.uploadImgBox}
                centerV
                centerH
                gap-8
                marginB-20
              >
                <MaterialIcons
                  name="add-photo-alternate"
                  size={30}
                  color="#fd1775"
                />
                <Text color="#fd1775" text70>
                  Click here to upload an image
                </Text>
              </View>
            </TouchableOpacity>
          )}

          {selectedImage && (
            <>
              <View style={styles.imageContainer} row gap-15>
                <Image
                  source={{ uri: selectedImage }}
                  style={styles.selectedImage}
                />
                <View style={styles.imageInfo}>
                  <Text style={styles.imageTitle}>{imageTitle}</Text>
                </View>

                <TouchableOpacity
                  onPress={() => {
                    setSelectedImage(null);
                    setImageTitle("");
                  }}
                >
                  <Feather
                    name="trash"
                    size={22}
                    color="#919191"
                  />
                </TouchableOpacity>
              </View>
              <Button
                style={{
                  marginBottom: 10,
                  marginTop: 20,
                  backgroundColor: "#ea156c",
                  justifyContent: "center",
                  paddingVertical: 13,
                  alignItems: "center",
                }}
                label="Upload Image"
                onPress={() => {}}
                iconSource={() => (
                  <Feather
                    name="camera"
                    size={21}
                    style={{ marginRight: 7 }}
                    color="white"
                  />
                )}
              />
            </>
          )}

          <TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
            <Text text80 color="#999999">
              Go back
            </Text>
          </TouchableOpacity>
        </View>
      </Card>
    </Dialog>
  );
};

export default UploadImageDialog;

const styles = StyleSheet.create({
  uploadImgBox: {
    backgroundColor: "#ffe8f2",
    width: "100%",
    aspectRatio: 1.8,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: "#fd1775",
    borderStyle: "dashed",
  },
  selectedImage: {
    width: 60,
    aspectRatio: 1,
    borderRadius: 10,
  },
  imageContainer: {
    alignItems: "center",
    width: "80%",
    borderWidth: 1,
    borderColor: "#d9d9d9",
    padding: 10,
    borderRadius: 13,
  },
  imageInfo: {
    marginLeft: 10,
  },
  imageTitle: {
    fontSize: 16,
    color: "#333",
  },
});