Question 54614 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to render emoji with emoji hexadecimal code – Javascript

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    when I pass the value of the direct emoji if it works icon="&#x1F680;" , 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


  2. 0

    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>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search