Issue with Top Padding in Text Component on Android (includeFontPadding : false not working🥹)

[HyoJeong1019]

Description

This issue only occurs on Android.

After creating a React Native project and writing the Text component and ThemedText component respectively in the index.js file, I noticed that there is padding at the top of the default Text component.

I found that setting the includeFontPadding property to false is suggested as a solution to a similar problem. However, this only removes the bottom padding, and the top padding remains unaffected.

Could you please provide assistance on how to remove the top padding of the Text component as well? Any guidance or suggestions would be greatly appreciated.

Steps to reproduce

1. Set up a React Native project.
2. Use the Text component in the index.js file.
3. Use the ThemedText component in the index.js file.
4. Compare the UI of the two different components.

React Native Version

0.73.9

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 13.6.2
  CPU: (8) arm64 Apple M1 Pro
  Memory: 96.94 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.7.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.03.25.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/hyojeong-cho/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.2
      - iOS 16.2
      - macOS 13.1
      - tvOS 16.1
      - watchOS 9.1
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-31 | Android TV ARM 64 v8a
      - android-31 | Android TV Intel x86 Atom
      - android-31 | AOSP ATD ARM 64 v8a
      - android-31 | AOSP ATD Intel x86_64 Atom
      - android-31 | ARM 64 v8a
      - android-31 | Intel x86_64 Atom
      - android-31 | Google TV ARM 64 v8a
      - android-31 | Google TV Intel x86 Atom
      - android-31 | Google APIs ARM 64 v8a
      - android-31 | Google APIs Intel x86_64 Atom
      - android-31 | Google Play ARM 64 v8a
      - android-31 | Google Play Intel x86_64 Atom
      - android-31 | Google APIs ATD ARM 64 v8a
      - android-31 | Google APIs ATD Intel x86_64 Atom
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11005911
  Xcode:
    version: 14.2/14C18
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/hyojeong-cho/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.9
    wanted: ^0.73.9
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

-

Reproducer

https://github.com/HyoJeong1019/rn-text

Screenshots and Videos

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.9. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[HyoJeong1019]

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

I have upgraded to version 0.73.9, but the same issue persists.

[cortinico]

I have upgraded to version 0.73.9, but the same issue persists.

Is the issue also happening on 0.74?

[HyoJeong1019]

Is the issue also happening on 0.74?

I have upgraded to version 0.74.0 as you suggested, but the same issue persists, as shown in the attached image.

[chenqi777]

I also encountered this issue, which only occurs on devices with Android 14, causing the text to appear not centered. Setting lineHeight can solve this issue, but if lineHeight is set globally and the lineHeight of the nested Text component is different, the text will be truncated.

[hanwenbo]

0.75.4 same, android

[skantus]

I encountered the same issue when I applied it directly to the Text component. Instead, you should set it within the styles to resolve the problem

React Native 0.75.4.

[1280103995]

It also exists on 0.78

[react-native-bot]

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.