title: How to display Emoji in Jetpack Compose?
body: <p>Unable to display emojis properly using Jetpack Compose.</p>
  <p><strong>Code</strong></p>
  <pre><code>    Text(
          text = data.emoji.character,
          textAlign = TextAlign.Center,
          fontSize = 28.sp,
      )
  </code></pre>
  <img src="https://i.stack.imgur.com/s10Lf.png" width="300" alt="Jetpack Compose text" /> 
  <p>When using Compose <code>Text</code>, I am facing compatibility issues.<br />
  Tofu and multiple emojis appear as explained <a href="https://www.youtube.com/watch?v=QVj2tQm8r58&amp;ab_channel=AndroidDevelopers" rel="nofollow noreferrer">here</a>.</p>
  <img src="https://i.stack.imgur.com/82Oba.png" width="300" />
  <p>To fix this, I tried using <code>AppCompatTextView</code> in <code>AndroidView</code>.</p>
  <p><strong>Code</strong></p>
  <pre><code>    AndroidView(
          factory = { context -&gt;
              AppCompatTextView(context).apply {
                  text = data.emoji.character
                  textSize = 28F
                  textAlignment = View.TEXT_ALIGNMENT_CENTER
              }
          },
      )
  </code></pre>
  <p>It displays the emojis without any compatibility issue, but the emojis are faded out.</p>
  <img src="https://i.stack.imgur.com/8DJWJ.png" width="300" />