show images in preview

src/screens/Messages/Conversation/MessageInputEmbed.tsx

@@ -1,6 +1,8 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {LayoutAnimation, View} from 'react-native'
 import {
+ AppBskyEmbedImages,
+ AppBskyEmbedRecordWithMedia,
  AppBskyFeedPost,
  AppBskyRichtextFacet,
  AtUri,
@@ -20,6 +22,7 @@ import {
 } from '#/lib/strings/url-helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePostQuery} from '#/state/queries/post'
+import {ImageHorzList} from '#/view/com/util/images/ImageHorzList'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -155,6 +158,13 @@ export function MessageInputEmbed({
  return null
  }
 
+ const images = AppBskyEmbedImages.isView(post.embed)
+ ? post.embed.images
+ : AppBskyEmbedRecordWithMedia.isView(post.embed) &&
+ AppBskyEmbedImages.isView(post.embed.media)
+ ? post.embed.media.images
+ : undefined
+
  content = (
  <View
  style={[
@@ -190,6 +200,9 @@ export function MessageInputEmbed({
  />
  </View>
  )}
+ {images && images?.length > 0 && (
+ <ImageHorzList images={images} style={a.mt_xs} />
+ )}
  </ContentHider>
  </View>
  )

src/view/com/notifications/FeedItem.tsx

@@ -458,7 +458,7 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
  return (
  <>
  {text?.length > 0 && <Text style={pal.textLight}>{text}</Text>}
- {images && images?.length > 0 && (
+ {images && images.length > 0 && (
  <ImageHorzList images={images} style={styles.additionalPostImages} />
  )}
  </>

src/view/com/util/images/ImageHorzList.tsx

@@ -27,11 +27,14 @@ export function ImageHorzList({images, style}: Props) {
 }
 
 const styles = StyleSheet.create({
- flexRow: {flexDirection: 'row'},
+ flexRow: {
+ flexDirection: 'row',
+ gap: 5,
+ },
  image: {
- width: 100,
- height: 100,
+ maxWidth: 100,
+ aspectRatio: 1,
+ flex: 1,
  borderRadius: 4,
- marginRight: 5,
  },
 })