From 855c12d80e330d54ba45c37b6d53d4720c432613 Mon Sep 17 00:00:00 2001
From: CJ <38697367+imisshtml@users.noreply.github.com>
Date: Tue, 10 Dec 2019 11:32:57 -0500
Subject: [PATCH] MM-21062 Added margin to custom Emoji (#3682)

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>