fix reactions ontap

example/ios/Flutter/.last_build_id

@@ -1 +1 @@
-0289cdadbd29bab804f275e3c5907d07
+89eb023669fee58472de747080d78b5a

example/lib/main.dart

@@ -76,7 +76,7 @@ void main() async {
 
   await client.setUser(
     User(id: 'super-band-9', extraData: {
-      'name': 'John Doe',
+      'name': 'Jonathan Doe',
     }),
     'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A',
   );

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.31+33
+version: 1.0.32+34
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/message_list_view.dart

@@ -543,7 +543,7 @@ class _MessageListViewState extends State<MessageListView> {
         topRight: Radius.circular(16),
         bottomRight: Radius.circular(16),
       ),
-      showUserAvatar: !isMyMessage
+      showUserAvatar: isMyMessage
           ? DisplayWidget.gone
           : (isNextUser ? DisplayWidget.hide : DisplayWidget.show),
       messageTheme: isMyMessage

lib/src/message_reactions_modal.dart

@@ -53,49 +53,54 @@ class MessageReactionsModal extends StatelessWidget {
             ),
           ),
         ),
-        Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: <Widget>[
-            if (showReactions &&
-                (message.status == MessageSendingStatus.SENT ||
-                    message.status == null))
-              Center(
-                child: ReactionPicker(
-                  message: message,
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: <Widget>[
+              if (showReactions &&
+                  (message.status == MessageSendingStatus.SENT ||
+                      message.status == null))
+                Center(
+                  child: ReactionPicker(
+                    message: message,
+                    messageTheme: messageTheme,
+                  ),
+                ),
+              AbsorbPointer(
+                child: MessageWidget(
+                  key: Key('MessageWidget'),
+                  reverse: reverse,
+                  message: message.copyWith(
+                    text: message.text.length > 200
+                        ? '${message.text.substring(0, 200)}...'
+                        : message.text,
+                    attachments: message.attachments.length > 1
+                        ? [message.attachments[0]]
+                        : message.attachments,
+                  ),
                   messageTheme: messageTheme,
+                  showReactions: false,
+                  showUsername: false,
+                  showReplyIndicator: false,
+                  showTimestamp: false,
+                  showSendingIndicator: DisplayWidget.gone,
+                  shape: messageShape,
                 ),
               ),
-            AbsorbPointer(
-              child: MessageWidget(
-                key: Key('MessageWidget'),
-                reverse: reverse,
-                message: message.copyWith(
-                  text: message.text.length > 200
-                      ? '${message.text.substring(0, 200)}...'
-                      : message.text,
-                  attachments: message.attachments.length > 1
-                      ? [message.attachments[0]]
-                      : message.attachments,
+              SizedBox(
+                height: 16,
+              ),
+              if (message.latestReactions?.isNotEmpty == true)
+                Flexible(
+                  child: Container(
+                    constraints: BoxConstraints.loose(Size.fromHeight(400)),
+                    child: _buildReactionCard(context),
+                  ),
                 ),
-                messageTheme: messageTheme,
-                showReactions: false,
-                showUsername: false,
-                showReplyIndicator: false,
-                showTimestamp: false,
-                showSendingIndicator: DisplayWidget.gone,
-                shape: messageShape,
-              ),
-            ),
-            SizedBox(
-              height: 16,
-            ),
-            if (message.latestReactions?.isNotEmpty == true)
-              Container(
-                constraints: BoxConstraints.loose(Size.fromHeight(400)),
-                child: _buildReactionCard(context),
-              ),
-          ],
+            ],
+          ),
         ),
       ],
     );
@@ -181,16 +186,14 @@ class MessageReactionsModal extends StatelessWidget {
               Positioned(
                 child: Align(
                   alignment: Alignment.centerLeft,
-                  child: Container(
-                    child: ReactionBubble(
-                      reactions: [reaction],
-                      borderColor: messageTheme.reactionsBorderColor,
-                      backgroundColor: messageTheme.reactionsBackgroundColor,
-                      flipTail: !isCurrentUser,
-                    ),
+                  child: ReactionBubble(
+                    reactions: [reaction],
+                    borderColor: messageTheme.reactionsBorderColor,
+                    backgroundColor: messageTheme.reactionsBackgroundColor,
+                    highlightOwnReactions: false,
                   ),
                 ),
-                bottom: 0,
+                bottom: 4,
                 left: isCurrentUser ? 0 : null,
                 right: isCurrentUser ? 0 : null,
               ),

lib/src/message_widget.dart

@@ -240,7 +240,8 @@ class _MessageWidgetState extends State<MessageWidget> {
                           ),
                         Flexible(
                           child: PortalEntry(
-                            portal: ConstrainedBox(
+                            portal: Container(
+                              transform: Matrix4.translationValues(-16, 0, 0),
                               child: _buildReactionIndicator(context),
                               constraints: BoxConstraints(maxWidth: 22 * 6.0),
                             ),
@@ -399,16 +400,13 @@ class _MessageWidgetState extends State<MessageWidget> {
               !widget.message.isDeleted)
           ? GestureDetector(
               onTap: () => _showMessageReactionsModalBottomSheet(context),
-              child: Transform.translate(
-                offset: Offset(-16, 0),
-                child: ReactionBubble(
-                  key: ValueKey('${widget.message.id}.reactions'),
-                  reverse: widget.reverse,
-                  flipTail: widget.reverse,
-                  backgroundColor: widget.messageTheme.reactionsBackgroundColor,
-                  borderColor: widget.messageTheme.reactionsBorderColor,
-                  reactions: reactionsMap.values.toList(),
-                ),
+              child: ReactionBubble(
+                key: ValueKey('${widget.message.id}.reactions'),
+                reverse: widget.reverse,
+                flipTail: widget.reverse,
+                backgroundColor: widget.messageTheme.reactionsBackgroundColor,
+                borderColor: widget.messageTheme.reactionsBorderColor,
+                reactions: reactionsMap.values.toList(),
               ),
             )
           : SizedBox(),

lib/src/reaction_bubble.dart

@@ -13,6 +13,7 @@ class ReactionBubble extends StatelessWidget {
     @required this.backgroundColor,
     this.reverse = false,
     this.flipTail = false,
+    this.highlightOwnReactions = true,
   }) : super(key: key);
 
   final List<Reaction> reactions;
@@ -20,6 +21,7 @@ class ReactionBubble extends StatelessWidget {
   final Color backgroundColor;
   final bool reverse;
   final bool flipTail;
+  final bool highlightOwnReactions;
 
   @override
   Widget build(BuildContext context) {
@@ -31,9 +33,9 @@ class ReactionBubble extends StatelessWidget {
         alignment: Alignment.center,
         children: [
           Transform.translate(
-            offset: Offset(reverse ? 5 : -5, 0),
+            offset: Offset(reverse ? 2 : -2, 0),
             child: Container(
-              padding: const EdgeInsets.symmetric(vertical: 6),
+              padding: const EdgeInsets.symmetric(vertical: 4),
               decoration: BoxDecoration(
                 border: Border.all(
                   color: borderColor,
@@ -73,8 +75,8 @@ class ReactionBubble extends StatelessWidget {
           ),
           Positioned(
             bottom: 0,
-            left: reverse ? null : 16,
-            right: !reverse ? null : 16,
+            left: reverse ? null : 11,
+            right: !reverse ? null : 11,
             child: _buildReactionsTail(context),
           ),
         ],
@@ -99,7 +101,8 @@ class ReactionBubble extends StatelessWidget {
       child: Icon(
         reactionIcon?.iconData ?? Icons.help_outline_rounded,
         size: 16,
-        color: reaction.user.id == StreamChat.of(context).user.id
+        color: (!highlightOwnReactions ||
+                reaction.user.id == StreamChat.of(context).user.id)
             ? StreamChatTheme.of(context).accentColor
             : Colors.black.withOpacity(.5),
       ),
@@ -107,13 +110,10 @@ class ReactionBubble extends StatelessWidget {
   }
 
   Widget _buildReactionsTail(BuildContext context) {
-    final tail = Transform.translate(
-      offset: Offset(-5, 0),
-      child: CustomPaint(
-        painter: ReactionBubblePainter(
-          backgroundColor,
-          borderColor,
-        ),
+    final tail = CustomPaint(
+      painter: ReactionBubblePainter(
+        backgroundColor,
+        borderColor,
       ),
     );