Fix native emojis size

css/emoji-mart.css

@@ -91,6 +91,8 @@
 .emoji-mart-category .emoji-mart-emoji span {
   z-index: 1;
   position: relative;
+  text-align: center;
+  cursor: default;
 }
 
 .emoji-mart-category .emoji-mart-emoji:hover:before {

src/components/emoji.js

@@ -60,7 +60,7 @@ export default class Emoji extends React.Component {
   }
 
   render() {
-    var { set, size, sheetSize, native, onOver, onLeave, backgroundImageFn } = this.props,
+    var { set, size, sheetSize, native, forceSize, onOver, onLeave, backgroundImageFn } = this.props,
         { unified } = this.getData(),
         style = {},
         children = this.props.children
@@ -72,6 +72,12 @@ export default class Emoji extends React.Component {
     if (native && unified) {
       style = { fontSize: size }
       children = unifiedToNative(unified)
+
+      if (forceSize) {
+        style.display = 'inline-block'
+        style.width = size
+        style.height = size
+      }
     } else {
       style = {
         width: size,
@@ -99,6 +105,7 @@ Emoji.propTypes = {
   onClick: React.PropTypes.func,
   backgroundImageFn: React.PropTypes.func,
   native: React.PropTypes.bool,
+  forceSize: React.PropTypes.bool,
   skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]),
   set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
@@ -114,6 +121,7 @@ Emoji.defaultProps = {
   set: 'apple',
   sheetSize: 64,
   native: false,
+  forceSize: false,
   backgroundImageFn: ((set, sheetSize) => `https://unpkg.com/emoji-datasource@${EMOJI_DATASOURCE_VERSION}/sheet_${set}_${sheetSize}.png`),
   onOver: (() => {}),
   onLeave: (() => {}),

src/components/picker.js

@@ -262,15 +262,8 @@ export default class Picker extends React.Component {
 
   render() {
     var { perLine, emojiSize, set, sheetSize, style, title, emoji, color, native, backgroundImageFn, emojisToShowFilter } = this.props,
-        { skin } = this.state
-
-    let width;
-
-    if (native) {
-      width = (perLine * (emojiSize + 15)) + 17;
-    } else {
-      width = (perLine * (emojiSize + 12)) + 12 + 2;
-    }
+        { skin } = this.state,
+        width = (perLine * (emojiSize + 12)) + 12 + 2
 
     return <div style={{width: width, ...style}} className='emoji-mart'>
       <div className='emoji-mart-bar'>
@@ -306,6 +299,7 @@ export default class Picker extends React.Component {
               size: emojiSize,
               set: set,
               sheetSize: sheetSize,
+              forceSize: native,
               backgroundImageFn: backgroundImageFn,
               onOver: this.handleEmojiOver.bind(this),
               onLeave: this.handleEmojiLeave.bind(this),