Emojis are black and white

[j-lee8]

Hi all.

I'm just dabbling with this emoji picker and whenever I select and render one using the .native field it's black and white and not the coloured version I see inside the picker. This is probably a really obvious issue but I haven't seen it mentioned in the documentation. Does anybody know how to resolve this?

Thanks all

[j-lee8]

Native flag was the issue.

[rafael90cr]

Could you, please, be more specific? I'm struggling with this for days...

[Libron]

Hi there. I had same issue. How did you fix this ? Need help

[j-lee8]

It turns out I wasn't using the native flag. I'm using Ubuntu so the emojis render in black and white and that is the expected result (I wasn't aware of this at the time). I checked the emojis in Edge on Windows and Chrome on am Android device and they render in colour.

[kishan-chauhan]

Black and white issue in some of emoji icon and some of display in colorful anyone have to know how resolved this issue please. <emoji-mart class="emoji-mart" set="{{set}}" title="Pick your emoji…" sheetSize="32"></emoji-mart > and set is google set = 'google';

[MeiJunNa]

I still didn't understand how to solve this problem, throughemoji.native get the expression is still black border. Can you be more specific?

import './App.css'; import React, { Component } from 'react' import 'emoji-mart/css/emoji-mart.css' import { Picker } from 'emoji-mart' import { Input } from 'antd'; import "antd/dist/antd.css"; import { SmileOutlined } from '@ant-design/icons'; import from "lodash" class App extends Component { constructor(props) { super(props); this.state = { chatContent: "", showEmojiModal:false } } onChatContentChange = (value) => { this.setState({ chatContent: value }) }; searchEmoji(emoji, event) { console.log("emoji=====", emoji) emoji.unified="google"; this.setState({ emoji: emoji, showEmojiModal: false }) let { chatContent } = this.state; chatContent = !.isEmpty(chatContent) ? (chatContent + emoji.native) : emoji.native; this.setState({ chatContent }); } render() { return (

{this.state.showEmojiModal&&this.searchEmoji(emoji, event)}/>}

this.setState({ showEmojiModal: !this.state.showEmojiModal })}>

    <div style={{ display: 'flex', flex: 1, alignItems: 'center', paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
      <Input.TextArea
        style={{ display: 'flex', flex: 1, height: '100%', boxShadow: "none", fontSize: 16 }}
        placeholder="..."
        value={this.state.chatContent}
        onPressEnter={e => { }}
        onKeyUp={this.onKeyUp}
        onChange={e => this.onChatContentChange(e.target.value)}
      />
    </div>
  </div>
);

} }

export default App;