Merge pull request #1122 from GetStream/vishal/reaction-touchable-handlers

Author: madsroskar

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -198,34 +198,7 @@ const ReactionListWithContext = <
       : x2 - (reactionSize * reactions.length) / 2 - strokeSize;
 
   return (
-    <TouchableOpacity
-      disabled={preventPress}
-      onLongPress={(event) => {
-        if (onLongPress) {
-          onLongPress({
-            emitter: 'reactionList',
-            event,
-          });
-        }
-      }}
-      onPress={(event) => {
-        if (onPress) {
-          onPress({
-            defaultHandler: () => showMessageOverlay(true),
-            emitter: 'reactionList',
-            event,
-          });
-        }
-      }}
-      onPressIn={(event) => {
-        if (onPressIn) {
-          onPressIn({
-            defaultHandler: () => showMessageOverlay(true),
-            emitter: 'reactionList',
-            event,
-          });
-        }
-      }}
+    <View
       style={[
         styles.container,
         {
@@ -266,7 +239,34 @@ const ReactionListWithContext = <
               <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
             </Svg>
           </View>
-          <View
+          <TouchableOpacity
+            disabled={preventPress}
+            onLongPress={(event) => {
+              if (onLongPress) {
+                onLongPress({
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
+            onPress={(event) => {
+              if (onPress) {
+                onPress({
+                  defaultHandler: () => showMessageOverlay(true),
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
+            onPressIn={(event) => {
+              if (onPressIn) {
+                onPressIn({
+                  defaultHandler: () => showMessageOverlay(true),
+                  emitter: 'reactionList',
+                  event,
+                });
+              }
+            }}
             style={[
               styles.reactionBubble,
               {
@@ -290,10 +290,10 @@ const ReactionListWithContext = <
                 type={reaction.type}
               />
             ))}
-          </View>
+          </TouchableOpacity>
         </View>
       ) : null}
-    </TouchableOpacity>
+    </View>
   );
 };