Fix Android 15 text clipping with safe visual bounds measurement

[TorinAsakura]

Summary:

Fixes #56402.
Fixes #57110.
Close torin-asakura/workspace#116.
Close torin-asakura/workspace#117.

Android 15+ can clip text whose visual glyph bounds are wider than its advance-based desired width. The previous visual-bounds path fixed that by enabling setUseBoundsForWidth(true) on the final StaticLayout, but that path also changed final layout behavior and was later removed after multiline and wrapping regressions.

This keeps the final layout on the existing advance-based behavior, but uses an Android 15+ visual-bounds probe only when React Native needs to compute the desired width for AT_MOST or UNDEFINED measure modes. EXACTLY continues to use the width from Yoga directly. The desired width is never allowed to shrink below the old advance-based width.

Changelog:

[ANDROID] [FIXED] - Prevent Android 15+ text clipping without changing final StaticLayout bounds mode

Test Plan:

./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests com.facebook.react.views.text.TextLayoutManagerAbsoluteLayoutWithFractionalPixelTest -Preact.internal.useHermesStable=true

BUILD SUCCESSFUL

./gradlew :packages:react-native:ReactAndroid:ktfmtCheck -Preact.internal.useHermesStable=true

BUILD SUCCESSFUL

RNTester visual repro on a Pixel 7 API 35 emulator. Both runs used the same fixture and NotoSans font assets. The baseline is main at d6ba88e; the after screenshot uses the same fixture with this PR's fix applied locally.

Fixture:

Details

const reporterFontsData = [
  {name: 'extraLight', suffix: '200ExtraLight', weight: '200'},
  {name: 'extraLightItalic', suffix: '200ExtraLight_Italic', weight: '200'},
  {name: 'light', suffix: '300Light', weight: '300'},
  {name: 'lightItalic', suffix: '300Light_Italic', weight: '300'},
  {name: 'regular', suffix: '400Regular', weight: '400'},
  {name: 'regularItalic', suffix: '400Regular_Italic', weight: '400'},
  {name: 'medium', suffix: '500Medium', weight: '500'},
  {name: 'mediumItalic', suffix: '500Medium_Italic', weight: '500'},
  {name: 'semiBold', suffix: '600SemiBold', weight: '600'},
  {name: 'semiBoldItalic', suffix: '600SemiBold_Italic', weight: '600'},
  {name: 'bold', suffix: '700Bold', weight: '700'},
  {name: 'boldItalic', suffix: '700Bold_Italic', weight: '700'},
  {name: 'extraBold', suffix: '800ExtraBold', weight: '800'},
];

const reporterLocalFont = (family: string = 'NotoSans') => {
  const fonts = {};

  for (const {suffix, name} of reporterFontsData) {
    const localSuffix = suffix.replace(/^\d+/, '').replace('_Italic', 'Italic');
    fonts[name] = {
      fontFamily: `${family}-${localSuffix}`,
      fontWeight: undefined,
      ...(suffix.includes('_Italic') && {fontStyle: 'italic'}),
    };
  }

  return fonts;
};

const reporterNotoSansFonts = reporterLocalFont('NotoSans');
const reporterFontSizes = [10, 12, 14, 16, 18, 20, 22, 24];

const reporterReproStyles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'white',
    flex: 1,
  },
  container: {
    gap: 8,
    padding: 16,
  },
  section: {
    gap: 8,
  },
  subtitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 4,
  },
  body: {
    color: '#444',
    fontSize: 14,
  },
  fontTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  fontSubtitle: {
    color: '#666',
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
  },
});

{
  title: 'Android #56402 reporter parity',
  name: 'androidTextClippingRepro',
  render: function (): React.Node {
    return (
      <SafeAreaView style={reporterReproStyles.safeArea}>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <View style={reporterReproStyles.container}>
            <View style={reporterReproStyles.section}>
              <Text style={reporterReproStyles.subtitle}>Font Showcase</Text>
              <Text style={reporterReproStyles.body}>
                Here are all the custom fonts configured in this app with
                different sizes (10-24px):
              </Text>
              <Text style={reporterReproStyles.fontTitle}>
                NotoSans Local Fonts:
              </Text>
              {reporterFontsData.map(fontData => (
                <React.Fragment key={fontData.name}>
                  <Text style={reporterReproStyles.fontSubtitle}>
                    {fontData.suffix
                      .replace(/^\d+/, '')
                      .replace('_Italic', '')}{' '}
                    ({fontData.weight})
                    {fontData.suffix.includes('_Italic') ? ' Italic' : ''}:
                  </Text>
                  <ScrollView
                    horizontal
                    style={{flexDirection: 'row', marginBottom: 16}}>
                    {reporterFontSizes.map(size => (
                      <View
                        key={`${fontData.name}-${size}`}
                        style={{
                          maxWidth: '100%',
                          minWidth: 48,
                          paddingHorizontal: 8,
                        }}>
                        <Text
                          style={{
                            ...reporterNotoSansFonts[fontData.name],
                            fontSize: size,
                            lineHeight: size * 1.75,
                          }}>
                          Prison Break
                        </Text>
                      </View>
                    ))}
                  </ScrollView>
                </React.Fragment>
              ))}
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  },
}

Visual evidence:

Before

After

[joaquinvaz]

This should be merged ASAP!

[Yokool]

I don't have enough experience to speak about whether the code itself is correct

but I tested out the code by patching it into my application and it fixes both the issue where a part of the text is cut off and replaced by empty space and the issue where the text is visible but it's split into 2 lines even though it shouldn't be and there is enough space for it 👍

[linhvovan29546]

@chrfalch Can anyone please take a look at this PR? Thanks

[j-piasecki]

Could you post before & after screenshots along with the code you used to test?

Heave you checked if this is still needed as of React Native 0.87?

[j-piasecki]

What about boring layouts?

[TorinAsakura]

642c064

[j-piasecki]

After the order swap (layoutWidth being declared before BoringLayout.make early return), the BoringLayout fast path is no longer fast. It requires a StaticLayout build (buildLayout inside getDesiredWidth) in addition to the BoringLayout.

[TorinAsakura]

After the order swap (layoutWidth being declared before BoringLayout.make early return), the BoringLayout fast path is no longer fast. It requires a StaticLayout build (buildLayout inside getDesiredWidth) in addition to the BoringLayout.

I think we can avoid the extra StaticLayout here. BoringLayout.isBoring already gives us both the advance width and the drawing bounds from the same TextLine.metrics call, and TextView uses those bounds directly when it measures boring text. So for this path we could calculate the width from BoringLayout.Metrics and keep the fast path, while leaving non-boring text on the current probe path.

The catch is that [this code is still compiled internally against SDK 34](

react-native/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/util/AndroidVersion.kt

Lines 16 to 28 in 642c064

	/**
	* This is the version code for Android 15 (SDK Level 35). Internally at Meta this code is also
	* compiled against SDK 34, so we need to retain this constant instead of using
	* [Build.VERSION_CODES.VANILLA_ICE_CREAM] directly.
	*/
	internal const val VERSION_CODE_VANILLA_ICE_CREAM: Int = 35
	/**
	* This is the version code for Android 16 (SDK Level 36). Internally at Meta this code is also
	* compiled against SDK 34, so we need to retain this constant instead of using
	* [Build.VERSION_CODES.BAKLAVA] directly.
	*/
	internal const val VERSION_CODE_BAKLAVA: Int = 36

), while Metrics.getDrawingBoundingBox only exists since API 35. Is that still true on your side? If it is, a direct call won’t compile there even with a runtime check. I guess we’d either need to look up this one method the same way setUseBoundsForWidth is already looked up, or wait until that internal target can compile against 35. Which way would work better for you?

The current boring test would need changing too. Right now it sets Metrics.width to 1 and checks that the probe wins, so it basically locks us into the extra layout. I’d replace it with cases around the actual bounds, the Yoga modes, and the API 34 fallback.

There’s also the left overhang. Public BoringLayout.make doesn’t enable shiftDrawingOffsetForStartOverhang, so using the bounds would reserve enough width and fix the right edge, but it wouldn’t move a glyph that starts left of zero. I’d leave that out of this change unless you expect this PR to match TextView on that side too.

If that direction makes sense, I’ll rework the patch and tests around it.

[TorinAsakura]

Could you post before & after screenshots along with the code you used to test?

Heave you checked if this is still needed as of React Native 0.87?

I checked the React Native 0.87.1 and i see TextLayoutManager still use the unconstrained width through Layout.getDesiredWidth, without accounting for Android 15

I also reproduced the issue on the latest main on Android 15/API 35 and the NotoSans matrix from the original reproducer. The baseline clips or unnecessarily wraps the smaller italic cells, while the same fixture with this PR applied keeps “Prison Break” on one line.

Before:

Details

After:

Details