[Android] Content jump in multiline `TextInput` when adding/removing line of text due to delayed layout update happening after content update
还没有人认领这个 Issue。
- 主要语言
- 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):
After pressing "Enter" (incorrect frame):
After one or more frames (correct):
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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 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