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>

4 files changed, 18 insertions, 30 deletions

diff --git a/src/state/gallery.ts b/src/state/gallery.ts
index f03ed2afe..73252dde7 100644
--- a/src/state/gallery.ts
+++ b/src/state/gallery.ts
@@ -16,7 +16,7 @@ import {POST_IMG_MAX} from '#/lib/constants'
 import {getImageDim} from '#/lib/media/manip'
 import {openCropper} from '#/lib/media/picker'
 import {getDataUriSize} from '#/lib/media/util'
-import {isIOS, isNative} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
 
 export type ImageTransformation = {
   crop?: ActionCrop['crop']
@@ -122,25 +122,13 @@ export async function cropImage(img: ComposerImage): Promise<ComposerImage> {
     return img
   }
 
-  // NOTE
-  // on ios, react-native-image-crop-picker gives really bad quality
-  // without specifying width and height. on android, however, the
-  // crop stretches incorrectly if you do specify it. these are
-  // both separate bugs in the library. we deal with that by
-  // providing width & height for ios only
-  // -prf
-
   const source = img.source
-  const [w, h] = containImageRes(source.width, source.height, POST_IMG_MAX)
 
   // @todo: we're always passing the original image here, does image-cropper
   // allows for setting initial crop dimensions? -mary
   try {
     const cropped = await openCropper({
-      mediaType: 'photo',
-      path: source.path,
-      freeStyleCropEnabled: true,
-      ...(isIOS ? {width: w, height: h} : {}),
+      imageUri: source.path,
     })
 
     return {
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index f79f6213f..3e738898a 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import {type Image as RNImage} from 'react-native-image-crop-picker'
 import {type AppBskyActorDefs, type AppBskyGraphDefs} from '@atproto/api'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {type PickerImage} from '#/lib/media/picker.shared'
 
 export interface EditProfileModal {
   name: 'edit-profile'
@@ -32,7 +32,7 @@ export interface CropImageModal {
   dimensions?: {width: number; height: number}
   aspect?: number
   circular?: boolean
-  onSelect: (img?: RNImage) => void
+  onSelect: (img?: PickerImage) => void
 }
 
 export interface DeleteAccountModal {
diff --git a/src/state/queries/list.ts b/src/state/queries/list.ts
index 260a0bf2c..38e8cd62d 100644
--- a/src/state/queries/list.ts
+++ b/src/state/queries/list.ts
@@ -1,20 +1,20 @@
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import {
-  $Typed,
-  AppBskyGraphDefs,
-  AppBskyGraphGetList,
-  AppBskyGraphList,
+  type $Typed,
+  type AppBskyGraphDefs,
+  type AppBskyGraphGetList,
+  type AppBskyGraphList,
   AtUri,
-  BskyAgent,
-  ComAtprotoRepoApplyWrites,
-  Facet,
-  Un$Typed,
+  type BskyAgent,
+  type ComAtprotoRepoApplyWrites,
+  type Facet,
+  type Un$Typed,
 } from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import chunk from 'lodash.chunk'
 
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {STALE} from '#/state/queries'
 import {useAgent, useSession} from '../session'
 import {invalidate as invalidateMyLists} from './my-lists'
@@ -47,7 +47,7 @@ export interface ListCreateMutateParams {
   name: string
   description: string
   descriptionFacets: Facet[] | undefined
-  avatar: RNImage | null | undefined
+  avatar: PickerImage | null | undefined
 }
 export function useListCreateMutation() {
   const {currentAccount} = useSession()
@@ -115,7 +115,7 @@ export interface ListMetadataMutateParams {
   name: string
   description: string
   descriptionFacets: Facet[] | undefined
-  avatar: RNImage | null | undefined
+  avatar: PickerImage | null | undefined
 }
 export function useListMetadataMutation() {
   const {currentAccount} = useSession()
diff --git a/src/state/queries/profile.ts b/src/state/queries/profile.ts
index 609a62e25..9f40ab7f6 100644
--- a/src/state/queries/profile.ts
+++ b/src/state/queries/profile.ts
@@ -1,5 +1,4 @@
 import {useCallback} from 'react'
-import {type Image as RNImage} from 'react-native-image-crop-picker'
 import {
   type AppBskyActorDefs,
   type AppBskyActorGetProfile,
@@ -21,6 +20,7 @@ import {
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
 import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {logEvent, type LogEvents, toClout} from '#/lib/statsig/statsig'
 import {type Shadow} from '#/state/cache/types'
 import {STALE} from '#/state/queries'
@@ -131,8 +131,8 @@ interface ProfileUpdateParams {
     | ((
         existing: Un$Typed<AppBskyActorProfile.Record>,
       ) => Un$Typed<AppBskyActorProfile.Record>)
-  newUserAvatar?: RNImage | undefined | null
-  newUserBanner?: RNImage | undefined | null
+  newUserAvatar?: PickerImage | undefined | null
+  newUserBanner?: PickerImage | undefined | null
   checkCommitted?: (res: AppBskyActorGetProfile.Response) => boolean
 }
 export function useProfileUpdateMutation() {