From caea620f801bb6ccbc71abe74e8a2feb90b42fbc Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 19 Dec 2024 21:00:44 +0000
Subject: [PATCH] Add iOS hack to fix cropper failing to show

---
 src/screens/Onboarding/StepProfile/index.tsx | 6 +++++-
 src/view/com/util/UserAvatar.tsx             | 6 +++++-
 src/view/com/util/UserBanner.tsx             | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 73472ec332..00bd532bde 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -15,7 +15,7 @@ import {openCropper} from '#/lib/media/picker'
 import {getDataUriSize} from '#/lib/media/util'
 import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
-import {isNative, isWeb} from '#/platform/detection'
+import {isIOS, isNative, isWeb} from '#/platform/detection'
 import {
   DescriptionText,
   OnboardingControls,
@@ -181,6 +181,10 @@ export function StepProfile() {
     if (!image) return
 
     if (!isWeb) {
+      if (isIOS) {
+        // https://github.com/ivpusic/react-native-image-crop-picker/issues/1631
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
       image = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index dbd68f8ef5..53bab62b2b 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -16,7 +16,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'
@@ -319,6 +319,10 @@ let EditableUserAvatar = ({
     }
 
     try {
+      if (isIOS) {
+        // https://github.com/ivpusic/react-native-image-crop-picker/issues/1631
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
       const croppedImage = await openCropper({
         mediaType: 'photo',
         cropperCircleOverlay: true,
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 7e71a04e9f..a68efab851 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -14,7 +14,7 @@ import {
 import {colors} from '#/lib/styles'
 import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
-import {isAndroid, isNative} from '#/platform/detection'
+import {isAndroid, isIOS, isNative} from '#/platform/detection'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import {tokens, useTheme as useAlfTheme} from '#/alf'
 import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
@@ -68,6 +68,10 @@ export function UserBanner({
     }
 
     try {
+      if (isIOS) {
+        // https://github.com/ivpusic/react-native-image-crop-picker/issues/1631
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
       onSelectNewBanner?.(
         await openCropper({
           mediaType: 'photo',