[MM-9321] Add a "+" button to make it easy to add Emoji Reactions (#1455)

app/components/post/post.js

@@ -17,7 +17,7 @@ import PostHeader from 'app/components/post_header';
 import PostProfilePicture from 'app/components/post_profile_picture';
 import {NavigationTypes} from 'app/constants';
 import {emptyFunction} from 'app/utils/general';
-import {preventDoubleTap} from 'app/utils/tap';
+import {preventDoubleTap, wrapWithPreventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {getToolTipVisible} from 'app/utils/tooltip';
 
@@ -184,7 +184,7 @@ class Post extends PureComponent {
         this.props.actions.addReaction(post.id, emoji);
     }
 
-    handleAddReaction = () => {
+    handleAddReaction = wrapWithPreventDoubleTap(() => {
         const {intl, navigator, post, theme} = this.props;
 
         MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).
@@ -206,7 +206,7 @@ class Post extends PureComponent {
                     }
                 });
             });
-    }
+    });
 
     handleFailedPostPress = () => {
         const options = {

app/components/post_body/post_body.js

@@ -296,7 +296,12 @@ class PostBody extends PureComponent {
                             isReplyPost={isReplyPost}
                         />
                         {this.renderFileAttachments()}
-                        {hasReactions && <Reactions postId={postId}/>}
+                        {hasReactions &&
+                        <Reactions
+                            postId={postId}
+                            onAddReaction={this.props.onAddReaction}
+                        />
+                        }
                     </OptionsContext>
                 );
             }

app/components/reactions/reactions.js

@@ -5,9 +5,13 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
     StyleSheet,
+    Text,
+    TouchableOpacity,
     View
 } from 'react-native';
 
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+
 import Reaction from './reaction';
 
 export default class Reactions extends PureComponent {
@@ -18,6 +22,7 @@ export default class Reactions extends PureComponent {
             removeReaction: PropTypes.func.isRequired
         }).isRequired,
         highlightedReactions: PropTypes.array.isRequired,
+        onAddReaction: PropTypes.func.isRequired,
         postId: PropTypes.string.isRequired,
         reactions: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired
@@ -55,9 +60,26 @@ export default class Reactions extends PureComponent {
     }
 
     render() {
+        const {reactions} = this.props;
+        const styles = getStyleSheet(this.props.theme);
+
+        if (!reactions.size) {
+            return null;
+        }
+
+        const addMoreReactions = (
+            <TouchableOpacity
+                onPress={this.props.onAddReaction}
+                style={[styles.reaction]}
+            >
+                <Text style={styles.more}>{'+'}</Text>
+            </TouchableOpacity>
+        );
+
         return (
             <View style={style.reactions}>
                 {this.renderReactions()}
+                {addMoreReactions}
             </View>
         );
     }
@@ -70,3 +92,22 @@ const style = StyleSheet.create({
         alignItems: 'flex-start'
     }
 });
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        more: {
+            color: theme.linkColor
+        },
+        reaction: {
+            alignItems: 'center',
+            borderRadius: 2,
+            borderColor: changeOpacity(theme.linkColor, 0.4),
+            borderWidth: 1,
+            flexDirection: 'row',
+            marginRight: 6,
+            marginVertical: 5,
+            paddingVertical: 2,
+            paddingHorizontal: 6
+        }
+    };
+});