How to render emoji with emoji hexadecimal code

Question

This is the Tag component

type Props = tag | tagIcon;

const Tag = ({ type, label, isSelected, onClick, ...icon }: Props) => {
  const emoji = Object.values(icon)[0];

  return (
      <View
        className={`rounded-full px-[10px] py-[2px] flex flex-row items-center self-start`}
      >
        <Text
          className={`text-base`}
        >
          {label}
        </Text>
        {emoji !== undefined && <Text className="ml-1">{emoji}</Text>}
      </View>
  );
};

"interest.item.emoji" is the hexadecimal code of the emoji and when rendering only the code is shown

<FlatList
        data={selectedInterest}
        ItemSeparatorComponent={() => <Gap direction="horizontal" size={20} />}
        renderItem={(interest) => (
          <Tag
            type="selectedIcon"
            label={interest.item.name}
            icon={interest.item.emoji}
            key={uuid.v4().toString()}
            isSelected
            onClick={() => handleSelectInterest(interest.item)}
          />
        )}
      />

Only the hexadecimal code of the emoji is shown

enter image description here

Do you want to paint the tag or just put something like this — Yedidya Rashi, Mar 18 '23 at 12:32
I want to paint the label as shown in the image but the emoji is not shown, instead when I directly pass the value icon="❤" to the Tag label if it shows the emoji — Bryan Romero, Mar 18 '23 at 22:43
This look like an HTML entity, so you'll have to render the component without escaping the HTML entity. Or convert the entity to its raw bytes. — Marco, Mar 18 '23 at 22:53
Does this answer your question? [Unescape HTML entities in JavaScript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — Marco, Mar 18 '23 at 22:58
`String.fromCodePoint(parseInt("❤".slice(2, -1), 10))` should do the trick. — Marco, Mar 18 '23 at 23:23
I tried it inside the Tag component using ```String.fromCodePoint(parseInt(emoji.slice(2, -1), 10))```, but it didn't work gave many errors — Bryan Romero, Mar 18 '23 at 23:49

score 0 · Answer 1 · answered Mar 18 '23 at 23:47

when I pass the value of the direct emoji if it works icon="🚀" , but in all it would be the same emoji as in the image

<FlatList
        data={selectedInterest}
        horizontal
        ItemSeparatorComponent={() => <Gap direction="horizontal" size={20} />}
        renderItem={(interest) => (
          <Tag
            type="selectedIcon"
            label={interest.item.name}
            icon="&#x1F680;"
            key={uuid.v4().toString()}
            isSelected
            onClick={() => handleSelectInterest(interest.item)}
          />
        )}
        className="py-3"
      />

enter image description here

score 0 · Answer 2 · answered Mar 19 '23 at 02:07

I found the solution with a npm package

npm install html-entities

import { decode } from "html-entities";

type Props = tag | tagIcon;

const Tag = ({ type, label, isSelected, onClick, ...icon }: Props) => {
  const emoji = Object.values(icon)[0];

  return (
      <View
        className={`rounded-full px-[10px] py-[2px] flex flex-row items-center self-start`}
      >
        <Text
          className={`text-base`}
        >
          {label}
        </Text>
        {emoji !== undefined && <Text className="ml-1">{decode(emoji)}</Text>}
      </View>
  );
};

How to render emoji with emoji hexadecimal code

2 Answers2