After upgrading the Android targetSdkVersion to 35, the TextInput text is no longer vertically centered when typing on Android 15.

[BS3385]

Description

I upgraded React Native from version 0.73.2 to 0.80.1 and also updated the targetSdkVersion to 35. After the upgrade, I noticed that when entering text in the TextInput component, the text is vertically shifted upwards, while the cursor remains vertically centered.

Here’s the style I was using:

style={{
  backgroundColor: '#eee',
  height: 40,
  paddingTop: 10,
  paddingBottom: 10,
  lineHeight: 20,
  fontSize: 16,
  includeFontPadding: true,
  textAlignVertical: 'center',
}}

The result looks like this:

However, if I change the style to:

style={{
  backgroundColor: '#eee',
  height: 40,
  lineHeight: 40,
  fontSize: 16,
}}

The result looks like this:

And if I remove the height:

style={{
  backgroundColor: '#eee',
  lineHeight: 40,
  fontSize: 16,
}}

The result looks like this:

Steps to reproduce

1、Updated the targetSdkVersion to 35
2、Write the following components

<TextInput
    keyboardType="numeric"
    placeholderTextColor="#999"
    style={{
        backgroundColor: '#eee',
        height: 40,
        paddingTop: 10,
        paddingBottom: 10,
        lineHeight: 20,
        fontSize: 16,
        includeFontPadding: true,
        textAlignVertical: 'center',
    }}
/>

3、Running on Android 15（My phone is Xiaomi 15）

React Native Version

0.80.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.4.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 135.30 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.0
    path: ~/.nvm/versions/node/v18.18.0/bin/node
  Yarn:
    version: 4.9.2
    path: ~/.nvm/versions/node/v18.18.0/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.0/bin/npm
  Watchman:
    version: 2024.08.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.0.0
    wanted: 19.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.1
    wanted: 0.80.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

none

MANDATORY Reproducer

https://snack.expo.dev/@bs3385/textinput

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[BS3385]

reproducer

https://snack.expo.dev/@bs3385/textinput

[cipolleschi]

Hi @BS3385 thanks for the issue.

Have you tried disabling the new architecture in your app/build.gradle file? Just to understand if this is a New Arch specific issue or if it was like that in the Legacy architecture as well.

Jumping from 0.73 to 0.80 is a big jump, so I'd also suggest you to go through the blogpost we published in https://reactnative.dev/blog to look for possible braking changes we announced there.

cc. @cortinico

[cipolleschi]

Also, the snack doesn't show the bug:

[cortinico]

@BS3385 In order to triage this further we would need to isolate when is this happening.

Specifically, in a sample project on 0.80 please try and verify if:
a. It happens on old/new arch?
b. It happens on target SDK 34/35/36?

And please report back.

[NickGerleman]

Depending on locale, https://developer.android.com/about/versions/15/behavior-changes-15#elegant-text-height is an "interesting" change that I have no idea if we are supporting correctly (I would hazard a guess that we may not, until maybe some very recent changes).

@BS3385 what locale is your phone?

[BS3385]

Also, the snack doesn't show the bug:

I’m using the new architecture.

Are you testing with the Android 15 preview demo? I’ve noticed issues when previewing with that demo.

Also, based on my debugging, the problem seems to be related to upgrading the targetSdkVersion to 35. I tested this with React Native 0.73.2 as well, and once targetSdkVersion was set to 35, the issue appeared on Android 15 too. However, it displays correctly on versions prior to Android 15. @cortinico @cipolleschi