Speculative fix to Android camera roll issue (#8397)

src/components/StarterPack/QrCodeDialog.tsx

@@ -4,7 +4,7 @@ import type ViewShot from 'react-native-view-shot'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
 import {createAssetAsync} from 'expo-media-library'
 import * as Sharing from 'expo-sharing'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -15,7 +15,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
 import * as bsky from '#/types/bsky'
@@ -55,7 +55,7 @@ export function QrCodeDialog({
       if (isNative) {
         const res = await requestMediaLibraryPermissionsAsync()
 
-        if (!res) {
+        if (!res.granted) {
           Toast.show(
             _(
               msg`You must grant access to your photo library to save a QR code`,
@@ -155,6 +155,7 @@ export function QrCodeDialog({
 
   return (
     <Dialog.Outer control={control}>
+      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
@@ -197,6 +198,7 @@ export function QrCodeDialog({
             )}
           </React.Suspense>
         </View>
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )

src/components/StarterPack/ShareDialog.tsx

@@ -1,18 +1,15 @@
 import {View} from 'react-native'
 import {Image} from 'expo-image'
-import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
 import {type AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
 import {shareUrl} from '#/lib/sharing'
 import {logEvent} from '#/lib/statsig/statsig'
 import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
-import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {type DialogControlProps} from '#/components/Dialog'
@@ -60,26 +57,10 @@ function ShareDialogInner({
     control.close()
   }
 
+  const saveImageToAlbum = useSaveImageToMediaLibrary()
+
   const onSave = async () => {
-    const res = await requestMediaLibraryPermissionsAsync()
-
-    if (!res) {
-      Toast.show(
-        _(msg`You must grant access to your photo library to save the image.`),
-        'xmark',
-      )
-      return
-    }
-
-    try {
-      await saveImageToMediaLibrary({uri: imageUrl})
-      Toast.show(_(msg`Image saved`))
-      control.close()
-    } catch (e: unknown) {
-      Toast.show(_(msg`An error occurred while saving the QR code!`), 'xmark')
-      logger.error('Failed to save QR code', {error: e})
-      return
-    }
+    await saveImageToAlbum(imageUrl)
   }
 
   return (
@@ -161,6 +142,7 @@ function ShareDialogInner({
             </View>
           </View>
         )}
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </>
   )