react / react/react-native

[Android] Content jump in multiline `TextInput` when adding/removing line of text due to delayed layout update happening after content update

未关闭
#46,813 5 条评论 8 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: TextInput Issue: Author Provided Repro p: Software Mansion Partner Platform: Android
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

When adding a new line of text in multiline TextInput component (e.g. after pressing Enter), there's a slight delay between updating the content of the text and updating the height of the component (i.e. layout) on Android with New Architecture enabled, on both New and Old Architecture.

This causes a content jump (to the top and back to the bottom) visible for one or more frames.

Before adding newline (correct):
Screenshot 2024-10-03 at 16 45 31

After pressing "Enter" (incorrect frame):
Screenshot 2024-10-03 at 16 45 39

After one or more frames (correct):
Screenshot 2024-10-03 at 16 45 47

Video recording:

https://github.com/user-attachments/assets/c0e529dc-58f6-45f3-a782-e8d65eb23ab4

Note that there's also an issue with measuring the height of the last line of the text if it's empty but it's already fixed by @j-piasecki in https://github.com/facebook/react-native/pull/42331 as well as by @NickGerleman in https://github.com/facebook/react-native/pull/46613 but the issue with content jump still persists.

Steps to reproduce
import {StyleSheet, View, TextInput} from 'react-native';

import React from 'react';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput multiline style={styles.input} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  input: {
    fontSize: 20,
    borderWidth: 1,
    borderColor: 'black',
    width: 300,
    marginTop: 100,
    padding: 0,
  },
});
React Native Version

0.76.0-rc.3

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info
System:
  OS: macOS 15.0
  CPU: (12) arm64 Apple M3 Pro
  Memory: 99.83 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: ~/.nvm/versions/node/v18.19.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v18.19.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v18.19.0/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/tomekzaw/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /Users/tomekzaw/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0-alpha.2
    wanted: 15.0.0-alpha.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0-rc.3
    wanted: 0.76.0-rc.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
No crash or failure
Reproducer

https://github.com/tomekzaw/repro-new-arch-android-textinput

Screenshots and Videos

https://github.com/user-attachments/assets/18ac93c6-bf15-4cac-b689-760097d75ff7

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先在 Android 上运行链接的 repro-new-arch-android-textinput 项目,并复现按下 Enter 时多行 TextInput 跳动的问题。阅读 TextInput 和 Fabric Android 的布局路径,以及相关的 PR 42331 和 46613;完成的标准是添加或删除一行后,内容保持在预期位置,不会出现中间跳动。

由索引模型根据 Issue 内容生成。

评估

技术栈
android, react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。