[Android][Fabric] Text re-wraps on every frame while LayoutAnimation changes its width (enableLayoutAnimationsOnAndroid)

Offen
  • Stimmt etwas nicht?
#59,163 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 2 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
android, cpp, java, kotlin, react-native
Bereich
frontend, mobile

Rechercherichtung

Start by tracing the Android Fabric layout path named in the report: SurfaceMountingManager.updateLayout, ReactTextView measurement, and the old-architecture NativeViewHierarchyManager.updateLayout/PositionAndSizeAnimation behavior. Run the linked reproducer on Android with enableLayoutAnimationsOnAndroid enabled and compare widening and narrowing with the old architecture. Done means text line breaks stay stable during the animation without breaking final sizing or height changes.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

p: Software Mansion Partner
Description

With enableLayoutAnimationsOnAndroid turned on, a LayoutAnimation that changes the width of a <Text> on Android with the New Architecture makes the text re-wrap on every frame. While the box widens, the text goes from 7 lines to 6, 5, 4 and 3, and words keep moving between lines. Narrowing does the same in reverse.

With the old architecture (tested on 0.81.6 with newArchEnabled=false), the same animation keeps the final line breaks: the text is laid out once at its final width and is uncovered as the view grows.

Frames from the widen animation, top to bottom: New Architecture on 0.88.0 with the flag on (left) and old architecture on 0.81.6 (right):

Image

Height changes (for example numberOfLines={2} → no limit) aren't affected. The text only depends on its width there, so it unrolls correctly. The same reflow also happens on main.

I know LayoutAnimation is still off by default on Android with the New Architecture (#52921). I'm reporting this so it's known before the flag is enabled. The iOS counterpart of this problem (line breaks changing while a Text is resized) is #59161, with a fix in #59162.

Likely cause

Fabric's LayoutAnimation mounts an interpolated frame on every animation frame, and SurfaceMountingManager.updateLayout calls view.measure(EXACTLY width, EXACTLY height) before view.layout(...) for each of them. ReactTextView is an AppCompatTextView, and TextView rebuilds its text Layout for the new width in onMeasure, so the line breaks follow the intermediate width.

The old architecture measured the view once with its final size in NativeViewHierarchyManager.updateLayout and then animated only view.layout(...) in PositionAndSizeAnimation, so TextView kept the layout it had built for the final width.

Steps to reproduce
  1. Clone the reproducer: cd ReproducerApp && yarn install && yarn android. Its MainApplication.kt enables enableLayoutAnimationsOnAndroid.
  2. Tap Widen.
  3. Watch the text during the 3-second animation: the line breaks change on every frame. Tap Narrow for the reverse.

The repro:

const TEXT = Array.from({ length: 14 }, (_, i) => `word${i + 1}`).join(' ');

export default function App() {
  const [wide, setWide] = useState(false);

  const toggle = () => {
    LayoutAnimation.configureNext({
      duration: 3000,
      update: { type: LayoutAnimation.Types.linear },
    });
    setWide(value => !value);
  };

  return (
    <View style={{ flex: 1, paddingTop: 100, paddingHorizontal: 20 }}>
      <Pressable onPress={toggle}>
        <Text>{wide ? 'Narrow' : 'Widen'}</Text>
      </Pressable>
      <Text style={{ fontSize: 22, backgroundColor: 'gold', width: wide ? '100%' : '50%' }}>
        {TEXT}
      </Text>
    </View>
  );
}

// MainApplication.onCreate(), after loadReactNative(this)
ReactNativeFeatureFlags.dangerouslyForceOverride(
  object : ReactNativeFeatureFlagsProvider by ReactNativeFeatureFlagsOverrides_RNOSS_Stable_Android() {
    override fun enableLayoutAnimationsOnAndroid(): Boolean = true
  }
)
React Native Version

0.88.0

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info
System:
  OS: macOS 27.0.1
  CPU: (15) arm64 Apple M5 Pro
  Memory: 58.41 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.19.0
    path: /Users/tomekzaw/.nvm/versions/node/v24.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.17.0
    path: /Users/tomekzaw/.nvm/versions/node/v24.19.0/bin/npm
  Watchman:
    version: 2026.10.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.17.0
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 27.0
      - iOS 27.1
      - macOS 27.0
      - tvOS 27.0
      - visionOS 27.0
      - watchOS 27.0
  Android SDK:
    API Levels:
      - "36"
      - "36"
      - "37"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-37.0 | 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2026.1 AI-261.26222.65.2614.16204760
  Xcode:
    version: 27.1/27A9275
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.20.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/tomekzaw/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: 20.2.0
  react:
    installed: 19.3.0
    wanted: 19.3.0
  react-native:
    installed: 0.88.0
    wanted: 0.88.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
N/A, visual issue only (no errors or warnings are logged).
MANDATORY Reproducer

https://github.com/tomekzaw/repro-layout-animations-android

Screenshots and Videos

Tested on the Pixel 10 Pro emulator (API 37). The old-architecture comparison used the same emulator.

Widen, then narrow, on 0.88.0 with the New Architecture and enableLayoutAnimationsOnAndroid on:

https://github.com/user-attachments/assets/e8432d0b-7b11-404b-be1c-ec7f62d9190e

Vorherrschende Sprache
C++
Sterne
127k
Forks
25.5k
Ø Merge
3 T. 18 Std.
Gemergte PRs (30 T.)
188

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react/react-native

Alle Issues in react/react-native

Ähnliche Issues

Weitere Issues zu C++

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.