Align text vertically not centered in some specific languages (non-Latin) on Android 13

[trandoantan]

Description

In some specific languages (non-Latin), Align text vertically not centered (Android 13 only). Android 12 works fine.

Language	Android 12	Android 13
English
Japanese

React Native Version

0.72.5

Output of npx react-native info

System:
  OS: macOS 12.6
  CPU: (8) arm64 Apple M1
  Memory: 115.42 MB / 16.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 16.14.0
    path: ~/.nvm/versions/node/v16.14.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v16.14.0/bin/yarn
  npm:
    version: 8.3.1
    path: ~/.nvm/versions/node/v16.14.0/bin/npm
  Watchman:
    version: 2022.03.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /Users/trantan/.gem/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.2
      - iOS 16.2
      - macOS 13.1
      - tvOS 16.1
      - watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9477386
  Xcode:
    version: 14.2/14C18
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.7.2
    path: /Users/trantan/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create new React Native project
2. Copy and paste the following code to App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.sectionContainer}>
        <Text style={{ color: 'white', fontSize: 50 }}>テストです</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sectionContainer: {
    padding: 10,
    backgroundColor: 'blue',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Snack, screenshot, or link to a repository

Android 12	Android 13

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[trandoantan]

It seems to be related to this change on Android 13

[fabOnReact]

Hello,

Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs:

https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+

It is the suggested approach from the react-native core team (see this discussion).

I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.

• The Component is based on ReactTextView, it is the same implementation from react-native.
• It will include several bug fixes.
• You can use the library until the PR is merged and released with react-native.
• You can use side by side both components from react-native and react-native-improved, depending on where you need the fix.
• I will also publish the PR to facebook/react-native (daily fixes and releases).

The advantages would be:

• Increased engagement with the community, issues are quickly fixed.
• No limitations when merging PRs (react-native main branch is used on facebook marketplace).
• Only Meta employees can merge and review facebook/react-native PRs.
• Allows us to further experiment and develop react-native.

Do you want me to publish for you a patched release? I'm working on a list of priorities. Thanks

[Samaan98]

Hi! I'm not a react-native developer but I faced the same issue with native Android. One day of debug and research showed me that this problem is certainly related with the Improved line heights for non-latin scripts introduced in Android 13 and mentioned previously here by @trandoantan. I just found a solution for native Android and maybe you might be able to apply it for ReactNative: setting isFallbackLineSpacing = false for TextView fixes this issue. Hope it helps!

[tannguyen05]

same issues!

[zhanzz]

same issues!