From 4f5736327640ee367231e0e4934513c811b7f0ab Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Sun, 4 May 2025 23:25:46 -0700
Subject: [PATCH 1/9] mostly implement

---
 package.json                                  |  2 +-
 ...eact-native-image-crop-picker+0.42.0.patch | 48 -------------------
 src/lib/media/picker.e2e.tsx                  |  8 ++--
 src/lib/media/picker.shared.ts                |  8 ++++
 src/lib/media/picker.tsx                      | 48 +++++++++----------
 src/lib/media/picker.web.tsx                  |  6 +--
 src/screens/Onboarding/StepProfile/index.tsx  |  8 ++--
 src/state/gallery.ts                          | 14 +-----
 .../com/composer/photos/OpenCameraBtn.tsx     |  4 +-
 src/view/com/util/UserAvatar.tsx              | 36 +++++++-------
 src/view/com/util/UserBanner.tsx              | 28 ++++++-----
 yarn.lock                                     | 10 ++--
 12 files changed, 82 insertions(+), 138 deletions(-)
 delete mode 100644 patches/react-native-image-crop-picker+0.42.0.patch

diff --git a/package.json b/package.json
index 0d96e688cb..6b2c3a0505 100644
--- a/package.json
+++ b/package.json
@@ -142,6 +142,7 @@
     "expo-font": "~13.3.0",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.1.6",
+    "expo-image-crop-tool": "^0.1.3",
     "expo-image-manipulator": "~13.1.5",
     "expo-image-picker": "~16.1.4",
     "expo-linear-gradient": "~14.1.4",
@@ -188,7 +189,6 @@
     "react-native-edge-to-edge": "^1.6.0",
     "react-native-gesture-handler": "2.25.0",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-image-crop-picker": "^0.42.0",
     "react-native-ios-context-menu": "^1.15.3",
     "react-native-keyboard-controller": "^1.17.1",
     "react-native-mmkv": "^2.12.2",
diff --git a/patches/react-native-image-crop-picker+0.42.0.patch b/patches/react-native-image-crop-picker+0.42.0.patch
deleted file mode 100644
index c6124ad1e1..0000000000
--- a/patches/react-native-image-crop-picker+0.42.0.patch
+++ /dev/null
@@ -1,48 +0,0 @@
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml b/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-index a08629b..fab6299 100644
---- a/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-@@ -24,7 +24,7 @@
- 
-         <activity
-             android:name="com.yalantis.ucrop.UCropActivity"
--            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
-+            android:theme="@style/Theme.UCropNoEdgeToEdge" />
- 
- 
-         <!-- Prompt Google Play services to install the backported photo picker module -->
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml b/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml
-new file mode 100644
-index 0000000..5301f74
---- /dev/null
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml
-@@ -0,0 +1,5 @@
-+<resources>
-+    <style name="Theme.UCropNoEdgeToEdge" parent="Theme.AppCompat.Light.NoActionBar">
-+        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
-+    </style>
-+</resources>
-\ No newline at end of file
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml b/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml
-new file mode 100644
-index 0000000..55569aa
---- /dev/null
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml
-@@ -0,0 +1,3 @@
-+<resources>
-+    <style name="Theme.UCropNoEdgeToEdge" parent="Theme.AppCompat.Light.NoActionBar"/>
-+</resources>
-\ No newline at end of file
-diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
-index 9f20973..c414a7a 100644
---- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
-+++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
-@@ -126,7 +126,7 @@ - (void) setConfiguration:(NSDictionary *)options
- 
- - (UIViewController*) getRootVC {
-     UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
--    while (root.presentedViewController != nil) {
-+    while (root.presentedViewController != nil && !root.presentedViewController.isBeingDismissed) {
-         root = root.presentedViewController;
-     }
-     
diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx
index fc6fcde45e..6542a953d4 100644
--- a/src/lib/media/picker.e2e.tsx
+++ b/src/lib/media/picker.e2e.tsx
@@ -1,7 +1,3 @@
-import {
-  Image as RNImage,
-  openCropper as openCropperFn,
-} from 'react-native-image-crop-picker'
 import {
   documentDirectory,
   getInfoAsync,
@@ -10,6 +6,8 @@ import {
 
 import {compressIfNeeded} from './manip'
 import {CropperOptions} from './types'
+import {RNImage} from './picker.shared'
+import ExpoImageCropTool from 'expo-image-crop-tool'
 
 async function getFile() {
   const imagesDir = documentDirectory!
@@ -46,7 +44,7 @@ export async function openCamera(): Promise<RNImage> {
 }
 
 export async function openCropper(opts: CropperOptions) {
-  const item = await openCropperFn({
+  const item = await ExpoImageCropTool.openCropperAsync({
     ...opts,
     forceJpg: true, // ios only
   })
diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts
index a45bf5c0f1..fad86fda9d 100644
--- a/src/lib/media/picker.shared.ts
+++ b/src/lib/media/picker.shared.ts
@@ -9,6 +9,14 @@ import {t} from '@lingui/macro'
 import * as Toast from '#/view/com/util/Toast'
 import {getDataUriSize} from './util'
 
+export type RNImage = {
+  mime: string
+  height: number
+  width: number
+  path: string
+  size: number
+}
+
 export async function openPicker(opts?: ImagePickerOptions) {
   const response = await launchImageLibraryAsync({
     exif: false,
diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx
index 37e01e67f9..f10e43d629 100644
--- a/src/lib/media/picker.tsx
+++ b/src/lib/media/picker.tsx
@@ -1,36 +1,34 @@
-import {
-  Image as RNImage,
-  openCamera as openCameraFn,
-  openCropper as openCropperFn,
-} from 'react-native-image-crop-picker'
+import ExpoImageCropTool, {OpenCropperOptions} from 'expo-image-crop-tool'
+import {ImagePickerOptions, launchCameraAsync} from 'expo-image-picker'
 
-import {CameraOpts, CropperOptions} from './types'
-export {openPicker} from './picker.shared'
+export {openPicker, type RNImage} from './picker.shared'
 
-export async function openCamera(opts: CameraOpts): Promise<RNImage> {
-  const item = await openCameraFn({
-    width: opts.width,
-    height: opts.height,
-    freeStyleCropEnabled: opts.freeStyleCropEnabled,
-    cropperCircleOverlay: opts.cropperCircleOverlay,
-    cropping: false,
-    forceJpg: true, // ios only
-    compressImageQuality: 0.8,
-  })
+export async function openCamera(customOpts: ImagePickerOptions) {
+  const opts: ImagePickerOptions = {
+    mediaTypes: 'images',
+    ...customOpts,
+  }
+  const res = await launchCameraAsync(opts)
+
+  if (!res || !res.assets) {
+    throw new Error('Camera was closed before taking a photo')
+  }
+
+  const asset = res?.assets[0]
 
   return {
-    path: item.path,
-    mime: item.mime,
-    size: item.size,
-    width: item.width,
-    height: item.height,
+    path: asset.uri,
+    mime: asset.mimeType ?? 'image/jpeg',
+    size: asset.fileSize ?? 0,
+    width: asset.width,
+    height: asset.height,
   }
 }
 
-export async function openCropper(opts: CropperOptions) {
-  const item = await openCropperFn({
+export async function openCropper(opts: OpenCropperOptions) {
+  const item = await ExpoImageCropTool.openCropperAsync({
     ...opts,
-    forceJpg: true, // ios only
+    format: 'jpeg',
   })
 
   return {
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index a53ffc9614..7db5f51f1f 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -1,10 +1,10 @@
 /// <reference lib="dom" />
 
-import {Image as RNImage} from 'react-native-image-crop-picker'
-
 import {CameraOpts, CropperOptions} from './types'
-export {openPicker} from './picker.shared'
 import {unstable__openModal} from '#/state/modals'
+import {RNImage} from './picker.shared'
+
+export {openPicker, type RNImage} from './picker.shared'
 
 export async function openCamera(_opts: CameraOpts): Promise<RNImage> {
   // const mediaType = opts.mediaType || 'photo' TODO
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 73472ec332..0e738f1456 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -182,11 +182,9 @@ export function StepProfile() {
 
     if (!isWeb) {
       image = await openCropper({
-        mediaType: 'photo',
-        cropperCircleOverlay: true,
-        height: 1000,
-        width: 1000,
-        path: image.path,
+        imageUri: image.path,
+        shape: 'circle',
+        aspectRatio: 1 / 1,
       })
     }
     image = await compressIfNeeded(image, 1000000)
diff --git a/src/state/gallery.ts b/src/state/gallery.ts
index f03ed2afe8..6c79ec9410 100644
--- a/src/state/gallery.ts
+++ b/src/state/gallery.ts
@@ -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/view/com/composer/photos/OpenCameraBtn.tsx b/src/view/com/composer/photos/OpenCameraBtn.tsx
index fb3ab5c8fc..1c9440eb16 100644
--- a/src/view/com/composer/photos/OpenCameraBtn.tsx
+++ b/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
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 20fc1c65da..06fe0f50d0 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/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')) {
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index e0ace5e481..346f40ab5f 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/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})
diff --git a/yarn.lock b/yarn.lock
index 747087e83a..c79e0170b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11247,6 +11247,11 @@ expo-haptics@~14.1.4:
   resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-14.1.4.tgz#442f48b1bdf83484d4fcadc653445aaae6049b70"
   integrity sha512-QZdE3NMX74rTuIl82I+n12XGwpDWKb8zfs5EpwsnGi/D/n7O2Jd4tO5ivH+muEG/OCJOMq5aeaVDqqaQOhTkcA==
 
+expo-image-crop-tool@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.3.tgz#057baf3200745f706e8ecc6cece835c4cd630013"
+  integrity sha512-C3hG9eYpbHRACeLKqmFK52s3aBtSQm6+vbhaabdmp202zILsGT95OWIBcjqHOd2fmaK0qq0+Yj3dz+1mSuQg+A==
+
 expo-image-loader@~5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/expo-image-loader/-/expo-image-loader-5.1.0.tgz#f7d65f9b9a9714eaaf5d50a406cb34cb25262153"
@@ -16801,11 +16806,6 @@ react-native-get-random-values@~1.11.0:
   dependencies:
     fast-base64-decode "^1.0.0"
 
-react-native-image-crop-picker@^0.42.0:
-  version "0.42.0"
-  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.42.0.tgz#0672c080feb8ffefd65ba00a4e64bc8a1066136e"
-  integrity sha512-EOEkekPJ7g+CNf92HrWAGM4kcDJyVY02gQJUVH7MSNUOK11SHnurXVM0TnwIt410Y4T+lBkq3rfJEA1qDaDDwA==
-
 react-native-ios-context-menu@^1.15.3:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/react-native-ios-context-menu/-/react-native-ios-context-menu-1.15.3.tgz#c02e6a7af2df8c08d0b3e1c8f3395484b3c9c760"

From 664c079250f6d173f93212dae6c7c9c366706fbe Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 00:17:04 -0700
Subject: [PATCH 2/9] type errors

---
 src/lib/media/manip.ts         | 13 ++++++++-----
 src/lib/media/picker.e2e.tsx   | 10 +++++-----
 src/lib/media/picker.shared.ts |  4 ++--
 src/lib/media/picker.tsx       |  6 +++---
 src/lib/media/picker.web.tsx   | 12 ++++++------
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts
index f6ef8347de..98ffe8a024 100644
--- a/src/lib/media/manip.ts
+++ b/src/lib/media/manip.ts
@@ -1,5 +1,4 @@
 import {Image as RNImage, Share as RNShare} from 'react-native'
-import {Image} from 'react-native-image-crop-picker'
 import uuid from 'react-native-uuid'
 import {
   cacheDirectory,
@@ -20,12 +19,13 @@ import RNFetchBlob from 'rn-fetch-blob'
 import {POST_IMG_MAX} from '#/lib/constants'
 import {logger} from '#/logger'
 import {isAndroid, isIOS} from '#/platform/detection'
-import {Dimensions} from './types'
+import {type PickerImage} from './picker.shared'
+import {type Dimensions} from './types'
 
 export async function compressIfNeeded(
-  img: Image,
+  img: PickerImage,
   maxSize: number = 1000000,
-): Promise<Image> {
+): Promise<PickerImage> {
   const origUri = `file://${img.path}`
   if (img.size < maxSize) {
     return img
@@ -166,7 +166,10 @@ interface DoResizeOpts {
   maxSize: number
 }
 
-async function doResize(localUri: string, opts: DoResizeOpts): Promise<Image> {
+async function doResize(
+  localUri: string,
+  opts: DoResizeOpts,
+): Promise<PickerImage> {
   // We need to get the dimensions of the image before we resize it. Previously, the library we used allowed us to enter
   // a "max size", and it would do the "best possible size" calculation for us.
   // Now instead, we have to supply the final dimensions to the manipulation function instead.
diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx
index 6542a953d4..6c1e0a3bb5 100644
--- a/src/lib/media/picker.e2e.tsx
+++ b/src/lib/media/picker.e2e.tsx
@@ -3,11 +3,11 @@ import {
   getInfoAsync,
   readDirectoryAsync,
 } from 'expo-file-system'
+import ExpoImageCropTool from 'expo-image-crop-tool'
 
 import {compressIfNeeded} from './manip'
-import {CropperOptions} from './types'
-import {RNImage} from './picker.shared'
-import ExpoImageCropTool from 'expo-image-crop-tool'
+import {type PickerImage} from './picker.shared'
+import {type CropperOptions} from './types'
 
 async function getFile() {
   const imagesDir = documentDirectory!
@@ -35,11 +35,11 @@ async function getFile() {
   })
 }
 
-export async function openPicker(): Promise<RNImage[]> {
+export async function openPicker(): Promise<PickerImage[]> {
   return [await getFile()]
 }
 
-export async function openCamera(): Promise<RNImage> {
+export async function openCamera(): Promise<PickerImage> {
   return await getFile()
 }
 
diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts
index fad86fda9d..62d74d401a 100644
--- a/src/lib/media/picker.shared.ts
+++ b/src/lib/media/picker.shared.ts
@@ -1,5 +1,5 @@
 import {
-  ImagePickerOptions,
+  type ImagePickerOptions,
   launchImageLibraryAsync,
   MediaTypeOptions,
 } from 'expo-image-picker'
@@ -9,7 +9,7 @@ import {t} from '@lingui/macro'
 import * as Toast from '#/view/com/util/Toast'
 import {getDataUriSize} from './util'
 
-export type RNImage = {
+export type PickerImage = {
   mime: string
   height: number
   width: number
diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx
index f10e43d629..6095730d51 100644
--- a/src/lib/media/picker.tsx
+++ b/src/lib/media/picker.tsx
@@ -1,7 +1,7 @@
-import ExpoImageCropTool, {OpenCropperOptions} from 'expo-image-crop-tool'
-import {ImagePickerOptions, launchCameraAsync} from 'expo-image-picker'
+import ExpoImageCropTool, {type OpenCropperOptions} from 'expo-image-crop-tool'
+import {type ImagePickerOptions, launchCameraAsync} from 'expo-image-picker'
 
-export {openPicker, type RNImage} from './picker.shared'
+export {openPicker, type PickerImage as RNImage} from './picker.shared'
 
 export async function openCamera(customOpts: ImagePickerOptions) {
   const opts: ImagePickerOptions = {
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 7db5f51f1f..2b4a38e10e 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -1,17 +1,17 @@
 /// <reference lib="dom" />
 
-import {CameraOpts, CropperOptions} from './types'
 import {unstable__openModal} from '#/state/modals'
-import {RNImage} from './picker.shared'
+import {type PickerImage} from './picker.shared'
+import {type CameraOpts, type CropperOptions} from './types'
 
-export {openPicker, type RNImage} from './picker.shared'
+export {openPicker, type PickerImage as RNImage} from './picker.shared'
 
-export async function openCamera(_opts: CameraOpts): Promise<RNImage> {
+export async function openCamera(_opts: CameraOpts): Promise<PickerImage> {
   // const mediaType = opts.mediaType || 'photo' TODO
   throw new Error('TODO')
 }
 
-export async function openCropper(opts: CropperOptions): Promise<RNImage> {
+export async function openCropper(opts: CropperOptions): Promise<PickerImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
     unstable__openModal({
@@ -23,7 +23,7 @@ export async function openCropper(opts: CropperOptions): Promise<RNImage> {
           : undefined,
       aspect: opts.webAspectRatio,
       circular: opts.webCircularCrop,
-      onSelect: (img?: RNImage) => {
+      onSelect: (img?: PickerImage) => {
         if (img) {
           resolve(img)
         } else {

From e9519434bf8149be1f11636d67da91ce5098f510 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 00:24:57 -0700
Subject: [PATCH 3/9] unused import

---
 src/state/gallery.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/state/gallery.ts b/src/state/gallery.ts
index 6c79ec9410..73252dde74 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']

From 598d66bea13ec45749d9068f6f39f25989774b20 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 5 May 2025 15:12:09 +0300
Subject: [PATCH 4/9] rm comment

---
 src/lib/media/picker.shared.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts
index 62d74d401a..21e6808324 100644
--- a/src/lib/media/picker.shared.ts
+++ b/src/lib/media/picker.shared.ts
@@ -3,7 +3,6 @@ import {
   launchImageLibraryAsync,
   MediaTypeOptions,
 } from 'expo-image-picker'
-// TODO: replace global i18n instance with one returned from useLingui -sfn
 import {t} from '@lingui/macro'
 
 import * as Toast from '#/view/com/util/Toast'

From ba570da22e928fe77199b3ba009694a282feeffa Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 5 May 2025 15:29:45 +0300
Subject: [PATCH 5/9] stop accidentally deleting the image while compressing

---
 src/lib/media/manip.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts
index 98ffe8a024..ff5b71acec 100644
--- a/src/lib/media/manip.ts
+++ b/src/lib/media/manip.ts
@@ -26,11 +26,10 @@ export async function compressIfNeeded(
   img: PickerImage,
   maxSize: number = 1000000,
 ): Promise<PickerImage> {
-  const origUri = `file://${img.path}`
   if (img.size < maxSize) {
     return img
   }
-  const resizedImage = await doResize(origUri, {
+  const resizedImage = await doResize(normalizePath(img.path), {
     width: img.width,
     height: img.height,
     mode: 'stretch',
@@ -184,6 +183,7 @@ async function doResize(
   let minQualityPercentage = 0
   let maxQualityPercentage = 101 // exclusive
   let newDataUri
+  const intermediateUris = []
 
   while (maxQualityPercentage - minQualityPercentage > 1) {
     const qualityPercentage = Math.round(
@@ -198,6 +198,8 @@ async function doResize(
       },
     )
 
+    intermediateUris.push(resizeRes.uri)
+
     const fileInfo = await getInfoAsync(resizeRes.uri)
     if (!fileInfo.exists) {
       throw new Error(
@@ -217,8 +219,12 @@ async function doResize(
     } else {
       maxQualityPercentage = qualityPercentage
     }
+  }
 
-    safeDeleteAsync(resizeRes.uri)
+  for (const intermediateUri of intermediateUris) {
+    if (newDataUri?.path !== normalizePath(intermediateUri)) {
+      safeDeleteAsync(intermediateUri)
+    }
   }
 
   if (newDataUri) {

From d36837dcf0f7118d17878f4dd94f0e32ea8b0ab3 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 08:35:20 -0700
Subject: [PATCH 6/9] upgrade

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 6b2c3a0505..240a90bd90 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
     "expo-font": "~13.3.0",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.1.6",
-    "expo-image-crop-tool": "^0.1.3",
+    "expo-image-crop-tool": "^0.1.4",
     "expo-image-manipulator": "~13.1.5",
     "expo-image-picker": "~16.1.4",
     "expo-linear-gradient": "~14.1.4",
diff --git a/yarn.lock b/yarn.lock
index c79e0170b7..a4aca488d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11247,10 +11247,10 @@ expo-haptics@~14.1.4:
   resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-14.1.4.tgz#442f48b1bdf83484d4fcadc653445aaae6049b70"
   integrity sha512-QZdE3NMX74rTuIl82I+n12XGwpDWKb8zfs5EpwsnGi/D/n7O2Jd4tO5ivH+muEG/OCJOMq5aeaVDqqaQOhTkcA==
 
-expo-image-crop-tool@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.3.tgz#057baf3200745f706e8ecc6cece835c4cd630013"
-  integrity sha512-C3hG9eYpbHRACeLKqmFK52s3aBtSQm6+vbhaabdmp202zILsGT95OWIBcjqHOd2fmaK0qq0+Yj3dz+1mSuQg+A==
+expo-image-crop-tool@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.4.tgz#bced84f0b1184071cd46a72d32271ab35399b9ec"
+  integrity sha512-ow24RdFlJ0zQx1FLLXJuDQtU6gsJUtFCwcwKqdQGH3N7x7B1h6czmXstB5eIiYbqWwTIIChiPkKYC16FltW1Ug==
 
 expo-image-loader@~5.1.0:
   version "5.1.0"

From 29863ca89d6e72cfe782f8d6c9c92c8724fcf51d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 08:54:08 -0700
Subject: [PATCH 7/9] type fixes

---
 src/lib/media/manip.web.ts                    | 14 +++++++-----
 src/lib/media/picker.e2e.tsx                  |  7 +++---
 src/lib/media/picker.web.tsx                  | 18 +++++++--------
 src/lib/media/types.ts                        |  7 ------
 .../Profile/Header/EditProfileDialog.tsx      | 10 ++++-----
 src/state/modals/index.tsx                    |  4 ++--
 src/state/queries/list.ts                     | 22 +++++++++----------
 src/state/queries/profile.ts                  |  6 ++---
 src/view/com/modals/CreateOrEditList.tsx      |  6 ++---
 src/view/com/modals/CropImage.web.tsx         |  6 ++---
 src/view/com/modals/EditProfile.tsx           | 10 ++++-----
 src/view/com/util/UserAvatar.tsx              | 12 +++++-----
 12 files changed, 58 insertions(+), 64 deletions(-)

diff --git a/src/lib/media/manip.web.ts b/src/lib/media/manip.web.ts
index ffef7314d7..ffcf0c5335 100644
--- a/src/lib/media/manip.web.ts
+++ b/src/lib/media/manip.web.ts
@@ -1,12 +1,11 @@
-import {Image as RNImage} from 'react-native-image-crop-picker'
-
-import {Dimensions} from './types'
+import {type PickerImage} from './picker.shared'
+import {type Dimensions} from './types'
 import {blobToDataUri, getDataUriSize} from './util'
 
 export async function compressIfNeeded(
-  img: RNImage,
+  img: PickerImage,
   maxSize: number,
-): Promise<RNImage> {
+): Promise<PickerImage> {
   if (img.size < maxSize) {
     return img
   }
@@ -69,7 +68,10 @@ interface DoResizeOpts {
   maxSize: number
 }
 
-async function doResize(dataUri: string, opts: DoResizeOpts): Promise<RNImage> {
+async function doResize(
+  dataUri: string,
+  opts: DoResizeOpts,
+): Promise<PickerImage> {
   let newDataUri
 
   let minQualityPercentage = 0
diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx
index 6c1e0a3bb5..a2a9357ec2 100644
--- a/src/lib/media/picker.e2e.tsx
+++ b/src/lib/media/picker.e2e.tsx
@@ -3,11 +3,10 @@ import {
   getInfoAsync,
   readDirectoryAsync,
 } from 'expo-file-system'
-import ExpoImageCropTool from 'expo-image-crop-tool'
+import ExpoImageCropTool, {type OpenCropperOptions} from 'expo-image-crop-tool'
 
 import {compressIfNeeded} from './manip'
 import {type PickerImage} from './picker.shared'
-import {type CropperOptions} from './types'
 
 async function getFile() {
   const imagesDir = documentDirectory!
@@ -43,10 +42,10 @@ export async function openCamera(): Promise<PickerImage> {
   return await getFile()
 }
 
-export async function openCropper(opts: CropperOptions) {
+export async function openCropper(opts: OpenCropperOptions) {
   const item = await ExpoImageCropTool.openCropperAsync({
     ...opts,
-    forceJpg: true, // ios only
+    format: 'jpeg',
   })
 
   return {
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 2b4a38e10e..b7d0d6f06d 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -1,8 +1,10 @@
 /// <reference lib="dom" />
 
+import {type OpenCropperOptions} from 'expo-image-crop-tool'
+
 import {unstable__openModal} from '#/state/modals'
 import {type PickerImage} from './picker.shared'
-import {type CameraOpts, type CropperOptions} from './types'
+import {type CameraOpts} from './types'
 
 export {openPicker, type PickerImage as RNImage} from './picker.shared'
 
@@ -11,18 +13,16 @@ export async function openCamera(_opts: CameraOpts): Promise<PickerImage> {
   throw new Error('TODO')
 }
 
-export async function openCropper(opts: CropperOptions): Promise<PickerImage> {
+export async function openCropper(
+  opts: OpenCropperOptions,
+): Promise<PickerImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
     unstable__openModal({
       name: 'crop-image',
-      uri: opts.path,
-      dimensions:
-        opts.width && opts.height
-          ? {width: opts.width, height: opts.height}
-          : undefined,
-      aspect: opts.webAspectRatio,
-      circular: opts.webCircularCrop,
+      uri: opts.imageUri,
+      aspect: opts.aspectRatio,
+      circular: opts.shape === 'circle',
       onSelect: (img?: PickerImage) => {
         if (img) {
           resolve(img)
diff --git a/src/lib/media/types.ts b/src/lib/media/types.ts
index ec94256ea1..c083093ac7 100644
--- a/src/lib/media/types.ts
+++ b/src/lib/media/types.ts
@@ -1,5 +1,3 @@
-import {openCropper} from 'react-native-image-crop-picker'
-
 export interface Dimensions {
   width: number
   height: number
@@ -17,8 +15,3 @@ export interface CameraOpts {
   freeStyleCropEnabled?: boolean
   cropperCircleOverlay?: boolean
 }
-
-export type CropperOptions = Parameters<typeof openCropper>[0] & {
-  webAspectRatio?: number
-  webCircularCrop?: boolean
-}
diff --git a/src/screens/Profile/Header/EditProfileDialog.tsx b/src/screens/Profile/Header/EditProfileDialog.tsx
index a0e24d78a8..8a9f0d5404 100644
--- a/src/screens/Profile/Header/EditProfileDialog.tsx
+++ b/src/screens/Profile/Header/EditProfileDialog.tsx
@@ -1,12 +1,12 @@
 import {useCallback, useEffect, useState} from 'react'
 import {Dimensions, View} from 'react-native'
-import {type Image as RNImage} from 'react-native-image-crop-picker'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {urls} from '#/lib/constants'
 import {compressIfNeeded} from '#/lib/media/manip'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {cleanError} from '#/lib/strings/errors'
 import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
 import {logger} from '#/logger'
@@ -127,10 +127,10 @@ function DialogInner({
     profile.avatar,
   )
   const [newUserBanner, setNewUserBanner] = useState<
-    RNImage | undefined | null
+    PickerImage | undefined | null
   >()
   const [newUserAvatar, setNewUserAvatar] = useState<
-    RNImage | undefined | null
+    PickerImage | undefined | null
   >()
 
   const dirty =
@@ -144,7 +144,7 @@ function DialogInner({
   }, [dirty, setDirty])
 
   const onSelectNewAvatar = useCallback(
-    async (img: RNImage | null) => {
+    async (img: PickerImage | null) => {
       setImageError('')
       if (img === null) {
         setNewUserAvatar(null)
@@ -163,7 +163,7 @@ function DialogInner({
   )
 
   const onSelectNewBanner = useCallback(
-    async (img: RNImage | null) => {
+    async (img: PickerImage | null) => {
       setImageError('')
       if (!img) {
         setNewUserBanner(null)
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index f79f6213ff..3e738898a3 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 260a0bf2ce..38e8cd62d8 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 609a62e25a..9f40ab7f61 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() {
diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx
index 0e4e23b97f..a7eae15ddb 100644
--- a/src/view/com/modals/CreateOrEditList.tsx
+++ b/src/view/com/modals/CreateOrEditList.tsx
@@ -8,7 +8,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {type Image as RNImage} from 'react-native-image-crop-picker'
 import {LinearGradient} from 'expo-linear-gradient'
 import {type AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -17,6 +16,7 @@ import {useLingui} from '@lingui/react'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {compressIfNeeded} from '#/lib/media/manip'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {cleanError, isNetworkError} from '#/lib/strings/errors'
 import {enforceLen} from '#/lib/strings/helpers'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
@@ -95,7 +95,7 @@ export function Component({
   const isDescriptionOver = graphemeLength > MAX_DESCRIPTION
 
   const [avatar, setAvatar] = useState<string | undefined>(list?.avatar)
-  const [newAvatar, setNewAvatar] = useState<RNImage | undefined | null>()
+  const [newAvatar, setNewAvatar] = useState<PickerImage | undefined | null>()
 
   const onDescriptionChange = useCallback(
     (newText: string) => {
@@ -112,7 +112,7 @@ export function Component({
   }, [closeModal])
 
   const onSelectNewAvatar = useCallback(
-    async (img: RNImage | null) => {
+    async (img: PickerImage | null) => {
       if (!img) {
         setNewAvatar(null)
         setAvatar(undefined)
diff --git a/src/view/com/modals/CropImage.web.tsx b/src/view/com/modals/CropImage.web.tsx
index 41ca306573..78c0466f0b 100644
--- a/src/view/com/modals/CropImage.web.tsx
+++ b/src/view/com/modals/CropImage.web.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
 import {LinearGradient} from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import ReactCrop, {PercentCrop} from 'react-image-crop'
+import ReactCrop, {type PercentCrop} from 'react-image-crop'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {getDataUriSize} from '#/lib/media/util'
 import {gradients, s} from '#/lib/styles'
 import {useModalControls} from '#/state/modals'
@@ -25,7 +25,7 @@ export function Component({
   uri: string
   aspect?: number
   circular?: boolean
-  onSelect: (img?: RNImage) => void
+  onSelect: (img?: PickerImage) => void
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index ebc1281a33..cb1552fe57 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -8,7 +8,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {type Image as RNImage} from 'react-native-image-crop-picker'
 import Animated, {FadeOut} from 'react-native-reanimated'
 import {LinearGradient} from 'expo-linear-gradient'
 import {type AppBskyActorDefs} from '@atproto/api'
@@ -18,6 +17,7 @@ import {useLingui} from '@lingui/react'
 import {MAX_DESCRIPTION, MAX_DISPLAY_NAME, urls} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {compressIfNeeded} from '#/lib/media/manip'
+import {type PickerImage} from '#/lib/media/picker.shared'
 import {cleanError} from '#/lib/strings/errors'
 import {enforceLen} from '#/lib/strings/helpers'
 import {colors, gradients, s} from '#/lib/styles'
@@ -67,16 +67,16 @@ export function Component({
     profile.avatar,
   )
   const [newUserBanner, setNewUserBanner] = useState<
-    RNImage | undefined | null
+    PickerImage | undefined | null
   >()
   const [newUserAvatar, setNewUserAvatar] = useState<
-    RNImage | undefined | null
+    PickerImage | undefined | null
   >()
   const onPressCancel = () => {
     closeModal()
   }
   const onSelectNewAvatar = useCallback(
-    async (img: RNImage | null) => {
+    async (img: PickerImage | null) => {
       setImageError('')
       if (img === null) {
         setNewUserAvatar(null)
@@ -95,7 +95,7 @@ export function Component({
   )
 
   const onSelectNewBanner = useCallback(
-    async (img: RNImage | null) => {
+    async (img: PickerImage | null) => {
       setImageError('')
       if (!img) {
         setNewUserBanner(null)
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 06fe0f50d0..fe40b0aa6b 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -2,13 +2,13 @@ import React, {memo, useMemo} from 'react'
 import {
   Image,
   Pressable,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 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'
@@ -37,12 +37,12 @@ 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 type * as bsky from '#/types/bsky'
 import {
   openCamera,
   openCropper,
   openPicker,
-  RNImage,
+  type RNImage,
 } from '../../../lib/media/picker'
 
 export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'
@@ -346,7 +346,7 @@ let EditableUserAvatar = ({
           })
           onSelectNewAvatar(croppedImage)
         },
-        isIOS ? 500 : 0,
+        isIOS ? 500 : 500,
       )
     } catch (e: any) {
       // Don't log errors for cancelling selection to sentry on ios or android

From f481c7bfdf9a878e7756865c2a5746689d7dd1ef Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 09:17:58 -0700
Subject: [PATCH 8/9] upgrade, remove timeout

---
 package.json                     |  2 +-
 src/view/com/util/UserAvatar.tsx | 19 +++++++------------
 src/view/com/util/UserBanner.tsx | 18 ++++++++----------
 yarn.lock                        |  8 ++++----
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 240a90bd90..69bfaee80c 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
     "expo-font": "~13.3.0",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.1.6",
-    "expo-image-crop-tool": "^0.1.4",
+    "expo-image-crop-tool": "^0.1.5",
     "expo-image-manipulator": "~13.1.5",
     "expo-image-picker": "~16.1.4",
     "expo-linear-gradient": "~14.1.4",
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index fe40b0aa6b..2450c111b6 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -22,7 +22,7 @@ import {
 import {makeProfileLink} from '#/lib/routes/links'
 import {colors} from '#/lib/styles'
 import {logger} from '#/logger'
-import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {precacheProfile} from '#/state/queries/profile'
 import {HighPriorityImage} from '#/view/com/util/images/Image'
 import {tokens, useTheme} from '#/alf'
@@ -337,17 +337,12 @@ let EditableUserAvatar = ({
     }
 
     try {
-      setTimeout(
-        async () => {
-          const croppedImage = await openCropper({
-            imageUri: item.path,
-            shape: 'circle',
-            aspectRatio: 1,
-          })
-          onSelectNewAvatar(croppedImage)
-        },
-        isIOS ? 500 : 500,
-      )
+      const croppedImage = await openCropper({
+        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
       if (!String(e).toLowerCase().includes('cancel')) {
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 346f40ab5f..ab7f25b800 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 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'
 
@@ -28,7 +28,7 @@ import {
   openCamera,
   openCropper,
   openPicker,
-  RNImage,
+  type RNImage,
 } from '../../../lib/media/picker'
 
 export function UserBanner({
@@ -71,14 +71,12 @@ export function UserBanner({
     }
 
     try {
-      setTimeout(async () => {
-        onSelectNewBanner?.(
-          await openCropper({
-            imageUri: items[0].path,
-            aspectRatio: 3 / 1,
-          }),
-        )
-      }, 750)
+      onSelectNewBanner?.(
+        await openCropper({
+          imageUri: items[0].path,
+          aspectRatio: 3 / 1,
+        }),
+      )
     } catch (e: any) {
       if (!String(e).includes('Canceled')) {
         logger.error('Failed to crop banner', {error: e})
diff --git a/yarn.lock b/yarn.lock
index a4aca488d6..91dff5b802 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11247,10 +11247,10 @@ expo-haptics@~14.1.4:
   resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-14.1.4.tgz#442f48b1bdf83484d4fcadc653445aaae6049b70"
   integrity sha512-QZdE3NMX74rTuIl82I+n12XGwpDWKb8zfs5EpwsnGi/D/n7O2Jd4tO5ivH+muEG/OCJOMq5aeaVDqqaQOhTkcA==
 
-expo-image-crop-tool@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.4.tgz#bced84f0b1184071cd46a72d32271ab35399b9ec"
-  integrity sha512-ow24RdFlJ0zQx1FLLXJuDQtU6gsJUtFCwcwKqdQGH3N7x7B1h6czmXstB5eIiYbqWwTIIChiPkKYC16FltW1Ug==
+expo-image-crop-tool@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.5.tgz#4c56e10f9176c5d0822259b63776722e17ba0fbf"
+  integrity sha512-61Kh3MWAbScAK2bb+ddnVKTC/lisPDB9JqGIlNI/njTYW+dWW9sUa1jAmb/5nHQbZcHyFm/J3XCTjR2dkHf0QA==
 
 expo-image-loader@~5.1.0:
   version "5.1.0"

From 9b53e7bfb52c51320665f248338354e1540ce9ae Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 5 May 2025 12:02:15 -0700
Subject: [PATCH 9/9] bump

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 69bfaee80c..a030be04ab 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
     "expo-font": "~13.3.0",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.1.6",
-    "expo-image-crop-tool": "^0.1.5",
+    "expo-image-crop-tool": "^0.1.6",
     "expo-image-manipulator": "~13.1.5",
     "expo-image-picker": "~16.1.4",
     "expo-linear-gradient": "~14.1.4",
diff --git a/yarn.lock b/yarn.lock
index 91dff5b802..29c8c2f819 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11247,10 +11247,10 @@ expo-haptics@~14.1.4:
   resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-14.1.4.tgz#442f48b1bdf83484d4fcadc653445aaae6049b70"
   integrity sha512-QZdE3NMX74rTuIl82I+n12XGwpDWKb8zfs5EpwsnGi/D/n7O2Jd4tO5ivH+muEG/OCJOMq5aeaVDqqaQOhTkcA==
 
-expo-image-crop-tool@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.5.tgz#4c56e10f9176c5d0822259b63776722e17ba0fbf"
-  integrity sha512-61Kh3MWAbScAK2bb+ddnVKTC/lisPDB9JqGIlNI/njTYW+dWW9sUa1jAmb/5nHQbZcHyFm/J3XCTjR2dkHf0QA==
+expo-image-crop-tool@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.6.tgz#fd65ea2a143fef9a45a0d0cd2b967ec1f63a0bad"
+  integrity sha512-I0KVaLur+4EBMf6jtp7uVQNS26DgyGWERn2sng6iKc1I2QygILU8jj5/sMqzCB7fGPpzGn7e0S9u6EmR2YJHfg==
 
 expo-image-loader@~5.1.0:
   version "5.1.0"