[Android] Wrong TextInput height when lineHeight is set #35951
Description
Description
When setting the lineHeight style on TextInput, the height of the component is wrong after typing in the first letter. Typing after the first letter causes the height to get back to the correct one, however, deleting the content causes the height to reset as if the lineHeight is not set.
I believe the problem comes from spannable caching, since removing these lines "solves" the problem. It's possible that the order the methods are called in is to blame. It looks like AndroidTextInputShadowNode::measureContent is called before AndroidTextInputShadowNode::layout, but the second method may update the state of the component, which effectively makes those methods work with different versions of attributed strings - the cachedAttributedStringId property is set when measureContent is called, but the cached spannable gets updated afterwards.
Screen.Recording.2023-01-24.at.15.45.49.mov
Version
0.71.1
Output of npx react-native info
System:
OS: macOS 12.6
CPU: (8) arm64 Apple M1 Pro
Memory: 94.56 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Watchman: 2023.01.16.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
Android SDK:
API Levels: 24, 26, 28, 29, 30, 31, 32, 33
Build Tools: 26.0.3, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
System Images: android-28 | Google ARM64-V8a Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
Languages:
Java: 11.0.14 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.1 => 0.71.1
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps to reproduce
Run the code below and type in one letter into the text input to see it move up, and type another to see the text input sized correctly.
Snack, code example, screenshot, or link to a repository
import React, {useState} from 'react';
import {View, TextInput} from 'react-native';
const App = () => {
const [text, setText] = useState('');
return (
<View style={{flex: 1, backgroundColor: 'yellow', paddingTop: 100}}>
<TextInput
style={{
padding: 8,
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'white',
margin: 50,
lineHeight: 40,
}}
placeholder="Type here"
onChangeText={text => {
setText(text);
}}
value={text}
/>
</View>
);
};
export default App;