Use the new gap option

src/components/Timeline/Shared/Attachment/Audio.tsx

@@ -60,15 +60,23 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
   return (
     <View
       accessibilityLabel={audio.description}
-      style={[
-        styles.base,
-        {
-          backgroundColor: colors.disabled,
-          aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
-        }
-      ]}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: colors.disabled,
+        aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
+      }}
     >
-      <View style={styles.overlay}>
+      <View
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
         {sensitiveShown ? (
           audio.blurhash ? (
             <GracefullyImage
@@ -88,7 +96,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
                   default: { uri: audio.preview_url },
                   remote: { uri: audio.preview_remote_url }
                 }}
-                style={styles.background}
+                style={{ position: 'absolute', width: '100%', height: '100%' }}
                 dim
               />
             ) : null}
@@ -139,22 +147,4 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2,
-    flexDirection: 'row'
-  },
-  background: { position: 'absolute', width: '100%', height: '100%' },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-})
-
 export default AttachmentAudio

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -1,5 +1,4 @@
 import GracefullyImage from '@components/GracefullyImage'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { View } from 'react-native'
@@ -24,27 +23,19 @@ const AttachmentImage = ({
   const { colors } = useTheme()
 
   return (
-    <View
-      style={{
-        flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2
-      }}
-    >
-      <View style={{ flex: 1, backgroundColor: colors.shimmerDefault }}>
-        <GracefullyImage
-          accessibilityLabel={image.description}
-          hidden={sensitiveShown}
-          sources={{
-            default: { uri: image.preview_url },
-            remote: { uri: image.remote_url },
-            blurhash: image.blurhash
-          }}
-          onPress={() => navigateToImagesViewer(image.id)}
-          style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
-          dim
-        />
-      </View>
+    <View style={{ flex: 1, backgroundColor: colors.shimmerDefault, alignContent: 'center', justifyContent: 'center' }}>
+      <GracefullyImage
+        accessibilityLabel={image.description}
+        hidden={sensitiveShown}
+        sources={{
+          default: { uri: image.preview_url },
+          remote: { uri: image.remote_url },
+          blurhash: image.blurhash
+        }}
+        onPress={() => navigateToImagesViewer(image.id)}
+        style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
+        dim
+      />
       <AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
     </View>
   )

src/components/Timeline/Shared/Attachment/Unsupported.tsx

@@ -25,21 +25,15 @@ const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown,
     <View
       style={{
         flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2,
+        aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }),
         justifyContent: 'center',
-        alignItems: 'center',
-        aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original })
+        alignItems: 'center'
       }}
     >
       {attachment.blurhash ? (
         <GracefullyImage
           sources={{ blurhash: attachment.blurhash }}
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%'
-          }}
+          style={{ position: 'absolute', width: '100%', height: '100%' }}
         />
       ) : null}
       {!sensitiveShown ? (

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -2,8 +2,9 @@ import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { connectMedia } from '@utils/api/helpers/connect'
-import { useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
+import { useGlobalStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
 import { Platform } from 'expo-modules-core'
 import * as ScreenOrientation from 'expo-screen-orientation'
@@ -27,13 +28,9 @@ const AttachmentVideo: React.FC<Props> = ({
   video,
   gifv = false
 }) => {
+  const { colors } = useTheme()
   const { reduceMotionEnabled } = useAccessibility()
-  const [autoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
-  const [preferences] = useAccountStorage.object('preferences')
-  const shouldAutoplayGifv =
-    preferences?.['reading:autoplay:gifs'] !== undefined
-      ? preferences['reading:autoplay:gifs']
-      : autoplayGifv
+  const [shouldAutoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
 
   const videoPlayer = useRef<Video>(null)
   const [videoLoading, setVideoLoading] = useState(false)
@@ -56,9 +53,10 @@ const AttachmentVideo: React.FC<Props> = ({
     <View
       style={{
         flex: 1,
-        flexBasis: '50%',
-        padding: StyleConstants.Spacing.XS / 2,
-        aspectRatio: aspectRatio({ total, index, ...video.meta?.original })
+        backgroundColor: colors.shimmerDefault,
+        aspectRatio: aspectRatio({ total, index, ...video.meta?.original }),
+        alignContent: 'center',
+        justifyContent: 'center'
       }}
     >
       <Video

src/components/Timeline/Shared/Attachment/index.tsx

@@ -9,10 +9,11 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { StyleConstants } from '@utils/styles/constants'
+import { chunk } from 'lodash'
 import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import StatusContext from './Context'
+import StatusContext from '../Context'
 
 const TimelineAttachment = () => {
   const { status, disableDetails } = useContext(StatusContext)
@@ -96,98 +97,105 @@ const TimelineAttachment = () => {
     navigation.navigate('Screen-ImagesViewer', { imageUrls, id })
   }
 
+  const mapAttachmentType = (attachment: Mastodon.Attachment, index: number) => {
+    switch (attachment.type) {
+      case 'image':
+        return (
+          <AttachmentImage
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            image={attachment}
+            navigateToImagesViewer={navigateToImagesViewer}
+          />
+        )
+      case 'video':
+        return (
+          <AttachmentVideo
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            video={attachment}
+          />
+        )
+      case 'gifv':
+        return (
+          <AttachmentVideo
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            video={attachment}
+            gifv
+          />
+        )
+      case 'audio':
+        return (
+          <AttachmentAudio
+            total={status.media_attachments.length}
+            index={index}
+            sensitiveShown={sensitiveShown}
+            audio={attachment}
+          />
+        )
+      default:
+        if (
+          // https://docs.expo.dev/versions/unversioned/sdk/image/#supported-image-formats
+          attachment.preview_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i) ||
+          attachment.remote_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i)
+        ) {
+          return (
+            <AttachmentImage
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              image={attachment as unknown as Mastodon.AttachmentImage}
+              navigateToImagesViewer={navigateToImagesViewer}
+            />
+          )
+        } else if (attachment.remote_url?.match(/.(?:mp4|mkv)$/i)) {
+          return (
+            <AttachmentVideo
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              video={attachment as unknown as Mastodon.AttachmentVideo}
+            />
+          )
+        } else {
+          return (
+            <AttachmentUnsupported
+              total={status.media_attachments.length}
+              index={index}
+              sensitiveShown={sensitiveShown}
+              attachment={attachment}
+            />
+          )
+        }
+    }
+  }
+
   return (
-    <View>
-      <View
-        style={{
-          marginTop: StyleConstants.Spacing.S,
-          flex: 1,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignContent: 'stretch'
-        }}
-      >
-        {status.media_attachments.map((attachment, index) => {
-          switch (attachment.type) {
-            case 'image':
-              return (
-                <AttachmentImage
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  image={attachment}
-                  navigateToImagesViewer={navigateToImagesViewer}
-                />
-              )
-            case 'video':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                />
-              )
-            case 'gifv':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                  gifv
-                />
-              )
-            case 'audio':
-              return (
-                <AttachmentAudio
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  audio={attachment}
-                />
-              )
-            default:
-              if (
-                attachment.preview_url?.endsWith('.jpg') ||
-                attachment.preview_url?.endsWith('.jpeg') ||
-                attachment.preview_url?.endsWith('.png') ||
-                attachment.preview_url?.endsWith('.gif') ||
-                attachment.remote_url?.endsWith('.jpg') ||
-                attachment.remote_url?.endsWith('.jpeg') ||
-                attachment.remote_url?.endsWith('.png') ||
-                attachment.remote_url?.endsWith('.gif')
-              ) {
-                return (
-                  <AttachmentImage
-                    key={index}
-                    total={status.media_attachments.length}
-                    index={index}
-                    sensitiveShown={sensitiveShown}
-                    // @ts-ignore
-                    image={attachment}
-                    navigateToImagesViewer={navigateToImagesViewer}
-                  />
-                )
-              } else {
-                return (
-                  <AttachmentUnsupported
-                    key={index}
-                    total={status.media_attachments.length}
-                    index={index}
-                    sensitiveShown={sensitiveShown}
-                    attachment={attachment}
-                  />
-                )
-              }
-          }
-        })}
-      </View>
+    <View
+      style={{
+        marginTop: StyleConstants.Spacing.M,
+        flex: 1,
+        gap: StyleConstants.Spacing.XS
+      }}
+    >
+      {chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignContent: 'stretch',
+            gap: StyleConstants.Spacing.XS
+          }}
+        >
+          {chunk.map((a, aIndex) => mapAttachmentType(a, chunkIndex * 2 + aIndex))}
+        </View>
+      ))}
 
       {defaultSensitive() &&
         (sensitiveShown ? (