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

Abierto
  • ¿Algo no está bien?
#59,163 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
android, cpp, java, kotlin, react-native
Área
frontend, mobile

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
C++
Estrellas
127k
Forks
25.5k
Merge medio
3 d 18 h
PR fusionados (30 d)
188

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/react-native

Todos los issues de react/react-native

Issues similares

Más issues de C++

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.