search

ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
991 stars 166 forks source link

Flags are not supported. #327

Open suresh2291 opened 1 year ago

suresh2291 commented 1 year ago

The country flags are not showing, instead of taking the flag image, its taking string. for example, If i choose France, in the text area we are getting "FR" not the flag.

Most of the emojis are not supporting.

ealush commented 1 year ago

I think this is at your os level. Are you using native emojis or emoji images?

suresh2291 commented 1 year ago

Hi Evyatar, Please see my sample code which i am using? Pleasure to meet you. <EmojiPicker onEmojiClick={handleEmoji} emojiStyle="facebook" theme="auto" />

handleEmoji Function const handleEmoji = ({ emoji }) => { console.log(emoji) const ref = textRef.current; ref.focus(); const start = text.substring(0, ref.selectionStart); const end = text.substring(ref.selectionStart); const newText = start + emoji + end; setText(newText); setCursorPosition(start.length + emoji.length); };

I am using emojiStyle "facebook", but in the text area its picking up native because of that I am getting string name for flag. I am using Windows OS.

if I change the emojistyle to facebook, apple etc, i am getting this error GET https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/1f9d1-1f3ff-200d-2764-fe0f-200d-1f9d1-1f3fd.png 404 error for most of the emojis.

williank commented 1 year ago

Here for me too... Although not just with the Picker emoji but the entire application the flags no longer appear.

PrimeDominus commented 1 year ago

Same is happening for me when running the Live Demo https://codesandbox.io/s/emoji-picker-react-4-z2gkzp

ealush commented 1 year ago

Flags, as any native Emoji are rendered at the OS level, meaning that when displayed - it is the operating system (MacOS, Windows, Linux, Android, iOS).

When you pick "native", it means that you let the OS pick how to renderer these. Windows it notorious for not rendering flags, for example.

The "onEmojiClick" callback also contains the image to render, if you want to handle it normally. Alternatively, you can use the Emoji component provided by the picker.

CarolinaTC commented 2 months ago

Hello! I am facing this issue too. what do you mean with Alternatively, you can use the Emoji component provided by the picker.__?

How can I guarantee that sending flags will work in Windows?

I was using version 4.7.1, can upgrading solve this issue?

thanks a lot for your help! have a nice day