mostly implement

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -35,9 +35,7 @@ export function OpenCameraBtn({disabled, onAdd}: Props) {
       }
 
       const img = await openCamera({
-        width: POST_IMG_MAX.width,
-        height: POST_IMG_MAX.height,
-        freeStyleCropEnabled: true,
+        aspect: [POST_IMG_MAX.width, POST_IMG_MAX.height],
       })
 
       // If we don't have permissions it's fine, we just wont save it. The post itself will still have access to

src/view/com/util/UserAvatar.tsx

@@ -7,7 +7,6 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import Svg, {Circle, Path, Rect} from 'react-native-svg'
 import {ModerationUI} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -23,7 +22,7 @@ import {
 import {makeProfileLink} from '#/lib/routes/links'
 import {colors} from '#/lib/styles'
 import {logger} from '#/logger'
-import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
 import {precacheProfile} from '#/state/queries/profile'
 import {HighPriorityImage} from '#/view/com/util/images/Image'
 import {tokens, useTheme} from '#/alf'
@@ -39,7 +38,12 @@ import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as Menu from '#/components/Menu'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import * as bsky from '#/types/bsky'
-import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
+import {
+  openCamera,
+  openCropper,
+  openPicker,
+  RNImage,
+} from '../../../lib/media/picker'
 
 export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
 
@@ -312,9 +316,7 @@ let EditableUserAvatar = ({
 
     onSelectNewAvatar(
       await openCamera({
-        width: 1000,
-        height: 1000,
-        cropperCircleOverlay: true,
+        aspect: [1, 1],
       }),
     )
   }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
@@ -335,17 +337,17 @@ let EditableUserAvatar = ({
     }
 
     try {
-      const croppedImage = await openCropper({
-        mediaType: 'photo',
-        cropperCircleOverlay: true,
-        height: 1000,
-        width: 1000,
-        path: item.path,
-        webAspectRatio: 1,
-        webCircularCrop: true,
-      })
-
-      onSelectNewAvatar(croppedImage)
+      setTimeout(
+        async () => {
+          const croppedImage = await openCropper({
+            imageUri: item.path,
+            shape: 'circle',
+            aspectRatio: 1,
+          })
+          onSelectNewAvatar(croppedImage)
+        },
+        isIOS ? 500 : 0,
+      )
     } catch (e: any) {
       // Don't log errors for cancelling selection to sentry on ios or android
       if (!String(e).toLowerCase().includes('cancel')) {

src/view/com/util/UserBanner.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import {Image} from 'expo-image'
 import {ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -25,7 +24,12 @@ import {
 import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import * as Menu from '#/components/Menu'
-import {openCamera, openCropper, openPicker} from '../../../lib/media/picker'
+import {
+  openCamera,
+  openCropper,
+  openPicker,
+  RNImage,
+} from '../../../lib/media/picker'
 
 export function UserBanner({
   type,
@@ -52,8 +56,7 @@ export function UserBanner({
     }
     onSelectNewBanner?.(
       await openCamera({
-        width: 3000,
-        height: 1000,
+        aspect: [3, 1],
       }),
     )
   }, [onSelectNewBanner, requestCameraAccessIfNeeded])
@@ -68,15 +71,14 @@ export function UserBanner({
     }
 
     try {
-      onSelectNewBanner?.(
-        await openCropper({
-          mediaType: 'photo',
-          path: items[0].path,
-          width: 3000,
-          height: 1000,
-          webAspectRatio: 3,
-        }),
-      )
+      setTimeout(async () => {
+        onSelectNewBanner?.(
+          await openCropper({
+            imageUri: items[0].path,
+            aspectRatio: 3 / 1,
+          }),
+        )
+      }, 750)
     } catch (e: any) {
       if (!String(e).includes('Canceled')) {
         logger.error('Failed to crop banner', {error: e})