diff --git a/app/containers/message/Components/Attachments/Reply.tsx b/app/containers/message/Components/Attachments/Reply.tsx index eb374a5beb..1acb1788b1 100644 --- a/app/containers/message/Components/Attachments/Reply.tsx +++ b/app/containers/message/Components/Attachments/Reply.tsx @@ -30,7 +30,7 @@ const styles = StyleSheet.create({ attachmentContainer: { flex: 1, borderRadius: 4, - flexDirection: 'column', + flexDirection: 'row', paddingVertical: 4, paddingLeft: 8 }, @@ -43,6 +43,11 @@ const styles = StyleSheet.create({ alignItems: 'center', marginBottom: 8 }, + titleAndDesciptionContainer: { + flexDirection: "column", + flex: 1, + width: 200 + }, author: { fontSize: 16, ...sharedStyles.textMedium, @@ -72,11 +77,12 @@ const styles = StyleSheet.create({ marginBottom: 4 }, image: { - height: 200, - flex: 1, + height: 80, + width: 80, borderTopLeftRadius: 4, borderTopRightRadius: 4, - marginBottom: 1 + marginBottom: 1, + marginLeft: 20 }, title: { flex: 1, @@ -245,28 +251,30 @@ const Reply = React.memo( background={Touchable.Ripple(themes[theme].surfaceNeutral)} disabled={!!(loading || attachment.message_link)}> - - <Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} /> + <View style={styles.titleAndDesciptionContainer}> + <Title attachment={attachment} timeFormat={timeFormat} theme={theme} /> + <Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} /> + <Attachments + attachments={attachment.attachments} + getCustomEmoji={getCustomEmoji} + timeFormat={timeFormat} + style={[{ color: themes[theme].fontHint, fontSize: 14, marginBottom: 8 }]} + isReply + showAttachment={showAttachment} + /> + <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} /> + {loading ? ( + <View style={[styles.backdrop]}> + <View + style={[ + styles.backdrop, + { backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity } + ]}></View> + <RCActivityIndicator /> + </View> + ) : null} + </View> <UrlImage image={attachment.thumb_url} /> - <Attachments - attachments={attachment.attachments} - getCustomEmoji={getCustomEmoji} - timeFormat={timeFormat} - style={[{ color: themes[theme].fontHint, fontSize: 14, marginBottom: 8 }]} - isReply - showAttachment={showAttachment} - /> - <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} /> - {loading ? ( - <View style={[styles.backdrop]}> - <View - style={[ - styles.backdrop, - { backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity } - ]}></View> - <RCActivityIndicator /> - </View> - ) : null} </View> </Touchable> <Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />