From d9cd23f68c21fbb9c92f4ff017b06e48b13deff6 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 10 Dec 2019 17:37:04 +0100
Subject: [PATCH] MM-21062 Added margin to custom Emoji (#3686)

Added margin to custom emoji style to match native emoji.
---
 app/components/emoji/emoji.js        | 4 +++-
 app/components/reactions/reaction.js | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/emoji/emoji.js b/app/components/emoji/emoji.js
index 841070c8f..06fae7006 100644
--- a/app/components/emoji/emoji.js
+++ b/app/components/emoji/emoji.js
@@ -40,6 +40,7 @@ export default class Emoji extends React.PureComponent {
         size: PropTypes.number,
         textStyle: CustomPropTypes.Style,
         unicode: PropTypes.string,
+        customEmojiStyle: CustomPropTypes.Style,
     };
 
     static defaultProps = {
@@ -96,6 +97,7 @@ export default class Emoji extends React.PureComponent {
             literal,
             textStyle,
             displayTextOnly,
+            customEmojiStyle,
         } = this.props;
         const {imageUrl} = this.state;
 
@@ -143,7 +145,7 @@ export default class Emoji extends React.PureComponent {
         return (
             <FastImage
                 key={key}
-                style={{width, height}}
+                style={[customEmojiStyle, {width, height}]}
                 source={{uri: imageUrl}}
                 onError={this.onError}
             />
diff --git a/app/components/reactions/reaction.js b/app/components/reactions/reaction.js
index 641a89a71..ff70889c8 100644
--- a/app/components/reactions/reaction.js
+++ b/app/components/reactions/reaction.js
@@ -49,6 +49,7 @@ export default class Reaction extends PureComponent {
                     emojiName={emojiName}
                     size={20}
                     textStyle={{color: 'black', fontWeight: 'bold'}}
+                    customEmojiStyle={{marginHorizontal: 3}}
                     padding={5}
                 />
                 <Text style={styles.count}>{count}</Text>