diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index 84bef952ed..dc1f78ef5d 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -21,6 +21,7 @@ import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {isNative} from '#/platform/detection'
import {useConvoActive} from '#/state/messages/convo'
import {type ConvoItem} from '#/state/messages/convo/types'
import {useSession} from '#/state/session'
@@ -103,6 +104,74 @@ let MessageItem = ({
return new RichTextAPI({text: message.text, facets: message.facets})
}, [message.text, message.facets])
+ const appliedReactions = (
+
+ {message.reactions && message.reactions.length > 0 && (
+
+
+ {message.reactions.map((reaction, _i, reactions) => {
+ let label
+ if (reaction.sender.did === currentAccount?.did) {
+ label = _(msg`You reacted ${reaction.value}`)
+ } else {
+ const senderDid = reaction.sender.did
+ const sender = convo.members.find(
+ member => member.did === senderDid,
+ )
+ if (sender) {
+ label = _(
+ msg`${sanitizeDisplayName(
+ sender.displayName || sender.handle,
+ )} reacted ${reaction.value}`,
+ )
+ } else {
+ label = _(msg`Someone reacted ${reaction.value}`)
+ }
+ }
+ return (
+ 1 && native(ZoomOut.delay(200))}
+ layout={native(LinearTransition.delay(300))}
+ key={reaction.sender.did + reaction.value}
+ style={[a.p_2xs]}
+ accessible={true}
+ accessibilityLabel={label}
+ accessibilityHint={_(
+ msg`Double tap or long press the message to add a reaction`,
+ )}>
+
+ {reaction.value}
+
+
+ )
+ })}
+
+
+ )}
+
+ )
+
return (
<>
{isNewDay && }
@@ -147,79 +216,11 @@ let MessageItem = ({
/>
)}
+
+ {isNative && appliedReactions}
-
- {message.reactions && message.reactions.length > 0 && (
-
-
- {message.reactions.map((reaction, _i, reactions) => {
- let label
- if (reaction.sender.did === currentAccount?.did) {
- label = _(msg`You reacted ${reaction.value}`)
- } else {
- const senderDid = reaction.sender.did
- const sender = convo.members.find(
- member => member.did === senderDid,
- )
- if (sender) {
- label = _(
- msg`${sanitizeDisplayName(
- sender.displayName || sender.handle,
- )} reacted ${reaction.value}`,
- )
- } else {
- label = _(msg`Someone reacted ${reaction.value}`)
- }
- }
- return (
- 1 && native(ZoomOut.delay(200))
- }
- layout={native(LinearTransition.delay(300))}
- key={reaction.sender.did + reaction.value}
- style={[a.p_2xs]}
- accessible={true}
- accessibilityLabel={label}
- accessibilityHint={_(
- msg`Double tap or long press the message to add a reaction`,
- )}>
-
- {reaction.value}
-
-
- )
- })}
-
-
- )}
-
+ {!isNative && appliedReactions}
{isLastInGroup && (