try feeding single gifs to the compressor

src/lib/media/picker.shared.ts

@@ -27,8 +27,12 @@ export async function openPicker(opts?: ImagePickerOptions) {
       Toast.show('Only image files are supported', 'exclamation-circle')
       return false
     })
-    .map(image => ({
-      mime: 'image/jpeg',
+    .map((image, _, arr) => ({
+      // Unsure why mimeType is forced to be image/jpeg - let's keep it that way unless it's a single gif
+      mime:
+        arr.length === 1 && image.mimeType === 'image/gif'
+          ? 'image/gif'
+          : 'image/jpeg',
       height: image.height,
       width: image.width,
       path: image.uri,

src/state/models/media/gallery.ts

@@ -1,8 +1,10 @@
-import {makeAutoObservable, runInAction} from 'mobx'
-import {ImageModel} from './image'
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {openPicker} from 'lib/media/picker'
+import {makeAutoObservable, runInAction} from 'mobx'
+
+import {isNative} from '#/platform/detection'
 import {getImageDim} from 'lib/media/manip'
+import {openPicker} from 'lib/media/picker'
+import {ImageModel} from './image'
 
 interface InitialImageUri {
   uri: string
@@ -84,12 +86,24 @@ export class GalleryModel {
     image.previous()
   }
 
-  async pick() {
+  async pick(
+    onPickGif?: (gif: Awaited<ReturnType<typeof openPicker>>[number]) => void,
+  ) {
     const images = await openPicker({
       selectionLimit: 4 - this.size,
       allowsMultipleSelection: true,
     })
 
+    if (
+      isNative &&
+      onPickGif &&
+      images.length === 1 &&
+      images[0]?.mime === 'image/gif'
+    ) {
+      onPickGif(images[0])
+      return
+    }
+
     return await Promise.all(
       images.map(image => {
         this.add(image)

src/view/com/composer/Composer.tsx

@@ -798,7 +798,11 @@ export const ComposePost = observer(function ComposePost({
             <VideoUploadToolbar state={videoUploadState} />
           ) : (
             <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
-              <SelectPhotoBtn gallery={gallery} disabled={!canSelectImages} />
+              <SelectPhotoBtn
+                gallery={gallery}
+                disabled={!canSelectImages}
+                onSelectVideo={selectVideo}
+              />
               {gate('video_upload') && (
                 <SelectVideoBtn
                   onSelectVideo={selectVideo}

src/view/com/composer/photos/SelectPhotoBtn.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-ignores-invert-colors */
 import React, {useCallback} from 'react'
+import {ImagePickerAsset} from 'expo-image-picker'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -14,9 +15,10 @@ import {Image_Stroke2_Corner0_Rounded as Image} from '#/components/icons/Image'
 type Props = {
   gallery: GalleryModel
   disabled?: boolean
+  onSelectVideo: (video: ImagePickerAsset) => void
 }
 
-export function SelectPhotoBtn({gallery, disabled}: Props) {
+export function SelectPhotoBtn({gallery, disabled, onSelectVideo}: Props) {
   const {track} = useAnalytics()
   const {_} = useLingui()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
@@ -29,8 +31,16 @@ export function SelectPhotoBtn({gallery, disabled}: Props) {
       return
     }
 
-    gallery.pick()
-  }, [track, requestPhotoAccessIfNeeded, gallery])
+    gallery.pick(gif => {
+      onSelectVideo({
+        uri: gif.path,
+        fileSize: gif.size,
+        height: gif.height,
+        width: gif.width,
+        mimeType: 'image/gif',
+      })
+    })
+  }, [track, requestPhotoAccessIfNeeded, gallery, onSelectVideo])
 
   return (
     <Button