From caba7d0b3499fc1872b538774ce1ab372954da3f Mon Sep 17 00:00:00 2001
From: Kaylee Mann <kmann@pivotal.io>
Date: Fri, 8 Mar 2019 14:00:50 +0900
Subject: [PATCH] Show preview panel when showPreview is false but
 showSkinTones is true. This is necessary in order to be able to show skin
 tone picker even when one desires for the mouseover preview to be invisible.
 This is an important case because mouseover displays must be disabled in
 order to enable single click emoji typing on iOS without disabling the skin
 tone picker.

---
 src/components/picker/nimble-picker.js | 3 ++-
 src/components/preview.js              | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 24c0ff4..6f9c2e5 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -560,7 +560,7 @@ export default class NimblePicker extends React.PureComponent {
           })}
         </div>
 
-        {showPreview && (
+        {(showPreview || showSkinTones) && (
           <div className="emoji-mart-bar">
             <Preview
               ref={this.setPreviewRef}
@@ -568,6 +568,7 @@ export default class NimblePicker extends React.PureComponent {
               title={title}
               emoji={emoji}
               showSkinTones={showSkinTones}
+              showPreview={showPreview}
               emojiProps={{
                 native: native,
                 size: 38,
diff --git a/src/components/preview.js b/src/components/preview.js
index e9ab5ae..7c92d4e 100644
--- a/src/components/preview.js
+++ b/src/components/preview.js
@@ -23,9 +23,10 @@ export default class Preview extends React.PureComponent {
         title,
         emoji: idleEmoji,
         i18n,
+        showPreview,
       } = this.props
 
-    if (emoji) {
+    if (emoji && showPreview) {
       var emojiData = getData(emoji, null, null, this.data),
         { emoticons = [] } = emojiData,
         knownEmoticons = [],