index.tsx 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import React, { useState } from 'react';
  2. import {
  3. View,
  4. Image,
  5. TouchableOpacity,
  6. Alert,
  7. Text
  8. } from 'react-native';
  9. import * as ImagePicker from 'expo-image-picker';
  10. import { Modal } from '../Modal';
  11. import { Input } from '../Input';
  12. import { styles } from './style';
  13. import AddSVG from '../../../assets/icons/add.svg';
  14. import TrashSVG from '../../../assets/icons/trash.svg';
  15. interface AddPhotoProps {
  16. isModalVisible: boolean;
  17. initialImagePath?: string | null;
  18. initialImageDescription?: string;
  19. closeModal: () => void;
  20. }
  21. const AddPhoto: React.FC<AddPhotoProps> = ({ isModalVisible, initialImagePath, initialImageDescription, closeModal }) => {
  22. const [image, setImage] = useState(initialImagePath);
  23. const [description, setDescription] = useState(initialImageDescription ?? '');
  24. const handleDelete = () => {
  25. Alert.alert('Delete Image', 'Are you sure you want to delete this image?', [
  26. { text: 'Cancel' },
  27. { text: 'Delete', onPress: () => {
  28. setImage(null);
  29. }},
  30. ]);
  31. };
  32. const handleImagePick = async () => {
  33. const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  34. if (status !== 'granted') {
  35. Alert.alert('Permission Denied', 'Sorry, we need media library permissions to make this work!');
  36. return;
  37. }
  38. let result = await ImagePicker.launchImageLibraryAsync({
  39. mediaTypes: ImagePicker.MediaTypeOptions.Images,
  40. quality: 1,
  41. });
  42. if (!result.canceled) {
  43. setImage(result.assets[0].uri);
  44. }
  45. };
  46. return (
  47. <Modal
  48. visibleInPercent={'90%'}
  49. visible={isModalVisible}
  50. onRequestClose={closeModal}
  51. headerTitle='Add Photo'
  52. >
  53. <View style={[styles.container, styles.centerPosition]}>
  54. <View style={[styles.imageContainer, styles.centerPosition]}>
  55. {image ? (
  56. <>
  57. <TouchableOpacity onPress={handleDelete} style={styles.deleteButton}>
  58. <View style={[styles.centerPosition, styles.deleteBtn]}>
  59. <TrashSVG />
  60. </View>
  61. </TouchableOpacity>
  62. <Image source={{ uri: image }} style={styles.image} />
  63. </>
  64. ) : (
  65. <TouchableOpacity onPress={handleImagePick} style={styles.centerPosition}>
  66. <View style={[styles.centerPosition, styles.addBtn]}>
  67. <AddSVG width={48} height={48} />
  68. </View>
  69. <Text style={styles.addButtonText}>Upload Photo</Text>
  70. </TouchableOpacity>
  71. )}
  72. </View>
  73. <View style={styles.description}>
  74. <Input
  75. header='Description'
  76. placeholder="Add photo description here"
  77. onChange={setDescription}
  78. />
  79. </View>
  80. </View>
  81. </Modal>
  82. );
  83. };
  84. export default AddPhoto;