swap out cropper library (#8327)

* mostly implement

* type errors

* unused import

* rm comment

* stop accidentally deleting the image while compressing

* upgrade

* type fixes

* upgrade, remove timeout

* bump

* rm mock

* bump

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/view/com/util/UserAvatar.tsx

@@ -2,14 +2,13 @@ import React, {memo, useMemo} from 'react'
 import {
   Image,
   Pressable,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type 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 {type ModerationUI} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -38,8 +37,13 @@ import {Link} from '#/components/Link'
 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 type * as bsky from '#/types/bsky'
+import {
+  openCamera,
+  openCropper,
+  openPicker,
+  type 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])
@@ -336,15 +338,10 @@ let EditableUserAvatar = ({
 
     try {
       const croppedImage = await openCropper({
-        mediaType: 'photo',
-        cropperCircleOverlay: true,
-        height: 1000,
-        width: 1000,
-        path: item.path,
-        webAspectRatio: 1,
-        webCircularCrop: true,
+        imageUri: item.path,
+        shape: 'circle',
+        aspectRatio: 1,
       })
-
       onSelectNewAvatar(croppedImage)
     } catch (e: any) {
       // Don't log errors for cancelling selection to sentry on ios or android

src/view/com/util/UserBanner.tsx

@@ -1,8 +1,7 @@
 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 {type ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -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,
+  type 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])
@@ -70,11 +73,8 @@ export function UserBanner({
     try {
       onSelectNewBanner?.(
         await openCropper({
-          mediaType: 'photo',
-          path: items[0].path,
-          width: 3000,
-          height: 1000,
-          webAspectRatio: 3,
+          imageUri: items[0].path,
+          aspectRatio: 3 / 1,
         }),
       )
     } catch (e: any) {