From f33b3575e1e986765569fe01a9cf6a54901ac557 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Fri, 23 Jul 2021 21:12:38 -0300
Subject: [PATCH 1/2] adds VS16 unicode to emoji items

---
 src/pages/home/report/EmojiPickerMenu/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
index 044abc87a2cc..49a001868fbd 100755
--- a/src/pages/home/report/EmojiPickerMenu/index.js
+++ b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -298,7 +298,9 @@ class EmojiPickerMenu extends Component {
     /**
      * Given an emoji item object, render a component based on its type.
      * Items with the code "SPACER" return nothing and are used to fill rows up to 8
-     * so that the sticky headers function properly
+     * so that the sticky headers function properly.
+     * We add '\uFE0F' to our unicode to force the correct emoji presentation (VS16) 
+     * on emojis that also have a text style presentation (VS15).
      *
      * @param {Object} item
      * @param {Number} index
@@ -313,7 +315,7 @@ class EmojiPickerMenu extends Component {
         if (header) {
             return (
                 <Text style={styles.emojiHeaderStyle}>
-                    {code}
+                    {code+'\uFE0F'}
                 </Text>
             );
         }
@@ -322,7 +324,7 @@ class EmojiPickerMenu extends Component {
             <EmojiPickerMenuItem
                 onPress={this.props.onEmojiSelected}
                 onHover={() => this.setState({highlightedIndex: index})}
-                emoji={code}
+                emoji={code+'\uFE0F'}
                 isHighlighted={index === this.state.highlightedIndex}
                 emojiSize={this.emojiSize}
             />

From d4dc90319c980a55849fa0ca4a5dc275bfdb82b9 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Sat, 24 Jul 2021 03:31:42 -0300
Subject: [PATCH 2/2] adds fix on native, lint fixes

---
 src/pages/home/report/EmojiPickerMenu/index.js        | 6 +++---
 src/pages/home/report/EmojiPickerMenu/index.native.js | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
index 49a001868fbd..c55beca29883 100755
--- a/src/pages/home/report/EmojiPickerMenu/index.js
+++ b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -299,7 +299,7 @@ class EmojiPickerMenu extends Component {
      * Given an emoji item object, render a component based on its type.
      * Items with the code "SPACER" return nothing and are used to fill rows up to 8
      * so that the sticky headers function properly.
-     * We add '\uFE0F' to our unicode to force the correct emoji presentation (VS16) 
+     * We add '\uFE0F' to our unicode to force the correct emoji presentation (VS16)
      * on emojis that also have a text style presentation (VS15).
      *
      * @param {Object} item
@@ -315,7 +315,7 @@ class EmojiPickerMenu extends Component {
         if (header) {
             return (
                 <Text style={styles.emojiHeaderStyle}>
-                    {code+'\uFE0F'}
+                    {`${code}\uFE0F`}
                 </Text>
             );
         }
@@ -324,7 +324,7 @@ class EmojiPickerMenu extends Component {
             <EmojiPickerMenuItem
                 onPress={this.props.onEmojiSelected}
                 onHover={() => this.setState({highlightedIndex: index})}
-                emoji={code+'\uFE0F'}
+                emoji={`${code}\uFE0F`}
                 isHighlighted={index === this.state.highlightedIndex}
                 emojiSize={this.emojiSize}
             />
diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js
index b1a4d1302506..6708330dffca 100644
--- a/src/pages/home/report/EmojiPickerMenu/index.native.js
+++ b/src/pages/home/report/EmojiPickerMenu/index.native.js
@@ -58,7 +58,7 @@ class EmojiPickerMenu extends Component {
         if (item.header) {
             return (
                 <Text style={styles.emojiHeaderStyle}>
-                    {item.code}
+                    {`${item.code}\uFE0F`}
                 </Text>
             );
         }
@@ -66,7 +66,7 @@ class EmojiPickerMenu extends Component {
         return (
             <EmojiPickerMenuItem
                 onPress={this.props.onEmojiSelected}
-                emoji={item.code}
+                emoji={`${item.code}\uFE0F`}
                 emojiSize={this.emojiSize}
             />
         );