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

Đang mở
  • Có gì không ổn?
#59,163 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
android, cpp, java, kotlin, react-native
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
C++
Star
127k
Fork
25.5k
Merge trung bình
3 ngày 18 giờ
Pull request đã merge (30 ngày)
188

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/react-native

Tất cả issue của react/react-native

Issue tương tự

Thêm issue về C++

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.