crop every photo;

make use of useCallback

src/view/com/composer/PhotoCarouselPicker.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {Image, StyleSheet, TouchableOpacity, ScrollView} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
-import {openPicker, openCamera} from 'react-native-image-crop-picker'
+import {
+  openPicker,
+  openCamera,
+  openCropper,
+} from 'react-native-image-crop-picker'
 
 export const PhotoCarouselPicker = ({
   selectedPhotos,
@@ -13,6 +17,58 @@ export const PhotoCarouselPicker = ({
   setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
   localPhotos: any
 }) => {
+  const handleOpenCamera = useCallback(() => {
+    openCamera({
+      mediaType: 'photo',
+      cropping: true,
+      width: 1000,
+      height: 1000,
+    }).then(item => {
+      setSelectedPhotos([item.path, ...selectedPhotos])
+    })
+  }, [selectedPhotos, setSelectedPhotos])
+
+  const handleSelectPhoto = useCallback(
+    async (uri: string) => {
+      const img = await openCropper({
+        mediaType: 'photo',
+        path: uri,
+        width: 1000,
+        height: 1000,
+      })
+      setSelectedPhotos([img.path, ...selectedPhotos])
+    },
+    [selectedPhotos, setSelectedPhotos],
+  )
+
+  const handleOpenGallery = useCallback(() => {
+    openPicker({
+      multiple: true,
+      maxFiles: 4,
+      mediaType: 'photo',
+    }).then(async items => {
+      const result = []
+
+      for await (const image of items) {
+        const img = await openCropper({
+          mediaType: 'photo',
+          path: image.path,
+          width: 1000,
+          height: 1000,
+        })
+        result.push(img.path)
+      }
+      setSelectedPhotos([
+        // ...items.reduce(
+        //   (accum, cur) => accum.concat(cur.sourceURL!),
+        //   [] as string[],
+        // ),
+        ...result,
+        ...selectedPhotos,
+      ])
+    })
+  }, [selectedPhotos, setSelectedPhotos])
+
   return (
     <ScrollView
       horizontal
@@ -20,11 +76,7 @@ export const PhotoCarouselPicker = ({
       showsHorizontalScrollIndicator={false}>
       <TouchableOpacity
         style={[styles.galleryButton, styles.photo]}
-        onPress={() => {
+        onPress={handleOpenCamera}>
-          openCamera({mediaType: 'photo'}).then(item => {
-            setSelectedPhotos([item.path, ...selectedPhotos])
-          })
-        }}>
         <FontAwesomeIcon
           icon="camera"
           size={24}
@@ -35,27 +87,13 @@ export const PhotoCarouselPicker = ({
         <TouchableOpacity
           key={`local-image-${index}`}
           style={styles.photoButton}
-          onPress={() => {
+          onPress={() => handleSelectPhoto(item.node.image.uri)}>
-            setSelectedPhotos([item.node.image.uri, ...selectedPhotos])
-          }}>
           <Image style={styles.photo} source={{uri: item.node.image.uri}} />
         </TouchableOpacity>
       ))}
       <TouchableOpacity
         style={[styles.galleryButton, styles.photo]}
-        onPress={() => {
+        onPress={handleOpenGallery}>
-          openPicker({multiple: true, maxFiles: 4, mediaType: 'photo'}).then(
-            items => {
-              setSelectedPhotos([
-                ...items.reduce(
-                  (accum, cur) => accum.concat(cur.sourceURL!),
-                  [] as string[],
-                ),
-                ...selectedPhotos,
-              ])
-            },
-          )
-        }}>
         <FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
       </TouchableOpacity>
     </ScrollView>

src/view/com/composer/SelectedPhoto.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
@@ -17,6 +17,15 @@ export const SelectedPhoto = ({
       ? styles.image175
       : styles.image85
 
+  const handleRemovePhoto = useCallback(
+    item => {
+      setSelectedPhotos(
+        selectedPhotos.filter(filterItem => filterItem !== item),
+      )
+    },
+    [selectedPhotos, setSelectedPhotos],
+  )
+
   return selectedPhotos.length !== 0 ? (
     <View style={styles.imageContainer}>
       {selectedPhotos.length !== 0 &&
@@ -25,11 +34,7 @@ export const SelectedPhoto = ({
             key={`selected-image-${index}`}
             style={[styles.image, imageStyle]}>
             <TouchableOpacity
-              onPress={() => {
+              onPress={() => handleRemovePhoto(item)}
-                setSelectedPhotos(
-                  selectedPhotos.filter(filterItem => filterItem !== item),
-                )
-              }}
               style={styles.removePhotoButton}>
               <FontAwesomeIcon
                 icon="xmark"