[Android] Wrong TextInput height when lineHeight is set

[j-piasecki]

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;

[fabOnReact]

I proposed a solution in my comment Expensify/App#14799 (comment)

The correct solution for this issue was found by Bee Margarita Expensify/App#14799 (comment)

[roryabraham]

@fabriziobertoglio1987 Maybe it would be helpful for the reviewers of this PR if you provided some context on what you're trying to communicate rather than just dropping the link?

[fabOnReact]

Thanks @roryabraham. I updated my comment.

[aabbdev]

I have the same problem but without typing anything, its android specific: the height of the text input on android is too high like 2px on top and 2px at the bottom, the inspector say that there is no padding/margin on it

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[j-piasecki]

It seems to have been fixed by 0.74.0-rc.0

Screen.Recording.2024-02-27.at.09.44.05.mov