Merge pull request #15416 from Pujan92/fix/emoji-list-15106

correct the emoji list for Windows OS and categories updation

src/components/EmojiPicker/CategoryShortcutBar.js

@@ -13,6 +13,8 @@ import Objects from '../../../assets/images/emojiCategoryIcons/light-bulb.svg';
 import Symbols from '../../../assets/images/emojiCategoryIcons/peace-sign.svg';
 import Flags from '../../../assets/images/emojiCategoryIcons/flag.svg';
 import CategoryShortcutButton from './CategoryShortcutButton';
+import getOperatingSystem from '../../libs/getOperatingSystem';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** The function to call when an emoji is selected */
@@ -26,7 +28,8 @@ const CategoryShortcutBar = (props) => {
     const icons = [Smiley, AnimalsAndNature, FoodAndDrink, TravelAndPlaces, Activities, Objects, Symbols, Flags];
 
     // If the user has frequently used emojis, there will be 9 headers, otherwise there will be 8
-    if (props.headerIndices.length === 9) {
+    // Or for Windows OS there will be 8 headers, otherwise there will be 7
+    if (props.headerIndices.length === 9 || (getOperatingSystem() === CONST.OS.WINDOWS && props.headerIndices.length === 8)) {
         icons.unshift(FrequentlyUsed);
     }
 

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -57,22 +57,21 @@ class EmojiPickerMenu extends Component {
         // Ref for emoji FlatList
         this.emojiList = undefined;
 
-        const allEmojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
+        // If we're on Windows, don't display the flag emojis (the last category),
+        // since Windows doesn't support them
+        const flagHeaderIndex = _.findIndex(emojis, emoji => emoji.header && emoji.code === 'flags');
+        this.emojis = getOperatingSystem() === CONST.OS.WINDOWS
+            ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis.slice(0, flagHeaderIndex), this.props.frequentlyUsedEmojis)
+            : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojis, this.props.frequentlyUsedEmojis);
 
         // This is the actual header index starting at the first emoji and counting each one
-        this.headerIndices = EmojiUtils.getHeaderIndices(allEmojis);
+        this.headerIndices = EmojiUtils.getHeaderIndices(this.emojis);
 
         // This is the indices of each header's Row
         // The positions are static, and are calculated as index/numColumns (8 in our case)
         // This is because each row of 8 emojis counts as one index to the flatlist
         this.headerRowIndices = _.map(this.headerIndices, headerIndex => Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW));
 
-        // If we're on Windows, don't display the flag emojis (the last category),
-        // since Windows doesn't support them (and only displays country codes instead)
-        this.emojis = getOperatingSystem() === CONST.OS.WINDOWS
-            ? allEmojis.slice(0, this.headerRowIndices.pop() * CONST.EMOJI_NUM_PER_ROW)
-            : allEmojis;
-
         this.filterEmojis = _.debounce(this.filterEmojis.bind(this), 300);
         this.highlightAdjacentEmoji = this.highlightAdjacentEmoji.bind(this);
         this.scrollToHighlightedIndex = this.scrollToHighlightedIndex.bind(this);