Text get cut randomly / hides some words since upgrading to 0.81.1 (from 0.80.x)

[pierroo]

Description

I have just upgraded from 0.80.x to latest 0.81.1, and now some Text randomly cut out words, or line break them for no reason when they have more than enough space to fit etc

The same code that was working for years suddenly break Text basic component.
It doesn't happen on all android devices, only on some; for example on a samsung s23, one ui 7.0, android version 15. and not everywhere.
For example in a flatlist of text messages, using two emojis in a row will line break one; and on some devices even hide the second one entirely while leaving the space for it there.

it doesn't open only in flatlist, but it's easier to reproduce with it.

Steps to reproduce

use latest 0.81.1
display list of texts in a flatlist
some text get cut; some get line break for no reason.
using new arch (if that matters)
targeting android 36

React Native Version

0.81.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: Windows 11 10.0.26100
  CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
  Memory: 10.45 GB / 31.86 GB
Binaries:
  Node:
    version: 22.16.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-221.6008.13.2211.9514443
  Visual Studio:
    - 17.14.36301.6 (Visual Studio Community 2022)
Languages:
  Java: 11.0.18
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.1
    wanted: ^0.81.1
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Yes

Stacktrace or Logs

no crash

MANDATORY Reproducer

none

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[JatinDream11]

@pierroo Can u kindly share a valid repro using Reproducer Template to look into it further.

[pierroo]

I wish I could @JatinDream11 , but it's nothing fancy at all: literally just a textinput in a view will trigger it.

Although, like most painful RN bugs: it doesn't happen on all devices.
I am unable to replicate it myself, but 50% of my beta testers face it since I upgraded to 0.81

Here are some examples so you can visualize better:

it's supposed to say "Jade from Philippines", but an entire word is cut for no reason. on this one, sending two emojis on a row, same line; have it line break in spite of it supposed to take the width and be side by side (was working since forever until 0.81) this one, cuts the emoji in half

and last, it should be 3 emojis in a row side by side but it line breaks for no reason after the second.

Could it be related to this old iOS issue?
#53450

I don't know; but it truly is a show stopper, and for it to not happen on all android devices makes it impossible to debug.

[sarath40158]

@pierroo

Check its only effecting if you have long tailed letters like ( p, q , g, y)

https://developer.android.com/about/versions/15/behavior-changes-15
Is it related to android font changes

[pierroo]

Great article @sarath40158 , seems to be related indeed.

Here are my findings:

using style={{ paddingVertical: 2 }} for example, will fit my whole text as expected without cutting it.
BUT it will line break when it should all fit on the same line.

Same if I give it a specific lineHeight high enough: it displays without cutting, but it line breaks and kill the design.

If I use "numberOfLines={1}" => all good!
BUT the issue is that most of the time if it's UGC I don't know how long will the text be, so it's unusable.

And obviously I can't add this numberOfLines in every single text component all over the app,
so I read online about this parameter:

<style name="AppTheme" parent="Theme.AppCompat.Light"> false </style>

But I'm not sure what it's worth.
And not sure how to make react native team look into it.

[sarath40158]

This is not a React Native issue — what worked for me

Install: react-native-edge-to-edge

---

EdgeToEdgeNavPadding.kt

package yourpackage.name // <==== change this

import android.app.Activity
import android.view.View
import androidx.core.view.ViewCompat
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat

/**
 * Keeps status bar edge-to-edge, and applies bottom padding ONLY
 * when classic 3-button navigation is active.
 *
 * This is the “old” logic (simple + reliable on phones).
 */
object EdgeToEdgeNavPadding {

  fun apply(activity: Activity) {
    // Allow content behind system bars (transparent status bar)
    WindowCompat.setDecorFitsSystemWindows(activity.window, false)

    val decor: View = activity.window.decorView
    val content: View = activity.findViewById(android.R.id.content)

    ViewCompat.setOnApplyWindowInsetsListener(decor) { _, insets ->
      val navBottom   = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom
      val gestBottom  = insets.getInsets(WindowInsetsCompat.Type.systemGestures()).bottom

      // small dp floor to ignore tiny gesture pill areas
      val density = activity.resources.displayMetrics.density
      val minClassicPx = (36f * density + 0.5f).toInt()

      // classic 3-button if nav inset is ~as large as gestures AND big enough
      val nearOrLargerThanGest = navBottom >= (gestBottom * 0.9f)
      val bigEnough = navBottom >= minClassicPx

      val isThreeButton = nearOrLargerThanGest && bigEnough
      val padBottom = if (isThreeButton) navBottom else 0

      content.setPadding(content.paddingLeft, content.paddingTop, content.paddingRight, padBottom)

      insets // don't consume; keep edge-to-edge at the top
    }

    // trigger an initial pass
    ViewCompat.requestApplyInsets(decor)
  }
}

---

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    EdgeToEdgeNavPadding.apply(this) // <==== call this line
}

---

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.EdgeToEdge">
        <!-- Transparent system bars -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">#000000</item>
        <!-- Other app theme customizations -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>

    <style name="Ecift.CropTheme" parent="Theme.EdgeToEdge">
        <item name="colorPrimary">#000000</item>
        <item name="colorAccent">#FF4081</item>

        <!-- Transparent system bars -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
</resources>

---