Add lineBreak and wordBreak props to Text on Android (#59002)

Summary:
Android 13 (API 33) added [`LineBreakConfig`](https://developer.android.com/reference/android/graphics/text/LineBreakConfig), which controls two things CJK text needs and React Native cannot reach today:

- **Line-break strictness** — CSS `line-break`. Strict kinsoku keeps characters such as small kana (`ッ`, `ャ`) and `ー` off the start of a line.
- **Phrase-based breaking** — CSS `word-break: auto-phrase`. Japanese breaks at phrase (文節) boundaries instead of between any two characters, which reads much better in short lines such as buttons and headings.

This cannot be done from a library. React Native builds the `StaticLayout` that both measures text for Yoga and is drawn, inside `TextLayoutManager`. A native module can only change the drawn `TextView`, which then disagrees with the measured height (clipped or extra lines). So the setting has to go through React Native's own text pipeline.

This PR adds two `Text` props named after the CSS properties, documented as Android-only for now:

```ts
lineBreak?: 'auto' | 'loose' | 'normal' | 'strict'   // CSS line-break
wordBreak?: 'normal' | 'auto-phrase'                  // CSS word-break
```

CSS values with no Android equivalent (`anywhere`, `keep-all`, `break-all`) are left out for now.

- **JS / types:** `TextProps`, `TextNativeComponent` view config, `Text.d.ts`, regenerated `ReactNativeApi.d.ts`.
- **C++:** `LineBreak` / `WordBreak` enums, conversions, `ParagraphAttributes` fields (equality, hash, debug props), `BaseParagraphProps` parsing, Android props diffing, and two new paragraph MapBuffer keys. C++ API snapshots regenerated.
- **Android, measurement:** `TextLayoutManager` applies the config to the `StaticLayout.Builder` on API 33+.
- **Android, drawing:** `ReactTextViewManager` `ReactProp` setters apply the same values to `ReactTextView`, so drawing matches measurement; recycled views reset them.

**Behavior is unchanged unless the props are set.** With the defaults (`'auto'` / `'normal'`) no `LineBreakConfig` is set at all, and below API 33 the props are ignored. iOS has no equivalent API, so this is Android-only for now. `TextInput` is intentionally left out to keep the change reviewable.

**`'auto-phrase'` depends on locale.** Per the [Android docs](https://developer.android.com/reference/android/graphics/text/LineBreakConfig#LINE_BREAK_WORD_STYLE_PHRASE), it has no effect in a locale without phrase-based breaking. Android `Text` is laid out in the device locale, so in practice it takes effect only when that locale supports it (e.g. Japanese). The prop docs say so.

Naming follows review feedback: CSS names and values rather than `lineBreakStrategyAndroid`, since `lineBreakStrategyIOS` and `textBreakStrategy` control different things.

Motivation and design notes: iray-tno/hozo#813

## Changelog:

[ANDROID] [ADDED] - Add `lineBreak` and `wordBreak` props to `Text` (CSS `line-break` / `word-break`) for strict/loose line breaking and phrase-based breaking on Android 13+

Pull Request resolved: #59002

Test Plan:
Ran locally:

- `yarn flow-check` — 0 errors
- `yarn build-types` then `yarn test-generated-typescript` — passes
- `yarn test` — 246 suites, 6154 tests passed
- `yarn format-check-{javascript,cpp,kotlin,java}` — clean
- ESLint on the changed JS files — clean
- `yarn cxx-api-validate` (Doxygen 1.16.1, as in CI) — all 12 snapshots match

Added:

- C++ unit tests in `ParagraphAttributesTest.cpp` (equality/hash include the new fields, defaults are `Auto` / `Normal`, `toString` values match the JS prop values).
- Updated the existing Robolectric tests that call `TextLayoutManager` internals for the new parameters. They pass the default values only, so they cover the plumbing, not the effect of `strict` / `auto-phrase`.
- RNTester: **Text → Line break (lineBreak, wordBreak)** shows the same Japanese paragraph under each value at a fixed width, with a background so any measurement/drawing mismatch is visible.

**Not run locally:** native compilation (Kotlin/Java/C++), the C++ and Robolectric unit tests, and an on-device check. The environment had no Android SDK and Gradle could not resolve its plugins. Relying on CI for the native build and tests.

Still to verify on device, with the RNTester example:

- [ ] API 33+, Japanese device locale: `lineBreak` (`strict` / `loose`) and `wordBreak="auto-phrase"` change the break positions
- [ ] Measured height matches the drawn lines for each value (no clipped or blank lines)
- [ ] Removing the prop returns to the default layout
- [ ] A recycled `Text` does not keep a previous value
- [ ] Non-Japanese device locale: `auto-phrase` has no effect, and nothing breaks
- [ ] API 31/32: the props are ignored

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed By: andrewdacenko

Differential Revision: D124966798

Pulled By: javache

fbshipit-source-id: 5c66d1200b4b7af31adf3df5cc111f47996fec7f

Author: iray-tno

packages/react-native/Libraries/Text/TextNativeComponent.js

@@ -47,6 +47,8 @@ const textViewConfig = {
     onTextLayout: true,
     dataDetectorType: true,
     android_hyphenationFrequency: true,
+    lineBreak: true,
+    wordBreak: true,
     lineBreakStrategyIOS: true,
   },
   directEventTypes: {

packages/react-native/Libraries/Text/TextProps.js

@@ -149,6 +149,31 @@ type TextBaseProps = Readonly<{
    */
   android_hyphenationFrequency?: ?('normal' | 'none' | 'full'),
 
+  /**
+   * Sets the strictness of the line-breaking rules, such as which characters
+   * may start or end a line in Chinese and Japanese text (kinsoku), as CSS
+   * `line-break`. Currently Android only, and ignored below Android 13 (API
+   * level 33).
+   *
+   * @default `'auto'`
+   * @platform android
+   */
+  lineBreak?: ?('auto' | 'loose' | 'normal' | 'strict'),
+
+  /**
+   * Sets word-based line breaking, as CSS `word-break`. `'auto-phrase'` breaks
+   * Japanese text at phrase boundaries instead of between any two characters.
+   * Currently Android only, and ignored below Android 13 (API level 33).
+   *
+   * Support depends on the locale, and text is laid out in the device locale:
+   * where that locale has no phrase-based breaking, `'auto-phrase'` has no
+   * effect.
+   *
+   * @default `'normal'`
+   * @platform android
+   */
+  wordBreak?: ?('normal' | 'auto-phrase'),
+
   children?: ?React.Node,
 
   /**

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -6042,6 +6042,8 @@ public class com/facebook/react/views/text/ReactTextView : androidx/appcompat/wi
 	public fun setHyphenationFrequency (I)V
 	public fun setIncludeFontPadding (Z)V
 	public fun setLetterSpacing (F)V
+	public fun setLineBreakStyle (I)V
+	public fun setLineBreakWordStyle (I)V
 	public fun setLinkifyMask (I)V
 	public fun setMinimumFontScale (F)V
 	public fun setMinimumFontSize (F)V
@@ -6088,6 +6090,7 @@ public class com/facebook/react/views/text/ReactTextViewManager : com/facebook/r
 	public final fun setFontSize (Lcom/facebook/react/views/text/ReactTextView;F)V
 	public final fun setIncludeFontPadding (Lcom/facebook/react/views/text/ReactTextView;Z)V
 	public final fun setLetterSpacing (Lcom/facebook/react/views/text/ReactTextView;F)V
+	public final fun setLineBreak (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
 	public final fun setNumberOfLines (Lcom/facebook/react/views/text/ReactTextView;I)V
 	public final fun setOverflow (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
 	public synthetic fun setPadding (Landroid/view/View;IIII)V
@@ -6096,6 +6099,7 @@ public class com/facebook/react/views/text/ReactTextViewManager : com/facebook/r
 	public final fun setSelectable (Lcom/facebook/react/views/text/ReactTextView;Z)V
 	public final fun setSelectionColor (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/Integer;)V
 	public final fun setTextAlignVertical (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
+	public final fun setWordBreak (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/String;)V
 	public synthetic fun updateExtraData (Landroid/view/View;Ljava/lang/Object;)V
 	public fun updateExtraData (Lcom/facebook/react/views/text/ReactTextView;Ljava/lang/Object;)V
 	public synthetic fun updateState (Landroid/view/View;Lcom/facebook/react/uimanager/ReactStylesDiffMap;Lcom/facebook/react/uimanager/StateWrapper;)Ljava/lang/Object;

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

@@ -7,9 +7,11 @@
 
 package com.facebook.react.views.text;
 
+import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Canvas;
 import android.graphics.Rect;
+import android.graphics.text.LineBreakConfig;
 import android.os.Build;
 import android.text.Layout;
 import android.text.Spannable;
@@ -26,6 +28,7 @@
 import android.view.ViewGroup;
 import android.widget.TextView;
 import androidx.annotation.Nullable;
+import androidx.annotation.RequiresApi;
 import androidx.appcompat.widget.AppCompatTextView;
 import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
@@ -199,6 +202,10 @@ private void initView() {
     setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_YES);
 
     setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE);
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+      setLineBreakStyle(LineBreakConfig.LINE_BREAK_STYLE_NONE);
+      setLineBreakWordStyle(LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE);
+    }
     updateView(); // call after changing ellipsizeLocation in particular
   }
 
@@ -251,6 +258,8 @@ protected void onDraw(Canvas canvas) {
             getIncludeFontPadding(),
             getBreakStrategy(),
             getHyphenationFrequency(),
+            getLineBreakStyleCompat(),
+            getLineBreakWordStyleCompat(),
             // always passing ALIGN_NORMAL here should be fine, since this method doesn't depend on
             // how exactly lines are aligned, just their width
             Layout.Alignment.ALIGN_NORMAL,
@@ -599,6 +608,34 @@ public void setHyphenationFrequency(int hyphenationFrequency) {
     mShouldAdjustSpannableFontSize = true;
   }
 
+  @Override
+  @RequiresApi(Build.VERSION_CODES.TIRAMISU)
+  public void setLineBreakStyle(int lineBreakStyle) {
+    super.setLineBreakStyle(lineBreakStyle);
+    mShouldAdjustSpannableFontSize = true;
+  }
+
+  @Override
+  @RequiresApi(Build.VERSION_CODES.TIRAMISU)
+  public void setLineBreakWordStyle(int lineBreakWordStyle) {
+    super.setLineBreakWordStyle(lineBreakWordStyle);
+    mShouldAdjustSpannableFontSize = true;
+  }
+
+  @SuppressLint("InlinedApi")
+  private int getLineBreakStyleCompat() {
+    return Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU
+        ? getLineBreakStyle()
+        : LineBreakConfig.LINE_BREAK_STYLE_NONE;
+  }
+
+  @SuppressLint("InlinedApi")
+  private int getLineBreakWordStyleCompat() {
+    return Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU
+        ? getLineBreakWordStyle()
+        : LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE;
+  }
+
   @Override
   public void setLetterSpacing(float letterSpacing) {
     if (Float.isNaN(letterSpacing)) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.kt

@@ -343,6 +343,20 @@ public constructor(
     }
   }
 
+  @ReactProp(name = "lineBreak")
+  public fun setLineBreak(view: ReactTextView, lineBreak: String?) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+      view.lineBreakStyle = TextAttributeProps.getLineBreakStyle(lineBreak)
+    }
+  }
+
+  @ReactProp(name = "wordBreak")
+  public fun setWordBreak(view: ReactTextView, wordBreak: String?) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+      view.lineBreakWordStyle = TextAttributeProps.getLineBreakWordStyle(wordBreak)
+    }
+  }
+
   @ReactPropGroup(
       names =
           [

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.kt

@@ -7,6 +7,8 @@
 
 package com.facebook.react.views.text
 
+import android.annotation.SuppressLint
+import android.graphics.text.LineBreakConfig
 import android.os.Build
 import android.text.Layout
 import android.text.TextUtils.TruncateAt
@@ -612,6 +614,36 @@ public class TextAttributeProps private constructor() {
           else -> Layout.HYPHENATION_FREQUENCY_FULL
         }
 
+    // The LineBreakConfig constants are inlined at compile time, so reading them is safe below API
+    // 33. Callers apply the result only on API 33+.
+    // Maps CSS `line-break` values to LineBreakConfig.LINE_BREAK_STYLE_*.
+    @SuppressLint("InlinedApi")
+    internal fun getLineBreakStyle(lineBreak: String?): Int =
+        when (lineBreak) {
+          null,
+          "auto" -> LineBreakConfig.LINE_BREAK_STYLE_NONE
+          "loose" -> LineBreakConfig.LINE_BREAK_STYLE_LOOSE
+          "normal" -> LineBreakConfig.LINE_BREAK_STYLE_NORMAL
+          "strict" -> LineBreakConfig.LINE_BREAK_STYLE_STRICT
+          else -> {
+            FLog.w(ReactConstants.TAG, "Invalid lineBreak: $lineBreak")
+            LineBreakConfig.LINE_BREAK_STYLE_NONE
+          }
+        }
+
+    // Maps CSS `word-break` values to LineBreakConfig.LINE_BREAK_WORD_STYLE_*.
+    @SuppressLint("InlinedApi")
+    internal fun getLineBreakWordStyle(wordBreak: String?): Int =
+        when (wordBreak) {
+          null,
+          "normal" -> LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE
+          "auto-phrase" -> LineBreakConfig.LINE_BREAK_WORD_STYLE_PHRASE
+          else -> {
+            FLog.w(ReactConstants.TAG, "Invalid wordBreak: $wordBreak")
+            LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE
+          }
+        }
+
     public fun getEllipsizeMode(ellipsizeMode: String?): TruncateAt? =
         when (ellipsizeMode) {
           "head" -> TruncateAt.START

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.kt

@@ -11,6 +11,7 @@ import android.content.res.AssetManager
 import android.graphics.Color
 import android.graphics.RectF
 import android.graphics.Typeface
+import android.graphics.text.LineBreakConfig
 import android.os.Build
 import android.text.BoringLayout
 import android.text.Layout
@@ -99,6 +100,8 @@ internal object TextLayoutManager {
   const val PA_KEY_TEXT_ALIGN_VERTICAL: Int = 8
   const val PA_KEY_TEXT_WIDTH_MODE: Int = 9
   const val PA_KEY_MINIMUM_FONT_SCALE: Int = 10
+  const val PA_KEY_LINE_BREAK: Int = 11
+  const val PA_KEY_WORD_BREAK: Int = 12
 
   private val TAG: String = TextLayoutManager::class.java.simpleName
 
@@ -850,6 +853,8 @@ internal object TextLayoutManager {
       includeFontPadding: Boolean,
       textBreakStrategy: Int,
       hyphenationFrequency: Int,
+      lineBreakStyle: Int,
+      lineBreakWordStyle: Int,
       alignment: Layout.Alignment,
       justificationMode: Int,
       ellipsizeMode: TextUtils.TruncateAt?,
@@ -905,6 +910,8 @@ internal object TextLayoutManager {
             includeFontPadding,
             textBreakStrategy,
             hyphenationFrequency,
+            lineBreakStyle,
+            lineBreakWordStyle,
             alignment,
             justificationMode,
             ellipsizeMode,
@@ -921,6 +928,8 @@ internal object TextLayoutManager {
           includeFontPadding,
           textBreakStrategy,
           hyphenationFrequency,
+          lineBreakStyle,
+          lineBreakWordStyle,
           alignment,
           justificationMode,
           ellipsizeMode,
@@ -941,6 +950,8 @@ internal object TextLayoutManager {
             includeFontPadding,
             textBreakStrategy,
             hyphenationFrequency,
+            lineBreakStyle,
+            lineBreakWordStyle,
             alignment,
             justificationMode,
             ellipsizeMode,
@@ -1000,6 +1011,8 @@ internal object TextLayoutManager {
       includeFontPadding: Boolean,
       textBreakStrategy: Int,
       hyphenationFrequency: Int,
+      lineBreakStyle: Int,
+      lineBreakWordStyle: Int,
       alignment: Layout.Alignment,
       justificationMode: Int,
       ellipsizeMode: TextUtils.TruncateAt?,
@@ -1028,6 +1041,21 @@ internal object TextLayoutManager {
       builder.setUseLineSpacingFromFallbacks(true)
     }
 
+    // Leave the platform default in place unless a style was requested, so text without these props
+    // lays out exactly as before.
+    if (
+        Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU &&
+            (lineBreakStyle != LineBreakConfig.LINE_BREAK_STYLE_NONE ||
+                lineBreakWordStyle != LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE)
+    ) {
+      builder.setLineBreakConfig(
+          LineBreakConfig.Builder()
+              .setLineBreakStyle(lineBreakStyle)
+              .setLineBreakWordStyle(lineBreakWordStyle)
+              .build()
+      )
+    }
+
     // Android shifts negative (left-side) start overhang itself. RTL start overhang is on the
     // right, so createLayout reserves that space in a second pass while preserving the EXACT Yoga
     // measurement returned to the caller.
@@ -1208,6 +1236,18 @@ internal object TextLayoutManager {
         TextAttributeProps.getHyphenationFrequency(
             paragraphAttributes.getString(PA_KEY_HYPHENATION_FREQUENCY),
         )
+    val lineBreakStyle =
+        TextAttributeProps.getLineBreakStyle(
+            if (paragraphAttributes.contains(PA_KEY_LINE_BREAK))
+                paragraphAttributes.getString(PA_KEY_LINE_BREAK)
+            else null,
+        )
+    val lineBreakWordStyle =
+        TextAttributeProps.getLineBreakWordStyle(
+            if (paragraphAttributes.contains(PA_KEY_WORD_BREAK))
+                paragraphAttributes.getString(PA_KEY_WORD_BREAK)
+            else null,
+        )
     val adjustFontSizeToFit =
         if (paragraphAttributes.contains(PA_KEY_ADJUST_FONT_SIZE_TO_FIT))
             paragraphAttributes.getBoolean(PA_KEY_ADJUST_FONT_SIZE_TO_FIT)
@@ -1250,6 +1290,8 @@ internal object TextLayoutManager {
           includeFontPadding,
           textBreakStrategy,
           hyphenationFrequency,
+          lineBreakStyle,
+          lineBreakWordStyle,
           alignment,
           justificationMode,
           paint,
@@ -1265,6 +1307,8 @@ internal object TextLayoutManager {
             includeFontPadding,
             textBreakStrategy,
             hyphenationFrequency,
+            lineBreakStyle,
+            lineBreakWordStyle,
             alignment,
             justificationMode,
             ellipsizeMode,
@@ -1288,6 +1332,8 @@ internal object TextLayoutManager {
                 includeFontPadding,
                 textBreakStrategy,
                 hyphenationFrequency,
+                lineBreakStyle,
+                lineBreakWordStyle,
                 alignment,
                 justificationMode,
                 ellipsizeMode,
@@ -1413,6 +1459,8 @@ internal object TextLayoutManager {
       includeFontPadding: Boolean,
       textBreakStrategy: Int,
       hyphenationFrequency: Int,
+      lineBreakStyle: Int,
+      lineBreakWordStyle: Int,
       alignment: Layout.Alignment,
       justificationMode: Int,
       paint: TextPaint,
@@ -1477,6 +1525,8 @@ internal object TextLayoutManager {
               includeFontPadding,
               textBreakStrategy,
               hyphenationFrequency,
+              lineBreakStyle,
+              lineBreakWordStyle,
               alignment,
               justificationMode,
               null,

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/PreparedLayoutTextViewAccessibilityTextTest.kt

@@ -8,6 +8,7 @@
 package com.facebook.react.views.text
 
 import android.annotation.SuppressLint
+import android.graphics.text.LineBreakConfig
 import android.text.Layout
 import android.text.SpannableString
 import android.text.TextPaint
@@ -80,6 +81,8 @@ class PreparedLayoutTextViewAccessibilityTextTest {
           /* includeFontPadding = */ false,
           /* textBreakStrategy = */ Layout.BREAK_STRATEGY_HIGH_QUALITY,
           /* hyphenationFrequency = */ Layout.HYPHENATION_FREQUENCY_NONE,
+          /* lineBreakStyle = */ LineBreakConfig.LINE_BREAK_STYLE_NONE,
+          /* lineBreakWordStyle = */ LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE,
           Layout.Alignment.ALIGN_NORMAL,
           /* justificationMode = */ 0,
           /* ellipsizeMode = */ TextUtils.TruncateAt.END,

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/TextLayoutManagerAbsoluteLayoutWithFractionalPixelTest.kt

@@ -8,6 +8,7 @@
 package com.facebook.react.views.text
 
 import android.annotation.SuppressLint
+import android.graphics.text.LineBreakConfig
 import android.text.BoringLayout
 import android.text.Layout
 import android.text.SpannableString
@@ -97,6 +98,8 @@ class TextLayoutManagerAbsoluteLayoutWithFractionalPixelTest {
           /* includeFontPadding = */ false,
           /* textBreakStrategy = */ Layout.BREAK_STRATEGY_HIGH_QUALITY,
           /* hyphenationFrequency = */ Layout.HYPHENATION_FREQUENCY_NONE,
+          /* lineBreakStyle = */ LineBreakConfig.LINE_BREAK_STYLE_NONE,
+          /* lineBreakWordStyle = */ LineBreakConfig.LINE_BREAK_WORD_STYLE_NONE,
           Layout.Alignment.ALIGN_NORMAL,
           /* justificationMode = */ 0,
           /* ellipsizeMode = */ null,